Roots Stack ile Modern WordPress Geliştirme İş Akışı

WordPress, en azından internet standartlarına göre, çağlar boyunca var olmuştur ve felsefesi her zaman geriye dönük uyumluluğu korumak olmuştur. Bu, bugün çevrimiçi olarak çok sayıda WordPress web sitesi göz önüne alındığında anlaşılabilir uyumluluğa odaklanıyor. Ancak bu, eski PHP ve MySQL sürümleriyle hala eski ortamları kullananlara yardımcı olabilir (ki bu başlı başına bir güvenlik riskidir, ancak bu bugünün makalesinin konusu değildir), aynı zamanda daha yeni WordPress sürümlerinin tam olarak yararlanamamasına neden oldu. en son PHP yetenekleri.

Bu aynı zamanda birçok WordPress geliştiricisinin bir WordPress balonunda yaşamasına, yeni ve modern ön uç geliştirme teknolojilerini öğrenmeye teşvik edilmemesine ve bazen bir şeyler yapmanın “olumlu yolunda” takılıp kalmasına neden oldu.

WordPress için Modern Bir Geliştirme İş Akışı Benimseyebilir misiniz?

Kesinlikle yapabilirsiniz ve WordPress Roots yığını, üç harika araçla 2019'daki gibi gelişmenize yardımcı olmak için burada:

• Başlangıç ​​temanız olarak Sage ,
• Modern bir WordPress ortak levhası olarak Bedrock ,
• Farklı ortamlara dağıtım ve sağlamayı yönetmek için kafes .

Roots ekibi ayrıca geliştirme aşamasında olan iki ek araca sahiptir: Bir eklenti oluşturma çerçevesi olan Acorn ve bir eklenti ortak plakası olan Clover. Her ikisi de alfada olduğu için bu yazıda yer almamaktadır ancak bunlara kesinlikle göz kulak olmalısınız.

Kök Yığını Tam Olarak Nedir?

