Nasıl Web Sitesi Bina Hızlandırmak için Blok Desenler Oluşturma

Blok kalıpları tüm WordPress kullanıcıları için büyük bir anlaşma 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', işlev () {

register_pattern ('NAME', [
'title' => __ ('TITLE'),
'içerik' =>
'DESEN'
]);
});

İki gün önce, bir video ile çıktım ve köşede gelen bu konsepti blog kalıpları olarak adlandırılan WordPress’e tanıttım. Şu anda biraz deneysel ve bu konuda gerçekten heyecanlandığım bir şey. Ve eğer zihninizi blok kalıplarının potansiyelinin etrafına sarırsanız, müşterileriniz varsa web sitelerini daha hızlı sunmanıza yardımcı olmak, onların daha fazlasını yapmasını sağlamak için potansiyelini görebilirsiniz. İnternet sitesi.

Size göstereceğim. Bu videoda nasıl bir blok kalıbı oluşturulacağı. Şimdi biraz teknik tarafta bazı şeyler yapacağız ve bunun teknik olmayanlar için WordPress kanalı olduğunu biliyorum, bu yüzden mümkün olduğunca basit hale getirmeye çalışacağım, ancak aslında bu blok kalıplarından birini oluşturmanın ne kadar basit olduğunu görecek.

Öyleyse devam edelim ve bir göz atalım. İşte, bu özelliğin yapımında yeni sürümü hakkında konuştuğu sayfa. Sadece sıradan insanlar için bir blok desen oluşturmak mümkün. Bu yüzden aşağı kaydırdığımda, bunun için bir çeşit şablon verir. Yani onunla ilgili tek şey özel işlev adı verilen bir şey yaratmak.

Ama endişelenme, herkesin yapmasını çok kolaylaştıracağım, ama bu küçük kod snippet’inin olduğu yer. Şimdi aşağıdaki video açıklamasında bir linkim olacak. Seni web siteme götürecek. Bunun nasıl yapılacağı hakkında da yazılı talimatlar alacaksınız. Kopyalayıp kendi web sitenize yapıştırabileceğiniz bu küçük kod snippet’i.

Tamam, ihtiyacımız olan şey bu. Bu Gutenberg için yeni bir özelliktir ve Gutenberg eklentisinin aktif hale getirilmesi gerekir, bu yüzden minimum 7.8 sürümüne ihtiyacınız olacak ve bu son zamanlarda ortaya çıktı. Şimdi, sonuçta olacak dört ila altı ay içinde, belki 2020 yazının sonunda bu varsayılan olarak WordPress’e dahil edilecek, ancak şimdilik bunu denemek istiyorsanız, ihtiyacınız olacak , Gutenberg eklentisini yüklemeniz gerekecek.

Yapabileceğiniz bir sonraki şey ve bu isteğe bağlıdır, bir çocuk temasına nasıl özel bir işlev ekleyeceğinizi bilmiyorsanız ve artık bir çocuk teması bile kullanmıyorsanız, bu ücretsiz eklentiyi kullanmak isteyebilirsiniz, ve bu en iyi ücretsiz eklentilerden biridir. Ben hiç rastlamak ki, ve buna kod parçacıkları denir. Ve bu, bu özel işlevi ve kullanımı çok kolay, yönetimi kolay bir şekilde eklememize izin verecek.

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

Tamam. Şimdi web siteme geçelim. İşte bir web sitesi. Her şey şu anda kuruldu. Ve bir eklentiyi nasıl kuracağınızı bilmiyorsanız, geçen gün birisi bana bir eklenti ve videoyu nasıl yükleyeceğinizi göstermediği için gerçekten kızdı. Eklentilere gidersiniz, yeni ekle’yi tıklarsınız ve tam burada bu eklentinin adını ararsınız ve ardından.

İndirin veya üzgünüm, şimdi yükle’yi tıklatıp etkinleştiriyorsunuz. Bu çok basit bir süreç. Bu yüzden yüklü eklentilerimi tıklayacağım ve Gutenberg’in yüklü olduğunu görebiliyorum ve bu isteğe bağlı kadans bloklarıydı ve işte kod parçacıkları. Bu yüzden devam edip kod snippet’lerini etkinleştireceğim ve şimdi burada etkinleştirildiğini görebilirsiniz.

Öyleyse devam edin ve kod parçacıklarını tıklayın ve bununla birlikte gelen bazılarını göreceksiniz. Ve işte bu geçiş anahtarı ve değiştirildi. Hepsi kapalı olarak ayarlanmıştır ve aslında varsayılan olarak birlikte gelenleri saklamanız gerekmez. Sadece buraya tıklayabilirsiniz ve hepsini silebilirsiniz, ancak zaten ilerledim ve buraya blok desen şablonu adı verilen bir tane ekledim.

