DE{CODE}: Modern Tema ve WordPress'in Geleceği: Tam Site Düzenleme ve Ötesiyle Çalışma

WordPress 5.9, WordPress ile web siteleri oluşturma biçimimizde büyük bir değişiklik anlamına gelen Tam Site Düzenlemeyi merkeze getirdi. Bu DE{CODE} oturumunda, WP Engine Geliştirici Danışmanı Nick Diego bu değişiklikleri ve daha iyi web siteleri oluşturmak için bunlardan yararlanabileceğiniz bazı yolları (modern WordPress yöntemi) açarken katılın.

Oturum Slaytları

Tam Metin Transkript

NICK DIEGO : Merhaba, "WordPress'te Tam Site Düzenleme ve Modern Temanın Geleceği ile Çalışma" bölümüne hoş geldiniz. Benim adım Nick Diego ve burada WP Engine'de bir geliştirici savunucusuyum. Benim hakkımda biraz – 2012'de WordPress ile çalışmaya başladım. Öncelikle bir eklenti geliştiricisiydim ve o zamandan beri blok temalarla çok şey yapmaya geçiş yaptım. Aslında Kasım 2021'de WP Engine'e katıldım, bu yüzden bu benim için yeni bir iş. Bloklar, modeller ve tam site düzenlemesi konusunda tutkuluyum, bu yüzden bugün bu sunumu yapmaktan daha fazla heyecan duyamazdım.

Peki tam site düzenleme nedir? Son yıllarda bunu çok duyduk. Yani aslında "blokların tanıdık deneyimini ve genişletilebilirliğini yalnızca gönderiler ve sayfalar yerine sitenizin tüm bölümlerine getiren bir özellikler koleksiyonudur." Bu aslında Site Editörü, Genel Stiller, tema blokları, Şablonlar ve tabii ki Blok Temalar gibi şeyleri içeren bir özellikler şemsiyesidir.

Bugünkü sohbetimizde birkaç farklı konuyu ele alacağız. Temel bilgilerle başlayacağız. Özellikle terminoloji açısından hepimizin aynı sayfada olduğundan emin olmak istiyorum. Daha sonra bir blok temanın anatomisinden bahsedeceğiz, ardından global stiller, theme.json dosyasını içeren in-settings. Ve son olarak, modern tema ve bunun nasıl görüneceği hakkındaki düşüncelerimi paylaşacağım.

Bugünün sunumunda, bir dizi farklı örnek kullanacağız ve bunlar, Ocak 2022'de WordPress 5.9'a dahil edilen 2022 temasından olacak. Bu, Core tarafından geliştirilen bir blok temasıdır. WordPress ekibi ve başlamak için harika bir yer ve eklenti deposunda mevcut, bu nedenle örnekler için kullanılacak daha iyi bir tema yok.

Bugün başlarken, yine temel bilgilerle başlayacağız. Ve bir bloktan daha temel bir şey yoktur. Dolayısıyla, son birkaç yıldır WordPress kullanıyorsanız, muhtemelen bloklara çok aşinasınızdır. WordPress'teki temel içerik birimidir. Bir resim galerisine bir metin paragrafı olabilir. Hemen hemen her şekli alabilir. Ve tam site düzenlemesinin arkasındaki fikir, yakında veya şimdi, web sitenizdeki her şeyin bir blok olacağıdır. Bunun nasıl çalıştığı hakkında daha fazla tartışacağız.

Şimdi burada, şu anda WordPress'te bulunan bir dizi farklı blok örneğine sahibiz. Aşina olmanız gereken soldaki iki sütun. Paragraflarımız, başlıklarımız ve kapak bloklarımız var – bu böyle devam eder. Yine bu yıl piyasaya sürülen 5.9'da artık tema blokları denen şeye sahibiz. Bunlar, geleneksel olarak doğrudan WordPress içinden düzenleyemeyeceğiniz içeriğe sahip bloklardır.

Bunlar, site logonuz, sorgu döngüsü, yazı alıntısı, yazı yazarı gibi şeyleri içerir. Bunların tümü, PHP tabanlı şablon dosyalarınıza dalmanız ve doğrudan kodlamanız veya bu alanları düzenlemenize yardımcı olan üçüncü taraf bir eklenti kullanmanız gereken içerik türleridir. Ve bunların hepsi WordPress'e geliyor veya geldi ve kullanıcıların bunları doğrudan düzenlemesine izin veriyor ve hepsi bir blok şeklini alıyor.

