Alur Kerja Pengembangan WordPress Modern dengan Roots Stack

WordPress telah ada sejak lama, setidaknya menurut standar internet, dan filosofinya selalu menjaga kompatibilitas ke belakang. Fokus pada kompatibilitas ini dapat dimengerti mengingat banyaknya situs web WordPress online saat ini. Namun, meskipun ini dapat membantu mereka yang masih menggunakan lingkungan lama dengan versi PHP dan MySQL lama (yang merupakan risiko keamanan itu sendiri, tetapi ini bukan topik artikel hari ini), itu juga menyebabkan rilis WordPress yang lebih baru tidak memanfaatkan sepenuhnya kemampuan PHP terbaru.

Hal ini juga menyebabkan banyak pengembang WordPress hidup dalam gelembung WordPress, tidak diberi insentif untuk mempelajari teknologi pengembangan front-end yang baru dan modern, dan terkadang terjebak dalam "cara yang baik" dalam melakukan sesuatu.

Bisakah Anda Mengadopsi Alur Kerja Pengembangan Modern untuk WordPress?

Anda pasti bisa, dan tumpukan Roots WordPress ada di sini untuk membantu Anda berkembang seperti tahun 2019, dengan tiga alat luar biasa:

• Sage sebagai tema awal Anda,
• Batuan dasar sebagai boilerplate WordPress modern,
• Teralis untuk mengelola penerapan dan penyediaan ke lingkungan yang berbeda.

Tim Roots juga memiliki dua alat tambahan dalam pengembangan: Acorn, kerangka kerja pembuatan plugin, dan Clover, pelat ketel plugin. Karena keduanya dalam alfa, mereka tidak termasuk dalam artikel ini, tetapi Anda harus mengawasi mereka.

Apa Sebenarnya Tumpukan Akar?

Awalnya dikenal sebagai tema Roots, itu adalah tema pembuka HTML5 yang kokoh yang bertujuan untuk memberikan titik awal yang lebih bersih untuk situs web WordPress baru. Seiring waktu, itu berkembang menjadi seperangkat alat lengkap, melewati semua teknologi dan standar web modern utama (dari Grunt hingga Gulp dan Webpack, KURANG dan SCSS, NPM dan Benang, Bootstrap, standar pengkodean PSR-2 dan prinsip KERING), sehingga memaksa pengembang WordPress yang mengadopsinya untuk terus belajar dan tetap up-to-date dengan apa yang ditawarkan oleh teknologi pengembangan front-end modern.

Hari ini, Roots tumbuh menjadi seperangkat alat lengkap dalam ekspansi berkelanjutan, yang bertujuan membantu Anda membangun situs WordPress yang lebih baik dengan mengikuti seluruh siklus, dari pengembangan hingga pementasan dan produksi, dan menjadikan Anda pengembang yang lebih baik dengan memaksa Anda keluar dari kenyamanan zona yang disediakan oleh apa yang disebut gelembung WordPress.

Tapi mari kita lihat tiga alat utama yang mereka tawarkan, apa itu, dan mengapa Anda harus mempertimbangkan untuk menggunakannya.

Akar Sage 9

Roots Sage 9 adalah iterasi terakhir dari tema pemula WordPress yang dikelola secara profesional , awalnya dirilis hanya sebagai Roots pada tahun 2011. Selama masa pakainya, telah melalui banyak perubahan, peningkatan, dan pertimbangan ulang praktik terbaik, hingga akhirnya menjadi apa hari ini adalah titik awal yang bagus untuk memperkenalkan alur kerja pengembangan front-end modern untuk pengembangan WordPress.

Apa yang Sage coba lakukan adalah mengadopsi pola MVC (Model-View-Controller) di mana Views dan Controller benar-benar terpisah; ini memungkinkan kita untuk menggunakan kembali Tampilan, yang tidak perlu "tahu" dari mana data itu berasal, tetapi mereka hanya menunggu Pengontrol untuk memberi mereka beberapa data untuk ditampilkan.

Pengontrol yang disertakan dengan Sage 9 bukanlah pengontrol sebenarnya yang mungkin sudah Anda kenal di kerangka kerja lain seperti Laravel, perbedaan utamanya adalah bahwa Pengontrol Sage 9 menggunakan perutean berbasis templat alih-alih perutean berbasis URL. Pada dasarnya, Anda membiarkan WordPress menangani perutean URL dan Anda menulis pengontrol untuk file template.

Dengan menambahkan beberapa tingkat kerumitan ke seluruh proses pengembangan, Sage 9 mungkin bukan pilihan terbaik untuk memulai bagi pemula, karena Anda akan memiliki sedikit pembelajaran untuk akhirnya menguasainya dan dapat menggunakannya dalam produksi: tepat ketergantungan dan manajemen aset, pembuatan versi kode, struktur proyek baru, mesin templat baru yang diturunkan dari Laravel, prinsip KERING (Jangan Ulangi Diri Sendiri), dan Anda harus tetap berpegang pada standar pengkodean yang ketat yang sedikit berbeda dari apa yang WordPress merekomendasikan; tetapi jika Anda seorang pengembang berpengalaman, ini bisa menjadi awal yang baik.

Jika Anda ingin menggunakan Sage secara menyeluruh, ingatlah nasihat dari Ben Word ini, salah satu pengembang tim Roots:

Sage bukan kerangka tema, ini adalah tema pemula. Anda seharusnya jarang perlu memperbaruinya, dan biasanya Anda tidak boleh membuat tema anak darinya. Menjadi tema pemula, Sage dimaksudkan untuk digunakan sebagai titik awal pada proyek baru.

Tetapi juga:

Jika Garis Bawah adalah permulaan 1.000 jam, Sage adalah permulaan 10.000 jam.

Struktur File dan Folder Dengan Sage

Struktur file dan folder Sage sedikit berbeda dengan yang biasa kita lihat di tema pemula lainnya seperti Garis Bawah, atau bahkan di versi utama Sage 8 sebelumnya.

Inilah yang akan Anda temukan setelah menginstal 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

Plus, beberapa file lain yang digunakan oleh editor kode dan IDE, seperti .editorconfig, .eslintrc.js, .stylelintrc.js, phpcs.xml, dll.

Berikut adalah ikhtisar singkat tentang persyaratan dasar Sage 9:

• WordPress >= 4.7
• PHP >= 7.1.3 (dengan php-mbstring diaktifkan)
• Komposer
• Node.js >= 8.0.0
• Benang

batuan dasar

Batuan dasar seperti WordPress pada steroid!

Jika Sage meningkatkan pengembangan tema Anda, Bedrock meningkatkan seluruh instalasi WordPress. Itu dilakukan dengan menyediakan boilerplate proyek modern , dengan struktur dan keamanan folder yang ditingkatkan (misalnya dengan tidak memiliki file konfigurasi Anda di root situs web), file konfigurasi dan ENV, dan manajemen ketergantungan yang tepat (ya, termasuk plugin dan tema WordPress) .

Untuk menggambarkannya dalam satu frasa, kita dapat mengatakan bahwa Bedrock adalah proyek WordPress mandiri yang mengotomatiskan instalasi file inti dan plugin yang diperlukan.

Struktur File dan Folder

Jika Anda melihat instalasi dasar Batuan Dasar, Anda mungkin merasa tersesat di awal. Bedrock memisahkan file web, konfigurasi, dan ketergantungan ke dalam foldernya sendiri. Inilah yang tampak seperti struktur tulang telanjang:

 ├── 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

Ditambah beberapa file lain yang kurang penting.

Persyaratan batuan dasar adalah:

• PHP >= 7.1
• Komposer

Terali

Teralis adalah tumpukan LEMP modern untuk mengelola server pengembangan, pementasan, dan produksi Anda dengan mulus, yang bertujuan untuk menjaganya agar tetap mirip satu sama lain ("paritas pengembangan & produksi"). Ini berarti bahwa jika situs WordPress kustom Anda berfungsi di lingkungan pengembangan Anda, aman untuk menganggapnya juga akan berfungsi dalam produksi dan Anda dapat menerapkannya dengan percaya diri.

Untuk pengembangan lokal, Trellis menggunakan Vagrant, dengan vagrant up sederhana Anda akan memiliki mesin virtual yang menjalankan lingkungan modern yang tepat.

Penyediaan dan penerapan ke lingkungan staging dan produksi Anda dikelola dengan playbook Ansible, yaitu file YAML yang memberi tahu Ansible apa yang harus dilakukan.

Struktur Folder yang Disarankan Teralis

Teralis memiliki struktur folder yang disarankan hanya terdiri dari dua sub-folder:

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

Saya akan merekomendasikan untuk membiarkannya apa adanya, tetapi dapat disesuaikan tergantung pada keinginan dan kebutuhan Anda.

Persyaratan Teralis

• Komposer
• Kotak Virtual >= 4.3.10
• Gelandangan >= 2.1.0

Mengapa Anda Harus Menggunakannya?

Jika WordPress sudah berfungsi sebagaimana adanya, mengapa Anda harus beralih ke tumpukan yang lebih kompleks dan menghabiskan banyak waktu untuk menguasainya? Karena ada keuntungan yang jelas, dan beberapa yang kurang jelas. Mari kita coba lihat apa itu.

Tema Pemula Agnostik Kerangka

Terlalu banyak tema pemula WordPress memaksa Anda untuk menggunakan kerangka kerja CSS tertentu yang mungkin atau mungkin tidak Anda sukai atau bahkan ketahui, tetapi Sage sepenuhnya agnostik kerangka kerja. Selama instalasi, Anda akan memiliki opsi untuk secara otomatis menyertakan Bootstrap 4, Bulma, Foundation, Tachyons, Tailwind CSS, atau tanpa framework sama sekali jika Anda ingin memulai dari awal atau menggunakan yang lain (PETUNJUK: akhir-akhir ini saya mulai menyukai Tailwind CSSnya banyak).

KIAT PRO: pada mesin Windows, Anda mungkin mendapatkan pesan "Mode TTY tidak didukung pada platform Windows" selama penginstalan dan Anda tidak akan dapat memilih kerangka kerja atau mengonfigurasi Sage. Anda harus menjalankan ketiga perintah ini secara manual dari dalam folder tema jika Anda ingin memanfaatkan konfigurasi otomatis:

 $ 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.

Proses Pembuatan Modern

Dengan Webpack, yang disertakan dalam Sage, Anda tidak perlu lagi memikirkan kompilasi aset, menggabungkan dan memperkecil kode JavaScript dan CSS, mengoptimalkan gambar, memeriksa kesalahan JavaScript dan gaya, dan mengelola perpustakaan eksternal. Proses pembuatan akan menangani semua itu dengan yarn build sederhana (atau yarn build:production jika Anda ingin aset Anda dioptimalkan untuk penggunaan produksi), menghasilkan semua file statis di folder tema /dist/ Anda.

PHP dan Persyaratan Modern

Versi PHP minimum yang dapat Anda gunakan untuk menjalankan WordPress adalah PHP 5.2.4, ini akan memastikan kompatibilitas ke belakang untuk semua pengguna yang menjalankan situs web mereka di lingkungan lama, tetapi versi lama PHP (<= 7.0) telah resmi mencapai End Of Hidup, sehingga mereka tidak lagi didukung dan mereka dapat mengekspos situs Anda ke kerentanan keamanan dan masalah kinerja.

Baik Sage maupun Bedrock memerlukan versi PHP 7.1 yang waras (walaupun jika Anda memiliki opsi untuk memilih 7.3, silakan lakukan).

Sage 9 juga sepenuhnya mengadopsi standar pengkodean PSR-2 (pengkodean yang paling banyak digunakan dan diterima

standar yang digunakan dalam komunitas PHP), yang sedikit berbeda dari standar pengkodean WordPress, tetapi mereka memungkinkan Anda untuk memiliki kode yang lebih bersih dan lebih dapat dipelihara, terutama jika Anda bekerja dalam tim atau harus berbagi kode Anda dengan orang lain.

Ketergantungan yang Lebih Baik dan Manajemen Paket

Tumpukan Roots memanfaatkan Komposer untuk mengelola semua dependensi dan paket, termasuk inti WordPress, plugin, dan tema. Ini mungkin menjadi masalah jika Anda menggunakan alat pihak ketiga untuk mengelola pembaruan WordPress (seperti ManageWP, MainWP atau InfiniteWP), tetapi seseorang dapat berargumen bahwa memiliki semuanya di bawah kontrol versi memberi Anda lebih banyak kontrol dan membuatnya lebih mudah untuk memutar kembali ke pekerjaan sebelumnya versi jika terjadi kesalahan.

Selain itu, Sage menggunakan Yarn sebagai manajer paket dan ketergantungan untuk kode aplikasi dan untuk meluncurkan proses pembangunan.

File Template yang Lebih Baik

WordPress tidak memiliki mesin templating yang nyata, jadi untuk menebusnya, Sage mengadopsi Laravel's Blade dan mengikuti prinsip KERING: Jangan Ulangi Diri Sendiri.

Seperti inilah tampilan file template single.blade.php default, hanya 6 baris kode:

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

Mesin templat Blade benar-benar memisahkan Tampilan dan Pengontrol dan sintaksnya lebih elegan, ringkas, mudah dibaca, dan lebih mudah ditulis daripada sekadar tag PHP. Aturan praktis di sini adalah untuk meninggalkan semua kode PHP dari file template Anda (atau setidaknya coba).

Manfaat lain menggunakan Blade adalah pewarisan templat: templat tata letak dasar (defaultnya adalah /resources/views/layouts/app.blade.php ) mendefinisikan blok yang berisi elemen situs web umum, yang kemudian diwarisi oleh templat turunannya. Warisan templat sangat bagus untuk menghapus markup berulang dari templat individual dan menjaga semuanya KERING.

Sinkronisasi peramban

Dengan menjalankan yarn start , Anda akan meluncurkan sesi Browsersync. Browsersync adalah modul untuk pengujian browser yang disinkronkan saat mengembangkan. Ini akan mengawasi perubahan yang dibuat pada aset front-end Anda dan, bekerja sama dengan Webpack, secara otomatis memasukkan perubahan ke sesi browser Anda.

Penerapan WordPress yang Cepat, Mudah, dan Aman

Trellis menawarkan penerapan WordPress tanpa waktu henti. Saat Anda meluncurkan penerapan, Trellis akan git mengkloning repositori Anda, menjalankan composer install dan kemudian memperbarui symlink ke rilis saat ini sehingga tidak akan pernah mengedit secara langsung file yang saat ini disajikan dalam produksi.

Saat menggunakan Batuan Dasar, Teralis juga membutuhkan konfigurasi yang sangat sedikit.

Kekurangan

Satu-satunya kelemahan menggunakan Roots stack penuh (selain mempelajari hal-hal baru, yang seharusnya tidak dianggap sebagai masalah sama sekali) adalah Anda harus menggunakan penyedia hosting ramah Trellis seperti Kinsta, tetesan DigitalOcean atau host lain yang mendukung setidaknya SSH, Komposer dan WP-CLI, bersama dengan opsi untuk memperbarui jalur root web.

Ini membuat sebagian besar shared hosting murah (ish) keluar dari permainan dan itu adalah sesuatu yang Anda dan/atau klien Anda harus perhitungkan sebelum memulai proyek baru.

Bagaimana Memulainya?

Ini dapat dianggap sebagai pandangan baru tentang "Penginstalan 5 Menit WordPress" yang terkenal tetapi untuk pengembang front-end modern. Ini menambah beberapa tingkat kerumitan untuk pengembangan selanjutnya, tetapi pada akhirnya, manfaat yang bisa Anda dapatkan pasti sepadan.

Kami akan fokus untuk mengadopsi tumpukan penuh (Sage, Bedrock, dan Trellis), tetapi Anda hanya dapat menggunakan satu atau kombinasi dari semuanya. Sage dapat digunakan sebagai titik awal untuk tema yang berdiri sendiri pada instalasi WordPress apa pun; Batuan dasar dapat digunakan dengan tema WordPress apa pun yang Anda inginkan; dan penyebaran Trellis dikonfigurasi untuk situs berbasis Batuan Dasar dan mengurus semua yang dibutuhkan, tetapi dengan sedikit mengutak-atik, itu dapat disesuaikan untuk hampir semua kebutuhan.

Cara Membuat Proyek Baru

Menyiapkan proyek WordPress baru dengan Trellis, Bedrock, dan Sage cukup mudah, hanya beberapa baris perintah.

Instal Teralis di folder yang Anda inginkan (misalnya example.com ):

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

Instal Bedrock di subfolder /site/ :

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

Instal dan bangun Sage:

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

Menyebarkan

Menyebarkan ke pementasan atau produksi bahkan lebih mudah jika Anda telah mengonfigurasi semuanya dengan benar sesuai dengan dokumentasi resmi. Hanya berjarak satu baris perintah (berjalan dari folder example.com/trellis/ ):

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

Anda juga dapat dengan mudah mengembalikan penerapan Anda, cukup jalankan:

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

Tips Tentang Menyiapkan Lingkungan Pengembangan Anda di Windows

Jika Anda mencari di Google tentang cara menginstal dan menggunakan Roots stack, terutama Trellis, Anda akan menemukan banyak tutorial yang berfokus pada Linux atau MacOS, tetapi sangat sedikit informasi yang tersedia untuk Windows di mana Anda akan menemukan dua masalah utama: Ansible is not available untuk Windows, dan Vagrant biasanya sangat lambat pada mesin Windows.

Ketika saya awalnya memikirkan artikel ini, dokumentasi Trellis resmi untuk Windows menyarankan untuk menjalankan Ansible di dalam mesin virtual Vagrant, tetapi ini adalah semacam cara hacky dalam melakukan sesuatu dan itu tidak terlalu dapat diandalkan.

Sejak itu mereka telah memperbarui dokumentasi dengan instruksi yang tepat tentang mengatur semuanya dengan WSL (Subsistem Windows untuk Linux), jadi tidak perlu menemukan kembali roda dan menulis tutorial tentangnya. Ada baiknya untuk mengetahui bahwa ada tiga halaman petunjuk rinci langkah-demi-langkah yang dapat Anda ikuti sebelum menginstal Teralis: Pengaturan Windows, Pengaturan Windows: Sage dan Pengaturan Windows: Teralis.

Selamat mengkode!