Peki ne yapardın. Yeni ekle’yi tıklayın ve bu blok desen şablonunu size burada gösterdiğim küçük kod snippet’inde adlandırabilirsiniz, ancak web sitemde bunun değiştirilmiş bir sürümünü vereceğim. Sadece buraya kopyalayıp yapıştıracaksınız ve ardından değişiklikleri kaydet’e tıklayacaksınız.

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

Yani yapmak isteyeceğiniz şey sayfalara gitmek. Ve yeni ekle’yi tıkladığınızda buna ad vermek istersiniz. Aslında bu turdan kurtulmama izin verin. Bu blok kalıbını adlandırmak isteyeceksiniz ve bu sadece bu blok kalıbını oluşturacağımız yer. Şimdi, şu anda bir blok kalıbı oluşturmayacağım.

Size daha önce oluşturduğumu göstereceğim, ve bu. Tam burada. İşte benim oluşturduğum bir blok kalıbı. Bunun bu bölüm olduğunu görebiliyordunuz. Bu renkli arka planı var. Burada bir başlık, bazı alt başlıklar ve birkaç düğme var ve bir video koydum. Bu yüzden bunu benim blok kalıbım yapacağım, böylece sadece iki fare tıklamasıyla bunu web sitemdeki herhangi bir yere ekleyebilirim.

Yapacağım şey sağ üstte tıklamak, bu üç nokta var. Görmek biraz zor ve buna tıkladığınızda, burada kod editörü yazan bu seçenek var. Böylece kod düzenleyicisini tıklamak isteyeceksiniz ve daha sonra bu blogu bir blok kalıbı blog kalıbı haline getirmekle ilgili tüm kodu gösterir..

Tamam? Yani buraya tıklayacaksınız ve sonra hepsini vurgulamak için bilgisayarınızda kontrol a’yı tıklatacak veya a komutunu vereceksiniz. Ve onlar yeni yıl. Panonuza koyun. Bu yüzden ben C kontrolünü yapacağım. Şimdi panomda. Şimdi yapacağım buradan gideceğim. Aslında, bu görünümden çıkmak istiyorsanız, burada çıkış kodu düzenleyicisi yazan küçük bir X var ve şimdi bana normalde burada olduğu gibi gösterecek.

Tamam. İsterseniz 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 yayını için tam bir şablon olabilir. Tamam, şimdi beni blok düzenleyiciden çıkardığı w’nin olduğu yeri tıklayacağım.

Şimdi kod parçacıklarına geri döneceğim. İşte burada blok desen şablonunu oluşturduğum yer. Ben klonu tıklayacağım, ve şimdi bir klonu oluşturdu ve daha sonra başlığa tıklayarak onu düzenlemeye başlayacağım. Bu yüzden başlık için, bunu yönetmek için anlamlı bir başlık olarak değiştireceğim.

Bu yüzden benim için, sadece adlandıracağım. 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, hepsi küçük harf olmalı, boşluk veya korkak karakterler olmamalıdır.

Şimdi devam edip bir isim yazacağım. Video ile kahraman adını verdiğimi görebilirsiniz. Sonra, tam buraya bir başlık koymanız gerekiyor. Bu kelime başlığının yerini alıyoruz ve gösterilecek olan da budur. Blog bloğu kalıplarının değil, blog kalıplarının bir listesine bakıyorsunuz. Ve fark ederseniz, yapabilirsiniz, bu kolay addır, böylece boşlukları olabilir.

Oraya sadece korkak karakterler koymaydım. Alanlar iyi. İşte bu listede a ve bir sonraki bölümde a deseninin gösterildiği yer budur. Sadece panonuza kopyaladığınız şeyi yapıştıracaksınız. Şimdi bir şeyi not etmenizi istiyorum. Bunların her biri için. Ön ve arkadaki küçük kesme işaretini bıraktım.

Orada olması gereken kesme işareti olduğunu görüyorsunuz. Yanlışlıkla çıkarırsanız, hemen geri koyun. Tamam. Sadece değişiyoruz. Sadece metin yer tutucusunu değiştiriyoruz. Bu yüzden burada her şeyi değiştirmek istemiyorum. Sadece kelime kelimesini değiştirmek istiyorum, bu yüzden onu vurgulayacağım ve sonra kopyaladığım şeye yapıştıracağım.

