WordPress มีมานานแล้วอย่างน้อยก็ตามมาตรฐานอินเทอร์เน็ตและปรัชญาของมันคือการรักษาความเข้ากันได้แบบย้อนหลัง สิ่งนี้มุ่งเน้นไปที่ความเข้ากันได้ที่เข้าใจได้เนื่องจากจำนวนเว็บไซต์ WordPress ออนไลน์ในปัจจุบัน อย่างไรก็ตามแม้ว่าสิ่งนี้จะช่วยให้ผู้ที่ยังคงใช้สภาพแวดล้อมดั้งเดิมกับ PHP และ MySQL เวอร์ชันเก่า (ซึ่งเป็นความเสี่ยงด้านความปลอดภัยในตัวเอง แต่นี่ไม่ใช่หัวข้อของบทความในวันนี้) แต่ก็ทำให้ WordPress รุ่นใหม่ ๆ ไม่สามารถใช้ประโยชน์ได้เต็มที่ ความสามารถล่าสุดของ PHP

นี้ยังทำให้หลาย ๆ นักพัฒนา WordPress ที่จะอยู่ใน ฟองสบู่ WordPress ไม่ได้รับแรงจูงใจให้เรียนรู้เทคโนโลยีการพัฒนาส่วนหน้าใหม่ ๆ และทันสมัยและบางครั้งก็ติดอยู่ใน 'วิธีที่ดี' ในการทำสิ่งต่างๆ

คุณสามารถใช้เวิร์กโฟลว์การพัฒนาสมัยใหม่สำหรับ WordPress ได้หรือไม่?

แน่นอนที่สุดคุณสามารถและ WordPress Roots stack อยู่ที่นี่เพื่อช่วยให้คุณพัฒนาเหมือนปี 2019 ด้วยเครื่องมือที่น่าทึ่งสามอย่าง:

• ปราชญ์ เป็นธีมเริ่มต้นของคุณ
• Bedrock เป็นแบบสำเร็จรูปของ WordPress ที่ทันสมัย
• Trellis เพื่อจัดการการปรับใช้และการจัดเตรียมให้กับสภาพแวดล้อมที่แตกต่างกัน

ทีม Roots ยังมีเครื่องมือเพิ่มเติมอีกสองอย่างในการพัฒนา: ลูกโอ๊ก , กรอบการสร้างปลั๊กอินและ โคลเวอร์ ปลั๊กอินสำเร็จรูป เนื่องจากความจริงที่ว่าทั้งสองเป็นอัลฟ่าจึงไม่รวมอยู่ในบทความนี้ แต่คุณควรจับตาดูให้ดี

แบรนด์ชั้นนำหลายแห่งใช้ Sage และ / หรือ Bedrock สำหรับเว็บไซต์ของตน ค้นหาได้ในไฟล์ ตู้โชว์ราก .

รูทสแต็คคืออะไรกันแน่

เดิมรู้จักกันในชื่อธีม Roots เป็นธีมเริ่มต้น HTML5 ที่แข็งแกร่งซึ่งมุ่งเป้าไปที่จุดเริ่มต้นที่สะอาดกว่าสำหรับเว็บไซต์ WordPress ใหม่ เมื่อเวลาผ่านไปมันได้พัฒนาเป็นชุดเครื่องมือเต็มรูปแบบโดยผ่านเทคโนโลยีและมาตรฐานเว็บที่ทันสมัยทั้งหมด (จาก Grunt ไปจนถึง Gulp และ Webpack, LESS และ SCSS, NPM และ Yarn, Bootstrap, มาตรฐานการเข้ารหัส PSR-2 และหลักการ DRY) ดังนั้นจึงบังคับให้นักพัฒนา WordPress ที่นำมาใช้เพื่อเรียนรู้และติดตามข่าวสารล่าสุดเกี่ยวกับเทคโนโลยีการพัฒนาส่วนหน้าสมัยใหม่ที่มีให้

หลักการและองค์ประกอบของการออกแบบ

