Teknik Breakout Zirvesi/2021: Blok & amp;Zor Yer

Çok karmaşık göründüğü için WordPress siteniz için özel bir blok kullanmaktan kaçındınız mı? O söylentiden kurtulalım. Bu oturumda, en başından beri görünür olan ve tam olarak istediğiniz gibi davranmak için Genesis Blocks Genesis’i nasıl kullanacağınızı öğreneceksiniz.
VİDEO: Bu oturumda oturumdaki bloklar ve sert slayt yerleri arasında WP Engine Stinson’un WP Ürün Pazarlama Müdürü şunları tartışıyor:
WordPress temaları yapmanın geleceği, tam site düzenleme ve özel blok koleksiyonları hakkında yüksek seviyeli ekran.
WordPress ve Step -by -adım kılavuzu için doğrudan kodlama özel bloğu nasıl başlayacağınız
İki buçuk yıl boyunca, bir blok düzenleyici ile bir yazı veya sayfa yapabilirsiniz ve içerik alanındaki her şey Block Düzenleyicisi tarafından yönetilir. Tam site düzenleme ile çizgilerden çıktı. Şimdi blok editörü ve şimdi tüm sitelerden sorumlu.
Rob Stinson WP Makine Ürünü Pazarlama Müdürü Tam Metin Transkripti Rob Stinson: İyi günler, Herkes. WP Motor Zirvesi/2021 oturumuna hoş geldiniz. Umarım bu etkinliği şimdiye kadar beğenirsiniz. Ve bana katıldığınız için çok teşekkür ederim. Umarım bugün tartışacağımız şeyleri alırsınız. Bu oturum bloklar ve sert yerler arasında çağrılır. Bu, tamamen içinde kullandığımız blok ve blok düzenleyiciyle ilgili olan modern WordPress’e hakim olmakla ilgilidir. Benim adım Rob Stinson, WP motorundaki ürün pazarlama yöneticilerinden biriyim. Block Editor için yaptığımız şeylerin etrafında ürün ekibiyle çok yakın çalışıyorum.
Bu yüzden bugün üç ana şeyi tartışacağız. WordPress temalarının geleceği hakkında biraz yüksek seviyede görünümümüz olacak. Daha sonra, WordPress çekirdeğine girmeye başlayan bir şey olan blok desenine çok uyumlu olan özel bir koleksiyon göreceğiz. Ve özel bir blok göreceğiz. Ve özel bir blok, her zaman korkutucu olan doğrudan kodlama yapacağız. Birinin seni yazdığını ve sizi ne zaman gördüğünü bilmiyorum, aniden artık heceleyemezsiniz. Kodlama yaşayacağım, bu yüzden 10 kez öyle. Böylece nasıl gittiğini göreceğiz, hey? Tamam, ama yukarıdan, gelecekteki birkaç WordPress temasına bakalım. Geldiğimiz yerden, birkaç yıldır bir ajansta veya serbest çalışandaysanız ve WordPress’te özel uygulamaya katıldıysanız, genellikle tema tabanıyla başlarsınız. Sadece geri dönüp bir tema yapacağınız bir şeyin altını çizebilirsiniz. Ya da Genesis Framework gibi ebeveynleriniz WooCommerce Crew’dan iyi bir örnek veya mağaza teması olabilir. Her şey temelde bir ana tema olabilir. Ve oradan başlıyorsun. Size inşa etmek için iyi bir temel verecektir. Daha sonra, projenizle ilgili bazı benzersiz küresel tasarım kalıpları uygulayacağınız çocuk temanız var. Birkaç şey hazırlayacaksınız. Çeşitli sayfa şablonları veya arşiv şablonları veya projenizin kapsadığı herhangi bir şeye dayanan herhangi bir şey için birkaç şablon daha ekleyebilirsiniz.
Ve elbette, size işlevsellik, entegrasyon ve bunun gibi şeyler veren bir WordPress eklentiniz var. Oldukça basit, çok tanıdık. Oradan geldik. Ama başka bir yere gideceğiz. Gelecek, WordPress bağlamında biraz farklı görünüyor. 2 ve 1/2 yıldır bir blok düzenleyicimiz olduğunu biliyorum, bu çılgın olan çok hızlı hale geliyor. Ancak bir değişiklik var, şimdi WordPress’te piyasaya sürülen, tam site düzenleme ve diğer birçok şeyi tanıtan ve gerçekten birçok şeyi değiştiren, ilerlemek için bir şeyler yapma şeklimizi değiştiren bir aşama var. Öyleyse nereye giderken biraz daha böyle görünüyoruz. Tam temel siteyi düzenleme temasına sahip olacağız. Artık tam site düzenleme teması sadece olağan tema için bırakılmıyor. Bu aslında geleneksel temalardan çok daha basit ve daha hafiftir. Ayrıca kavramsal olarak daha fazla ürün olan bir blok desenimiz var, bence yeni şeyler hakkında konuşuyor. Burası, küresel tasarım kalıplarımızdan ve bunun gibi şeylerden biraz daha fazlasını yapabilir ve sayfaları hazırlayabiliriz, çeşitli şablonlar. O zaman çok benzersiz şeyler, çok özel tasarımlar, özel işlevsellik ve entegrasyon yapmamızı sağlayan özel bir bloğumuz var. Ve elbette eklenti WordPress’te her zaman önemli bir rol oynayacak ve bize işlevsel entegrasyon veriyorlar.
Yani sadece her şey değişmiyor ve her şey pencereden çıkıyor, aynı zamanda bir değişiklik var. Değişiklikler olmalı. Yukarıdan, şimdi sitenin tamamını düzenliyoruz. Yani bu, çekirdeğe geçmeye başlayan birkaç özelliğin son sürümünden. Her şey orada ve ne olduğunu bilmeyen ya da aniden web sitelerinde tam bir site düzenlemeye sahip olmayacak ve bununla ne yapacağını bilmeyen herkes gibi. Ancak bizim gibi geliştiriciler bir tema oluşturuyorlar, bir site hazırlamak, Site Düzenleme İşlevinin tamamını bağlamaya başlayabilir. Kısacası, temel olarak iki buçuk yıl boyunca, bir blok düzenleyiciyle bir yazı veya sayfa yapabilirsiniz ve içerik alanındaki her şey Block Düzenleyicisi tarafından yönetilir. Tam site düzenleme ile çizgilerden çıktı. Şimdi bloğun editörü ve şimdi tüm siteden sorumludur. Yani başlığınız, altbilgi, kenar çubuklarınız, WordPress’teki geleneksel widget’ın deneyimi çok uzun bir süredir. Ancak tüm site boyunca küresel stil bile. Bu tema için dosya yapımız değişir. Ve sonra temamızda yazdığımız kodun rolü ve türü. Birçoğumuz büyük diyagram olan şablon hiyerarşisine aşina olacağız. Bulduğum projeyi hatırlıyorum ve bu, oh, bu inanılmazdı. Bu şimdiye kadarki en büyük kaynak. Sadece çok anlamama yardımcı oldu. Şablon hiyerarşisi hala alakalıdır, ancak değiştirilmesi gerekir ve tüm sitenin düzenlenmesinde çok basitleştirebilir, çünkü sayfa şablonumuzu yapmak için yerimiz aslında sadece koddan ziyade WordPress deneyimine geçer.
Blok deseni, büyük ölçekte, sayfa şablonunun yerini alan bu gibi bahsettim. Blok deseni daha önce yapılmış bir tür içeriktir. Bir kahraman bloğu olabilir veya ekip hakkında bir iletişim formu veya bölümü olabilir veya aslında tüm sayfa olabilir. Birlikte sahip olan ve birlikte çalışmak için oynadığı her blok grubu paketlenebilir ve depolanabilir ve daha sonra bir blok deseni olarak dağıtılabilir. Oldukça ilginç, önereceğim ve diğer insanların bunun WordPress ekosisteminde yeni bir ürün kategorisi olduğunu söyleyeceğini biliyorum. Yıllar boyunca temalarımız ve eklentilerimiz var. En önemlisi, sahip olduğumuz, temalarımız ve eklentilerimiz bu, ama şimdi bir blok desenimiz var. Ve WordPress.org’da yeni başlamış olan blok deseninin bir dizini var ve nasıl geliştiğini ve geliştiğini görmekle çok ilgileniyorum. Şaşırmayacağım, ama önümüzdeki yıl için çok hızlı. O zaman özel bir bloğumuz var. Ve rafın dışındaki işi ne zaman yapmadığını düşünmeyi seviyorum. WordPress Corps’da, Fantastik Genesis Block eklentileri gibi ek bloklar veren harika bir eklenti olan birkaç harika blok var. Piyasada da başka insanlar olduğunu biliyorum. Ancak bir tasarımcı ile çalışabilirsiniz ve bu olağanüstü ekibi sayfada sadece marka ve gölgede mükemmel ve sınırın yarıçapı ve her şeyin farklı bir ekran boyutunda kaynaşma şekli gerçekten, çok özel. Ve bu, özel bir blokla çıkabilirsiniz.
Refef dışında iyi ayarlanmış bir kontrol elde edemezsiniz. İşte bu yüzden özel bloklar yapıldı. Çok özel bir şekilde davranmak veya işlev görecek bir şeye ihtiyacınız olduğunda, özel bir blok oluşturmanız gerektiğinde. Biliyor musun? Değişim kolay değil. Bak, bunlar çok ilginç ve heyecan verici geliyor. Ancak bu sektörde, genel olarak web endüstrisinde bulunduysanız, ancak WordPress’te bir serbest çalışan ajansı veya web ekibi olarak çalıştıysanız, bir süredir herhangi bir şey varsa, bir şeyler yapmanın belirli bir yolu olacak. Ve bu yöntemler harika olabilir ve sizin için çok iyi çalışırlar. Ancak WordPress’in nereye gittiğine bakmak ve bakmak istiyorsanız ve blok düzenleyiciyi kucaklamak istiyorsanız, değişime ihtiyacımız var. Ancak bu, değişimin kolay olduğu anlamına gelmez. Ama şimdi sizin için biraz daha kolay hale getirebileceğimi düşünüyorum. Yani 2 numara, blok deseninde biraz daha derin, ancak daha spesifik olarak özel koleksiyonlarda ve koleksiyonlarda göreceğiz. Tamam, önce koleksiyon nedir?
Koleksiyon etkinlikte bir şeydir. Bu yüzden olağanüstü bir Genesis blok eklentimiz var, blok düzenleyicinin çalışmasına kadar çok sayıda süper havalı güç ekledi. Ama size veren şeylerden biri, size bir koleksiyon kütüphanesi verir. Ve bu koleksiyon blok desenlerin bir koleksiyonudur. Yani onlar bir içerik parçası. Dediğim gibi, bir kahraman bölümü veya hizmet bölümü veya eksik bölümler veya sayfalar, tüm ev sayfaları, talimatlar, daha önce tasarlanmış ve iyi ayarlanmış bloklar olabilir. Ve acemi içerik girildi. Böylece içerik üreticileri gelebilir, bazı içerikler, bazı desenleri gerçekten düzenlenmiş markaya göre sayfalara bırakabilir ve sadece içerikten geçmeleri ve değiştirmeleri gerekir. Genesis’te yükseltilmiş bir keşif deneyimi, bunu açıklamanın bir yoludur. Temel olarak, bu sadece orijinal blok deseninin deneyimi değil, aynı zamanda blok desenlerinizi daha iyi yönetebilmeniz ve saklayabilmeniz için geliştirdik. Ve sonunda, tüm bu koleksiyonlardaki tüm desenleri bulun ve keşfedin ve kolayca bulun ve düzenleyebilmeniz için sayfaya yerleştirin. Bu yüzden sağdaki resim aslında yaklaşık bir ay önce bir öğretici için yaptığım özel bir koleksiyon. Buna Lux denir. Bu küçük bir koleksiyon. Ana sayfa gibi sadece bir sayfa. Ana sayfanın tüm sayfalarında altı ayrı desen olduğunu düşünüyorum. Bir kahraman bölümü var, hakkında parçalar var, hizmet bölümümüz var. Bir referans bölümü var. Ayrıca, oldukça havalı.
Ve her şey daha önce tasarlanmış, renkleri şekillendirmek gibi ve bunun gibi bazı harika resimler ve şeyler bulduk. Ancak kastedilen şey, gerçekten iyi bir marka bloğunun ilk kaynağı sayfasını yapabilmem. Bu yüzden yaptığım lüks iş için çalışacak biri, yeni bir yön sayfası veya yeni içerik oluşturmaları gerekiyorsa, yaptığım lüks özel koleksiyondaki blok deseniyle kolayca çalışabilirler. Bir kahraman ekleyebilirler ve başlığı değiştirebilirler. Düğmeyi silebilirler. Bir düğmeye ihtiyaç duymazlarsa, resimleri veya herhangi bir şeyi değiştirebilirler. Bunu müşterileriniz için hayal edin. Ve etkinleştirdiğiniz içerik teması bu fantastik tasarım şablonu ile çalışabilir. Blokta olabileceği için süper kilitli değiller. Üzgünüm, belki eski sayfa şablonu, ama aynı zamanda sadece boş bir tuval değil. Markaya göre bu şeyler sayfaya girmeye ve yön sayfası için ihtiyaç duydukları her şeye ayarlamaya hazır. Bir blok deseninin ne olduğunu veya ileriye doğru hareket eden büyük bir değerde ne değiştirdiklerini düşünmeniz çok ilginçtir. Bence çocuk temasının rolü WordPress tam site düzenleme dünyasında değişecek. WooCommerce’den bir mağaza teması olabilir. Ve piyasada çok iyi çocuk temaları var. Tasarım varyasyonları, özellikleri ve bunun gibi şeyler sağlarlar. Büyük ölçüde, blok deseni birçok şeyi işler. Bu nedenle, blokların deseninin ve Genesis’te, saran koleksiyonun size farklı blok desenlerinin eksiksiz bir paketini nasıl verdiğini görmek ilginç olacak.
Nasıl görünecek ve açıktır ki, büyük ölçekte ona yaslanıyoruz. Nereye gittiği konusunda çok heyecanlıydık ve bunu dediğim gibi, WordPress ekosistemindeki insanlar tarafından inşa edilmeye ve dağıtılmaya başlayacak yeni ürün kategorisi olarak gördük. Peki nasıl özel bir koleksiyon yapabilirsiniz? Şimdi, bu 30 dakikalık bir oturum. Bu yüzden yukarıda yudumlayacağım. Ama daha derine inmek istiyorsanız sizi topladığım öğreticiye yönlendireceğim. Herhangi bir kod yazmadan önce ilk kez yaptığınız şey, blok düzenleyiciyi girmeniz ve sayfanızı oluşturmanızdır. Bir kahraman, sonra hizmet bölümü ve sonra referans bölümü ve her neyse. Ve stili ve bunun gibi her şeyi mükemmelleştirmek için bir blok editörü kullanıyorum. Özellikle Lux’ta, Genesis Block eklentisinde, özellikle ona eşlik eden sütun bloklarının etrafında daha zengin bazı kontroller ve seçenekler sunan bloklar da kullanabilirim. Bence buna oldukça havalı gelişmiş bir sütun deniyor. Ve sonra temel olarak tüm sayfalarınızı ve tüm blok desenlerinizi oluşturup düzenledikten sonra, küçük bir kodlamaya dönersiniz. Daha sonra dışa aktarırsınız ve özel koleksiyonunuzu işlemek ve paketlemek için temel olarak küçük bir eklenti yapmaya başlarsınız. Yani aslında oldukça basit. Standart WordPress eklenti dosyalarında birkaç temel dosyası olan küçük bir iskele eklentisi ile başlamalısınız. Ve birkaç klasör var. Mevcut bir başlangıç ​​eklentimiz var. Bir koleksiyon kaydedersiniz, ardından düzeni ve blok desenleri olan parçaları kaydedersiniz.
Ve sonra temel olarak, HTML topaklarını blok düzenleyicisinden dışa aktarıp eklentiye koyduktan sonra eklentiyi etkinleştirmeniz gerekir.Ve Genesis Block eklentisi de aktif olduğu sürece, elbette bir koleksiyonun tüm harika özelliklerini elde edebilmek için bağımlılık var, hepsi bu.Bu çok, çok basit.Tabii ki, orada bir bakış okuyoruz.Ancak tüm bunları nasıl yapacağınız hakkında daha fazla bilgi edinmek istiyorsanız, en yenilerinden biri olan Studiopress.blog adresini ziyaret edin.Ancak buna Genesis Blocks’ta özel bir koleksiyon oluşturmak için ana rehber denir.
Belki burada WordPress’te açılırsam, ne tür bir pratik, yaptığım özel koleksiyona bir göz atmak için. Koleksiyon için yaptığım eklenti bu sitede yüklendi ve aktif. Buraya gidersem, tüm koleksiyonları keşfetmek ve görmek için Genesis bloğunda sahip olduğumuz arayüz olan bir düzen bloğu bulun. Koleksiyona bakın, burada çok şey var. Tüm bunlar Genesis Block eklentisi veya Genesis Block Pro eklentisi ile birlikte gelir. Ama yaptığım şey bu, özel, lüks koleksiyon. Bunu tıklıyorum. Bu farklı sayfayı görebilir. Hakkında ve süreçler, referanslar veya herhangi bir şey. Veya bu tam sayfadır. Bir tıklama ve her şey doğrudan sayfaya bırakıldı, çünkü her şey bir bloktı ve her şey blok bağlamında düzenlendi, atlamak ve bunu yapmam gereken şeyi yapmak çok kolay olabilirim. sayfa. Pekala, 3. sayı bu oturumun üçüncü kısmı – özel bir blok. Özellikle The Custom Blocks Genesis adlı bir eklenti ile özel bir blok oluşturduğumuzu göreceğiz. Bu bize yönetici arayüzünü veren bir WordPress eklentisidir. Yönetici dediğimde, WordPress yöneticisinde demek istiyorum. Ve özel Gutenberg blokları yapmak için çok basit bir şablon sistemi. Daha önce de söylediğim gibi, özel bir blok, görünür ve tam olarak ihtiyacımız olan şeyleri yapmamıza izin verecektir. Yani hazırlık dışı kesmiyor.
Burada, Custom Blocks Genesis Plugin’in bir yaşam yeri koleksiyonu olan Genesis Blocks eklentisini de sevdiğini belirtmek önemlidir, bu iki eklentinin hiçbiri Genesis Framework’e tamamen bağlı değildir. Bence aynı ürün serilerine dahildirler. Ancak, özel bloklar Genesis yüklediğiniz tek eklenti ise, iyi olacaksınız. Bugün tartıştığım her şeyi bugün yapabilirsiniz. Bu repo wordpress.org adresinde bulunabilir. Ve bu sadece hafif bir başlangıç ​​değil, cazip bir eklenti alın. Orada sahip olduğumuz özellikler açısından çok, çok zengin, ki bu olağanüstü. Aslında, bugün gösterdiğim her şey aslında ücretsiz olanları kullanıyor. Size birçok harika ek özellik sunan Genesis Pro aboneliğinden geçebileceğiniz eklenti hükümleri vardır. Ancak önce kontrol etmek istiyorsanız, WordPress.org adresindeki ücretsiz olarak kontrol edin. Genel fikir, özel bloğunuzu eklediğiniz WordPress yöneticisinden başlamanızdır. Birkaç şeyle yapılandırıyorsunuz. Alanı ona eklersiniz, sadece alanı forma eklerken düşünün. Ve sonra yayınlıyorsun, saklıyorsun. Ve sonra birkaç kod yazmaya girip başlıyorsunuz. Unutmayın, blok şablonunuz için çok, çok basit bir kod. Şimdi HTML ve CSS ile uzaktan rahat hissediyorsanız, önceki işlev ve tema dosyasına bir kod satırı eklediyseniz, bakın, ihtiyacınız olan tek şey bu. Bu çok, çok basit bir şey. Bu eklentinin, özel bloklar oluşturmak için giriş engellerini azaltmak için tüm amacı budur. Ve hepsi bu.
Hepsi bu, şablonunuz tamamlandıktan sonra, özel bloğunuzu sayfaya veya harika bir WordPress’teki herhangi bir yayın ekleyebilir ve kullanabilirsiniz. Bu kim için? WordPress geliştiricileri. Bu eklentinin bir geliştirici aracı olduğunu söylüyorum. Sanki özel bir blok oluşturmak için bu eklentiyi kullanan büyük bir şirket web ekibi aracılığıyla solo bir serbest çalışan iseniz. Junior olabilirsin. Dediğim gibi, WordPress’te kod yazma dünyasına başlayabilirsiniz ve bu eklentiyi rahatça kullanabilirsiniz. Ama aynı zamanda, bu eklentiyi sadece kendilerine sağladıkları verimlilik nedeniyle kullanan birkaç ilginç ajans takımında birçok kıdemli mühendis biliyorum. Ve verilen değer, blok çevresindeki beceri geliştirmenin gelişimini basitleştirmektir. Ve bu seansın başında, bak, değişim her zaman kolay değil, bu yüzden kolaylaştıralım, bu eklenti bunu yapıyor. Genellikle blok üretimini hızlandırır. Bu da yinelemeyi basitleştirir. Blok vahşi doğada ve üretildikten ve birkaç şeyi değiştirmek istedikten sonra, bu eklentiye geçmek kolaydır. Ayrıca eklentiler ve üçüncü taraf uygulamaları ve diğerleriyle entegrasyonu da basitleştirir. Genel olarak özel bloklarla ilgili başka bir şey, aynı zamanda size göstereceğim şey, tüm seçeneklere karşı kararlar. Hepimiz alıcıda gördük ve hatta bulunduk çünkü sayfa ve hatta wordPress bize sayfanın yapımından veya başka bir şeyden aktarıldı ve sadece “bunalmış” hissi var, bunalmış, bence bu kelime, sadece var olan seçenek sayısı.
Düşen gölgeler, sınırlar ve genişlik yarıçapı ve sınırlar gibi her şey için bir kuvvet kontrolü vardır ve temel olarak CSS’de ne yapabileceğinizi bazı durumlarda UI’ye çoğaltır. Ve son kullanıcılar, içerik üreticileri için korkutucu. Ama aynı zamanda bunu göndermekten sorumlu geliştiriciler için, çok özel bir tasarıma göre bir şeyler uyguladık ve belirli bir şekilde çalışması gerekiyor, böylece son kullanıcıya iletilen herhangi bir seçeneğe sahip olmamız gerekmiyor. . Bu, özel bloklarla ilgili harika şeylerden biridir. Bunlardan bazılarını silebiliriz. Şablona neyin dahil edilmesi gerektiğine ve daha sonra nelerin son kullanıcıya iletilmesi gerektiğine karar verebiliriz. Her neyse, bak, sadece konuş. Gerçekten özel bir blok oluşturalım. Biraz doğrudan kodlama zamanı. Pekala, WordPress’i burada yerel olarak çalıştırıyorum, kontrol etmeniz gereken diğer harika gelişme. Birkaç eklenti yüklü, ama aslında sadece iki tane var. Gutenberg’im var, aslında biliyor musun? Buna ihtiyacım yok. Hadi devre dışı bırakalım. Aktif olduğum tek eklenti, Yaratılış’ı Bloklar. Bunun bağımlılığı olmadığını söylüyorum. Koşduğum tema, mağazadan çocukların teması. Çocuğun teması olduğu söylendiğinde, çok, çok hafif ve çılgın bir şey yok. Bunu kendim döndürüyorum, bu yüzden pek bir şey olmadı. Affedersiniz. Bu, WooCommerce Storwell temasından çocukların temasıdır. Pekala, özel bloklar, özel bloklar Genesis kurulur ve aktiftir.

