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

(Gutenberg) blok düzenleyicisi, şüphesiz modern WordPress'in merkezidir. WordPress Core yolunda tam site düzenlemesi ile bloklar ve vaat ettikleri her şey burada kalacak.

Ancak bloklar her zaman istediğimizi yapmaz veya istediğimiz gibi görünmez. Yaşamak için siteler tasarlar ve kurarsanız, çerez kesici şeylerin yalnızca web'de bir yere kadar gittiğini bilirsiniz. Bir noktada, gerçekten belirli bir şekilde görünmek veya davranmak için sayfadaki bu "bloğa" ihtiyacımız var.

Özel bloklar burada çözüm! Ancak özel bloklar, bir süredir WordPress kullanan birçok kişi için geliştirme için çok farklı bir yaklaşım gerektirir.

Farklı? Evet!

Zor? Numara!

Size tamamen özel bir bloğu nasıl kolayca oluşturabileceğinizi göstereceğim. Ve yaklaşık 10 dakika sürecek. Burada blok düzenleyicide beceri kazanmak isteyen herhangi bir serbest çalışan veya ajans ekibi için, bunu seveceğinizi düşünüyorum!

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 verdiğini düşünelim. WordPress + WooCommerce'in en iyilerini kullanır, ancak raftan çalışmayan birkaç parça vardır. Bunlardan biri tam burada:

Boşver ! Bu tanıdık geliyor!

Evet, Volan fiyatlandırma tablosunu özel bir blok olarak yeniden oluşturacağız. ? Etrafta tak-çalıştır fiyatlandırma tablo blokları var, ancak bizimki oldukça benzersiz, bu yüzden kendimizinkini alacağız.

kurulum

Bu hikayenin kahramanı, Genesis Custom Blocks adlı bir eklentidir. Wordpress.org'da ücretsizdir ve aşağıdakiler dahil bazı harika gelişmiş özellikler sunan bir Pro sürümü vardır:

• Yeni WordPress kurulumu – Local'in övgüleri
• Genesis Özel Blokları (ücretsiz olan) kurulu ve aktif
• Genesis Blok Teması için bir alt tema

Önemli Not: Genesis Özel Blokları, Genesis Çerçevesine, yukarıdaki Genesis Blok 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 yapabilmemizdir.

WordPress yöneticisinde, soldaki menüde Özel Bloklar > Yeni Ekle'ye gidin

Şimdi gördüğümüz ekran, blokumuz için alanlar eklemek de dahil olmak üzere bir sürü şeyi yapılandıracağımız Blok Oluşturucu.

Bu eklentinin çalışma şekli, Blok Düzenleyicide ç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ş/düşünülmüş arayüz, özel blok oluşturma sürecini hızlandıran şeylerden biridir. Giriş kullanıcı arayüzünü çözmenize gerek yok.

Eklediğimiz Blok Detayları:

• Adı: Fiyatlandırma Tablosu
• Slug: fiyatlandırma tablosu
• Simge: Genesis Gezegeni

Eklediğimiz Alanlar:

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

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

Yayınla'ya bastığımızda, bir sonraki adımda ne yapacağımızı soran bir uyarı alırız.

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

Blok şablonlama

Blok aslında kayıtlıdır ve şimdi blok düzenleyicide mevcuttur. Yeni bir gönderiye/sayfaya atlayabilir ve diğerlerini yaptığınız gibi bloğu ekleyebilirsiniz. Yine de (henüz) hiçbir şey göstermeyecekti. Burada şablonlama devreye giriyor.

Genesis Özel Blokları, WordPress geliştiricilerinin son on yılda geliştirdiğimiz birçok şablonlama uygulamasından yararlanmasını sağlar. Çok basit ve çok tanıdık gelecek.

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

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

Burada dikkat edilmesi gerekenler:

• Temamıza (alt tema) bir blocks klasörü ekliyoruz.
• Şu anda üzerinde çalıştığımız bloğa özel bir klasör ekliyoruz ve buna blok slug'u ne olursa olsun adını veriyoruz, bu durumda bu pricing-table .
• Bir PHP dosyası ve CSS dosyası ekliyoruz. Bunlar, şablon kodumuzu ekleyeceğimiz yer.

PHP dosyamızdan başlayarak, temel HTML biçimlendirme ve CSS sınıflarımızla başlayalım.

Bu şöyle görünecek:

<div class="fw-pricing-table">
    <img src="">
    <h3 class="fw-pricing-table__name"></h3>
    <p class="fw-pricing-table__description"></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><span> monthly visits</span></p>
			<progress value="" max="400000"></progress>
		</div>
		<div>
			<p><span>GB Disk</span></p>
			<progress value="" max="50"></progress>
		</div>
		<div>
			<p><<span>GB bandwidth</span></p>
			<progress value="" max="500"></progress>
		</div>
	</div>
</div>

Dikkat edilmesi gerekenler:

• Başlamaya hazır bir sürü CSS sınıfımız var. Not: CSS ile başa çıkabilirsiniz, ancak size mantıklı geliyor.
• Kaynak çubuklarımızı işlemek için <progress> HTML etiketini kullanacağız.

Şimdi eklentinin bize sunduğu basit bir PHP işleviyle çalışacağız. Kullanılabilir bir sürü var, ancak muhtemelen zamanınızın çoğunu aşağıdaki bu ikisini kullanarak geçireceksiniz. Bu blokta yalnızca ilkini kullanıyoruz.