Ardından, kalıplar hakkında konuşmak istiyoruz. Kalıplar, tam site düzenleme deneyiminin bir tür temel taşıdır. Kalıplar başlı başına bir konuşma olabilir, ancak aşina değilseniz size kalıplar hakkında küçük bir ön bilgi vereceğiz. Yani yine, bir model, belirli bir düzeni oluşturan önceden tanımlanmış bir blok koleksiyonudur. Bir model, biraz stil içeren tek bir blok olabilir. Birden fazla blok olabilir.

Kalıplar, kullanıcıların tasarımı manuel olarak her seferinde bir blok oluşturmak yerine tek bir tıklamayla tüm tasarımı doğrudan sitelerine eklemelerine olanak tanır, bu da bir sitenin gelişimini gerçekten hızlandırabilir. Ayrıca, hatırlarsanız gerçekten yararlıdır – bu güzel web sitesi demosunu görüyorsunuz ve tüm bu içeriğe sahip. Ve temayı kuruyorsunuz ve bu, o demoyu nasıl edinebilirim? Desenler bunu sizin yerinize çözer çünkü tema yazarı, bir kullanıcının tek bir tıklamayla ekleyebileceği ve temayı seçtiklerinde gördükleri ve ilgilerini çeken o demoyu ekleyebilecekleri bir sürü sayfa düzeni veya bireysel tasarımlar sağlayabilir.

Öyleyse, buradaki bir kalıba hızlıca bir göz atalım. Sadece basit bir başlığımız, biraz metnimiz ve bazı düğmelerimiz var. Ve bu yine sayfaya tek bir tıklama ile eklenebiliyor ve burada görüyoruz ki üç farklı blok, bir başlık bloğu, bir paragraf bloğu ve bir düğme bloğu.

Şimdi yine bu yıl çıkan 5.9 ile Pattern Explorer'ın tanıtımını gördük. Bu nedenle, daha önce bahsettiğim, tüm örneklerimizde kullandığımız 2022 teması Kuluçkahane teması olarak adlandırılıyor – bir sürü kuş. Burada, Desen Gezgini'nde görebileceğiniz gibi, tema yazarlarının oluşturduğu bir dizi farklı tasarımımız var.

Bir kullanıcı olarak, bunlardan herhangi birini doğrudan siteye ekleyebilirim ve tema yazarının temayı tasarladığı estetiğin aynısını elde ederim, yani hoparlör serisi, yan yana bazı kuşlar - ne isterseniz. Kalıplar ve bir temayla sunulan kalıplar, tam site düzenleme deneyimi için çok önemlidir.

Sırada Editörümüz var. Editör hakkında konuşamayız. WordPress kullanıyorsanız, muhtemelen buna çok aşinasınızdır. Ancak bundan bahsetmek istiyorum çünkü Editör geçmişte birçok farklı isimle anıldı – Block Editor, Gutenberg, The Gutenberg Editor. Bu tartışmanın amaçları doğrultusunda, sadece Editörü arayacağız. Resmi adı bu ve burada gördüğünüz şey de bu olacak. Yine, bu, 2018'in sonlarında WordPress 5.0'da tekrar tanıtıldı.

Yani Düzenleyici içinde Yerleştiriciye tıklamanız yeterlidir ve bloklarınızı ve desenlerinizi ekleyebilirsiniz. Şimdi ekranı göstermek istedim çünkü bundan sonra Site Editörü hakkında konuşmamız gerekiyor. Sonunda, Site Düzenleyicinin site ön eki muhtemelen ortadan kalkacak ve elimizde sadece Düzenleyici olacak. Ancak Site Düzenleyici, çeşitli şablonları, şablon parçalarını, stil seçeneklerini ve daha fazlasını doğrudan düzenlemenize ve bunlar arasında gezinmenize olanak tanıyan uyumlu bir deneyimdir.

Temel olarak, Site Düzenleyici, son birkaç yılda alıştığımız standart düzenleyicimizi alır ve kullanıcıların web sitenizin artık tamamı bloklarla desteklenen ek alanlarını düzenlemesine izin vererek onu bir sonraki seviyeye taşır. Böylece WordPress 5.9, tam site düzenlemeyi ve bununla birlikte Site Düzenleyiciyi tanıttı. Ve Mayıs'ta çıkacak olan 6.0'da, bu konuda pek çok geliştirme göreceğiz ki bu çok heyecan verici.

Dolayısıyla, 2022 gibi bir blok teması kullanıyorsanız, Site Düzenleyiciye erişebileceksiniz. Üst kenar çubuğu ve ardından görünüm bölümünün altında olmak üzere iki farklı yol vardır. Şimdi, Site Düzenleyicisi, yine, çünkü o – çok güçlü, sadece yöneticiler tarafından kullanılabilir. Editörler merak etmeyin, Site Editörüne erişemeyecekler. Site Editörüne erişmek için yönetici olmanız gerekir.

Ve buraya girdiğimizde, standart düzenleyiciye çok benziyor ama biraz farklı bir şey fark edeceksiniz. Burada en üstte Ana Sayfamız var. Bu da bize aslında home.HTML şablonunu düzenlediğimizi ve sayfada ayrı ayrı düzenleyebileceğimiz birkaç farklı alanımız olduğunu gösteriyor. Burada görebileceğiniz gibi, üstbilgimiz ve altbilgimiz var.

Yani bu daha önce asla yapamayacağınız bir şey. Home.PHP'yi asla düzenleyemezdiniz, ancak şimdi HTML şablonunu başka bir üçüncü taraf uzantısı olmadan doğrudan arayüzden düzenleyemezsiniz.

Ve sayfaya ve liste görünümüne tıklarsak, bir sorgu döngümüz olduğunu görebiliriz. Yine, bu tanıdık oluşturma temaları, temalar için şablonlar içinde döngüler oluşturmaya muhtemelen çok, çok, çok aşinadır, ancak burada bunu sorgu döngüsünü kullanan bloklarla yapabiliriz. Ayrıca gönderi başlığı, öne çıkan görsel, gönderi alıntısı ve gönderi tarihi gibi diğer tema bloklarından bazılarını da görebiliriz. Bunların tümü, kullanıcı tarafından herhangi bir kodlama gerekmeden arayüzden hareket ettirilebilir ve değiştirilebilir.

Şimdi, küçük bir WordPress simgesine veya site simgesine tıklarsanız, bu kenar çubuğunu alabiliriz. Ve sonra tüm şablonlarımıza ve şablon bölümlerimize erişimimiz olduğunu görebiliriz. Şimdi, akışın tüm bu ekranların tamamen geliştirilme aşamasında olduğunu not etmek istiyorum. Tam site düzenlemesi hala beta aşamasındadır ve gelecek olan pek çok ayrıntılandırma ve iyileştirme vardır. Yani bugün gördüğümüz şey altı ay sonra aynı görünmeyebilir ama bu harika bir başlangıç.

Yani şablonlara inecek olursak, 2022'ye dahil olan tüm şablonları görebiliriz. Page, Index, Home ve 404 gibi tanıdık olanları görmelisiniz. tema yazarları tarafından dahil edilen şablon parçaları. Yani birkaç farklı başlığımız ve bir de alt bilgimiz var.

Şimdi yine, bunların tümü kullanıcı tarafından düzenlenebilir. Ve böylece, burada bu küçük noktayı görürsek, bu başlık şablonu bölümünün benim tarafımdan düzenlendiğini görebiliriz. Artık bir şablon parçasını veya şablonu düzenlediğinizde, bu değişiklikler veritabanına kaydedilir. Aslında temanızdaki şablonları değiştirmezler, bu harika çünkü her zaman tema şablonlarına veya şablon bölümlerine geri dönebilirsiniz.

Ama yine buraya tıklarsak o header şablon kısmını düzenlemeye başlayabiliriz ve bunların hepsinin bloklardan oluştuğunu göreceksiniz. Bu, bir gönderiyi veya sayfayı düzenlerken Editör'de kullanacağınız deneyimin aynısıdır. Bunu artık tüm şablonlarınız ve şablon parçalarınız için Site Düzenleyicinin içinde yapabilirsiniz.

Bu, Site Düzenleyicinin ve nasıl çalıştığının hızlı bir incelemesiydi, ancak şimdi tam site düzenlemenin ana temel bileşeni olan bir blok temasının anatomisinden bahsetmek istiyorum. Peki bir blok temasının anatomisi nasıl çalışır? Şey, aslında birkaç farklı kategoriye ayrıldı. Yani blok temalarımız var. Tam site düzenlemeyi tamamen benimserler. Tema şablonları tamamen bloklardan oluşur. Şablonlar ve şablon bölümleri PHP yerine HTML'dir.

Ve sonra bir blok temasının çok basit olabileceğini not etmek istiyorum. Tek yapması gereken, bir style.CSS dosyası ve bir index.html dosyası ile bir index.PHP dosyasından oluşmasıdır. Bu PHP dosyası, geleneksel WordPress tema geliştirmesinin bir tür kalıntısıdır ve muhtemelen gelecekte kaybolacaktır.

Ve son olarak, çoğu blok teması bir theme.JSON dosyası içerir. Bunun hakkında ayrı ayrı konuşacağız. Küresel ayarlar ve stiller ile ilgili çok önemli bir konudur. O halde tema dosya yapısına bir göz atalım. İşte bu 2022, 2022'nin içindeki dosya yapısının kısaltılmış hali. Gerekli dosyaları tam burada görebiliriz.

