Web Sitesi Oluşturmayı Hızlandırmak İçin WordPress Blok Kalıpları Nasıl Oluşturulur

Blok kalıpları tüm WordPress kullanıcıları için çok önemli olacak ve bu yazıda size tam olarak kendi blok kalıplarınızı nasıl oluşturacağınızı göstereceğim.

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

İki gün önce bir video ile karşıma çıktı ve blog kalıpları adı verilen WordPress'in hemen köşesinde gelen bu konsepti tanıttım. Şu anda biraz deneysel ve bu konuda gerçekten heyecanlandığım bir şey. Ve bence, blok kalıpların ne olduğu potansiyeline odaklanırsanız, müşterileriniz varsa web sitelerini daha hızlı teslim etmenize yardımcı olmak, onların kendileriyle daha fazlasını yapabilmelerini sağlamak için potansiyelini görebilirsiniz. İnternet sitesi.

Bu yüzden sana göstereceğim. Bu videoda tam olarak bir blok kalıbı nasıl oluşturulur. Şimdi biraz teknoloji tarafında olan bazı şeyler yapacağız ve bunun teknisyen olmayanlar için WordPress kanalı olduğunu biliyorum, bu yüzden bunu olabildiğince basitleştirmeye çalışacağım, ama siz sonunda bu blok modellerinden birini yaratmanın ne kadar basit olduğunu göreceğiz.

Öyleyse devam edelim ve bir göz atalım. İşte bu özelliğin yeni sürümünden bahsederken bunu yaptığı sayfa. Sadece ortalama insanlar için bir blok deseni oluşturabilir. Bu yüzden aşağı kaydırdığımda, bunun için bir tür şablon veriyor. Yani bununla ilgili olan tek şey özel işlev adı verilen bir şey yaratmak.

Ama merak etmeyin, herkesin yapmasını çok kolaylaştıracağım, ama bu küçük kod parçasının olduğu yer. Şimdi aşağıdaki video açıklamasında bir bağlantım olacak. Sizi web siteme götürecek. Bunun nasıl yapılacağına dair yazılı talimatlar da alacaksınız. Bu küçük kod parçacığını kopyalayıp kendi web sitenize yapıştırabilirsiniz.

Tamam, işte ihtiyacımız olacak şey. Bu, Gutenberg için yeni bir özelliktir ve Gutenberg eklentisinin etkinleştirilmiş olarak yüklenmesine ihtiyacınız olacak, bu nedenle minimum 7.8 sürümüne ihtiyacınız olacak ve son zamanlarda ortaya çıkan da bu. Şimdi, belki dört ila altı ay içinde olacak, belki 2020 yazının sonunda bu varsayılan olarak WordPress'e dahil edilecek, ancak şimdilik, bunu denemek istiyorsanız buna ihtiyacınız olacak. , Gutenberg eklentisini yüklemeniz gerekecek.

Yapabileceğiniz bir sonraki şey ve bu isteğe bağlıdır, bir alt temaya nasıl özel bir işlev ekleyeceğinizi bilmiyorsanız ve artık bir alt tema kullanmıyorsam, bu ücretsiz eklentiyi kullanmak isteyebilirsiniz, ve bu en iyi ücretsiz eklentilerden biridir. Şimdiye kadar rastladığım ve buna kod parçacıkları deniyor. Ve bu, bu özel işlevi ve kullanımı çok kolay, yönetimi kolay bir şekilde eklememize izin verecek.

Peki? Yani buna ihtiyacın olacak. Ve bu isteğe bağlıdır. Bu, kadans blokları adı verilen ücretsiz bir eklentidir. Bunun yaptığı şey, Gutenberg'e çok sayıda sayfa oluşturucu işlevi eklemesidir. Yapmanıza izin verdiği şeyde oldukça temiz. Sütunları sürükleyip yeniden boyutlandırabilirsiniz. Bu sayfa oluşturucu işlevselliğinin çoğunu Gutenberg'e ekleyen birçok öğe var ve bu tamamen ücretsiz bir eklenti.

Peki. Şimdi web siteme geçelim. Yani burada bir web sitesi var. Şu anda her şey ayarlandı. Ve eğer bir eklentiyi nasıl kuracağınızı bilmiyorsanız, geçen gün birisi bir eklentinin ve bir videonun nasıl kurulacağını göstermediğim için bana çok kızdı. Eklentilere gidiyorsunuz, yeni ekle'ye tıklıyorsunuz ve tam burada o eklentinin adını aratıyorsunuz ve ardından tıklıyorsunuz.

