Teknik Breakout Zirvesi/2021: Yeni Başlayan Şablon İstemci Sitesi ile Nasıl Daha Hızlı ve Daha Kârlı Çalışır?

Müşteriler için bir web sitesi oluşturduğunuzda, her zaman hayatınızı ve müşterilerinizi kolaylaştırmanın yollarını arıyorsunuz. Aşağıdaki videoda, müşterinin site başlangıçlarından kendi kütüphanenizi nasıl oluşturacağınızı ve dönüştürülmeye hazır ve test edilen bir web sitesinden kendi kütüphanenize nasıl sahip olacağınızı öğreneceksiniz, özellikle de başlamayı yapmayan müşteriler için niş ihtiyaçları var veya daha küçük bir bütçeye sahip olun.
Video: Bu oturum için slayt istemci sitesinin yeni başlayan bir şablonu ile nasıl daha hızlı ve daha karlı çalışır Bu video oturumunda, serbest koç ve web geliştiricisi Carrie Dills şu hakkında tartışıyor:
WordPress ve tam site düzenleme ile birlikte gelen yeniliklerle sayfalar oluşturmak için blok tabanlı yaklaşım.
Yeni başlayan bir şablon oluşturmak ve geliştirme sürecinizi hızlandırmak için bir bloğu nasıl kullanabilirsiniz?
Fikir azaltmak, yeniden kullanmak, geri dönüştürmektir. Zaman çizelgesini azaltırsınız, proje boyunca bileşenleri yeniden kullanırsınız ve şablonları geri dönüştürürsünüz. WordPress Core Carrie Dills, serbest koç ve web transkripti Web geliştiricisi Complete Carrie Dills: Hey, herkese bir blok editör eklenerek bunların hepsi çok daha kolay hale geliyor. Müşteri sitesinin yeni başlayan şablonundaki bu oturuma hoş geldiniz. Bugün daha hızlı ve daha karlı çalışma hakkında konuşacağız. Ve kulağa hoş geldiğini düşünmeyen. Doğru? Yani, serbest çalışan veya bir ajanssanız ve müşteriler için bir site oluşturuyorsanız, her projede tekrarlanan bazı görevler olacağını biliyorsunuz.
Ve her ne zaman, bu görevlerden birini işlemek için kod, otomasyon olsun, daha hızlı bitiririz, daha hızlı bitiririz, proje yaşam döngüsünü kısaltırız ve bu iyi bir şeydir. Bugün hakkında konuşacağımız şey bu. Şimdi, geliştirme iş akışınıza nasıl başladığınız hakkında konuşmama gerek yok. Belki bir daha fazla kazan veya eklenti temel işlevsellik temasıdır veya yerel olarak geliştirme ortamınız olarak kullanıyorsanız, bir klon veya plan kullanabilirsiniz. Her şey iyi, ama bugün tartıştığım şey bu değil. Konuşacağım şey, süreci hızlandırmamıza yardımcı olan bir başlangıç ​​şablonu oluşturmak için bir bloğu nasıl kullanabileceğimizdir. Bu nedenle, bir kez daha müşteriler için bir site oluşturuyorsunuz ve umarım kötü olanı deneyimlemezsiniz. Ama çoğumuz gibiyseniz, sahip olabilirsiniz. Bir projede bir şeyler ters gittiğinde, nihayet zaman çizgisini geçersiniz, yani tahsis ettiğiniz bütçeyi aşabilirsiniz. Müşteriniz sinirli, sinirli. Ve sonunda, bu iş yapmanın sürekli bir yolu değil. Şimdi, spektrumun diğer ucunda, her şey yolunda gittiğinde – göndereceğinizi söylediğinizde projeye veriyorsunuz, bütçeye göre gönderiyorsunuz, belki de bütçenin biraz altında, böylece şaşırtabilir ve lütfen Bekleyebilecekleri özelliklere veya eklemelere sahip müşteri ve daha fazla para kazanırsınız. Daha kısa bir proje yaşam döngüsü, daha verimli bir iş akışı, projede daha büyük bir marj yaptığınızla aynıdır.
Yani fikir azaltmak, yeniden kullanmak, geri dönüştürmektir. Zaman çizelgesini azaltırsınız, proje boyunca bileşenleri yeniden kullanırsınız ve şablonları geri dönüştürürsünüz. WordPress Core’a blok düzenleyicinin eklenmesiyle bunların hepsi daha kolay hale gelir. Ve sadece aynı sayfada olduğumuzdan emin olmak için, devam edelim ve blok dili hakkında konuşalım. İlk olarak, küçük bir blok terimi. Blok gerçekten site düzenlemesinin çekirdeğidir. Geçen hafta bir arkadaşı ziyaret ettim ve bana sordu Carrie, tam site düzenleme nedir? Ve açıklayacağım. Düşünmesi çok kolay. Yani web siteniz var. Çok sayıda üstbilgi, altbilgi, içerik alanları ve belki kenar çubuğundan oluşur. Ve bugün, ister klasik bir editör kullanın, ister zaten bir blok düzenleyici kullanın, içerik alanı ile sınırlısınız. Tema, üstbilgi, altbilgi ve kenar çubuğunu kontrol eden temadır. Böylece Site Düzenleme, diğer site öğelerini oluşturmak için kullanabileceğiniz yeni bir blok serisi – üstbilgiler, altbilgi ve kenar çubuğu. Yani site başlıkları veya site simgesi blokları veya navigasyon blokları gibi şeyler. Bunların hepsi WordPress Core’a geldi. Yani blok sadece bireysel bir işaretleme birimidir. Bahsettiğim gibi, bir navigasyon bloğu olabilir, bir paragraf bloğu kadar basit olabilir.
Ve sonra yeniden kullanılabilecek bir blok konsepti var. Yani, bu güzel daveti harekete geçirebileceğinizi söyleyin. Bazı olası başlıkların iyi bir arka planı, intro’nun küçük bir kopyası ve bir düğmeye sahiptir. Ve belirli projeler veya belirli temalar için bu stili elde edersiniz ve bunu birkaç sayfada tekrar kullanabilmek istersiniz. Şey, bloğun bloğunu veya yapılandırmasını yeniden kullanılabilen bir blok olarak kaydedebilir, sonra koyabilir ve site genelinde kullanabilirsiniz. Sonra bir blok deseni var. Yani bu, daha önce düzenlenmiş ve daha önce yapılandırılmış bir blok grubudur, bu da ilk içerik olarak girip kullanabilirsiniz. Başka bir deyişle, bir düğme modeliniz varsa, girebilirsiniz. Ve her seferinde metni değiştirebilir veya rengi değiştirebilir, yapmanız gerekeni yapabilirsiniz. Yeniden kullanılabilen bloklar tek bir yerde değiştirebilirsiniz ve site genelinde yeniden kullanılabilecek tüm blok örneklerini günceller.
Öte yandan desen bir tür bir bitiş. Her kullanımda benzersizdirler. Yani bloğun dili. Ve WordPress Core’un bir parçası olarak gelen çeşitli bloklar var. Özel bloğunuzu oluşturabilirsiniz. Veya kendi ek bloklarını tanıtan bir üçüncü taraf blok kütüphanesi de vardır. Ve bugün sizinle konuşmak istediğim bir tane var, yani Genesis blokları. Şimdi, bu ücretsiz bir eklenti wordpress.org. Ayrıca ücretli yükseltmeler de mevcuttur. Ama bugün gösterdiğim her şey, bunu yapmak için sadece ücretsiz bir sürüme ihtiyacınız var. Bu gerçekten kendi başına güçlü. Öyleyse eklenti Genesis blokları bağlamında meydana gelen bazı terimleri tartışalım. İlk olarak, bir rolümüz var. Çok harika bir tema şablonu, güzel bir ana sayfa şablonu gibi bulduğunuzu ve şablonu birkaç parçaya kesmek ve dilimlemek istediğinizi düşünün. Böylece bölümle kastedilen şey. Bu profesyonel olarak tasarlanmış bir blok desenidir. Ve birçoğu eklenti Genesis blokları ile geliyor. Sıradaki düzen. Böylece, bölüm düzeni keserse, düzen tüm parçaları alır ve tam sayfa düzeni yapmak için karıştırıp eşleştirir. Ve son olarak, bir koleksiyonunuz var. Ve bunu yakında size göstereceğim. Ama sadece temeli azaltmak için. Koleksiyon, göründüğü gibi, hepsi tematik olarak düzenlenmiş bu düzen ve parçalar koleksiyonudur. Şimdi, Genesis Blocks eklentisindeki koleksiyonları kullanarak basit bir üç sayfalık düzeni yaptığım küçük bir demo göstermek istiyorum. Hazırsanız, lütfen demo şapkanızı giyin.
TAMAM.Burada yeni WordPress vanilyası yükledim.Ve Astra temasını çalıştırıyorum.Ancak istediğiniz temayı kullanabilirsiniz.Ayrıca bir eklenti yükledim ve Genesis Blocks eklentisi.Affedersiniz, etkinleştirildi.TAMAM.Öyleyse yeni bir sayfa oluşturalım.Ve buradan, inserter bloğuna gideceğim.WordPress çekirdek bloğuna girebileceğiniz yer burası.Ve sonra eklenti Genesis bloklarından kaynaklanan bir düzen vardır ve bu, kategoriye göre keşfedebileceğiniz parçaları barındırır.Ve sonra bir düzenimiz var.Yine, tüm bu parçaların bir tür karışımı ve eşleşmesi versiyonu veya varyasyonudur.Ve son olarak, koleksiyon.
İşte yazılı bir taş koleksiyonu. Eklentinin ücretsiz sürümünde ücretsiz olarak geldi. Koleksiyonlar hakkında daha fazla bilgi edinmek istiyorsanız, burada sadece küçük bir belge gösteriyorum. Bunun hakkında oyalanmayacağım. Ancak koleksiyonu açarsak, burada bazı bireysel parçaları görebiliriz. Ve bu kadar hızlı bir şekilde bile, renk, arka plan, yazı tipi vb. Açısından bazı görsel süreklilik olduğunu görebilirsiniz. Bu yüzden ana sayfanın düzenine yeni girdim. Ve bu tam bir sayfa. Tıkladıktan sonra girin. Peki. Öyleyse devam edelim ve yayınlayalım. Ve ön uçta neye benzediğini göreceğiz. Ve bu gerçekten olmasını istediğim gibi görünmüyor. Bu yüzden bazı değişiklikler yapmalıyız. İlk olarak, özelleştiriciye gireceğiz. Şimdi özellikle Astra’nın teması için, sadece tam geniş içeriği etkinleştirdiğimden emin olmak istiyorum. Ve ayrıca kenar çubuğundan kurtulmak istiyorum. Öyleyse tamam, hadi bulalım. Ve kenar çubuğunu kapatacağım. Mükemmel. Lütfen ve yayınlayın. Ve burada gerçekten sevmediğim tek şey, başlığın bu başlığının görünmesi. Bu yüzden Astra teması bize onu ortadan kaldırmanın bir yolunu veriyor. Herhangi bir Genesis çerçevesi veya bir Genesis çocuğunun temasını kullanırsanız, sayfanın başlığını devre dışı bırakmanın bir yolu da vardır, bu da oldukça havalıdır. Şimdi geri dönüp görürsek, başlığın kaybolduğunu görebilirsiniz. Ve tasarlanmış çok iyi bir profesyonel veranda var. Üç sayfalık demo sitemiz için devam edelim ve başka bir sayfa oluşturalım. Ve bu bir iletişim sayfası olacak.
Şarkı koleksiyonuna geri döneceğim, aşağı kaydıracağım ve bulalım, işte burada.İletişim için tam bir sayfa şablonumuz var.Daha önce olduğu gibi, bir tıklama bir kez, bir gruplama ve tam bir blok koleksiyonu gireceğim.Bunun başlığını devam ettireceğim ve devre dışı bırakacağım.Yayınlayalım.Ve göreceğiz.Ve bunun gibi, harika bir hesap bloğumuz ve iyi bir sayfamız var.
Bir tane daha yapalım. Acele ettiğimizi biliyorum. Ama şimdi bütün gün yok. TAMAM. Yani bu bizim hakkımızda sayfa olacak. Size gösterdiğim aynı süreçten geçeceğim. Düzeni açın, koleksiyonu açın. Ve bu sefer Slate koleksiyonunda, yaklaşık sayfa için bir şablon seçeceğim. Patlama. Yani orada. Şimdi, elbette, bunu gerçek müşteri için yaparsanız, renkler, metin ve fotoğraf alışverişi yapmanız gerekebilir. Bu nedenle, daha önce var olan bir parça ve düzen olmasına rağmen, tüm bunları çok havalı diğer bloklarla yaptığınız gibi girip değiştirebilirsiniz. Öyleyse devam edelim ve bunun için sayfa başlığını devre dışı bırakalım. Geri dön ve gör. TAMAM. TAMAM. Siteye sahip olduğumuz gibi bakarsak, aslında çok ilginç değil. Öyleyse birkaç şey yapalım. Birincisi, yaptığımız sayfalarla bir menü alalım. Yani bir kez daha, bunu sadece ayarlamaktan yapacağım. Başlıkta görünen ana menü için bir menü yapacağım. Ve devam edelim ve yaptığım sayfayı ekleyelim, yayınlayın. Sağ üst köşede menüyü görebilirsiniz. Şimdi, yapmak istediğim başka bir şey, ana sayfa ayarlarına gitmek ve en son gönderiye karşı yaptığım ana sayfa sayfasını görüntülemek. TAMAM. Ve kısa sürede, üç sayfalık bir site oluşturdum. Şimdi açıkça bir kez daha, bu gerçek bir proje ise, yapılması gereken ek işleriniz olacak.
Ancak yalnızca örneğin, koleksiyonun bir site prototipi oluşturmanıza veya yalnızca bir site başlatmanıza nasıl yardımcı olabileceğini görebilirsiniz. Bu, ilk önce sipariş edilen tema için büyük bir bütçesi olmayan özel projeler veya müşteriler için çok iyidir. Bu yüzden, yazılı taş koleksiyonunda gördüğümüz gibi, Genesis çocuklarının teması için modern bir analog olarak düşünün. Ve çok güzel olan şey, onu kendiniz inşa edebilmenizdir. Dolayısıyla, eklentiden sağladığınız şey dışında, isteklerinize göre yeniden kullanılmak üzere kendi koleksiyonunuzu ve şablonunuzu oluşturabilirsiniz. Bu yüzden devam edip ikinci gösteriyi burada göstereceğiz. Ve size kendi koleksiyonunuzu nasıl oluşturabileceğinizi göstereceğim. Hazır mısın? Hızlı hareket edeceğiz. Ama bence onu takip edebilirsin. Tamam, hadi yuvarlanalım. İşte başlıyoruz. Bakın, Brew Collection adlı bu koleksiyonu yapacağım ve önden başlayıp sizin için geriye doğru çalışacağım. Hata, videomuzun çalındığından emin olalım. Tamam, işte öyle. TAMAM. Yani bir kez daha, tüm bu bireysel parçalara sahibiz. Ve sonra bu parçaların tümü karıştırılmış ve bu sayfanın düzenini oluşturmak için yeniden bir araya gelmiştir. Bu yüzden geri dönüp yaptığım içecek koleksiyonunu görürsek, çok daha basit. Ama bu beş sayfalık bölümüm var. Ve sonra tam sayfa düzeni oluşturmak için birleştirdim. Şimdi, bu bunun için takip ettiğim bir öğretici. Bu Rob Stinson’a ait ve bağlantıları daha sonra sizinle paylaşacağım. Bu yüzden bir kez daha Astra temasını çalıştırıyorum. Mandiri teması. Kendinizi rahat hissettiğiniz temaları kullanın.
Ve devam edelim ve yeni bir sayfanın oluşturulmasını görelim. Yani bu bir blok inserter. Ve bunu sadece bunun WordPress çekirdek bloğu olduğunu göstermek için gösteriyorum. Ve sonra, Genesis blokları bulacaksınız. Ve bu özel koleksiyonu yapmaktan bahsettiğimizde, çekirdek blokların ve Genesis bloklarının bir kombinasyonunu veya hatta bunu yaptıysanız özel blokları kullanabilirsiniz. Ben de öyle yaptım, blok düzenleyiciye girdim ve bu düzeni yaptım. Bu yüzden koleksiyonu bir an için unutun. Bu sadece, bunu editörde tasarladım. Ben bir tasarımcı değilim, bu yüzden işler güzel görünmüyorsa beni suçlama çünkü [gülüyor] Burada size nasıl güzel bir tasarım yapacağınızı göstermeye çalışmıyorum. Bu yüzden bunu editörde yaptım ve sadece bunu nasıl kullanabileceğinizi göstermek istiyorum, sonra eklentinizi geri dönmek ve oluşturmak için. Bu yüzden sayfayı bu bireysel sayfanın tüm parçalarına ve bileşenlerine kestim. TAMAM. Rob öğreticisine geri dönersek, burada gösteri eklentisi için yaptığı kısmı gösteriyor. Ve bundan sonraki ilk şey bize bir eklenti iskelesi yapmamız gerektiğini gösterdi. Öyleyse yapımızı, isterseniz eklentimiz için oluşturalım. Ve devam edip kod düzenleyicimi açacağım. Öğretici öğreticiyi takip edelim. Solda WordPress sitem için yeni yükledim. Bir Genesis Brew’im var, bu yaptığım eklenti. Ve bu klasörlerin her birine ve sonra bu ana Genesis Brew’e sahibim, bu ana eklenti dosyası. Ve öğretici ile birlikte aşağıdakilere geri döndüğümde, bir başlığım var. Bu sadece standart bir WordPress eklenti başlığı.

