เวิร์กโฟลว์การพัฒนา WordPress สมัยใหม่ด้วย Roots Stack

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

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

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

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

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

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

Roots Stack คืออะไร

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

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

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

Roots Sage 9

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

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

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

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

หากคุณต้องการใช้ Sage อย่างเต็มที่ ให้นึกถึงคำแนะนำชิ้นนี้จาก Ben Word หนึ่งในผู้พัฒนาทีม Roots:

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

แต่ยัง:

หาก Underscores เป็น Head start 1,000 ชั่วโมง Sage จะเป็น Head start 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 เป็นเหมือน 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

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

ข้อกำหนดพื้นฐานคือ:

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

Trellis

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

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

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

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

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

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

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

ข้อกำหนด Trellis

• นักแต่งเพลง
• Virtualbox >= 4.3.10
• คนจรจัด >= 2.1.0

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

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

ธีมเริ่มต้นของผู้ไม่เชื่อเรื่องพระเจ้าในกรอบงาน

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

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

 $ vendor\bin\sage meta # to specify the metadata for your # theme (the name, etc., that goes # in style.css). $ vendor\bin\sage config # to specify your theme's dev URL and # theme directory. $ vendor\bin\sage 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) ได้มาถึงจุดสิ้นสุดอย่างเป็นทางการแล้ว ชีวิตจึงไม่รองรับอีกต่อไปและอาจทำให้ไซต์ของคุณเสี่ยงต่อช่องโหว่ด้านความปลอดภัยและปัญหาด้านประสิทธิภาพ

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

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

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

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

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

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

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

WordPress ไม่มีเอ็นจิ้นการสร้างเทมเพลตที่แท้จริง ดังนั้นเพื่อชดเชย Sage จึงนำ Laravel's Blade มาใช้และเป็นไปตามหลักการ DRY: Don't Repeat Yourself

นี่คือลักษณะของไฟล์เทมเพลต 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 แยก Views และ Controllers ออกจากกันโดยสิ้นเชิง และรูปแบบก็สวยงาม กระชับ อ่านง่าย และเขียนได้ง่ายกว่าแท็ก PHP หลักการง่ายๆ ที่นี่คือการปล่อยโค้ด PHP ทั้งหมดออกจากไฟล์เทมเพลตของคุณ (หรืออย่างน้อยก็พยายาม)

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

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

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

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

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

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

ข้อเสีย

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

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

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

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

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

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

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

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

 $ 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=<domain> env=<environment>"

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

 $ ansible-playbook rollback.yml -e "site=<domain> env=<environment>

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

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

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

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

มีความสุขในการเข้ารหัส!