Ardından, Templates ve Template Parts adlı bazı klasörlerin olduğunu da fark ediyoruz. Bu klasörlerin her birinde, her şablon ve şablon bölümü için tüm HTML dosyalarına sahipsiniz. Burada görünmeyen, aslında gerçekten heyecan verici, bu yüzden bunu, Gutenberg'e, Gutenberg eklentisine gizlice sokmak istedim, tüm bu gelecekteki geliştirme tam site düzenlemesinin yapıldığı yer, aslında yakın zamanda Modeller adında yeni bir klasör tanıttı. Böylece kalıp dosyalarınızı doğrudan Kalıp klasörünün içine yerleştirebilirsiniz ve WordPress onları sizin için kaydeder. Sadece bir göz atma. Gutenberg'e ve tüm yeni özelliklere göz atmanızı kesinlikle tavsiye ederim.

Ama buradaki slayda geri dönelim. Şablonlarımız ve şablon parçalarımız var. Ve her biri için ayrı ayrı HTML dosyalarını görebilirsiniz. Şimdi bunun nasıl çalıştığını biraz daha anlamak için 404.HTML dosyasına bir göz atacağız. Bu, sitenizdeki bir dosya veya sayfadır ve bu şablonu düzenlemenize izin verecek üçüncü taraf bir kaynak kullanmadığınız veya koda girmediğiniz sürece asla doğrudan düzenleyemezsiniz.

Site Editörüne geri dönersek, 404 sayfamızın tam burada olduğunu görebiliriz. Buna tıklarsak, kullanıcı artık o şablonun farklı bileşenlerini düzenleyebilir. Ancak, asıl HTML kodunun bu şablonu oluşturduğuna, aslında temanın içinde olan koda bir göz atalım.

Burada, 404.HTML dosyamızın olduğunu görebiliriz ve bir sürü işaretlemesi vardır. Yukarıdan ve aşağıdan başlayarak, bir şablon parça bloğu için spesifikasyona sahip olduğumuzu görüyoruz. Bunun yaptığı, kayıtlı şablon parçalarımıza atıfta bulunmak ve onları şablonun içine çekmek. Buraya geri dönersek, bir footer.HTML bölümümüz ve bir header.HTML bölümümüz olduğunu görebiliriz. Ve burada atıfta bulunulan da budur.

Bu, diğer bloklardan oluşan şablonları çekmenize izin veren benzersiz bir bloktur. Şimdi, elbette, bir üst bilgi oluşturacak tüm blokları ve bir alt bilgi oluşturacak tüm blokları dahil edebilirsiniz, ancak şablon kısmına atıfta bulunarak, hepsini tek bir yerde yapabilir ve ardından aynı şablon parçasını uygulayabilirsiniz. PHP ile geleneksel bir WordPress'te yaptığınıza benzer şekilde tüm şablonlarınızda.

Şimdi, daha ileriye baktığımızda, bazı işaretlemelerimiz var, sadece bazı ana işaretlemelerimiz var ve sonra bir div'imiz var. Bu konuya fazla girmeyeceğim. Burada bazı ilginç şeyler oluyor, yani buradaki düzen, doğru, bazı düzen ayarları yapıyor, ama bu sadece sayfa için genel işaretleme, 404 modeli.

Şimdi desenden bahsetmiştim. Bu temadaki 404, aslında bir modelde toplanmıştır. Yani 404 içeriğini oluşturan tüm bloklar bir kalıp içindedir. Ve sonra, aslında bu kalıba referans veren ve sonra bu blokları çeken bir kalıp bloğumuz var. Şimdi, elbette, yine, 404 sayfasını oluşturan tüm blokları buraya dahil edebilirsiniz, ancak onları bir kalıba sokup referans göstererek, yönetimi biraz daha kolaylaştırır.

Böylece Site Editörüne geri döndüğümüzde içeriğimiz var ve farklı bölümleri görebiliyoruz. Yani üst kısım, başlık şablonunun içeri çekildiği kısımdır. Ve sonra, açıkçası, ana kısım, 404 kalıbının içeri çekildiğidir. Ve şimdi, bunların hepsi blok olduğundan, tek yapmamız gereken onları normalde yaptığımız gibi düzenlemek. . Cesur yapabiliriz. Rengini değiştirebilirdik. Blokları kaldırabilir, bloklar ekleyebiliriz, vb.

Oldukça kolay ve herhangi bir kodu düzenlememize hiç gerek yoktu. Kodun nasıl çalıştığını anlamamız gerekiyordu ama herhangi bir koda dokunmamıza gerek yoktu. Sonra mutlu olduğumuzda, sadece Kaydet'e tıklıyoruz. Yine, bu değişiklikler veri tabanına kaydedilir, yani aslında tema dosyalarını değiştirmiyorsunuz. Yani değişiklikleri geri alırsak, temanın sağladığı şeye geri döneriz.