Ve bakalım. Öğretici Rob’daki üçüncü adıma gidersek, bir koleksiyon kaydedeceğiz ve ana sayfamızın düzenini ekleyeceğiz. Tam ekrana geri dönelim. Şimdi, kodun ayrıntılarını keşfetmeyeceğim çünkü Rob öğreticisinde çok iyi bir iş çıkarıyor. Ama size sadece bu işlevi, nasıl çalıştığını göstermek istiyorum, Genesis blokları bu düzen bileşenini kaydeder. Ve bu home.php dosyasına içerik koydum. Bakalım. Ve bu sadece açılış PHP etiketi, dönüş ve birçok blok işaretlemesidir. Size nasıl çalıştığını göstereyim, işaretleme çalışıyor çünkü bence oldukça havalı. TAMAM. Buraya geri dönelim, sayfanın tüm düzenine sahibiz. Bu Ellips’i açar ve kod düzenleyicisine gidersem, bunu yapmanın iki yolu vardır. Tüm bunları manuel olarak seçebilir, klavyeme ekleyebilirim veya yalnızca tüm içeriği kopyalayıp panoya koyma seçeneği var. Bu yüzden bunu yapacağım. Kod editörüme geri dönersem, tüm bunları baştan başlamak ve size temelde ne olduğunu göstermek için devam edeceğim ve sileceğim. PHP’imi etiketleyin, yazabiliyorsam tekrar etiketleyin ve sonra panoumda olanı gerçekten atıyorum ve bu tüm işaretleme bloğu. Buradaki tek ilginç şey, kopyanızda bir kesme işaretiniz varsa, bundan kaçınmalısınız. Bu yüzden lütfen bunu yapın. Onu kurtar. TAMAM. Ve eğer sitemize geri dönersek, buradan çıkalım. Yeni bir sayfa ekleyeceğim. Oops, bundan kurtul. Düzenimize gidelim. Oops, tamam. Koleksiyon, demleme koleksiyonu ve hepsi dibe.
Şimdi bu sayfanın düzenini tıkladığımda, yapılan tüm işaretleme bloklarını Home.php’den bu sayfaya atmaktır. Bence bu çok havalı çünkü tüm bunları ellerinizle kodlamanıza gerek yok. Gerçekten blok düzenleyicisinde yapıyorsunuz ve ardından blok işaretlemesini eklentinize kopyalayıp ekleyin. Öyleyse bölüme bakalım. Aynı şey. Sadece bununla atılan işaretlemeyi engeller. Ve sana kahramanını göstereyim. Yani bu bir kahraman. Hepsi kapanış bloğunda. Bu, içindeki resim bulunan bir kapanış bloğu. Ve bunun ne kadar pratik olduğunu bilmiyorum. Ama demomum için sahip olduğum şey bu. Bu yüzden kod düzenleyicimi tekrar açacağım. Ve bu sefer, tüm içeriği kopyalamak yerine, sadece o bölüm için ihtiyacım olan kodu kopyalamak istiyorum. Öyleyse devam edelim, panonumuza alın. Ve ben sadece buraya gelip doğrudan bu kahramana koyacağım.php. Ve bunu bu demodan önce birbirimiz için yaptım. Artık bitmiş ürün türünün ekran görüntülerini, isterseniz, bunun ve düzeni için depolayan bu varlık klasörü. Yani geri gelirsem. TAMAM. Düzeni açalım, koleksiyon. TAMAM. Orada gördüğümüz ekran görüntüleri, bu ekran görüntülerinin her birinde, varlık klasöründeki görüntülerdir, böylece nereden geldiğini biliyorsunuz. TAMAM. Rob Tutorial tarafından gösterildiği gibi, temel olarak, kendi koleksiyonumuzdan iskele yapabilir, editöre yapabilir, kodun içine bir blok işaretleme ekleyebiliriz.
Ve koleksiyonun kullanılabilir olması için yaptığım eklentiyi gerçekten etkinleştirmem gerektiğini görebilirsiniz. Ve burada bir not daha, sadece bir koleksiyona sahip bir eklenti gösteriyorum. Ancak, içinde geniş bir koleksiyona sahip eklenti yapmak da mümkündür. TAMAM. Çok hızlı gittiğini biliyorum. Ama isterseniz daha sonra tekrar izleyebilirsiniz. TAMAM. Öyleyse, yeni bir başlangıç ​​şablonu veya koleksiyonu yaptığım gibi, kütüphaneniz artar. Bu nedenle, belirli bir endüstri veya belirli bir müşterinin nişiyle çalışıyorsanız, bu koleksiyonu yapabilir ve istediğiniz zaman tekrar kullanabilirsiniz. Tabii ki, rengi veya tipografiyi veya bunun gibi şeyleri değiştirebilirsiniz. Ancak bu kütüphaneyi topladığınız her projede hayal edin. Böylece ilerlediğinizde, geri dönebilir ve hızlı bir şekilde yeni bir proje oluşturabilirsiniz, bu oldukça havalı, çünkü bir kez daha projenin yaşam döngüsünü azaltma, yeniden kullanma, geri dönüştürme, kısaltma fikrine geri dönecek ve temel olarak çalışıyor Daha zor, daha akıllı değil. . Beklemek. Değil. [Gülmek] gerçekten yanlış. Değil. Daha zor değil, daha akıllı çalışmak istiyorsun. Yani evet. Peki. İyi. Sadece dikkat edersen görüyorum. Uyanık için teşekkürler. TAMAM. Burada bitirdiğimizde, bugün konuştuğumuzu daha fazla keşfetmek için kullanabileceğiniz birkaç kaynağı paylaşmak istiyorum. TAMAM. Bu yüzden burada ilk nokta, Genesis bloklarını kullanarak parçaların, düzenlerin ve koleksiyonların nasıl yapılacağına dair resmi öğretici.