Ve işte burada. Şimdi aşağı kaydırıyorum ve bu sefer değişiklikleri kaydet ve etkinleştir’i tıklayacağım. Ve şimdi snippet’in güncellendiğini ve etkinleştirildiğini söylemelidir. Ve tüm parçacıkları tıkladığımda, şimdi video içeren bu bir kahramanın açık olduğunu görebiliyordunuz. Gelecekte ek blok kalıpları için, blok kalıp şablonu yazan yere gitmek ve klonu tıklamak ve bu blok kalıp şablonunu bu şekilde yapmak istiyorum.

Bu şekilde hep orada şablon var. Şimdi, zaten biliyorsanız ve özel işlevler eklemek için kendi yolunuz varsa, kod snippet’lerine ve tüm bu tür şeylere ihtiyacınız yoktur, onu koymak istediğiniz yere koyabilirsiniz. Bana sorarsanız, bunu yönetmenin çok daha kolay bir yoludur. Tamam, şimdi yeni ekle tıklamamdaki sayfalara gideceğim ve.

Blok kalıpları. Ah, tam da bunun simgesi. Üzerine geldiğinizde blok kalıpları yazıyor. Ve üzerine tıkladığımda, şu anda denenmekte olan bazı blok kalıplarını görüyorsunuz. Ancak aşağı kaydırdığınızda, oluşturduğum blok desenini göreceksiniz. Ve gerçekten düzgün olan şey, küçük resim önizlemesi oluşturmasıdır.

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

Tam buraya tıklayabilirim ve videoyu değiştirebilirim. Yani. Bir blok kalıbı bu şekilde oluşturulur. Şimdi bu çok önemli, bence çünkü olacak 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şmesi yok. Bunların hiçbiri yok ve. Daha da ileriye götüren şey. Kendi blok kalıplarınızı oluşturmanın ne kadar kolay olduğunu görebilirsiniz ve bunu bir listede görmek gerçekten kolaydır. 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..

Dolayısıyla, istemciler için web siteleri oluşturursanı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. Ah, siteden siteye taşıyabileceğiniz kendi blok kalıp kitaplığınızı oluşturabilir ve müşterinize bunu nasıl geliştirebileceklerini gösterebilirsiniz.

Şimdi, bu sadece sayfalar için değil, bu yazılar için ve sadece gördüğünüz bir bölümle sınırlı değil. Temelde bir sayfada oluşturabileceğiniz her şey. Bir blok deseni yapabilirsiniz. Blok oluşturucuyu yalnızca blog yayınları için kullanıyorsanız ve blog yayınlarının düzenini geliştirmek için bir blog yayınında tekrar tekrar kullanmak istediğiniz belirli öğeler varsa, o.

Ve gerçekten çok kolay. Tek bir tıklama ile kullanabilirsiniz. Aslında, tüm blog yazı şablonları. Dolayısıyla, bir blog gönderisinin bölümleri için izlediğiniz bir formül varsa, tüm blog gönderisini bir blok şablonu yapabilirsiniz. Tek bir tıklama uygulanır ve sonra tek yapmanız gereken nokta, tıklama ve düzenleme.

Bu yüzden buraya gelmeden önceki son şey, bu yeni bir kavram ve önümüzdeki birkaç ay içinde düşünülmesi gereken bir şey. Şimdi deneyin. Çok Yeti değil, Yeti. Başbakanlık için hazır değil çünkü fark ederseniz, gördüğüm tek olumsuz blog’a bakarken. Oraya tekrar bakıyorum.

Blok kalıplarına bakıyorsanız, sadece kaydırmanız gereken daha yüksek bir makale listesidir, bu yüzden kategorilere ayırma ve düzenleme sürecini geliştirmeleri gerekir. Belki de daha görsel ve çalışılması kolay bir arayüze sahipler. 50 farklı bloğunuz olacaksa.

Desenler. Yani bunu iyileştirmeleri gerekiyor. Ve koddaki bazı sözdizimi biraz değişebilir. Sonunda ne zaman ortaya çıktığını kim bilebilir. Ancak bu videonun asıl amacı, başlayabilmeniz için çok, çok yakında neyin mümkün olacağını 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 senin için sahip olduğum tek şey bu. Umarım WordPress’in geleceğine yönelik gelişmiş görünümleri takdir edersiniz ve bu videoyu takdir ettiyseniz veya bir değer bulduysanız, bir başparmak vermeyi düşünün ve insanların köşede ne olduğunu görebilmeleri için bu videoyu paylaşın.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector