Volan fiyatlandırma tablosunu özel bir blok olarak yeniden oluşturma (yaklaşık 10 dakika içinde)

Volan fiyatlandırma tablosunu özel bir blok olarak yeniden oluşturma (yaklaşık 10 dakika içinde)

(Gutenberg) blok editörü şüphesiz modern WordPress’in merkezidir. WordPress Core yolunda tam site düzenlemesi ile bloklar ve vaat ettikleri her şey kalmak için burada.

Ancak, bloklar her zaman istediğimizi yapmaz veya istediğimiz gibi görünmez. Yaşamak için siteler tasarlar ve inşa ederseniz, çerez kesici şeylerin web’de çok ileri gittiğini bilirsiniz. Bir noktada, gerçekten belirli bir şekilde bakmak veya davranmak için sayfadaki “engellemeye” ihtiyacımız var.

Özel bloklar burada çözümdür! Ancak özel bloklar, bir süredir WordPress’te yuvarlanan birçok kişi için, dev için çok farklı bir yaklaşım gerektirir.

Farklı? Evet!

Zor? Hayır!

Sana nasıl tamamen özel bir blok oluşturabileceğini göstereceğim. Ve yaklaşık 10 dakika sürecek. Burada blok editörü etrafında beceri kazanmak isteyen herhangi bir serbest çalışan veya ajans ekibi için, sanırım bunu seveceksiniz!

Blok

Bir proje üzerinde çalıştığımızı ve bir tasarımcının bize bir e-ticaret web sitesi için tatlı bir tasarım yaptığını hayal edelim. WordPress + WooCommerce’in en iyisini kullanır, ancak raftan çalışmayan birkaç parça vardır. Bunlardan biri de şu:

Holup! Bu tanıdık geliyor!  😉

Evet, Volan fiyatlandırma tablosunu özel bir blok olarak yeniden inşa edeceğiz. 🔥 Etrafta tak-çalıştır fiyatlandırma masa blokları var, ama bizimki oldukça benzersiz, bu yüzden kendi oyunumuzu yapacağız.

Kurulum

Bu hikayenin kahramanı Genesis Custom Blocks adlı bir eklentidir. wordpress.org ücretsizdir ve şunları içeren bazı harika gelişmiş özellikler sunan bir Pro sürümü vardır:

  • Taze WordPress yükleme – Yerel iltifatlar
  • Genesis Özel Bloklar (ücretsiz bir) yüklü ve etkin
  • Genesis Block Teması için bir alt tema

Önemli Not: Genesis Özel Blokları Genesis Framework’e, yukarıdaki Genesis Block Temasına veya diğer eklentilere veya temalara bağlı değildir.

Bloğu kaydetme ve yapılandırma

Bu eklentinin güzelliği, WordPress yöneticisinde çok şey yapmamızdır.

WordPress yöneticisinde, sol menüde, Yeni Ekle > Özel Bloklar

Şimdi gördüğümüz ekran, alan eklemek de dahil olmak üzere bloğumuz için bir dizi şeyi yapılandıracağımız Blok Oluşturucu.

Blok Oluşturucu Ekranı

Bu eklentinin çalışma şekli, Blok Düzenleyicisi’nde çalışan kullanıcının form benzeri bir arayüzdeki alanlar aracılığıyla içerik ve veri girdiği özel bloklar oluşturmasıdır. Bu basitleştirilmiş/fikirli arayüz, özel blok oluşturma işlemini hızlandıran şeylerden biridir. Giriş kullanıcı arabirimini bulmanız gerekmez.

Eklediğimiz Blok Ayrıntıları şunlardır:

  • Adı: Fiyatlandırma Tablosu
  • Sümüklüböğürtlen: fiyatlandırma tablosu
  • Simge: Genesis Planet

Eklediğimiz Alanlar şunlardır:

Ad Sümüklüböcek Alan Türü
İkon ikon Resim
Ad ad Metin
Tarif tarif Metin
Fiyat fiyat Sayı
Düğme URL’si düğme url’si URL
Site Sayısı site sayısı Sayı
Aylık Ziyaretler aylık ziyaretler Sayı
Disk Alanı disk alanı Sayı
Bant genişliği bant genişliği Sayı

Özel bloğumuza alan eklemek şöyle görünür:

Tüm alanlarımızı ekledikten sonra şöyle görünür:

Yayına bastığımızda, bir sonraki soruda ne yapacağımızı soran bir istem alıyoruz.

Bu bizi bir sonraki adıma götürür:

Bloğun templating

