Bu Modern WordPress Tema Geliştirme ise, Beni Kaydolun

Bir süredir beynimde dolaşan bir blok tema fikri var. Aylardır tek sayfalık bir profil/kart teması oluşturmayı düşündüm ve sonunda oturup hafta sonu çalışmaya başladım. Kısmen, bunu sadece eğlence için yapmak istedim. Ancak, başka bir parçam blok temasının geliştirici perspektifinden nasıl ilerlediğini görmek istedi.

Bu tema için ilham birkaç kişi ve projeden geldi. Kjell Reigstad'ın Ekim 2020'deki iki sütunlu açılış sayfası denemesi ilk olarak bunu tetikledi. Küçük ve rahat temalar hakkında Barmene Sor sütununa yakın zamanda gelen bir soru, yaratıcılığımı yeniden canlandırdı. Bununla birlikte, Temalar Ekibinin Carolina Nymark tarafından hazırlanan benzer bir blok teması olan Miniblock OOAK'ı onayladığını görmek, kuralların artık muhtemelen böyle bir şeyi dünyaya yaymak için yeterince gevşek olduğu anlamına geliyordu.

Sorunlardan biri, blok tabanlı temanın beni daha önce yakmış olması. Geçen yıl değerli boş zamanımda yeni bir proje inşa etmek için aylar harcadım, sadece Gutenberg eklenti güncellemelerinin haftalar sonra ilerlememi silmesi için. Alfa düzeyindeki yazılımın istikrarsız temeli ile işlerin değişebileceğini biliyordum, ama yine de sönüyordu. Söylemeye gerek yok, onu geri almak için motivasyonu asla bulamadım.

WordPress 5.9 ve daha kararlı bir blok tema sistemi ile sadece birkaç gün önce, ona bir şans daha vermenin zamanı gelmişti.

Blok temasını derinlemesine öğrenmek istiyordum. Bunu yapabilmemin tek yolu en başa dönmekti. Sade ol 'HTML, CSS ve PHP'nin bu temel öğeleriyle kendimi yeniden tanımam gerekiyordu. Ve modern ağın üzerine inşa ettiğimi düşündüğüm her şeyi unutun. Tekrar çaylak olmam gerekiyordu.

Teknik olarak, bir çeşit hafıza kaybı yaşamadan bildiğim her şeyi unutmam imkansız. Ancak, belki - sadece belki - ağın yapı taşlarına geri dönebilirim.

/node_modules klasörümde 900'den fazla projeyi kapsayan karmaşık bir bağımlılık ağı olmadan bir WordPress temasını başlatabilir miyim?

Temel PHP komut dosyalarımı Composer aracılığıyla görev bilinciyle çekmeden bir şeyler yaratabilir miyim?

Bilirsiniz , sadece bir WordPress teması oluşturabilir miyim?

İlk adım, kapıda egomu kontrol etmekti. Yıllarca süren modern araçları ve bunların etrafında oluşturulmuş bir iş akışını bir kenara koyduğumda, WordPress'in köklerine saygı gösteren, ancak gelişmiş yapılar için genişletilebilecek kadar esnek olan güzel ve basit bir tema sistemi buldum.

Bu, yol boyunca herhangi bir hıçkırık olmadığı anlamına gelmez, ancak bunları yeterince duyuyoruz. Artı, programlamayı/geliştirmeyi problem çözme sanatı olarak görüyorum.

Huzursuz bir hafta sonu geçirdim. Cuma ve cumartesi gecesi arasında dört, belki beş saat kesintisiz uykum var. Belki de aklımdan çıkaramadığım o kadar çok proje ve olay vardı ki. Ne olursa olsun, Pazar sabahı saat 3:30'da yorgun ama çok ihtiyaç duyulan Z'leri yakalayamayarak uyandım. Bu yüzden kod düzenleyicimi açtım ve yeni bir tema projesi oluşturdum.

Bir saat içinde, çalışıyordu. Arkadaşlarla Twitter üzerinden ikiye paylaşmak için yeterince iyi durumdaydı.

Aşağıdaki mevcut ana sayfanın bir ekran görüntüsüdür. Teknik olarak tek sayfadır. İlk taahhütlerimi canlı yayına gönderdiğimden beri biraz kurcaladım.

Bu, "Yansımalar" adlı bir blok kalıbıdır. Göl fotoğrafına yansıyan dağ, WordPress Fotoğraflarından alınmış ve Anne McCarthy tarafından çekilmiştir. Arka plan için kullanılan gradyan, görüntünün renklerinin bir yansımasıdır, ki bunun hoş bir dokunuş olduğunu düşündüm.

Tema birkaç başka desen içeriyor. Amaç, kullanıcıların profil kartları için favorilerini seçmelerine, içeriği özelleştirmelerine ve kaydetmelerine izin vermektir. Tereyağından kıl çeker gibi. Bununla, yazının sonunda daldığım bir engele çarptım. Çoğunlukla, her şey yolunda gitti.

Deneyimden Öğrendiklerim