Başlangıçta Roots teması olarak bilinen bu tema, yeni WordPress web siteleri için daha temiz bir başlangıç ​​noktası sağlamayı amaçlayan çok sağlam bir HTML5 başlangıç ​​temasıydı. Zamanla, tüm büyük modern web teknolojilerini ve standartlarını (Grunt'tan Gulp ve Webpack, LESS ve SCSS, NPM ve Yarn, Bootstrap, PSR-2 kodlama standartları ve DRY ilkesine) geçerek eksiksiz bir araç setine dönüştü. bu nedenle, onu benimseyen WordPress geliştiricilerini, modern ön uç geliştirme teknolojilerinin sunduğu şeyleri sürekli öğrenmeye ve güncel kalmaya zorluyor.

Bugün, Roots, geliştirmeden hazırlamaya ve üretime kadar tüm döngüyü takip ederek daha iyi WordPress siteleri oluşturmanıza yardımcı olmayı ve sizi konfordan çıkmaya zorlayarak daha iyi bir geliştirici yapmayı amaçlayan sürekli genişlemede eksiksiz bir araç setine dönüştü. sözde WordPress balonu tarafından sağlanan bölge.

Ama sundukları üç ana araca, ne olduklarına ve neden bunları kullanmayı düşünmeniz gerektiğine bir göz atalım.

Kökler Adaçayı 9

Roots Sage 9, orijinal olarak 2011'de yalnızca Roots olarak piyasaya sürülen, profesyonelce sürdürülen bir WordPress başlangıç ​​temasının son yinelemesidir. Yaşamı boyunca, birçok değişiklik, iyileştirme ve en iyi uygulamaların yeniden gözden geçirilmesinden geçti ve sonunda ne oldu? bugün, WordPress geliştirme için modern ön uç geliştirme iş akışını tanıtmak için harika bir başlangıç ​​noktasıdır.

Sage'in yapmaya çalıştığı şey, Görünümler ve Denetleyicinin tamamen ayrıldığı bir MVC modelini (Model-View-Controller) benimsemektir; bu, verilerin nereden geldiğini "bilmesi" gerekmeyen, ancak yalnızca bir Denetleyicinin görüntülenecek verileri beslemesini bekleyen Görünümleri yeniden kullanmamızı sağlar.

Sage 9'da bulunan denetleyici, Laravel gibi diğer çerçevelerde zaten aşina olabileceğiniz gerçek denetleyici değildir, ana fark, Sage 9 Controller'ın URL tabanlı bir yönlendirme yerine şablon tabanlı bir yönlendirme kullanmasıdır. Temel olarak, WordPress'in URL yönlendirmesini yönetmesine izin veriyorsunuz ve şablon dosyaları için denetleyiciler yazıyorsunuz.

Tüm geliştirme sürecine birkaç derece karmaşıklık ekleyerek, Sage 9 yeni başlayanlar için başlamak için en iyi seçim olmayabilir, çünkü sonunda ustalaşmak ve üretimde kullanmak için oldukça fazla öğrenmeniz olacak: uygun bağımlılık ve varlık yönetimi, kod sürümü oluşturma, yeni bir proje yapısı, Laravel'den türetilen yeni bir şablon motoru, DRY (Kendinizi Tekrarlama) ilkesi ve diğerlerinden biraz farklı olan katı kodlama standartlarına bağlı kalmanız gerekecek. WordPress'in önerdiği; ancak deneyimli bir geliştiriciyseniz, bu harika bir başlangıç ​​olabilir.

Sage ile her şeyi yapmak istiyorsanız, Roots ekibinin geliştiricilerinden biri olan Ben Word'ün şu tavsiyesini aklınızda bulundurun:

Sage bir tema çerçevesi değil, bir başlangıç ​​temasıdır. Nadiren güncellemeniz gerekir ve genellikle ondan alt temalar oluşturmamalısınız. Başlangıç ​​teması olan Sage, yeni bir projede başlangıç ​​noktası olarak kullanılmak içindir.

Ayrıca:

Alt Çizgiler 1.000 saatlik bir başlangıçsa, Sage 10.000 saatlik bir başlangıçtır.

Sage İle Dosya ve Klasör Yapısı

Sage'in dosya ve klasör yapısı, Alt Çizgiler gibi diğer başlangıç ​​temalarında ve hatta Sage 8'in önceki ana sürümünde görmeye alıştığımızdan biraz farklıdır.

Sage'i kurduktan hemen sonra şunları bulacaksınız:

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

Ayrıca, .editorconfig, .eslintrc.js, .stylelintrc.js, phpcs.xml vb. gibi kod düzenleyicileri ve IDE'ler tarafından kullanılan diğer bazı dosyalar.

İşte temel Sage 9 gereksinimlerine hızlı bir genel bakış:

• WordPress >= 4.7
• PHP >= 7.1.3 (php-mbstring etkinken)
• Besteci
• Node.js >= 8.0.0
• İplik

ana kaya

Bedrock, steroidler üzerindeki WordPress gibidir!

Sage, tema geliştirmenizi iyileştiriyorsa, Bedrock tüm WordPress kurulumunu iyileştirir. Bunu, gelişmiş bir klasör yapısı ve güvenliği (örneğin, yapılandırma dosyalarınızı web sitesinin kökünde bulundurmayarak), yapılandırma ve ENV dosyaları ve uygun bağımlılık yönetimi (evet, WordPress eklentileri ve temaları dahil) ile modern bir proje ortak kalıbı sağlayarak yapar. .

Tek bir cümleyle açıklamak gerekirse, Bedrock'un çekirdek dosyaların ve gerekli eklentilerin kurulumunu otomatikleştiren bağımsız bir WordPress projesi olduğunu söyleyebiliriz.

Dosya ve Klasör Yapısı

Temel bir Bedrock kurulumuna bakarsanız, başlangıçta kaybolmuş hissedebilirsiniz. Bedrock, web, konfigürasyon ve bağımlılık dosyalarını kendi klasörlerine ayırır. Çıplak kemik yapısı şöyle görünür:

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

Artı bazı daha az önemli dosyalar.

Ana kaya gereksinimleri şunlardır:

• PHP >= 7.1
• Besteci

Çardak

Trellis, geliştirme, hazırlama ve üretim sunucularınızı sorunsuz bir şekilde yönetmek için modern bir LEMP yığınıdır ve bunları olabildiğince birbirine benzer tutmayı amaçlar ("geliştirme ve üretim paritesi"). Bu, özel WordPress siteniz geliştirme ortamınızda çalışıyorsa, üretimde de çalışacağını varsaymak güvenlidir ve güvenle dağıtabilirsiniz.

Yerel geliştirme için Trellis, Vagrant'ı kullanır, basit bir vagrant up ile uygun bir modern ortam çalıştıran sanal bir makineniz olur.

Hazırlama ve hazırlama ve üretim ortamlarınıza dağıtım, Ansible'a ne yapacağını söyleyen YAML dosyaları olan Ansible playbook'ları ile yönetilir.

Kafes Önerilen Klasör Yapısı

Kafes, yalnızca iki alt klasörden oluşan önerilen bir klasör yapısına sahiptir:

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

Olduğu gibi bırakmanızı tavsiye ederim, ancak beğeninize ve ihtiyaçlarınıza göre özelleştirilebilir.

Kafes Gereksinimleri

• Besteci
• Sanal kutu >= 4.3.10
• Serseri >= 2.1.0

Neden Kullanmalısınız?

WordPress zaten olduğu gibi çalışıyorsa, neden daha karmaşık bir yığına geçip ustalaşmak için önemli miktarda zaman harcamalısınız? Çünkü bariz ve daha az belirgin avantajlar var. Ne olduklarını görmeye çalışalım.

Bir Çerçeve Agnostik Başlangıç ​​Teması

Çok fazla WordPress başlangıç ​​teması, sizi sevebileceğiniz veya sevmeyeceğiniz veya hatta bilmediğiniz belirli bir CSS çerçevesi kullanmaya zorlar, ancak Sage tamamen çerçeveden bağımsızdır. Kurulum sırasında, Bootstrap 4, Bulma, Foundation, Tachyons, Tailwind CSS'yi otomatik olarak ekleme veya sıfırdan başlamak veya başka bir şey kullanmak istiyorsanız hiç çerçeve ekleme seçeneğiniz olacak (İPUCU: son zamanlarda Tailwind'i sevmeye başladım) CSS çok).