Böylece, bu işlevlerle PHP şablon dosyamız şimdi şöyle görünür:

<div class="fw-pricing-table">
    <img src="<?php block_field( 'icon' ); ?>">
    <h3 class="fw-pricing-table__name"><?php block_field( 'name' ); ?></h3>
    <p class="fw-pricing-table__description"><?php block_field( 'description' ); ?></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span><?php block_field( 'price' ); ?></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="<?php block_field( 'url' ); ?>">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span><?php block_field( 'site-count' ); ?></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><?php block_field( 'monthly-visits' ); ?><span> monthly visits</span></p>
			<progress value="<?php block_field( 'monthly-visits' ); ?>" max="400000"></progress>
		</div>
		<div>
			<p><?php block_field( 'disk-space' ); ?><span>GB Disk</span></p>
			<progress value="<?php block_field( 'disk-space' ); ?>" max="50"></progress>
		</div>
		<div>
			<p><?php block_field( 'bandwidth' ); ?><span>GB bandwidth</span></p>
			<progress value="<?php block_field( 'bandwidth' ); ?>" max="500"></progress>
		</div>
	</div>
</div>

Verileri almak ve çıkarmak için bu block_field() işlevini nerede kullandığımızı görebilirsiniz. Fonksiyonda bir argüman olarak sadece alanın sümüklü böceklerini kullanırız. Örneğin block_field( 'icon' ) . Bu, bir resim alanı türü olduğundan, o resmin URL'sini döndürür.

CSS'imiz için bunu block.css şablon dosyasına yerleştiriyoruz. Bir kez daha, CSS istediğiniz şekilde döndürülebilir ve yazdığım belirli kod bu eğitimle özellikle alakalı değil, ancak kontrol etmeniz için burada 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ı, <progress> etiketinin stilidir. Biraz saçma ama durum bu. Bunlar için iç içe geçmiş bir div kurulumuna geçebilir ve <progress> öğesinden kaçınmak istiyorsanız, ayarlanan genişlikleri hesaplayabilirsiniz.

Ve bu kadar! ?

Özetleme:

1. WP Admin'de bloğu ekledik ve yapılandırdık
2. 29 satırlık temel HTML ve tek bir PHP işlevi içeren bir PHP şablon dosyası oluşturduk.
3. block.css için bazı CSS'leri block.css'e bıraktık.

Özel bloğumuzu kullanma

Şimdi 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.

“Blok ekle” butonuna tıklayarak Fiyatlandırma Tablosu bloğumuzun kullanıma hazır olduğunu burada görebilirsiniz.

Aşağıdaki, dört sütunum olduğunu ve özel bloğu dört kez eklediğimi gösteriyor. Tek bir blok seçtiğimde, bunun bize içerik bırakmak için alanlarımızı veren form kullanıcı arayüzüne geçtiğini görebilirsiniz. Form görünümünden uzağa tıklamak bize önizlemeyi verir.

Blok düzenleyicide harika görünüyor ve ön uçta da aynı derecede iyi görünüyor. Sütun bloğundan da yararlandığımız için her şey güzel ve duyarlı.

Gutenberg'in duyarlı sütun bloğundan çalışmamız ve ona yaslanabilmemiz için yaptığımız tasarımlarla, bu bloğun benim için toplam yapım süresi 10 dakikadan azdı.

Bloğu daha da geliştirmek için yapabileceğiniz birkaç şey var:

• Çoğul hale getirilmesi gereken birkaç dize var. Yani 1'den fazla site limiti olan planlar için "WordPress Sitesi" "WordPress Siteleri" olmalıdır. PHP şablon dosyasındaki bazı temel mantık bunu çözebilir.
• Sütun bloğunu atlayabilir ve bunun yerine Tekrarlayıcı alanını (Pro özelliği) kullanabilir ve tüm planları tek bir blokta toplayabilirsiniz.
• Daha büyük sayılara virgül ekleyin.
• İlerleme çubukları, maksimum ilişkilere tam değeri gösterir. Bu biraz tuhaf görünüyor. Değerlerle ilgili daha kavramsal bir şeye geçebilirsiniz.

İşleri toparlamak

Bu bloğu indirip kurmak isterseniz, dosyaları buradan indirebilirsiniz. Özel blokların içe aktarılmasıyla ilgili belgeler burada bulunabilir.

Diğer önemli bağlantılar:

• eklenti
• Dokümanlar sitesi
• Genesis Gevşek Topluluğu

Biraz daha Genesis Özel Bloklarını çalışırken görmek isterseniz, DE{CODE}'daki son bir oturumda, yaklaşık 15 dakikada dört ayrı özel blok (artan karmaşıklık) oluşturdum ve demosunu yaptım. İsteğe bağlı kayda buradan göz atın.

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

Şerefe!

Flywheel ile Genesis tarafından oluşturulmuş StudioPress temalarına ücretsiz erişim elde edin!

Barındırma sağlayıcınızın sizin için en iyisini yapması önemlidir ve bu performans ve güvenliğin ötesine geçer! 35'ten fazla Genesis tarafından oluşturulmuş StudioPress temasına ek ücret ödemeden erişim sağlayan Flywheel, sitelerinizi web sitenizin hedeflerine uygun bir şekilde oluşturabilmeniz veya yeniden yapılandırabilmeniz için size güzel bir tema kitaplığı sağlar! Volan hakkında daha fazla bilgiyi buradan edinebilirsiniz.