WordPress Blok Deseni: Nedir & amp;Nasıl kullanılır
Yaklaşık bir yıl önce bir müşteri benden birçok karmaşık bileşen ve özelliği olan bir web sitesi oluşturmamı istedi ve onları etkileyecek bir şey yapmaya çalışarak saatler geçirdim.Birçok kahve fincanı ve daha sonra sinirli sert sözler, şaşırdım, ama aynı zamanda temanın yazarının daha kolay bir anlaşmaya sahip olduğunu umuyorum – tüm bu hayal kırıklığı olmadan karmaşık bir bileşen kombinasyonu oluşturmanın daha iyi bir yolu.Ağustos 2020’de, WordPress blok deseninin 5.5 sürümü ile tanıtılması farklı bir dünya yaptı, eminim, tüm WordPress tema geliştiricilerinin hayatları.
Blok desenleri veya blok şablonları ve bilinen blok, web sitelerinin gelişimini önemli ölçüde basitleştirin. Bir temanın nasıl inşa edildiğine yüksek düzeyde zeka eklediler. Ve kullanıcının bakış açısından, tema demosu artık sadece elde edilemeyen bir tasarım örneği değil. Daha da iyisi, blok deseni widget’lar, kısa kodlar, sayfa şablonları ve tema seçenekleri gibi önceki seçeneklerle ilgili ana engellerin çoğunu ortadan kaldırır. Basitçe söylemek gerekirse, daha iyi ve daha kolay bir web sitesi tasarımına giden yol döşendi. WordPress blok deseni nedir? Önceden belirlenmiş bir WordPress blok düzenine sahip olduğunuz ve dahil edilmeye hazır bir dünya hayal edin. Bu dünyada, karmaşık bir düzen oluşturmak için sadece birkaç çaba vardır – belki sadece birkaç düğme tıklamasıyla -. Tasarım becerilerinizi serbest bırakmak istiyorsanız, bu düzenin çekirdeğini girebilir ve kendi eşyalarınızı yapabilirsiniz. WordPress Paradise gibi geliyor mu? Peki, WordPress blok deseni ile kastedilen şey budur! Önceden belirlenmiş düzenlemelere sahip sayfa öğeleri oluşturmak için WordPress bloklarını birlikte gruplamanın bir yoludur.
Bu kavramın özü, eklentilerin ve temaların daha önce yapılan blokları ve parçaları kullanabileceği fikridir.Bu nedenle, sayfaya tek tek blok eklemek yerine, mevcut blok kitaplığına, düğmenizin yalnızca birkaç tıklamasıyla yayınınıza ve sayfanıza ekleyebileceğiniz bir dizi desen veya düzen ile erişebilirsiniz.Bu, önceki tüm sayfaları ve temaları ayarlamayı mümkün kılar, hatta karmaşık tasarımları basitleştirir.Bir blok deseni kullanmaya başlamak için Gutenberg eklentisini kurmanız ve etkinleştirmeniz gerekir.Özel bloklar kadar karmaşık veya sofistike olmadıkları için kullanımı çok daha kolaydır.Bir WordPress uzmanıysanız oldukça sınırlı olan mevcut WordPress blok modelleri bulabilirsiniz, ancak iyi haber, desenin ayarlanabilmesidir.
WordPress blok desenlerini kullanmanın faydaları nelerdir? WordPress blok deseniyle ilgili Rave, tema geliştiricisinin perspektifinden en alakalı faydalar hakkında konuşarak devam edelim. İnanılmaz temaları çoğaltmaya veya sitede karmaşık düzen oluşturmaya çalışırken acı bir deneyiminiz varsa, çok zaman ve hayal kırıklığı kazanırsınız, blok desenleri zamanınızı ve hayal kırıklığınızdan tasarruf edecektir. Kullanım kolaylığı, çalışmanızı birkaç saat içinde değil, birkaç saat içinde bitirmenizi sağlar. Esnek ve ayarlanabilir, artık gerçek koda dalmanız ve yayınları ve sayfaları derlerken düzenlenecek bölümleri aramanız gerekmez. Bir blok deseni kullandığınızda, istediğiniz düzeni almak için seçilen blokları desendeki silin veya değiştirin. Düzeninizi konumlandırmak da basittir ve roket bilimi değildir. Tema demosunu eşleştirin, tam olarak kopyalamak istediğiniz inanılmaz bir tema demosu gibi görünen bir web sitesi kolayca oluşturabilirsiniz. Her geliştirici WordPress teması Bilir Hurt, sadece kurulumdan sonra mutlak bir felaket gibi görünmesini sağlamak için mükemmel bir tema gibi görünen şey bulur. Blok desenleri, tema demosunda görüldüğü gibi tema sayfalarını yeniden oluşturmanıza izin verir. Ve tüm bunlar WordPress blok düzenleyicisinden kolayca yapılabilir. Özel blok kombinasyonu, karmaşık bileşenlere sahip şaşırtıcı sitelere sahip olmak için artık hiçbir şeyi kodlamanız gerekmeyen hayatınızı basitleştirir. Eklentiler ve temalar, tüm web sitelerine çok kolay uygulanabilecek kendi blok modellerini sunabilir.
Konum yeri altındaki sürekli makale korunur, temaları değiştirirken tüm site düzeninizi kaybettiğiniz günleri hatırlıyor musunuz?Artık!WordPress blok deseni, temayı değiştirdiğinizde düzeni tekrarlamak için çok zaman kazandırır, çünkü yeni tema eskisi ile aynı desen içermese bile sağlam kalır.Kendi blok modelinizi oluşturun, oraya gidecek kadar profesyonel iseniz kendi blok deseninizi oluşturabilirsiniz.Blok deseninin en iyi kısmı budur – kolayca çalışmayı tamamlamak isteyen ve parmaklarını kirletmeyi ve kendi blok desenlerini yapmayı seven profesyoneller için de uygun olan yeni başlayanlar için uygundur.Tek yapmanız gereken kendi deseninizi oluşturmak, kodu kopyalamak ve temanıza veya eklenti kodunuza yapıştırmak için bir düzenleyici kullanmaktır.Bu, karmaşık düzeni görüntülemek istediğiniz yerde çoğaltılacaktır.
Size nasıl fayda sağlayabileceklerine baktıktan sonra, şimdi WordPress blok deseniyle başlamak istiyor musunuz? Peki, gerçekten nasıl çalıştıklarını araştıralım. WordPress WordPress 5.5 blok desen çalışma şekli, kurulmuş ve kullanıma hazır olan ve Gutenberg kontrolü kullanılarak düzenlenebilen çeşitli blok desenleri ile birlikte gelir. Blok desenlerinin esnekliği onu ayarlamaktan daha iyi hale getirir. Örneğin, mağazanın parçasını belirlemek istiyorsanız E-Niaga bloğu mükemmeldir, sütun bloğu hizmet bölümünü kolaylaştırır. Blok deseni, bir şablon oluşturmak için bir dizi önceden düzenlenmiş blok birleştirerek çalışır. Böylece, özelleştirilebilecek bir şablon olduğunu söyleyebilirsiniz. Zaten bir blok kullanıyorsanız, bunu basit bir desen kullanarak bulacaksınız. WordPress blok modelinin havalı kısmı, bir şablon olmasına rağmen, editörünüze koyduktan sonra sıradan bir blok olarak işlev görüyorlar. Düzenleme basittir ve sayfaya veya gönderiye yerleştirebileceğiniz aynı modelin desen veya kopyalarının sayısında bir sınır yoktur.
Editöre bir desen ekledikten sonra, WordPress bunu istediğiniz yere taşıyabileceğiniz ve konumlandırabileceğiniz bireysel bir blok olarak görür. Bir WordPress tasarım profesyoneliyseniz, tüm temalarınızda kullanılabilecek bazı parçaları yapmak için blok modellerini ek CSS sınıfları, özel blok stilleri ve varyasyonlarla birleştirebilirsiniz. WordPress blok desenini mükemmelleştirmek için hala uzun bir yol olmasına rağmen, sonunda sizi yalnızca bir veya iki tıklama ile yayınınıza veya sayfanıza koymanıza izin veren entegre bir arayüz haline gelecektir. Bu, kısa kodlar ve karmaşık tema seçenekleriyle başa çıkma gerekliliğinin sonu olacaktır. WordPress vs sayfalara karşı sayfalarda genellikle bir sayfa yapıcısıysanız (ve orada çok şey var), blok modelinin nasıl farklı olduğunu merak ediyor olabilirsiniz Sayfa Maker. Kuşkusuz, sayfa yapıcılar ayrıca belirli web sitesi tema uygulamaları için önceden belirlenmiş tasarım şablonlarına sahiptir. Bununla birlikte, WordPress blok kalıpları, sayfa yapımcılarının kullanımına eşlik eden bazı ciddi zayıflıkların üstesinden gelir. Uygunluk Sayfa yapıcılar yararlı olsa da, her zaman yaklaşan WordPress sürümüyle uyumlu olacaklarının garantisi yoktur. Buna ek olarak, sayfa üreticisi kullandığınız eklentiyi desteklemeyi durdurursa, sitenizde çalışmayan çok sayıda kısa kod alabilirsiniz. WordPress blok desenleri ise mevcut editörlerle sorunsuz çalışır ve her zaman gelecek sürümlerle uyumlu olacaktır.
Sayfa üreticisinin hızı, birçok komut dosyası, stil sayfası ve onlara dahil edilen yazı tipleri nedeniyle sitenizi ünlü hale getirebilir.Hepsi bir arada bir çözüm olmaya çalışırlar, ancak gerçekte, sitenize asla kullanılamayacak birçok komut dosyası (genişleyen) enjekte ederler.Yavaş siteler SEO ve doğrudan trafiği etkileyebilir.Tersine, ışık bloğu desenleri, yeniden kullanın ve gereksiz komut dosyaları kullanmayın. Makaleler aşağıda bağlanmıştır.
Bir sayfa üreticisi kullandığınızda temaları artırmak, başka bir temaya geçmek çok zor olacaktır, çünkü önceki tüm ayarlarınız sonunda kaybolacaktır.Sayfa üreticiniz için yedekleme kodu almak ve yeni bir temaya taşımak zor bir iş olabilir.Blok deseni, yeni temanızdan biraz farklı görünse de, temayı değiştirseniz bile içeriğinizi ve düzeninizi korur.
Nihai kullanıcının esnekliği, sayfa üreticisi size iyi bir web sitesi verebilirken, son kullanıcıların öğrenmesi çok zor olabilir. Herkes kullanımı kolay düşünemez ve birçoğu siteleriyle çalışmak için herhangi bir kod öğrenmek veya kullanmak istemez. WordPress blok deseni, tıklanan arayüzü kullanma kolaylığı ile bu son kullanıcının karmaşıklığını ortadan kaldırır. Özetlemek gerekirse, önceden belirlenmiş şablonlar ve bileşenler arıyorsanız, sayfa üreticisi çok iyi olsa da, sitenizi yavaşlatabilir ve çok esnek olmayabilirler. Blok desenleri sayfa yapımcılarının eksikliğini kapsar. WordPress Blok Desenleri Nasıl Kullanılır Blok desenlerini kullanmaya hazır mısınız? Bu bölümde, daha rahat hissettikten sonra basit bir blok desen ekleyebileceğinizi, düzenleyebileceğinizi ve kendi deseninizi nasıl yapabileceğinizi açıklayacağım. Bir blok deseni kullanmak için kodda yetkin olmanıza rağmen , WordPress editörü hakkında temel bir fikriniz olmalı. Ve elbette, WordPress 5.5 veya daha yüksek yüklemeniz gerekir. Blok desenini girin WordPress düzenleyicinize gidin, sol üst köşedeki Plus (+) simgesini tıklayın.
Sitenizin bir parçası haline gelen deseni izlemek için, kullandığınız temaya ve herhangi bir etkin eklenti olarak değişecek bir desen sekmesi seçin.
Mevcut desenler türe göre birkaç parçaya ayrılır. Editöre koymak için tıklamadan önce her modelin küçük önizlemesini görebileceksiniz.
Aşağıda bağlı makaleler
Aşağıdaki örnekte, görüntü desenleri olan iki metin sütunu seçtim.
WordPress Block Desenleri Düzenleme Düzenlemek için WordPress blok modelini tıklayın. Metinleri, tipografi, renk ayarlarında, görüntülerde düzenleyebilir veya uygulamak isteyebileceğiniz gelişmiş CSS sınıflarını ekleyebilirsiniz. Genellikle kendi blok modelinizi yapmak, kendi blok modelinizi yapmak kod hakkında bilgi gerektirir (HTML ve PHP). WordPress blok desenlerini kullanarak kendi deseninizi yapabilirsiniz. Bir sonraki adım, yeni bir deseni bir function.php dosyası veya özel eklenti ile kaydetmek için Register_block_patern işlevini kullanacaktır. Kendi blok modelinizi oluşturmak için, bu özelliği ayarlamak için buna ihtiyacınız var:
Başlık (zorunlu) – Desenler için okunabilen başlık.
İçerik (zorunlu) – Desen oluşturan ham HTML kodu.
Açıklama – Desenin ne yaptığını açıklayın. Açıklama genellikle görsel olarak gizlidir.
Kategori – Blok kalıpları gruplamak için kullanılır. Bir model birden fazla kategoriye dahil edilebilir.
Anahtar Kelimeler – aka, kullanıcıların desenleri basit bir arama ile bulmasına yardımcı olan.
ViewPortWidth – İndükleyicideki desenin genişliği.
Artık temellere sahip olduğumuza göre, bir WordPress özel desen eklentisi yapmaya başlayalım.
Bir taslak gönderi yap
Deseniniz için ihtiyacınız olan bloğu ekleyin.
Bu örnek için kapak, alıntı ve bazı metinler ekledim.
Yeni deseninize eklemek istediğiniz tüm blokları seçin ve kopyalayın.
Talimatlar: Kopyala seçeneğini açmak için üç dikey noktayı tıklayın.
Sadece kopyaladığınız bloktan HTML çıkışından kaçınmak için CodeBeingify gibi JSON Escape/UNESCAPE cihazlarını kullanın.
Dize kutusuna kopyaladıklarınızı yapıştırın ve Kaçış düğmesine basın.
Sonuç Dize kutusunda görünen kodu kopyalayın. Artık blok modelinizi özel bir eklenti olarak veya function.php dosyasına kaydetmek istediğinizi seçebilirsiniz. Temanızdan bağımsız olarak erişilebilmesi için modelinizi özel bir eklenti olarak kaydetmenizi öneririm.
Web sitesi dosya yöneticinizi (CPanel veya FTP aracılığıyla) açın ve sitenize/içerik/eklentinize gidin.
Özel eklenti adınızla yeni bir klasör oluşturun. Eklentime “Desen-Takip” adını verdim. Bu klasörde yeni bir dosya, eklenti.php oluşturdum.
Plugin.php dosyanızı düzenleyin ve yeni blok desen kodunuzu kaydedin.
Bunu böyle yaptığım gibi:
İçerik özelliği, geçen HTML kodunu içerir ve JSON’dan kaçmak / unescape araçları için daha önce kopyalarım. Plugin.php dosyasını kaydedin.
WordPress kontrol panelinize dönün, eklentiye gidin ve etkin olmayan eklentiler arasında yapılmış yeni bir eklenti bulacaksınız.
Eklentinizi etkinleştirin.
Yeni bir gönderi oluşturun, Desen sekmesini açın ve eklentinizi daha önce belirttiğiniz kategoride kayıtlı bulacaksınız. Benim durumumda, kategoriyi belirlemedim ve eklentim açıkça kategorize edilmedi. İşte burada:
Yazıma ekleme desenine tıklamak!
Şimdi desenimi tüm seçim temalarımda kullanabilirim çünkü özel bir eklenti ile kaydettim. Eklentileri kullanarak daha fazla blok desen ekleyin Kendi WordPress blok modelinizi oluşturmak için kodla uğraşmak istemiyorsanız, daha fazla eklemek için eklentileri her zaman kullanabilirsiniz. WordPress.org’da arama yaparken bunun gibi birkaç eklenti bulacaksınız. Guteblock, Ultimate Blocks, Qubely, istiflenebilir, araç seti blokları, GETWID ve gelişmiş Gutenberg blokları gibi blok desenleri için bazı harika eklentiler. Daha fazla WordPress Block Desenleri, kendi deseninizi yapmaya hazır değilseniz, Gutenberg Hub Desen Kütüphanesi’nde daha fazla blok deseni bulabilirsiniz. Kullanmadan önce hala kaydolmanız gereken bazı harika şablonlar ve ön katlamalar var, ancak tamamen kendiniz olan bir şey üretmekten kesinlikle daha iyidir. Justin Tadlock Block Desen Oluşturucu eklentisi, kesinlikle önereceğim bir başka harika kaynak. Bu eklenti, doğrudan düzenleyiciden kodlamadan kendi blok deseninizi oluşturmanıza olanak tanır. Deseni yapmak istediğiniz bloğu seçin ve özel bir blok oluşturmak için blok desenine ekleme seçeneğini seçin. Kadar basit!