Site Editörü ile ilgili harika şeylerden biri de - ve yine, bu hala geliştirilmektedir - yeni şablon parçaları ekleyebilmenizdir. Yine, bu tema bir grup farklı üstbilgi ve altbilgi ekler, peki ya daha fazlasını eklemek istersek? Belki bir kenar çubuğu istedik. Belki de farklı içerik bölümleri istedik. Bunu doğrudan Site Düzenleyicisi içinde yapabiliriz.

Ve yine, bu akış iyileştirilecek – daha fazla özellik, daha fazla işlev. Ancak şu anda çalışıyor ve her şeyi buraya ekleyebilirsiniz. Unutulmaması gereken bir nokta, henüz Site Düzenleyici içinde şablon ekleyemeyeceğinizdir. WordPress düzenleyicinin içindeki farklı bir arayüzde yapabilirsiniz, ancak Site Düzenleyicide henüz tam olarak değil. Ama bu gelecek.

Bunun son parçası, tüm bu değişiklikleri yapmaktan bahsettik. Peki ya tüm değişikliklerinizi gerçekten gelecek olan tek bir tema olarak dışa aktarabilseydiniz ve bunun tema geliştirmeyi nasıl etkileyeceğini görmek gerçekten ilginç. Gutenberg'in en son sürümüyle artık tüm değişikliklerinizi ve orijinal temayı dışa aktarabilirsiniz.

Birleştirilirler ve tüm değişiklikleriniz tema içindeki dosyalara uygulanmış olarak yepyeni bir tema olarak dışa aktarabilirsiniz. Yani 2022'yi almayı hayal edebilirsiniz. Yükleyin. Tüm değişikliklerinizi yaparsınız. Bazı şablonları değiştirebilir ve ardından tam bir temayı dışa aktarabilirsiniz. Gelecekteki tema gelişimi için bazı çok ilginç çıkarımları var.

Şimdi global ayarlar ve stiller hakkında konuşmamız gerekiyor. Bu, theme.JSON dosyasıdır. Bu, WordPress için yepyeni ve zor olduğu kadar heyecan verici. Yani 2022 temasına dönüp bakarsak, o dosyayı en üstte görebiliriz. Ve theme.JSON dosyasına girdiğimizde, gerçekten beş bölümden oluşuyor, biri yalnızca sürüm numarası.

Ve kısaca özel şablonlardan ve şablon bölümlerinden bahsedeceğim. İşte burada, özel bir şablonunuz varsa, WordPress'in doğal olarak tanımayacağı tamamen özel bir şablonunuz varsa, onu burada kaydedebileceğiniz yer burasıdır. Burası ayrıca üstbilgiler ve altbilgiler gibi tüm şablon parçalarını kaydettiğiniz yerdir. Dizin, Sayfa, Gönderi gibi herhangi bir geleneksel şablon - WordPress'in genel olarak tanıdığı şablonlar - buraya koymanız gerekmez, yalnızca özel olanları ve tabii ki kendi şablon parçalarınızı koyun.

Ancak theme.JSON'un özü, ayarlarınız ve stil bölümünüzdür. Yani önce ayarlara bakarsak, burada çok şey oluyor. Ve yine, bu çok kısaltılmış. Ancak üst kısım genel ayarlardır. Bunlar, tüm sitenizdeki Site Düzenleyiciyi ve Düzenleyiciyi etkileyen ayarlardır. Bunlar, kenarlık, renk ve tipografi gibi şeyleri içerir. Burası, temanız için renk paletini, temanız için tipografi ayarlarını, yazı tiplerini vb. ayarlayacağınız yerdir.

Ayrıca, örneğin tüm siteniz için bir renk paleti ayarlayabileceğiniz, ancak daha sonra daha küçük bir renk paleti ve örneğin paragraf bloğu veya düğmeler bloğu için tamamen farklı bir renk paleti ayarlayabileceğiniz blok seviyesi ayarlarımız da vardır. Bu nedenle, büyük miktarda esneklik sağlar, ancak ayarlar, Editör veya bir blok içinde bir kullanıcının hangi özellikleri kullanabileceğidir.

Yani yine renge bakarsak, burada paletimizi tanımlamış oluyoruz. Bir ön plan rengimiz, bir arka plan rengimiz ve ardından birincil, siyah, beyaz ve bir tür orman yeşili var. Ve sonra Editör'e girersek, renk seçicimiz açıldığında, kullanıcının seçebileceği renklere sahip olduğumuzu görebiliriz.