Burada daha önce oynadığım bazıları var, ancak yeni bir özel blok yaratacağız. Tasarım ekibi ile çalıştık ve inşa ettiler – anlayamıyorum, anlayamıyorum? Sana söylemiştim. İnsanların önünde yazmaya başlıyorsunuz ve heceleyemezsiniz. Hala hecelemiyorum. Ve bir tasarımcı ile çalışın ve bu olağanüstü sayfayı yaparlar. Bu takım için. Ve her takım arkadaşı için bu bölümü veya bileşeni sayfadaki tasarladılar. Ve sadece birkaç gölge ve ilginç sınırlar var. Meydana gelen biraz üst üste binen marj var. Öyleyse bak, hazır değil. Özel bir blok oluşturmamız gerekiyor. Böylece bunun için özel bir bloğumuz olacak. Ve bir alan ekleyeceğiz. Dediğim gibi, bu alanı forma eklediğiniz gibi. Şimdi, ilk, o kişinin adı için. Bu bir tür alan metnidir ve birçok farklı alan türümüz var. Bunu metin olarak alacak. Ve sadece% 50 yapacağız. Sadece son kullanıcı onunla etkileşime girdiğinde form için iyi bir şey başlatmaya yardımcı olur. Yani isim, bir sonraki rol olacak. İşte gidiyoruz, yazıyoruz. Bu da metin olacak ve%50 kullanacağız. Sıradaki Twitter kavrama, havalı. Bu da% 50. Ve sonra sonuncusu sadece en iyi yüz fotoğrafları için. Ve bu, üç metin alanımız var, farklı bir şey yapalım. Tabii ki, bir çizim alanı var. Sadece böyle bırak. Öyleyse yayın yayınlayalım. Tamam, bu yüzden yayınladık.
Ve bu küçük istemi oradaki yukarıda alıyoruz ve bu bize eklentinin ilgili bir blok şablon dosyası aradığını söylüyor. Ve bu, hey, şu anki temanızın aktif bir tema, bu ekran grafiği olduğunu biliyorum. Ve bu özel klasörü arıyorum, blok. Block Teammate.php adlı özel bir dosya arıyoruz. Ne yapacağımız, bir metin düzenleyicisi veya harika bir kod düzenleyicisi olan VS koduna atlayın. Ve burada görüyorsunuz, bu benim çocuk temam. Şimdi bu dizini ekliyorum veya bu klasöre Blok deniyor. Daha önce yaptığım üç özel blok daha var. Ama şimdi yaptığımız bloklar için burada yeni bir tane yapacağız. Şimdi klasörümüzün adının blok salyangozla eşleşmesi önemlidir. Bunda sadece Block.php. Yani bu bir PHP şablon dosyası. Ayrıca CSS dosyalarımız olacak. Bu yüzden stilimiz için CSS’yi engelleyin. Şimdi yenilenirsem, evet, sorunu kaybediyoruz çünkü şimdi ilgili bir şablon bulduk. PHP dosyamızda birkaç şeyi durduralım. Bunun için bir sarma divimiz olacak. Ve sınıfa çıkacağım. Ve sadece GCB öneki GCB’den gideceğim. Gerek yok, sınıf istediğiniz şey olabilir. Ve ben bir takım arkadaşı olacağım – GCB özel bloklar Genesis. Takım arkadaşları bloğu. Ekibimiz için bir resim etiketi yapacağım. Sanırım başka bir div olacak. Sayfa 4 doğru olmalı. Kişinin adı burada olacak. Bu onların rolü içindir ve sonra bu onların Twitter tutuşlarını tutmaktır. Bu yüzden sadece beni Twitter’da takip edecek. Tamam, onu HTML ile durdurduk ve hepsi bu.
Aslında sadece sekiz iyi kod satırımız var. Şimdi yapabileceğimiz, eklenti tarafından bize verilen bazı işlevlerle çalışacağımızdır. Ve bu işlevin yapıldığı şey, Blok alanı olarak adlandırılır, çünkü son kullanıcı, içerik üreticisi tarafından girilen içeriği sayfaya eklediklerinde özel bir bloğa götürür. PHP etiketini açın ve kapatın, engelleyin. Bir kez daha yazamıyorum. Blok alanı, içinde sümüklü uçağı koyacağız. Yani oops, bir fotoğraf istiyoruz, değil mi? Bu yüzden sadece orada resmi istiyoruz. Ve bu URL’yi resme döndürür. İşte bu yüzden kaynakta işlev görecek – afedersiniz, ancak kaynak özniteliğinde çalışacak. Şimdi aynı şeyi orada alalım ve bunu adına, rolüne koyacağım ve bu aslında olacak – çünkü onları Twitter’da takip etmelerini istiyoruz – Twitter.com/ ele alınacak, bu yüzden bırakacağız orada. Yani isimleri için, belki fotoğraflar, bir isim olacak. Ve rolleri için, bir kez daha, sahadaki salyangozlarla uygun bir rol olacak. Ve burada bir Twitter tutuşu olacak. Bunu kurtaralım. Hadi, yeni bir sayfa oluşturun. Yeni bir blok ekleyin, takım arkadaşları, görecek misiniz? Bizim alanımız var. İyi bir insan olan Rob Stinson amiral. Amiral. Twitter kavrama rob_stino ve bir medya kütüphanesi alalım. Benim. Evet, üzerine tıklıyorum. Ve tamam, bloğu tıkladığımda bir form alıyorum. Tıkladığımda, görünümün önizlemesini aldım. Şimdi burada içerik alıyoruz. Bir fotoğraf var. Benim adım için H4 var.
Rolüm için paragraflar var ve beni Twitter’da takip edenler var. Ama bizi ön uçta kontrol edelim çünkü ön uçta iyi göründüğünden emin olmak istiyoruz. Güzel görünüyor. Aslında ne yapacağımı bilin. Değiştireceğim – bu o. Aslında, hayır, bu sadece – ön uçtaki her şeyi tıklayın. Tamam, tamam, oradaki içerik iyi görünmüyor. Bu yüzden bloklarımız için biraz CSS’ye ihtiyacımız var. Şimdi bunu en başından beri yazmayacağım çünkü kimse beni gerçekten CSS yazarken görmek istemiyor. Ama biraz var. Yukarıda eklediğim bir sınıf var. Bu yüzden sadece alacağım, oraya koyacağım. Daha önce yazdığım CSS. Bakalım. Tamam, bize bazı temel stiller verin. Küçük bir sınır yarıçapımız var, burada bazı olumsuz marjlar. Bu tür sarma div var. Metnimize odaklanın, havalı. Açıkçası, bu çok büyük. Yani yapacağımız şey, her şeyden önce, başlığı sayfamızda vermek. Ve sütuna gidin ve üçe gidin. O zaman bunu yukarı hareket ettirelim, kopya. Çoğaltma, aslında, buraya sütuna koyduğumuzda% 50 genişliğinde bir alan biraz korkak görünüyor. Böylece tam olarak genişleyebilirsiniz, biraz daha iyi olabilir. Ve her şey blok düzenleyicisinde. Ne olduğunu görebilirsiniz. Ve üzerine tıklarsanız, içeriği güncellemek ve değiştirmek için form arayüzünü alırsınız, her şey böyledir. Ve sonra yine ön uçta, iyi görünüyor. Yani hepsi bu. Yani, sanırım 10 dakikadan daha kısa bir sürede onu geçtik.
Şablon dosyamızın nasıl olduğu konusunda size rehberlik edebilirim, bunun boyunca PHP serpme ile sekiz HTML satırı nedir? 13 satır CSS, yazmamız gereken tek kod bu. Ve diğerleri Block Editor’da. Çok basit ve sonra Block Düzenleyicisi’nde herhangi bir sayfada veya yayında kullanabileceğimiz bu özel blok var. Ve fotoğrafları, başlıkları ve bunun gibi her şeyi çok kolay değiştirebiliriz. Öyleyse bak, bu kadar basit. Ve dürüst olmak gerekirse, çok ilginç şeyler yapabilirsiniz. Göreceksiniz – oh buraya geri atlayayım – bu üç eklentim de var. Ama bak, bu WooCommerce ile ilginç bir şekilde söylemem gereken entegre olur veya etkileşir. Kullanıcının girip girmediğini ve daha önce satın alma işlemi yapıp yapmadığını kontrol ederler. Bu eklenti incelemesi, olağanüstü olan WP sorgu kullanıcılarını engeller. WP sorgusu, PHP ve WordPress yazma açısından süper bir güçtür. İnanılmaz bir şekilde, WP sorgusunu blok şablonumuzda ve bunun gibi şeylerde kullanmamızı sağlar. Yani bu oldukça havalı ve çok güçlü bir eklentidir, bu da görebileceğiniz gibi özel blokları süper basit hale getirir. Yani bu özel bloklar Genesis. Özel Bloklar Genesis, Genesis ürün serisindeki sayının sadece bir eklentisidir. Ve Genesis ile ilgili her şey hakkında daha fazla bilgi edinmek istiyorsanız, bu URL’yi ziyaret edin, wpengine.com/genesis. Dinle, zaman ayırdığınız için çok teşekkür ederim. Sohbette dolaştım. Sorularınız varsa, lütfen benimle iletişime geçin. Etkinlikten sonra sorularınız varsa, beni Twitter’da veya nerede olursam olalım.