Bloklarla WordPress temaları oluşturmak kolaydır. Çoğu şey yapılandırılmıştır ve standart bir dizi kuralla oynanır. Şablonlar buraya gelir. Parçalar oraya gidiyor. Ayarlarınızı şuraya takın. Gelecekteki WordPress sürümlerinde daha da fazla yapı görmemiz olasıdır.

Temayı yalnızca kod düzenleyicimi ve yerel bir WordPress yüklemesini kullanarak sıfırdan oluşturdum. Düğüm modülü yok. PHP kitaplıkları yok. Herhangi bir yapı kurulumu yok.

Bu proje tamamlanmadan önce muhtemelen bunları kullanacağım. Bazı araçlar geliştirmeyi kolaylaştırır. Ancak, bunlara ihtiyaç duymamak veya daha karmaşık PHP API'lerine dalmak, giriş engelini azalttı.

Tüm karmaşık parçaları halletmek için daha iyi bir sistemle 2000'lerin ortasına geri taşınmış gibi hissettim. Bir kereliğine neredeyse tamamen tasarıma odaklanabildim.

Altta yatan sistemde bolca sorun var. Geniş hizalanmış blokların etrafındaki ekstra sarmalayıcı öğeler gibi tuhaflıklar, düzenleyicide hala mevcuttur. Ve birkaç bloğun güncellenmesi gerekiyor - Mevcut Button bloğunu yeniden kullanmadığınız için File bloğuna bakıyorum .

Temel olarak, tuhaflıklar var. Bir tema olarak, onlarla birlikte çalışmayı, yukarı yönde bir düzeltme beklemeyi veya geçici çözümler bulmaya çalışırken akıl sağlığınızı riske atmayı öğrenirsiniz.

Bitmemiş işleri paylaşmak konusunda tereddütlerim var ama aynı zamanda kanıt göstermeliyim. İlgilenenler, en azından onunla çok çılgın bir şey yapmadan önce, bu makalenin tarihinde GitHub deposunu kontrol edebilir.

Bazı tema yazarları projeme bakıp bunun çok basit bir örnek olduğunu düşünebilir. Bununla birlikte, bununla ilgili her şeyi tam gelişmiş bir temaya kolayca uygulayabilirim. Boyutları ne olursa olsun standartlar aynıdır.

Belki de bir temanın ne olduğunu yeniden düşünmeye başlamalıyız. Blok tabanlı tema çok gençken, hepimiz biraz deney yapmalıyız.

Kaçırılmış Bir Fırsat

Bu kısımda biraz teknik konuşacağım çünkü çok yönlü bir kullanıcı deneyimi için kaçırılmış bir fırsatı açıklamak çok önemli. Site düzenleyicisi, daha ileri düzey kullanıcılar için oluşturmanın kolay olduğu bir yerdedir. Desenler, daha az teknik olanlar arasındaki boşluğu kapatmaya yardımcı olur, ancak bunlar yeterli değildir.

Bir web sayfasının ana bölümlerini düşünün. Başlık, altbilgi, kenar çubuğu, içerik ve hatta bunların alt bölümleri gibi parçalar. Bir kullanıcı olarak, halihazırda ekranda olan tüm içerik alanı tasarımını farklı bir içerik kalıbıyla nasıl değiştirirsiniz?

Orada olanı silebilir ve yeni bir desen ekleyebilirsiniz. Ancak, bir sayfanın bölümlerini silmek ve eklemek yüksek riskli bir işlemdir.

Değiştirmek istediğiniz alan bir şablon parçasıysa, birini diğeriyle değiştirebilirsiniz. Bu, tema yazarının o alan için herhangi bir kayıt yaptığını varsayıyor. Bu, düşük riskli bir eylemdir ve site düzenleyicinin en iyi özelliklerinden biridir.

Örneğin, Yirmi Yirmi İki'nin "Değiştir" araç çubuğu menü öğesi altında göründükleri gibi kaydettiği başlık şablonları şunlardır:

Ancak bu, temanın tüm başlık desenleri dizisi değildir - toplamda 18'i vardır. Çoğu son kullanıcının onları asla keşfedemeyeceğini hayal ediyorum.

Belirli şablon parçaları için kalıp oluşturmanın dezavantajlarından biri, son kullanıcıların toptan bir parçayı yeni bir kalıpla değiştirme veya dönüştürme yolunun olmamasıdır.

Tema yazarları, PHP'nin karıştırılmadığını varsayarak, kalıp kodunu şablon bölümüne kopyalayarak çabalarını çoğaltabilir. Veya bu parçaları oluşturabilir ve Kalıp bloğu aracılığıyla ilişkili kalıbı çekebilirler:

 <!-- wp:pattern { "slug":"namespace/slug" } -->

Bu yaklaşımla ilgili sorun, site düzenleyicisinin "Değiştir" açılır menüsünde kalıp içeriğini görüntülememesidir ( bir hata mı keşfettim? ):

Çözüm basit olmalıdır. Bir şablon parçası için kaydedilen desenler, UI aracılığıyla değiştirilebilir olmalıdır. Veya, Model bloğunu kullanan parçalar, "Değiştir" açılır menüsünde doğru şekilde görüntülenmelidir.