Şimdi stile geçelim. Yani stiller temel olarak CSS'niz gibidir. Geleneksel olarak, tüm CSS'nizi bir styles.CSS dosyasına veya başka bir kuruluma eklersiniz. Ancak theme.JSON'un stiller bölümü, tüm temanız boyunca blok düzeyinde ve ayrıca genel düzeyde stil belirlemenize olanak tanır. Bunları varsayılanlar gibi düşünün, değil mi, çünkü Düzenleyici - asıl mesele, kullanıcıların oraya girip değişiklik yapmaya ve değişiklik yapmaya başlayabilmeleri ve blokları kullanarak sitelerini istedikleri gibi tasarlayabilmeleridir.

Ancak bir varsayılan olması gerekir ve bunlar theme.JSON'un stil bölümünde ayarlanır ve bu varsayılandır. Yani yine, global renklerimiz, global tipografimiz gibi global stillere sahibiz ve daha sonra stilleri blok düzeyinde de ayarlayabiliriz. Global stillerle ilgili olan şey, temamızın arka plan rengini burada ayarlayacağımız yer. Başlıklarımız için yazı tipi boyutlarını, bağlantılar, metin ve başlıklar için farklı tipografi seçeneklerini ve bu tür şeyler için ayarlayacağımız yer burasıdır. Ve blok seviyesinde, aynı şeyi özellikle bloklar için yapabiliriz.

Şimdi, az önce bahsettiğimiz ayar bölümüyle ilgili güzel şeylerden biri, ne zaman bir ayar oluştursanız, WordPress'in bir değişken tanımlayacağıdır. Bu renk paletine bakarken arka plan, ön plan ve birincil tanımını yaptık. WordPress aslında, birincil, ön plan, arka plan için ayarlanmış olan onaltılık kod ne olursa olsun, o onaltılık kodla eşleşen bir değişken üretecek.

Stillerde, bu değişkenleri hem genel hem de blok düzeyinde stiller için stilleri tanımlamak için kullanabiliriz. Bunun yararı, eğer bir kullanıcı arka plan rengini değiştirirse, bu, theme.JSON'daki stil belirtiminden geçecektir. Şimdi blok bölümüne bakacak olursak, burada buton bloğumuz var ve bunu bir tema tasarımcısından aldık.

Düğmelerimin bir miktar beyaz metinle varsayılan yeşil rengine sahip olmasını istedim. Görüyorsunuz ki buton bloğunun renk bölümünde arka plan rengini şu birincil yani orman yeşili olarak tanımlıyoruz ve metnimizi de beyaz olan arka plan olarak tanımlıyoruz. Böylece, bloklarımız ve sitenin kendisi için stiller tanımlamak üzere theme.JSON boyunca bu değişkenleri kullanabiliriz.

Şimdi, bu, daha önce ima ettiğim küresel tarzlarla bağlantılı. Site Editörüne geri dönersek, üstteki bu küçük iki tonlu daireye tıklarsak, global stiller panelimizi açacağız. Şimdi, burada çok şey oluyor, bu yüzden nasıl çalıştığına dair hızlı bir gösteri yapacağım. Ancak, 2022 temasını veya başka bir blok temasını indirmenizi ve küresel stilleri gerçekten keşfetmenizi tavsiye ettiğimi bilin.

Buraya atlar ve renklere bakarsak, buna tıklayın, şimdi temanın sağladığı renk paletinin ve arka planımız, metin ve bağlantılar gibi bazı farklı öğelerin orada olduğunu görebiliriz. . Şimdi, burada baktığımız bu panelde, sitenin global öğelerini düzenliyoruz. Yani mesela sitenin arka planından bahsetmiştik. Şu anda, beyaz. Yani Background'a tıklarsam buraya gelebilirim ve beyaz olarak seçildiğini görebilirim. Bu, theme.JSON'da ayarladığımız renktir.

Peki ya bu şeftali rengini gerçekten seviyorsam? Pekala, tek bir tıklama ile tıklayabilirim ve işte başlıyoruz. Sitemizin fon rengimiz artık şeftali. Bu, kullanıcıya sitelerini ihtiyaçlarına göre tamamen değiştirmesi için benzeri görülmemiş bir kontrol sağlar. Ancak yine de theme.JSON, bir tema geliştiricisi olarak kullanıcıya sağladığınız varsayılanı sağlıyor ve ardından kullanıcı bunu oradan alabilir.

Bu, tam site düzenlemesine ve Site Düzenleyicisine ve blok temalarına çok kısa bir genel bakıştı. Ama biraz zaman ayırıp modern temanın geleceği hakkındaki düşüncelerimden bahsetmek istiyorum. Dolayısıyla, modern temayı düşündüğümüzde, modern temanın geliştirme yerine tasarımı vurgulayacağına inanıyorum. Şimdi, tema tasarlamanın her zaman tasarımla ilgili olduğunu düşünebilirsiniz.