วันนี้ Roots กลายเป็นชุดเครื่องมือเต็มรูปแบบในการขยายตัวอย่างต่อเนื่องโดยมีเป้าหมายเพื่อช่วยคุณสร้างเว็บไซต์ WordPress ที่ดีขึ้นโดยทำตามวงจรทั้งหมดตั้งแต่การพัฒนาไปจนถึงการแสดงละครและการผลิตและทำให้คุณเป็นนักพัฒนาที่ดีขึ้นโดยบังคับให้คุณก้าวออกจากความสะดวก โซนที่จัดทำโดยฟองสบู่ WordPress

แต่มาดูเครื่องมือหลักสามอย่างที่พวกเขานำเสนอกันว่าคืออะไรและทำไมคุณควรพิจารณาใช้เครื่องมือเหล่านี้

รากปัญญาชน 9

Roots Sage 9 เป็นการทำซ้ำครั้งสุดท้ายของการบำรุงรักษาอย่างมืออาชีพ ธีมเริ่มต้นของ WordPress ซึ่งเดิมเปิดตัวเป็นเพียง Roots ในปี 2554 ในช่วงชีวิตของมันได้ผ่านการเปลี่ยนแปลงปรับปรุงและพิจารณาแนวทางปฏิบัติที่ดีที่สุดอีกครั้งจนกลายเป็นสิ่งที่ในปัจจุบันเป็นจุดเริ่มต้นที่ดีเยี่ยมในการนำเสนอขั้นตอนการพัฒนาส่วนหน้าที่ทันสมัย สำหรับการพัฒนา WordPress

สิ่งที่ Sage พยายามทำคือการนำรูปแบบ MVC (Model-View-Controller) มาใช้ซึ่งมุมมองและคอนโทรลเลอร์จะแยกจากกันโดยสิ้นเชิง สิ่งนี้ทำให้เราสามารถนำ Views กลับมาใช้ใหม่ได้ซึ่งไม่จำเป็นต้อง“ รู้” ว่าข้อมูลมาจากไหน แต่เพียงแค่รอให้ Controller ป้อนข้อมูลเพื่อแสดง

คอนโทรลเลอร์ที่มาพร้อมกับ Sage 9 ไม่ใช่คอนโทรลเลอร์จริงที่คุณอาจคุ้นเคยในเฟรมเวิร์กอื่น ๆ เช่น ลาราเวล ข้อแตกต่างที่สำคัญคือ Sage 9 Controller ใช้การกำหนดเส้นทางตามเทมเพลตแทนที่จะใช้การกำหนดเส้นทางตาม URL โดยทั่วไปคุณปล่อยให้ WordPress จัดการการกำหนดเส้นทาง URL และคุณเขียนตัวควบคุมสำหรับไฟล์เทมเพลต