PROFESYONELLER İÇİN İPUCU: Bir Windows makinesinde, yükleme sırasında “TTY modu Windows platformunda desteklenmiyor” mesajını alabilirsiniz ve bir çerçeve seçemez veya Sage'i yapılandıramazsınız. Otomatik yapılandırmadan yararlanmak istiyorsanız, bu üç komutu tema klasöründen manuel olarak çalıştırmanız gerekecektir:

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

Modern Bir İnşa Süreci

Sage'e dahil olan Webpack ile artık varlıkları derlemek, JavaScript ve CSS kodunu birleştirmek ve küçültmek, görüntüleri optimize etmek, JavaScript ve stil hatalarını kontrol etmek ve harici kitaplıkları yönetmek hakkında düşünmek zorunda kalmayacaksınız. Oluşturma süreci, tüm bunları basit bir yarn build (veya varlıklarınızın üretim kullanımı için optimize edilmesini istiyorsanız yarn build:production ) hallederek, tema /dist/ klasörünüzdeki tüm statik dosyaları üretecektir.

Modern PHP ve Gereksinimler

WordPress'i çalıştırabileceğiniz minimum PHP sürümü PHP 5.2.4'tür, bu, web sitelerini eski bir ortamda çalıştıran tüm kullanıcılar için geriye dönük uyumluluk sağlayacaktır, ancak PHP'nin eski sürümleri (<= 7.0) resmi olarak End Of Life, bu nedenle artık desteklenmezler ve sitenizi güvenlik açıklarına ve performans sorunlarına maruz bırakabilirler.