Ancak geleneksel tema geliştirmeye geri dönerseniz, yapılması gereken pek çok gerçek kodlama vardı. Tüm şablon dosyaları PHP'ydi ve bu, yapılması ve doğru yapılması için önemli miktarda WordPress bilgisinin yanı sıra PHP geliştirmeyi gerektiriyordu. Bu biraz değişiyor. Artık Editör ile temaları doğrudan Site Düzenleyicinin kullanıcı arayüzünde ve geleneksel düzenleyicide tasarlayabileceğinizi görüyoruz.

Ve bu, temaları nasıl tasarladığımızda önemli bir rol oynayacak. Bu yüzden WP Engine'in geliştirici savunucusuyum ve ekibimizde Frost adında deneysel bir tema oluşturuyoruz. Ve yeni bir desen oluşturduğumuzda veya bir şablonu değiştirmek istediğimizde, dosyalara girip dosyaları değiştirmiyoruz. Site Düzenleyicisine giriyoruz veya Düzenleyiciye girip bu modeli değiştiriyoruz veya bir model oluşturuyoruz veya bir şablon oluşturuyoruz. Ve sonra bundan memnunuz, sonra onu dışa aktarıyoruz ve ardından temaya koyuyoruz.

Yani aslında kodlama yapmıyoruz. Aslında her şeyi görsel olarak yapıyoruz. Ve bunun yararı, bir kullanıcının, temayı kullanacak kişilerin, aynı zamanda orada kalıpta veya şablonda ince ayar yapacaklarını bilmemizdir. Ve bu nedenle, temayı oluştururken, bir kullanıcının temayı kullanmak için yapacağı işlemin aynısını yapıyoruz ki bence bu biraz büyülü.

Ve bu, düşük kodlu veya hatta kodsuz bir tema geliştirme yöntemine yol açacaktır. Şimdi, elbette, bir geliştirici konferansındayız, değil mi? Ve böylece kod yok ve düşük koddan bahsediyoruz. Ama son nokta, gelişimin nerede olduğunu düşündüğüm hakkında konuşacağız. Ama bence bu gerçekten heyecan verici çünkü bu yeni nesil kullanıcıları getirecek, kendi temasını oluşturmak, kendi temasını özelleştirmek isteyen insanlar, ama belki PHP bilmiyorlar, belki JavaScript bilmiyorlar .

Artık bunların hepsini, yayınlamayı demokratikleştiren WordPress'in bir tür ahlakı olduğunu düşündüğüm Site Düzenleyicisi içinde yapabilirler. Ve tam site düzenlemesinin gerçekten buna yönelik olduğunu düşünüyorum. Ve son iki yılda veya geçen yıl, açıkçası, tam site düzenlemede böyle bir ilerleme gördük. Oldukça heyecan verici oluyor. Bu nedenle, tam site düzenlemenin geleneksel WordPress'in geleceği olduğuna gerçekten inanıyorum.

Şimdi, herkes için olmayabilir. Bunu çok açık bir şekilde belirtmek istiyorum. Ve hala ihtiyaç duyulan birçok gelişme var. Dolayısıyla, WordPress kullanan farklı insan türlerinden bahsettiğimizde, standart kullanıcıdan ajanslara kadar her şeye sahibiz. Ve ajanslar, müşterilerinin web sitelerini kullanması ve üzerinde çalışması için çok temiz, çok yapılandırılmış bir arayüz sağlamak isteyebilir. Bu tam site düzenlemesi olmayabilir. Bence sorun değil.

Ancak ekonomide gördüğümüz gibi, Squarespace, Wix ve Element veya başka sayfa oluşturucularımız var. Web topluluğunda, kendi sitelerini düzenlemelerine ve tasarlamalarına izin veren ve onları güçlendiren bir araç isteyen çok sayıda kullanıcı var. Ve WordPress'in WordPress'te, özellikle de Core'da gerçekten eksik olduğunu düşünüyorum. Ve bence tam site düzenlemenin amacı bu ve tam site düzenlemenin bir nevi vaadi bu.

Yapacak çok şey var. Hala yapılacak bir ton şey var. Hâlâ çözmemiz gereken pek çok şey var, yani duyarlı kontroller ve kullanıcı arayüzünün farklı bileşenlerini nasıl kısıtlayacağımız, böylece belirli kullanıcıların tasarımları bozmamaları veya yapmamaları gereken şeyleri değiştirmemeleri gibi şeyler. Hâlâ çözülmesi gereken çok şey var.