İndirin veya üzgünüm, şimdi yükle'yi tıklayın ve ardından etkinleştirin. Bu çok basit bir süreç. Bu yüzden kurulu eklentilerime tıklayacağım ve Gutenberg'in kurulu olduğunu görebilirsiniz ve bu isteğe bağlı kadans bloklarıydı ve işte kod parçacıkları. Bu yüzden devam edeceğim ve kod parçacıklarını etkinleştireceğim ve şimdi burada etkinleştirildiğini görebilirsiniz.

Öyleyse devam edin ve kod parçacıklarına tıklayın ve beraberinde gelen bazılarını göreceksiniz. Ve işte bu açma/kapama düğmesi ve açık/kapalı. Hepsi kapalı konuma getirildi ve aslında varsayılan olarak birlikte gelenleri saklamanıza gerek yok. Sadece buraya tıklayabilir ve hepsini silebilirsiniz, ama ben zaten devam ettim ve buraya blok desen şablonu adında bir tane ekledim.

Peki ne yapardın. Yeni ekle'ye tıklandığında ve bu blok kalıbı şablonunu size gösterdiğim küçük kod parçasında adlandırabilirsiniz, bu tam burada, ancak size bunun değiştirilmiş bir versiyonunu web sitemde vereceğim. Bunu buraya kopyalayıp yapıştıracaksınız ve ardından değişiklikleri kaydet'e tıklayacaksınız.

Kaydet ve etkinleştir'e tıklamayacaksınız, değişiklikleri kaydetmek için tıklayacaksınız ve birazdan size nedenini göstereceğim. Peki. Şimdi yapmak isteyeceğiniz şey bu blok desenini oluşturmak. Ve bir blok deseni sadece kaydedilmiş bir bölümdür. Yani bir sayfa oluşturucu kullanıyorsanız, artık bölümleri kaydedebileceğinizi biliyorsunuz ve bazıları önceden tasarlanmış bölümlerle geliyor, ancak kullanıcı deneyimi bence Gutenberg'de çok daha iyi.

Yani yapmak isteyeceğiniz şey sayfalara gitmek. Ve yeni ekle'ye tıklayın ve buna bir isim vermek isteyeceksiniz. Um, aslında bu turdan kurtulmama izin ver. Bu blok kalıbını adlandırmak isteyeceksiniz ve bu, tam da bu blok kalıbını oluşturacağımız yer. Şimdi, şu anda bir blok deseni oluşturmaya devam etmeyeceğim.

Size daha önce oluşturduğumu göstereceğim ve bu . Tam burada. İşte oluşturduğum bir blok deseni. Bu bölüm olduğunu görebilirsin. Bu renkli arka plana sahiptir. Bir başlığım, bazı alt başlıklarım ve birkaç düğmem var ve buraya bir video koyuyorum. Bu yüzden bunu blok kalıbım yapacağım, böylece sadece iki fare tıklamasıyla bunu web sitemin herhangi bir yerine ekleyebilirim.

Şimdi yapacağım şey, sağ üst köşeye tıklamak, bu üç nokta var. Bunları görmek biraz zor ve buna tıkladığınızda, tam burada kod düzenleyici yazan bir seçenek var. Yani kod düzenleyiciye tıklamak isteyeceksiniz ve ardından o blogu bir blok kalıp blog kalıbı yapmakla ilgili tüm kodu size gösterecek.

Peki? Yani burayı tıklayacaksınız ve ardından hepsini vurgulamak için bilgisayarınızda kontrol a'ya veya komut a'ya tıklayacaksınız. Ve onlar yeni yıl. Panonuza koyun. Bu yüzden C'yi kontrol edeceğim, bu yüzden şimdi panomda. Şimdi yapacağım şey buradan çıkmak. Aslında, bu görüşten çıkmak istiyorsanız, tam burada çıkış kodu düzenleyicisi yazan küçük bir X var ve şimdi bana normalde tam burada olduğu gibi gösterecek.