ด้วยการเพิ่มความซับซ้อนสองสามระดับให้กับกระบวนการพัฒนาทั้งหมด Sage 9 อาจไม่ใช่ตัวเลือกที่ดีที่สุดในการเริ่มต้นสำหรับผู้เริ่มต้นเนื่องจากคุณจะมีการเรียนรู้เล็กน้อยเพื่อให้เชี่ยวชาญและสามารถใช้ในการผลิตได้: เหมาะสม การพึ่งพาและการจัดการสินทรัพย์การกำหนดเวอร์ชันโค้ดโครงสร้างโครงการใหม่เอ็นจิ้นเทมเพลตใหม่ที่ได้มาจาก Laravel หลักการ DRY (Don't Repeat Yourself) และคุณจะต้องยึดติดกับมาตรฐานการเข้ารหัสที่เข้มงวดซึ่งแตกต่างจากที่ WordPress แนะนำ; แต่ถ้าคุณเป็นนักพัฒนาที่มีประสบการณ์ก็สามารถเริ่มต้นได้ดี

หากคุณต้องการใช้ Sage แบบครบวงจรโปรดระลึกถึงคำแนะนำจาก Ben Word ซึ่งเป็นหนึ่งในผู้พัฒนาของทีม Roots:

Sage ไม่ใช่กรอบธีมมันเป็นธีมเริ่มต้น คุณแทบไม่จำเป็นต้องอัปเดตและโดยทั่วไปคุณไม่ควรสร้างธีมย่อยจากธีมนี้ Sage เป็นธีมเริ่มต้นเพื่อใช้เป็นจุดเริ่มต้นของโปรเจ็กต์ใหม่

แต่ยัง:

ลำดับชั้นในการออกแบบกราฟิกคืออะไร

หากขีดล่างคือการเริ่มต้นส่วนหัว 1,000 ชั่วโมง Sage คือการเริ่มต้นส่วนหัว 10,000 ชั่วโมง

โครงสร้างไฟล์และโฟลเดอร์ด้วย Sage

โครงสร้างไฟล์และโฟลเดอร์ของ Sage แตกต่างจากที่เราเคยเห็นในธีมเริ่มต้นอื่น ๆ เล็กน้อยเช่น ขีดล่าง หรือแม้กระทั่งใน Sage 8 เวอร์ชันหลักก่อนหน้านี้

นี่คือสิ่งที่คุณจะพบหลังจากติดตั้ง Sage:

├── app/ # it contains all the PHP code of your theme │ ├── controllers/ # your Controllers, it already contains a few │ │ # examples to use as a starting point │ ├── admin.php # setup for the WordPress theme customizer │ ├── filters.php # a good place to group all your theme │ │ # filter hooks │ ├── helpers.php # for various helper functions you want │ │ # to reuse in your theme │ └── setup.php # the main theme setup file ├── config/ # theme configuration files ├── dist/ # all built theme assets, never edit this! ├── resources/ # original theme assets, edit this instead! │ ├── assets/ # all front-end assets │ │ ├── build/ # Webpack and ESLint config │ │ ├── fonts/ # theme fonts │ │ ├── images/ # theme images │ │ ├── scripts/ # theme JS scripts │ │ ├── styles/ # theme SCSS stylesheets │ │ └── config.json # settings for compiled assets │ ├── views/ # all theme Blade templates │ │ ├── layouts/ # base Blade templates │ │ └── partials/ # partial Blade templates │ ├── functions.php # Composer autoloader and theme includes, │ │ # normally you should not edit this unless │ │ # you know what you're doing │ ├── index.php # required by WordPress but left blank │ │ # intentionally, never edit this! │ ├── screenshot.png # the screenshot used in the WordPress admin │ └── style.css # required by WordPress, it should contain │ # only the theme meta information ├── vendor/ # Composer packages, never edit this! ├── composer.json # autoloading for `app/` files ├── composer.lock # Composer lock file, never edit this └── package.json # Node.js dependencies and scripts

นอกจากนี้ไฟล์อื่น ๆ ที่ใช้โดยโปรแกรมแก้ไขโค้ดและ IDE เช่น .editorconfig, .eslintrc.js, .stylelintrc.js, phpcs.xml เป็นต้น

นี่คือภาพรวมโดยย่อของข้อกำหนดพื้นฐานของ Sage 9:

• WordPress> = 4.7
• PHP> = 7.1.3 (เมื่อเปิดใช้งาน php-mbstring)
• นักแต่งเพลง
• Node.js> = 8.0.0
• เส้นด้าย

Bedrock

Bedrock ก็เหมือนกับ WordPress บนเตียรอยด์!

หาก Sage ปรับปรุงการพัฒนาธีมของคุณ Bedrock จะปรับปรุงการติดตั้ง WordPress ทั้งหมด ทำได้โดยการให้ไฟล์ ต้นแบบโครงการที่ทันสมัย ด้วยโครงสร้างโฟลเดอร์ที่ดีขึ้นและความปลอดภัย (ตัวอย่างเช่นโดยไม่มีไฟล์กำหนดค่าของคุณในรูทเว็บไซต์) การกำหนดค่าและไฟล์ ENV และการจัดการการพึ่งพาที่เหมาะสม (ใช่รวมถึงปลั๊กอินและธีมของ WordPress)

เพื่ออธิบายเป็นวลีเดียวเราสามารถพูดได้ว่า Bedrock เป็นโครงการ WordPress ที่มีอยู่ในตัวซึ่งจะทำการติดตั้งไฟล์หลักและปลั๊กอินที่จำเป็นโดยอัตโนมัติ

โครงสร้างไฟล์และโฟลเดอร์

หากคุณดูการติดตั้ง Bedrock พื้นฐานคุณอาจรู้สึกสูญเสียในตอนแรก Bedrock แยกไฟล์เว็บการกำหนดค่าและการอ้างอิงออกเป็นโฟลเดอร์ของตนเอง โครงสร้างกระดูกเปลือยมีลักษณะดังนี้:

├── config/ # WordPress configuration files │ ├── environments/ # configuration files for other │ │ │ # environments, they will override │ │ │ # production configuration │ │ ├── development.php # overrides for WP_ENV === 'development' │ │ └── staging.php # overrides for WP_ENV === 'staging' │ └── application.php # main configuration for production │ # environment, it's the equivalent of │ # the wp-config.php file ├── vendor/ # Composer packages, never edit this! ├── web/ # the new root folder of the webserver │ ├── app/ # your new wp-content folder │ ├── wp/ # WordPress core files, never edit this! │ ├── index.php # WordPress view bootstrapper │ └── wp-config.php # required by WordPress, never edit this! ├── .env # all environment variables: db name, │ # user and password, salts, current │ # environment, site urls, and others ├── composer.json # here you can manage versions of │ # WordPress, plugins and other │ # dependencies └── composer.lock # Composer lock file, never edit this

รวมถึงไฟล์อื่น ๆ ที่สำคัญน้อยกว่า

ข้อกำหนดของ Bedrock คือ:

• PHP> = 7.1
• นักแต่งเพลง

Trellis

Trellis คือ กอง LEMP ที่ทันสมัย เพื่อจัดการเซิร์ฟเวอร์การพัฒนาการจัดเตรียมและการผลิตของคุณอย่างราบรื่นโดยมุ่งเป้าไปที่การทำให้เซิร์ฟเวอร์เหล่านี้มีความคล้ายคลึงกันมากที่สุด (“ ความเท่าเทียมกันในการพัฒนาและการผลิต”) ซึ่งหมายความว่าหากไซต์ WordPress ที่กำหนดเองของคุณทำงานในสภาพแวดล้อมการพัฒนาของคุณก็ปลอดภัยที่จะคิดว่าไซต์นี้จะใช้งานได้จริงและคุณสามารถปรับใช้ด้วยความมั่นใจ

ความเป็นจริงผสมกับความเป็นจริงเสมือน

สำหรับการพัฒนาท้องถิ่น Trellis ใช้ Vagrant ด้วยวิธีง่ายๆ vagrant up คุณจะมีเครื่องเสมือนที่ทำงานในสภาพแวดล้อมที่ทันสมัย

การจัดเตรียมและการปรับใช้กับสภาพแวดล้อมการจัดเตรียมและการใช้งานจริงของคุณได้รับการจัดการด้วย Ansible playbooks ซึ่งเป็นไฟล์ YAML ที่บอก Ansible ว่าต้องทำอะไร

โครงสร้างโฟลเดอร์ที่แนะนำของ Trellis

Trellis มีโครงสร้างโฟลเดอร์ที่แนะนำซึ่งประกอบด้วยโฟลเดอร์ย่อยเพียงสองโฟลเดอร์:

├── trellis/ # the clone of the Trellis repository └── site/ # the Bedrock-based WordPress website

ฉันขอแนะนำให้ปล่อยไว้ตามที่เป็นอยู่ แต่สามารถปรับแต่งได้ตามความชอบและความต้องการของคุณ

ข้อกำหนด Trellis

• นักแต่งเพลง
• Virtualbox> = 4.3.10
• Vagrant> = 2.1.0

ทำไมคุณควรใช้

หาก WordPress ใช้งานได้แล้วทำไมคุณควรเปลี่ยนไปใช้สแต็คที่ซับซ้อนกว่านี้และใช้เวลาพอสมควรในการควบคุมมัน เนื่องจากมีข้อดีที่ชัดเจนและไม่ชัดเจนบางประการ มาลองดูกันว่ามีอะไรบ้าง

Framework Agnostic Starter Theme

ธีมเริ่มต้นของ WordPress มากเกินไปบังคับให้คุณใช้เฟรมเวิร์ก CSS เฉพาะซึ่งคุณอาจหรือไม่ชอบหรืออาจจะรู้ แต่ Sage เป็นเฟรมเวิร์กที่ไม่เชื่อเรื่องพระเจ้าโดยสิ้นเชิง ในระหว่างการติดตั้งคุณจะมีตัวเลือกในการรวม Bootstrap 4, Bulma, Foundation, Tachyons, Tailwind CSS หรือไม่ต้องใช้เฟรมเวิร์กเลยหากคุณต้องการเริ่มจากศูนย์หรือใช้อย่างอื่น (คำแนะนำ: เมื่อเร็ว ๆ นี้ฉันเริ่มชอบ Tailwind CSS เยอะมาก).

ประเภทโปร: บนเครื่อง Windows คุณอาจได้รับข้อความ“ ไม่รองรับโหมด TTY บนแพลตฟอร์ม Windows” ระหว่างการติดตั้งและคุณจะไม่สามารถเลือกกรอบงานหรือกำหนดค่า Sage ได้ คุณจะต้องเรียกใช้คำสั่งทั้งสามนี้ด้วยตนเองจากภายในโฟลเดอร์ธีมหากคุณต้องการใช้ประโยชน์จากการกำหนดค่าอัตโนมัติ:

$ vendorinsage meta # to specify the metadata for your # theme (the name, etc., that goes # in style.css). $ vendorinsage config # to specify your theme's dev URL and # theme directory. $ vendorinsage preset # to set up the theme with one of the # supported frameworks or no # framework at all.

กระบวนการสร้างสมัยใหม่

ด้วย Webpack ที่รวมอยู่ใน Sage คุณจะไม่ต้องคิดอีกต่อไปเกี่ยวกับการรวบรวมเนื้อหาการต่อและการย่อขนาดโค้ด JavaScript และ CSS การเพิ่มประสิทธิภาพรูปภาพการตรวจสอบ JavaScript และข้อผิดพลาดของรูปแบบและการจัดการไลบรารีภายนอก ขั้นตอนการสร้างจะดูแลทุกอย่างด้วย yarn build (หรือ yarn build:production หากคุณต้องการให้เนื้อหาของคุณเหมาะสำหรับการใช้งานจริง) สร้างไฟล์คงที่ทั้งหมดในธีมของคุณ /dist/ โฟลเดอร์

PHP และข้อกำหนดที่ทันสมัย

เวอร์ชัน PHP ขั้นต่ำที่คุณสามารถเรียกใช้ WordPress คือ PHP 5.2.4 ซึ่งจะช่วยให้มั่นใจได้ว่าผู้ใช้ทุกคนที่ใช้งานเว็บไซต์ในสภาพแวดล้อมเดิม แต่ PHP เวอร์ชันเก่า (<= 7.0) have officially reached End Of Life, so they are no longer supported and they may expose your site to security vulnerabilities and performance issues.

ทั้ง Sage และ Bedrock ต้องการ PHP 7.1 เวอร์ชันที่มีเหตุผล (แม้ว่าคุณจะมีตัวเลือกให้เลือก 7.3 ก็ตามโปรดทำเช่นนั้น)

Sage 9 ยังใช้มาตรฐานการเข้ารหัส PSR-2 (การเข้ารหัสที่ใช้กันอย่างแพร่หลายและเป็นที่ยอมรับมากที่สุด

มาตรฐานที่ใช้ในชุมชน PHP) ซึ่งแตกต่างจากมาตรฐานการเข้ารหัสของ WordPress เล็กน้อย แต่ช่วยให้คุณมีโค้ดที่สะอาดและบำรุงรักษาได้มากขึ้นโดยเฉพาะอย่างยิ่งหากคุณทำงานเป็นทีมหรือต้องแชร์โค้ดกับผู้อื่น

การพึ่งพาและการจัดการแพ็คเกจที่ดีขึ้น

Roots stack ใช้ประโยชน์จาก Composer เป็นจำนวนมากเพื่อจัดการการอ้างอิงและแพ็คเกจทั้งหมดรวมถึงคอร์ WordPress ปลั๊กอินและธีม นี่อาจเป็นปัญหาหากคุณใช้เครื่องมือของบุคคลที่สามในการจัดการการอัปเดต WordPress (เช่น ManageWP, MainWP หรือ InfiniteWP) แต่มีคนโต้แย้งว่าการมีทุกอย่างภายใต้การควบคุมเวอร์ชันช่วยให้คุณควบคุมได้มากขึ้นและทำให้ย้อนกลับไปทำงานก่อนหน้าได้ง่ายขึ้น รุ่นหากมีสิ่งผิดปกติเกิดขึ้น

นอกจากนี้ Sage ยังใช้ Yarn เป็นแพ็คเกจและตัวจัดการการพึ่งพาสำหรับรหัสแอปพลิเคชันและเพื่อเปิดกระบวนการสร้าง

node.js ใช้สร้างโปรแกรมฝั่งเซิร์ฟเวอร์

ไฟล์เทมเพลตที่ดีกว่า

WordPress ไม่มีเครื่องมือสร้างเทมเพลตที่แท้จริงดังนั้นเพื่อให้ Sage ใช้ Laravel’s Blade และเป็นไปตามหลักการ DRY: อย่าทำซ้ำตัวเอง

นี่คือลักษณะของไฟล์เทมเพลต single.blade.php เริ่มต้นเพียง 6 บรรทัดของโค้ด:

@extend('layouts.app') @section('content') @while(have_posts()) @php the_post() @endphp @include('partials.content-single-'.get_post_type()) @endwhile @endsection

เอนจินเทมเพลต Blade แยกมุมมองและคอนโทรลเลอร์อย่างสมบูรณ์และไวยากรณ์ของมันนั้นสวยงามกระชับอ่านง่ายและเขียนง่ายกว่าแท็ก PHP หลักการง่ายๆคือการปล่อยโค้ด PHP ทั้งหมดออกจากไฟล์เทมเพลตของคุณ (หรืออย่างน้อยก็พยายาม)

ข้อดีอีกอย่างของการใช้ Blade คือการสืบทอดเทมเพลต: เทมเพลตโครงร่างพื้นฐาน (ค่าเริ่มต้นคือ /resources/views/layouts/app.blade.php) กำหนดบล็อกที่มีองค์ประกอบของเว็บไซต์ทั่วไปซึ่งจะสืบทอดโดยเทมเพลตลูก การสืบทอดเทมเพลตนั้นยอดเยี่ยมในการลบมาร์กอัปที่ซ้ำ ๆ กันออกจากเทมเพลตแต่ละรายการและทำให้สิ่งต่างๆแห้ง

เบราว์เซอร์ซิงค์

โดยเรียกใช้ yarn start คุณจะเปิดเซสชัน Browsersync Browsersync เป็นโมดูลสำหรับการทดสอบเบราว์เซอร์ที่ซิงโครไนซ์ขณะพัฒนา จะคอยดูการเปลี่ยนแปลงที่เกิดขึ้นกับเนื้อหาส่วนหน้าของคุณและทำงานร่วมกับ Webpack โดยอัตโนมัติจะแทรกการเปลี่ยนแปลงลงในเซสชันเบราว์เซอร์ของคุณ

การปรับใช้ WordPress ที่รวดเร็วง่ายและปลอดภัย

Trellis นำเสนอการปรับใช้ WordPress ที่ไม่มีการหยุดทำงาน เมื่อคุณเปิดการปรับใช้ Trellis จะคอมไพล์ที่เก็บข้อมูลของคุณเรียกใช้การติดตั้งคอมโพสิตจากนั้นอัปเดต symlink เป็นรีลีสปัจจุบันดังนั้นจะไม่แก้ไขไฟล์ที่ให้บริการในการผลิตในปัจจุบันโดยตรง

เมื่อใช้ Bedrock Trellis ยังต้องการการกำหนดค่าที่น้อยมาก

ข้อเสีย

ข้อเสียเปรียบเพียงประการเดียวของการใช้ Roots stack แบบเต็ม (นอกเหนือจากการเรียนรู้สิ่งใหม่ ๆ ซึ่งไม่ควรถือเป็นปัญหาเลย) คือคุณต้องใช้ผู้ให้บริการโฮสติ้งที่เป็นมิตรกับ Trellis เช่น Kinsta หยด DigitalOcean หรือโฮสต์อื่น ๆ ที่ สนับสนุน SSH, Composer และ WP-CLI เป็นอย่างน้อยพร้อมกับตัวเลือกในการอัปเดตเส้นทางรูทของเว็บ

ซึ่งจะทำให้โฮสติ้งราคาถูก (ish) ส่วนใหญ่หลุดออกจากเกมและเป็นสิ่งที่คุณและ / หรือลูกค้าของคุณต้องคำนึงถึงก่อนที่จะเริ่มโครงการใหม่

วิธีการเริ่มต้น

นี่ถือได้ว่าเป็นสิ่งใหม่ใน 'การติดตั้ง WordPress 5 นาที' ที่มีชื่อเสียง แต่สำหรับนักพัฒนาส่วนหน้าสมัยใหม่ เป็นการเพิ่มความซับซ้อนเล็กน้อยสำหรับการพัฒนาในภายหลัง แต่ในท้ายที่สุดประโยชน์ที่คุณจะได้รับนั้นคุ้มค่าอย่างแน่นอน

เราจะมุ่งเน้นไปที่การนำสแต็กเต็มรูปแบบ (Sage, Bedrock และ Trellis) แต่คุณสามารถใช้เพียงชุดเดียวหรือแบบใดก็ได้ Sage สามารถใช้เป็นจุดเริ่มต้นสำหรับธีมแบบสแตนด์อโลนในการติดตั้ง WordPress ใด ๆ Bedrock สามารถใช้กับธีม WordPress ใดก็ได้ที่คุณต้องการ และอุปกรณ์ Trellis ได้รับการกำหนดค่าสำหรับไซต์ที่ใช้ Bedrock และดูแลทุกอย่างที่จำเป็น แต่ด้วยการซ่อมแซมเล็กน้อยทำให้สามารถปรับแต่งได้ตามความต้องการเกือบทุกอย่าง

วิธีสร้างโครงการใหม่

การตั้งค่าโครงการ WordPress ใหม่ด้วย Trellis, Bedrock และ Sage นั้นค่อนข้างง่ายเพียงไม่กี่บรรทัดคำสั่ง

ติดตั้ง Trellis ในโฟลเดอร์ที่คุณต้องการ (เช่น example.com):

node.js ใช้สร้างโปรแกรมฝั่งเซิร์ฟเวอร์

$ mkdir example.com && cd example.com $ git clone --depth=1 [email protected] :roots/trellis.git $ rm -rf trellis/.git

ติดตั้ง Bedrock ใน /site/ โฟลเดอร์ย่อย:

$ composer create-project roots/bedrock site $ cd site/web/app/themes/

ติดตั้งและสร้าง Sage:

$ composer create-project roots/sage your-theme-name $ cd your-theme-name/ $ yarn && yarn build

กำลังปรับใช้

การปรับใช้กับการจัดเตรียมหรือการผลิตจะง่ายยิ่งขึ้นหากคุณกำหนดค่าทุกอย่างถูกต้องตามเอกสารอย่างเป็นทางการ อยู่ห่างออกไปเพียงบรรทัดคำสั่งเดียว (เรียกใช้จากโฟลเดอร์ example.com/trellis/):

$ ansible-playbook deploy.yml -e 'site= env='

คุณยังสามารถย้อนกลับการปรับใช้ของคุณได้อย่างง่ายดายเพียงแค่เรียกใช้:

$ ansible-playbook rollback.yml -e 'site= env=

เคล็ดลับเกี่ยวกับการตั้งค่าสภาพแวดล้อมการพัฒนาของคุณบน Windows

หากคุณ Google เกี่ยวกับวิธีการติดตั้งและใช้ Roots stack โดยเฉพาะ Trellis คุณจะพบบทช่วยสอนมากมายที่เน้นไปที่ Linux หรือ MacOS แต่มีข้อมูลน้อยมากสำหรับ Windows ซึ่งคุณจะพบปัญหาหลักสองประการ: Ansible ไม่พร้อมใช้งาน สำหรับ Windows และ Vagrant มักจะทำงานช้ามากในเครื่อง Windows

ตอนแรกที่ฉันคิดเกี่ยวกับบทความนี้เอกสาร Trellis อย่างเป็นทางการสำหรับ Windows แนะนำให้เรียกใช้ Ansible ภายในเครื่องเสมือน Vagrant แต่นี่เป็นวิธีที่แฮ็กในการทำสิ่งต่างๆและไม่น่าเชื่อถือมากนัก

ตั้งแต่นั้นมาพวกเขาได้อัปเดตเอกสารพร้อมคำแนะนำที่เหมาะสมเกี่ยวกับการตั้งค่าทุกอย่างด้วย WSL (Windows Subsystem for Linux) ดังนั้นจึงไม่จำเป็นต้องสร้างวงล้อใหม่และเขียนบทแนะนำเกี่ยวกับเรื่องนี้ เป็นเรื่องดีที่ทราบว่ามีคำแนะนำโดยละเอียดทีละขั้นตอนที่มีมูลค่าสามหน้าซึ่งคุณสามารถปฏิบัติตามก่อนที่จะติดตั้ง Trellis: การตั้งค่า Windows , การตั้งค่า Windows: Sage และ การตั้งค่า Windows: Trellis .

ขอให้สนุกกับการเขียนโค้ด!

ที่เกี่ยวข้อง: วิธีการพัฒนา WordPress สมัยใหม่ (ตอนที่ 1 ส่วนหน้า) และ ส่วนที่ 2 (ด้านหลัง)

ทำความเข้าใจพื้นฐาน

Roots stack คืออะไร?

Roots stack เป็นชุดเครื่องมือที่ช่วยให้นักพัฒนาสร้างเว็บไซต์ WordPress ที่ดีขึ้นโดยใช้เทคโนโลยีที่ทันสมัยและทำตามวงจรทั้งหมดตั้งแต่การพัฒนาไปจนถึงการแสดงละครและการผลิต

ฉันจะสร้างสภาพแวดล้อมการพัฒนา WordPress ได้อย่างไร

การสร้างสภาพแวดล้อมการพัฒนา WordPress ด้วย Trellis ทำได้ง่ายเพียงแค่พิมพ์คำสั่งไม่กี่คำในหน้าต่างเทอร์มินัลของคุณ Trellis ด้วยความช่วยเหลือของ Vagrant จะดูแลการตั้งค่า LEMP stack ที่เหมาะสมในเครื่องเสมือนให้คุณ ขั้นตอนเพิ่มเติมบางอย่างอาจจำเป็นหากคุณใช้เครื่อง Windows

นักพัฒนา WordPress แบบเต็มสแต็คคืออะไร?

ผู้พัฒนา WordPress แบบเต็มต้องสามารถตั้งค่าและจัดการโครงสร้างพื้นฐานของเซิร์ฟเวอร์ LAMP / LEMP และทำงานได้ทั้งในส่วนหน้าสร้างธีมและส่วนหลังโดยเข้ารหัสคุณลักษณะใหม่ในรูปแบบของปลั๊กอิน เขา / เธอต้องมีความเข้าใจ PHP, SQL, JavaScript, HTML และ CSS เป็นอย่างดี