Blok aslında kayıtlı ve şimdi blok düzenleyicisinde kullanılabilir. Yeni bir gönderiye / sayfaya atlayabilir ve bloğu diğerlerine olduğu gibi ekleyebilirsiniz. Yine de (henüz) hiçbir şey görüntülemez. İşte burada templating devreye giriyor.

Genesis Custom Blocks, WordPress devs’in son on yılda geliştirdiğimiz birçok templating uygulamasından yararlanmasına izin verir. Süper basit ve çok tanıdık gelecek.

Alt temamızda, şu gibi birkaç yeni klasör ve dosya ekliyoruz:

/genesis-block-child-theme
    /blocks
        /pricing-table
            block.php
            block.css

Burada dikkate alınması gerekenler:

  • Bir blocks klasörüne (alt tema) ekledi.
  • Şu anda üzerinde çalıştığımız bloğa özel bir klasör ekliyoruz ve sümüklüböcek blokları ne olursa olsun adını alıyoruz, ki bu durumda pricing-table.
  • Bir PHP dosyası ve CSS dosyası ekliyoruz. Şablon kodumuzu ekleyeceğimiz yer burasıdır.

PHP dosyamızdan başlayarak, temel HTML işaretleme ve CSS sınıflarımızla başlayalım.

Bu şöyle görünecek:


    
    

    

    

        $
        
        /mo
    

	Get Started
	

		
		WordPress Site
	

	

		

			
 monthly visits

			
		

		

			
GB Disk

			
		

		

			
<GB bandwidth

Dikkate alınması gerekenler:

  • Gitmeye hazır bir sürü CSS dersimiz var. Not: CSS ile başa çıkabilirsiniz, ancak sizin için mantıklıdır.
  • Bunu kullanacağız. Kaynak çubuklarımızı işlemek için HTML etiketi.

Şimdi eklentinin bize kullanıma sundugını sağlayan basit bir PHP işleviyle çalışacağız. Bir sürü mevcut, ancak muhtemelen zamanınızın çoğunu aşağıdaki bu 2’yi kullanarak geçireceksiniz. Bu blokta sadece ilkini kullanıyoruz.

Fonksiyon Ne işe yatırıyor
block_field() Getirir ve çıkışlar blok bir sayfaya/gönderiye eklenirken kullanıcı tarafından alana girilen veriler.
block_value() Bloğu bir sayfaya/gönderiye eklerken kullanıcı tarafından alana girilen verileri getirir.

Bu işlevlerle, PHP şablon dosyamız şimdi şöyle görünüyor:


    
    

    

    

        $
        
        /mo
    

	">Get Started
	

		
		WordPress Site
	

	

		

			
 monthly visits

			
		

		

			
GB Disk

			
		

		

			
GB bandwidth

Bunu nerede kullandığımızı görebilirsiniz. block_field() işlevi verileri getirmek ve çıktısını almak için çalışır. Sadece işlevinde bir argüman olarak alanın sümüklüböncesini kullanırız. Örneğin. block_field( ‘icon’ ). Bu, bir görüntü alanı türü olarak, bu görüntünün URL’sini döndürür.

CSS’miz için bunu blok .css şablon dosyasına yerleştiriyoruz. Bir kez daha, CSS istediğiniz şekilde döndürülebilir ve yazdığım belirli kod özellikle bu öğreticiyle ilgili değildir, ancak kontrol etmeniz için buraya bırakacağım.