Peki. Yani isterseniz bunu taslak olarak kaydedebilirsiniz, ancak buna ihtiyacınız olmayacak. Bu sadece bu blok kalıbını yaratmanız içindir ve herhangi bir şey olan bir blok kalıbı oluşturabilirsiniz ve bunun tek bir blok olması gerekmez. Örneğin, bir blog yazısı için tam bir şablon olabilir. Tamam, şimdi beni blok düzenleyiciden çıkaran w'nin olduğu yere tıklayacağım.

Şimdi kod parçacıklarına geri döneceğim. İşte tam burada, o blok kalıbı şablonunu yarattım. Klon'a tıklayacağım ve şimdi onun bir klonu oluşturuldu ve ardından düzenlemeye başlamak için başlığa tıklayacağım. Bu yüzden başlık için, bunu yönetmek için mantıklı bir başlıkla değiştireceğim.

Bu yüzden benim için sadece adını vereceğim. Videolu bir kahraman. Şimdi gelecekte listeye baktığımda bunun ne olduğunu biliyorum. Tamam, burada düzenlemeniz gereken birkaç şey var. Üç şey. Çok basit. Birincisi isim. Yani bu herhangi bir isim olabilir, tamamı küçük harf olmalı, boşluk veya korkak karakterler içermemelidir.

Bu yüzden devam edeceğim ve hemen bir isim koyacağım. Video ile kahraman adını verdiğimi görebilirsiniz. Ardından, tam burada bir başlık girmeniz gerekiyor. Bu yüzden bu kelime başlığını değiştiriyoruz ve burada görünecek olan şey bu. Blog kalıplarının bir listesine bakıyorsunuz, blok blok kalıpları değil. Ve fark ederseniz, yapabilirsiniz, bu kolay isimdir, bu yüzden boşlukları olabilir.

Uh, oraya sadece korkak karakterler koymazdım. Boşluklar iyi. Bu liste a'da gösterilecek olan şey bu ve tam burada a deseninin yazdığı yer. Sadece panonuza kopyaladığınız şeyi yapıştıracaksınız. Şimdi bir şeyi not etmenizi istiyorum. Bunların her biri için. Önde ve arkada küçük kesme işareti bıraktım.

Orada olması gereken kesme işareti olduğunu görüyorsunuz. Yanlışlıkla kaldırırsanız, hemen geri koyun. Peki. Sadece değişiyoruz. Sadece metin yer tutucusunu değiştiriyoruz. Yani burada, her şeyi değiştirmek istemiyorum. Ben sadece kelime kalıbını değiştirmek istiyorum, bu yüzden onu vurgulayacağım ve sonra kopyaladığım şeyi yapıştıracağım.

Ve işte burada. Şimdi aşağı kaydıracağım ve bu sefer değişiklikleri kaydet ve etkinleştir'e tıklayacağım. Ve şimdi, snippet güncellendi ve etkinleştirildi demeli. Ve tüm parçacıkları tıkladığımda, artık videolu bu kahramanın açık olduğunu görebiliyordunuz. Bu yüzden gelecekte ek blok kalıpları için, blok kalıbı şablonu yazan yere gitmek ve klona tıklayıp o blok kalıbı şablonunu bu şekilde yapmak istiyorum.

Bu şekilde şablon her zaman orada olur. Şimdi, zaten biliyorsanız ve özel işlevler eklemek için kendi yolunuz varsa, kod parçacıklarına ihtiyacınız yoktur ve ve tüm bu tür şeylere, onu istediğiniz yere koyabilirsiniz. Bana sorarsanız, bu onu yönetmenin çok daha kolay bir yolu. Tamam, şimdi yeni ekle'yi tıkladığımda sayfalara gideceğim ve görmek isterseniz.

Blok desenleri. Uh, işte bunun simgesi. Üzerine geldiğinizde blok desenleri diyor. Ve üzerine tıkladığımda, şu anda denenmekte olan bazı blok kalıplarını görüyorsunuz. Ama aşağı kaydırdığınızda, oluşturduğum blok kalıbını göreceksiniz. Ve gerçekten düzgün olan şey, bir küçük resim önizlemesi oluşturmasıdır.

Ve bunu dinamik olarak yapar. Bunu bile yapmayan sayfa oluşturma araçlarınız var. Ah, ve blok kalıplarınızı yönetmenizi çok daha kolay hale getiriyor. Yani, burada gördüğünüz gibi, şablonlu kahraman yazıyor. Şimdi bunu web sitemin herhangi bir yerinde kullanmak istersem, bu tek bir fare tıklaması. Ve işte orada. Ve o noktada bazı metinleri değiştirmeye başlamak için yapmam gereken tek şey, düğmelerin bağlantılarını değiştirmek.

