Bloklar oluşturmak için yeni geliştirici kılavuzu
En son WordPress gelişmelerini takip ederseniz, Block Editor’un indiğini bileceksiniz. Bu, blok tabanlı bir sistemle bir darbe alır, ancak yine de görmek istediğimiz birçok seçeneği kaybeder. Geliştirici yeni bir blok tabanlı eklenti yayınladığında, ihtiyacınız olanı bulmak daha kolay olacaktır. Ancak, şimdilik manzara oldukça boş. Başka bir deyişle, Block Düzenleyicisine belirli işlevler eklemek istiyorsanız, kendi bloğunuzu nasıl oluşturacağınızı öğrenmeniz gerekebilir. Bu çok zor değil ve bloğu istediğiniz yere sitenize özel özellikler eklemek için kullanabilirsiniz. Biraz cila ile, bunu halka açık bir eklenti olarak serbest bırakabilir ve ileriye dönük editörlerin gelişimini teşvik etmeye yardımcı olabilirsiniz.
Bu yazıda, blok sisteminin nasıl çalıştığını kısaca gözden geçireceğiz. O zaman size web siteniz için özel bir blok oluşturmanın en etkili yolunu öğreteceğiz. Hadi çalışalım! Yeni Blok Sistemine Giriş
Kutunun dışında, blok düzenleyici, temel web sitesi tarafından ihtiyaç duyulabilecek öğelerin çoğunu içerir. Bununla birlikte, WordPress imalatla ilgilidir ve birçok karmaşık ve benzersiz site oluşturmak için kullanılır. Bu nedenle, bir eklenti kullanarak editöre ekleyebileceğiniz birçok özel blok olması şaşırtıcı değildir. Şimdiye kadar, en sevdiğimiz özel blok eklentilerimizden bazıları atomik bloklar ve istiflenebilir yer alıyor. İkisi arasında, oynamak için düzinelerce yeni unsurunuz olacak. Bununla birlikte, hala web siteniz için ihtiyacınız olan doğru bloğu bulamayabilirsiniz, yani kendiniz yapmanız gerekebilir. Çoğu JavaScript kullanılarak oluşturulmuş 5 adımda blok nasıl yapılır. Hazırlamak için kaydedmelisiniz, özniteliği (başka bir deyişle, bloğun ne yaptığını) yapılandırmalı ve şablonu yapmalısınız. Süreç her zaman karmaşık değildir, ancak biraz dağınık olabilir. Bu nedenle, özellikle WordPress’in geliştirilmesinde yeniyseniz, temel bilgileri hazırlamanıza yardımcı olacak araçların kullanılmasını öneririz. Adım 1: Blok düzgün çalışması için Boiler Plakasını seçin, blok birkaç anahtar dosyaya bağlıdır. Manuel olarak ayarlamak yerine, işlemden geçmenize ve bloğunuzun ne yapacağını hemen yapılandırmanıza izin veren bazı araçlar vardır.
İlk olarak, komut satırı arayüzü (CLI) aracı olan Create-Guten-Block vardır. Bununla birlikte, ihtiyacınız olan proje yapısını üretecek basit bir komut kullanarak eklenti olarak yeni bir blok ayarlayabilirsiniz:
Yönetici arayüzünü kullanmayı tercih ederseniz, Block Lab eklentisini de öneririz. Bu araçla, yeni bir blok oluşturabilir ve WordPress kontrol panelinizden ayrılmadan her şeyi ayarlayabilirsiniz: Bir blok laboratuvarıyla, her şeyi hazırlamak için hala bazı kodlamalar yapmanız gerektiğini unutmayın. Bununla birlikte, bu hala blok yapınızı en baştan oluşturmaktan çok daha kolay bir süreçtir. Bu öğreticinin geri kalanı olduğu sürece, en fazla kullanıcı dostu deneyimi sağladığı için Block Lab eklentisine odaklanacağız. Bu nedenle, daha fazla uzatmadan, ilk özel bloğunuz üzerinde çalışmaya başlayalım. Adım 2: Eklentiyi yükledikten ve etkinleştirdikten sonra yeni bir blok hazırlayın, yeni Block Lab sekmesi gösterge tabloınızda görünecektir. Üzerine tıklayın ve yeni eklenen seçeneği seçin. Bir sonraki ekranda, bloğunuzla ilgili sümüklü böcekleri, simgeleri ve anahtar kelimeleri ayarlayabilirsiniz: Ayrıca yeni bloğunuzun hangi kategoriyi listeleyeceğini de seçebilirsiniz. Burada yaptığınız herhangi bir seçimin bloğunuzun gerçek işlevselliğini etkilemeyeceğini unutmayın, bu yüzden lütfen eğlenin. Bu öğreticinin amaçları doğrultusunda, müşteri referanslarını görüntülemek için bir blok oluşturacağız.
İşiniz bittiğinde, önce bloğunuzda değişiklik kaydetmeyin. Bunun yerine, bir sonraki adıma devam edin. Adım 3: Bloğunuzun çekirdek alanını yapılandırın Her blok alanlardan oluşur, böylece şimdi birkaç tane eklemeniz gerekir. Bunu yapmak için Alan Ekle düğmesini tıklayın:
Referans bölümü üzerinde çalıştığımız için, bloğumuza, biri metin ve diğeri resim için iki alan ekleyeceğiz. Bu şekilde, her ifadeye görüntü eşlik edebilir. Metnin metnini ayarlamak için, tek yapmanız gereken alan için etiketi girmek ve türü seçmektir: bunun altında, alanınız için yardım metninden bazılarını ve varsayılan değer, yer tutucusu da ayarlayabilirsiniz. metin ve karakter sınırı:
Bu özel eklenti hala erken aşamalarda olduğundan, bu eklenti görüntüler için özel bir alan içermemiştir. Ancak, URL’yi alan gerilme türünden seçerseniz, sorundan kolayca kaçınabilirsiniz:
Bu noktada, alanınız hazır. Öyleyse devam edin ve yeni bloğunuzu kaydedin. Yayın düğmesine bastıktan sonra, bunun gibi mesajlar widget şablonunun altında görünecektir: Şu anda, yeni bloğunuz WordPress’te kayıtlı. Ancak, bunun için bir sonraki bölümde yapacağımız bir şablon dosyası oluşturmanız gerekir. Adım 4: Bloğunuz için bir şablon dosyası oluşturun Bloğunuz saklandıktan sonra Block Lab eklentisi uygun bir şablon dosyası arar. Bu durumda, dosyayı/yirmideninteen/block-testimonial.php dizininde arayacaktır, çünkü bloklarımız için seçtiğimiz isim budur. Şu anda, dosya henüz mevcut değil. Bu yüzden güvenilir metin düzenleyicinizi açıp düzeltmenin zamanı geldi. Şablon dosyası bloğunuz için temel bir yapı sağlar ve bunlar istediğiniz kadar basit veya karmaşık olabilir. Her şeyi basit tutmak için bu bizim görünümümüzdür: Tek yaptığımız, biri görüntüler için diğeri metin için, bireysel sınıflara sahip iki kap hazırlamaktır. Şimdi, Block-Testimonial.php dosyamızı kaydedebiliriz ve blok teknik olarak işe yarayacaktır. Ancak, birkaç CSS kullanarak düzenlemediğimiz sürece güzel görünmeyecektir. Bunu yapmak için çocuğunuzun tema tarzı sayfasını kullanmak isteyeceksiniz. Tabii ki, ışın size tamamen nasıl organize edilir! Kaçırmayı bitirdikten sonra, son adım bloğunuzun iyi çalıştığından emin olmaktır. Adım 5: Yeni blok testiniz yeni bloğunuzu test etmeye hazır olduğunuzda, herhangi bir gönderi veya sayfa için blok düzenleyiciye devam edin ve açın. Ardından, yeni bloğunuzu daha önce seçtiğiniz kategoride bulun. İşte görünüşümüz: Bir sonraki adım her iki alanı doldurmak ve bloğun ne olduğunu görmektir:Özel bloğunuzu organize etmeye nasıl karar verdiğinize bağlı olarak kilometreniz değişebilir. Ancak, biraz zaman ve ayarlama ile ilginç ve işlevsel bir şey toplayabilirsiniz. Yeni düzenleyiciye bir blok eklemek, eklentiler yapmaktan tamamen farklı bir deneyimdir. Bloğunuzdan maksimum sonuç elde etmek için JavaScript’e aşina olmalısınız. Bununla birlikte, iyi haber şu ki, Create-Guten-Block ve Block Lab gibi yeni bloklar yapma sürecini basitleştirmek için kullanabileceğiniz birçok ilginç araç var. Şimdiye kadar, Block Lab en çok kullanıcı dostu yaklaşımı sunuyor, çünkü sadece beş adımda özel bir blok oluşturmanıza izin veriyor:
Bir su ısıtıcısı plakası hazırlayın.
Yeni bir blok oluşturun. Bloğunuzun çekirdek düzlemini yapılandırın. Blok şablon dosyanızı oluşturun. Yeni blok testiniz.
Blokların nasıl çalıştığı hakkında sorularınız var mı?Aşağıdaki yorumlar bölümünde onlar hakkında konuşalım!Kredi görüntüsü: Pixabay.