Hem Sage hem de Bedrock, PHP 7.1'in makul bir sürümünü gerektirir (ancak 7.3'ü seçme seçeneğiniz varsa, lütfen bunu yapın).

Sage 9 ayrıca PSR-2 kodlama standartlarını (en yaygın olarak kullanılan ve kabul edilen kodlama

PHP topluluğunda kullanılan standartlar), WordPress kodlama standartlarından biraz farklıdır, ancak özellikle bir ekipte çalışıyorsanız veya kodunuzu başkalarıyla paylaşmanız gerekiyorsa daha temiz ve daha sürdürülebilir bir koda sahip olmanızı sağlar.

Daha İyi Bağımlılıklar ve Paket Yönetimi

Roots yığını, WordPress çekirdeği, eklentiler ve temalar dahil olmak üzere tüm bağımlılıkları ve paketleri yönetmek için Composer'dan büyük ölçüde yararlanır. WordPress güncellemelerini yönetmek için üçüncü taraf araçları kullanıyorsanız (ManageWP, MainWP veya InfiniteWP gibi) bu bir sorun olabilir, ancak birileri, her şeyin sürüm kontrolü altında olmasının size daha fazla kontrol sağladığını ve önceki bir çalışmaya geri dönmeyi kolaylaştırdığını iddia edebilir. Bir şeyler ters giderse sürüm.

Ayrıca Sage, Yarn'ı uygulama kodu ve oluşturma sürecini başlatmak için bir paket ve bağımlılık yöneticisi olarak kullanır.

Daha İyi Şablon Dosyaları

WordPress gerçek bir şablonlama motorundan yoksundur, bu yüzden Sage bunu telafi etmek için Laravel'in Kılıcını benimsedi ve DRY ilkesini takip etti: Kendinizi Tekrar Etmeyin.

Varsayılan single.blade.php şablon dosyası şöyle görünür, yalnızca 6 satır kod:

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

Blade şablon motoru, Görünümleri ve Denetleyicileri tamamen ayırır ve sözdizimi, PHP etiketlerinden daha zarif, özlü, okunabilir ve yazması daha kolaydır. Buradaki temel kural, tüm PHP kodunu şablon dosyalarınızın dışında bırakmaktır (veya en azından deneyin).

Blade kullanmanın bir başka yararı da şablon mirasıdır: bir temel düzen şablonu (varsayılan, /resources/views/layouts/app.blade.php ), daha sonra alt şablonları tarafından devralınan ortak web sitesi öğelerini içeren blokları tanımlar. Şablon devralma, tek tek şablonlardan tekrarlanan işaretlemeyi kaldırmak ve işleri KURU tutmak için harikadır.

tarayıcı senkronizasyonu

thread yarn start çalıştırarak bir Browsersync oturumu başlatacaksınız. Browsersync, geliştirme sırasında senkronize tarayıcı testi için bir modüldür. Ön uç varlıklarınızda yapılan değişiklikleri izleyecek ve Webpack ile birlikte çalışarak değişiklikleri otomatik olarak tarayıcı oturumunuza enjekte edecektir.

Hızlı, Kolay ve Güvenli WordPress Dağıtımı

Trellis, sıfır kesintili WordPress dağıtımları sunar. Bir dağıtımı başlattığınızda, Trellis deponuzu git klonlayacak, besteci kurulumunu çalıştıracak ve ardından sembolik bağlantıyı mevcut sürüme güncelleyecek, böylece o anda üretimde sunulan dosyaları asla doğrudan düzenlemeyecektir.

Bedrock'u kullanırken, Trellis de çok az yapılandırmaya ihtiyaç duyar.