.fw-pricing-table {
    border-radius: 4px;
    transition: box-shadow .3s ease-in-out;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    padding: 2rem 2em 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fw-pricing-table:hover {
    box-shadow: 0 5px 22px 0 rgb(0 0 0 / 10%);
}

.fw-pricing-table img {
    max-height: 100px;
    width: auto;
}

.fw-pricing-table__name {
    margin-top: 20px;
    font-weight: 400;
}

.fw-pricing-table__description {
    font-size: 16px;
    font-style: italic;
    font-family: serif;
    max-width: 160px;
}

.fw-pricing-table__price {
    color: #50c6db;
    display: flex;
    align-items: flex-start;
    font-size: 46px;
    font-weight: 500;
}

.fw-pricing-table__price span:last-child {
    font-size: 24px;
    margin-top: 6px;
}

.fw-pricing-table__btn {
    display: block;
    background-color: #338199;
    color: #fff;
    padding: 6px 20px;
    border-radius: 18px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 10px;
}

.fw-pricing-table__btn:hover {
    background-color: #01516e;
    color: #fff;
}

.fw-pricing-table__site-count {
    font-size: 14px;
    margin-top: 24px;
    font-weight: 500;
    color: #50c6db;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.fw-pricing-table__resources {
    margin-top: 8px;
}

.fw-pricing-table__resources>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fw-pricing-table__resources p {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 18px;
}

.fw-pricing-table__resources progress(value) {
    margin-top: 6px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border: none;
    border-radius: 3px;
    overflow: hidden;
}

.fw-pricing-table__resources progress(value)::-webkit-progress-bar {
    background-color: #e7e7e7;
}

.fw-pricing-table__resources progress(value)::-webkit-progress-value {
    background-color: #50c6db;
    border-radius: 3px;
}

Buradaki CSS’nin en ilginç kısmı, etiket. Biraz karışık, ama olan bu. Bunlar için iç içe geçmiş bir div kurulumuna geçebilir ve önlemek istiyorsanız ayarlanan genişlikleri hesaplayabilirsiniz .

Ve işte bu! 💪

Yeniden yapılandırma:

  1. WP Admin’e blok ekledik ve yapılandırdık
  2. 29 satırlık temel HTML ve tek bir PHP işlevine sahip bir PHP şablon dosyası oluşturduk
  3. Biraz CSS düşürdük. block.css bizim stil için.

Özel bloğumuzu kullanma

Artık atlayıp yeni bir gönderi veya sayfa oluşturabilir ve bloğu ekleyebiliriz. Fiyatlandırma seçenekleri için bu 4 sütunlu stili korumak için önce bir sütun bloğu ekliyoruz ve ardından özel fiyatlandırma tablosu bloğumuzu her sütuna bırakıyoruz.

Öğesini tıklatma “Blok ekle” düğmesini görebilirsiniz, burada Fiyatlandırma Tablosu bloğumuzun kullanıma hazır olduğunu görebilirsiniz.

Aşağıda, dört sütuna sahip olduğumu ve özel bloğu dört kez nasıl eklediğimi göstermektedir. Bireysel bir blok seçerken, bize içerik bırakma alanlarımızı veren form kullanıcı arabirimine geçtiğini görebilirsiniz. Form görünümünden uzağa tıklamak bize önizleme sağlar.

Blok editöründe güzel görünüyor ve ön uçta olduğu kadar iyi görünüyor. Sütun bloğundan da yararlandığımız için, her şey güzel ve duyarlı.

Tasarımlarımız çalışmamız ve Gutenberg’in duyarlı sütun bloğuna yaslanabilmemiz için yapıldığında, bu bloğun benim için toplam yapım süresi 10 dakikadan azdı. 🙂

Bloğu daha da iyileştirmek için yapabileceğiniz birkaç şey vardır:

  • Çoğullaştırılması gereken birkaç dize vardır. Yani ” WordPress Sitesi” 1’den fazla site sınırı olan planlar için “WordPress Siteleri” olmalıdır. PHP şablon dosyasındaki bazı temel mantık bunu çözebilir.
  • Sütun bloğunu atlayabilir ve bunun yerine Yineleyici alanını (Pro özelliği) kullanabilir ve tüm planları tek bir blokta içerebilirsiniz.
  • Daha büyük sayılara virgül ekleyin.
  • İlerleme çubukları maksimum ilişkiler için tam değeri gösterir. Bu biraz garip görünüyor. Değerlerin daha kavramsal bir şeye geçebilirsiniz.

İşleri toparlama

Bu bloğu indirip yüklemek istiyorsanız, dosyaları buradan indirebilirsiniz. Özel blokları alma belgelerine buradan ulaşabilirsiniz.

Diğer önemli bağlantılar:

Genesis Custom Blocks’un biraz daha fazlasını iş başında görmek isterseniz, DE{CODE} adresindeki son bir oturumda, yaklaşık 15 dakika içinde dört ayrı özel blok (artan karmaşıklık) oluşturdum. İsteğe bağlı kayıtlara buradan göz atın.

Umarım bunu yararlı bulmuşsunuzdur ve özel tasarımlar ve yapılar için Blok Düzenleyici’nin gücünden yararlanmanın gerçekten çok kolay olduğunu anlamışsınızdır.

Şerefe!

Genesis tarafından oluşturulan StudioPress temalarına Volan ile ücretsiz erişin!

Barındırma sağlayıcınızın sizin için en iyi olanı yapması önemlidir ve bu performans ve güvenliğin ötesine geçer! 35’ten fazla Genesis tabanlı StudioPress temasına ek ücret ödemeden erişen Flywheel, sitelerinizi web sitesi hedeflerinize uygun bir şekilde oluşturabilmeniz veya yeniden yapılandırabilmeniz için size güzel bir tema kütüphanesi sunar! Volan hakkında daha fazla bilgiyi buradan edinebilirsiniz.

Yorum Yap
0 Yorum yapan