Buraya tıklayabilir ve videoyu değiştirebilirim. Yani. Bu şekilde bir blok deseni yaratırsınız. Şimdi bu büyük bir mesele, bence çünkü olacak şey bir tema. Geliştiriciler ve eklenti yaratıcıları, sizin için bu blok kalıplarını oluşturabilecekler, bu nedenle WordPress'in zaten içerdiği yerel blok oluşturma aracını kullanarak bir web sitesi oluşturmak çok daha hızlı, daha hızlı ve daha kolay olacak.

Satın alacak bir şey yok, kod şişkinliği yok. Bunların hiçbiri yok ve. Daha da ileri götüren nedir. Kendi blok kalıplarınızı oluşturmanın sizin için ne kadar kolay olduğunu görebilirsiniz ve bunu bir listede görmek gerçekten çok kolay. Bir düğmeye tıklayın ve oraya konur. Artık kendi blok kalıp kitaplığınız olduğunda bir web sitesi oluşturmanın ne kadar kolay olabileceğini düşünebilirsiniz.

Bu nedenle, müşteriler için web siteleri oluşturuyorsanız ve bir sayfa oluşturucu kullanmak istemiyorsanız. Sadece yerleşik blok oluşturucuyu kullanmak istiyorsunuz. Kendi desen kitaplığınızı oluşturabilirsiniz. Ne kadar kolay olduğunu gördün. Bunu yapabilirim. Yapabilirsin. Siteden siteye taşıyabileceğiniz kendi blok kalıpları kitaplığınızı oluşturabilir ve müşterinize bunu nasıl oluşturabileceklerini gösterebilirsiniz.

Şimdi, bu sadece sayfalar için değil, bu gönderiler için ve sadece gördüğünüz bölümle sınırlı değil. Temelde bir sayfada oluşturabileceğiniz her şey. Bir blok desen yapabilirsiniz. Dolayısıyla, blok oluşturucuyu yalnızca blog gönderileri için kullanıyorsanız ve blog gönderilerinin düzenini geliştirmek için bir blog gönderisinde tekrar tekrar kullanmak istediğiniz belirli öğeler varsa, bunun için bir blok kalıbı oluşturabilirsiniz. BT.

Ve gerçekten çok kolay. Tek bir tıklama ve onu kullanabilirsiniz. Aslında, tüm blog yazısı şablonları. Yani bir blog gönderisinin bölümleri için takip ettiğiniz bir formül varsa, o blog gönderisinin tamamını bir blok şablonu yapabilirsiniz. Bu tek tıklama uygulanır ve ardından tek yapmanız gereken işaret etmek, tıklamak ve düzenlemektir.

Bu yüzden burada bitirmeden önceki son şey, bu yeni bir kavram ve önümüzdeki birkaç ay içinde düşünülmesi gereken bir şey. Şimdi ile deney yapın. Tam olarak Yeti değil, Yeti. Prime time için pek hazır değil çünkü fark ettiyseniz, um, gördüğüm tek olumsuz şey bloga bakarken. Bak yine gidiyorum.

Blok kalıplarına bakıyorsanız, kaydırmanız gereken daha yüksek bir makale listesidir, bu nedenle kategorilere ayırma ve düzenleme sürecini iyileştirmeleri gerekir. Belki de onu daha görsel ve çalışmayı kolaylaştıracak bir ara yüzleri vardır. Eğer 50 farklı bloğunuz olacaksa.

desenler Bu yüzden sadece bunu geliştirmeleri gerekiyor. Ve koddaki bazı sözdizimleri biraz değişebilir. Bu nihayet ne zaman ortaya çıkar kim bilir. Ancak bu videonun tüm amacı, başlayabilmeniz için çok çok yakında neyin mümkün olacağını size göstermektir. İş akışınıza nasıl uygulanabileceğini ve bir web sitesi oluşturucu olarak ne yaptığınızı düşünmek.

Her neyse, bu yazıda sizin için sahip olduğum tek şey bu. Umarım WordPress'in geleceğine bu şekilde gelişmiş bakışları takdir edersiniz ve bu videoyu beğendiyseniz veya bir değer bulduysanız, beğenip bu videoyu paylaşın, böylece insanlar köşeyi dönünce neler olduğunu görebilirler.