Ancak gerçekten heyecan verici olduğunu düşündüğüm alanlardan biri, tam site düzenlemesi için geliştirme yapmaktır. Kullanıcıların kendi temalarını tasarlamalarına veya kendi sitelerini tasarlamalarına olanak tanıyan bu araca sahip olduğumuza göre, bunu bir sonraki aşamaya nasıl taşıyabileceğimizi düşünmeye başlamamız gerekiyor. Geliştiriciler olarak, bunun üzerine nasıl inşa edebiliriz? Geleneksel WordPress'e geri dönersek, widget ekranını, yani genel olarak widget'ları ele alalım. WordPress, çok temel düzeyde widget ve işlevsellik sağladı ve geliştiriciler dışarı çıktı ve her türlü uzantıyı oluşturdu.

Ve aynı fikrin tam site düzenlemeye uygulanması gerektiğini düşünüyorum. Şu anda, tam site düzenlemesinden gerçekten yararlanan ve onu bir sonraki seviyeye taşıyan çok az sayıda uzantı ve eklenti var. WordPress, tam site düzenlemesinde yinelemeye devam edecek ve bir noktaya ulaşacak. Ancak bu asla herkesin istediği her şeyi yapmayacak ve bence artık tam site düzenleme konusunda ciddileşmenin ve geliştiriciler olarak bunun üzerine inşa edebileceğimiz ve bu deneyimi gerçekten bir sonraki aşamaya taşıyabileceğimiz yolları düşünmeye başlamanın zamanı geldi. seviye.

Bu yüzden herkese dışarı çıkıp Gutenberg'i keşfetmesi, 2022 temasını denemesi ve kurması, blok geliştirmeyi öğrenmeye başlaması için meydan okuyorum. Niş bloklar için inanılmaz miktarda fırsat var. Ve kendi temanızı oluşturmayı deneyin. 2022'yi almayı deneyin. Değiştirmeyi deneyin. Temel temanızı oluşturmayı deneyin. Gerçekten eğlenceli ve bu şeyler için dışarıda çok fazla potansiyel var.

Bu yüzden orada durup katıldığınız için teşekkür etmek istiyorum. Ve gitmeden önce, gerçekten önemli olduğunu düşündüğüm birkaç kaynaktan bahsetmek istiyorum, özellikle de tam site düzenleme konusunda yeniyseniz ve daha fazlasını öğrenmek istiyorsanız bu sunum. Yani yine, tabii ki beni takip edebilirsiniz. Sürekli bu konuda tweet atıyorum.

Ancak birkaç kaynak var. Yani ilki Frost. Buna daha önce değinmiştim. Yani bu, WP Engine geliştirici ilişkilerinin inşa ettiği bir tema. Ve deneysel bir üründür. Ürün demeyelim. Bu, topluluğu blok temaların nasıl oluşturulacağı konusunda eğitmek için kullanmaya çalıştığımız bir deney. Yol boyunca öğreniyoruz. Yol boyunca pek çok değişiklik ve güncelleme yapıyoruz, WordPress ile güncel kalmaya çalışıyoruz, ancak bu harika bir kaynak. Ayrıca, yine 2022 teması, başlamak ve öğrenmek için harika bir yer.

Ardından, Learn WordPress'i takmak istiyorum. Bu, Learn.wordpress.org'dur. Wordpress.org'daki eğitim ekibi, bu kavramların çoğunu halka öğretmek ve getirmek için çok çalışıyor. Dolayısıyla, ilgileniyorsanız ve daha fazlasını öğrenmek istiyorsanız, burası harika bir yer. Orada sosyal öğrenme alanları da dahil olmak üzere atölyelerimiz ve her türden farklı içeriğimiz var. Bunlar haftalık olarak yapılır, burada farklı konulardan konuşuruz, bir bloğun nasıl kodlanacağına ve bir blok temasının nasıl oluşturulacağına dair derinlemesine incelemeler vb.

Ve sonra, elbette, geliştirmeyle ilgileniyorsanız, her zaman blok düzenleyici el kitabıyla başlayın. Orası başladığım yer ve çok fazla harika kaynak var. Ve son olarak, Gutenberg. Gutenberg'e aşina değilseniz, özellikle WordPress geliştirmeyle ilgileniyorsanız, Gutenberg'e aşina olmanızı tavsiye ederim. Tam site düzenlemesinin nasıl oluşturulduğunu, farklı blokların nasıl oluşturulduğunu ve bunu kendi iş akışlarınıza nasıl uygulayabileceğinizi keşfetmek için harika bir yerdir.

Bu yüzden katıldığınız için çok teşekkür ederim. Umarım bu sunumdan çok şey almışsınızdır ve tam site düzenlemeyi keşfetmeye devam etmeniz için teşvik edilirsiniz. Çok teşekkürler.