Dezavantajları

Tam Roots yığınını kullanmanın tek dezavantajı (bir sorun olarak kabul edilmemesi gereken yeni şeyler öğrenmek dışında), Kinsta, DigitalOcean damlacığı veya başka bir ana bilgisayar gibi Trellis dostu bir barındırma sağlayıcısı kullanmanız gerektiğidir. web kök yolunu güncelleme seçeneğiyle birlikte en az SSH, Besteci ve WP-CLI'yi destekler.

Bu, ucuz (ish) paylaşılan barındırma hizmetinin çoğunu oyun dışında bırakır ve yeni bir projeye başlamadan önce sizin ve/veya müşterinizin dikkate alması gereken bir şeydir.

Nasıl Başlanır?

Bu, ünlü "WordPress 5 Dakikada Kurulum"un yeni bir yorumu olarak kabul edilebilir, ancak modern ön uç geliştiriciler için. Daha sonraki geliştirme için birkaç derece karmaşıklık ekler, ancak sonuçta elde edebileceğiniz avantajlar kesinlikle buna değer.

Tüm yığını (Sage, Bedrock ve Trellis) benimsemeye odaklanacağız, ancak bunlardan birini veya herhangi bir kombinasyonunu kullanabilirsiniz. Sage, herhangi bir WordPress kurulumunda bağımsız bir tema için bir başlangıç ​​noktası olarak kullanılabilir; Bedrock, istediğiniz herhangi bir WordPress temasıyla kullanılabilir; ve Trellis dağıtımları Bedrock tabanlı siteler için yapılandırılır ve gereken her şeyi halleder, ancak biraz kurcalama ile hemen hemen her ihtiyaç için özelleştirilebilir.

Yeni Proje Nasıl Oluşturulur

Trellis, Bedrock ve Sage ile yeni bir WordPress projesi kurmak oldukça kolaydır, sadece birkaç komut satırı uzaklıktadır.

Trellis'i istediğiniz klasöre kurun (örn. example.com ):

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

Bedrock'u /site/ alt klasörüne kurun:

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

Sage'i kurun ve oluşturun:

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

dağıtma

Her şeyi resmi belgelere göre doğru şekilde yapılandırdıysanız, aşamaya veya üretime dağıtım yapmak daha da kolaydır. Yalnızca bir komut satırı uzaklıktadır ( example.com/trellis/ klasöründen çalıştırılır):

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

Ayrıca, dağıtımınızı kolayca geri alabilirsiniz, sadece şunu çalıştırın:

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

Windows'ta Geliştirme Ortamınızı Kurmakla İlgili İpuçları

Roots yığınını, özellikle de Trellis'i nasıl kuracağınız ve kullanacağınız konusunda google'a giderseniz, Linux veya MacOS'a odaklanan birçok öğretici bulacaksınız, ancak iki ana sorunu bulacağınız Windows için çok az bilgi mevcuttur: Ansible mevcut değil Windows için ve Vagrant genellikle Windows makinelerinde son derece yavaştır.

Bu makaleyi ilk olarak düşündüğümde, Windows için resmi Trellis belgeleri, Vagrant sanal makinesinin içinde Ansible'ı çalıştırmayı öneriyordu, ancak bu, işleri yapmanın bir tür sahte bir yoluydu ve çok güvenilir değildi.

O zamandan beri, belgeleri WSL (Linux için Windows Alt Sistemi) ile her şeyi ayarlamakla ilgili uygun talimatlarla güncellediler, bu nedenle tekerleği yeniden icat etmeye ve bununla ilgili bir eğitim yazmaya gerek yok. Trellis'i yüklemeden önce izleyebileceğiniz üç sayfa değerinde ayrıntılı adım adım talimat olduğunu bilmek güzel: Windows Kurulumu, Windows Kurulumu: Sage ve Windows Kurulumu: Trellis.

Mutlu kodlama!