Daha İyi Bir Deneyim için Gutenberg Blok Şablonları Oluşturun

WordPress 5.x, dünyanın en popüler CMS'sinin en son sürümüdür. Yeni sürümün ilginç bir özelliği, WordPress'çilerin platformda içerik oluşturma biçiminde devrim yaratmaya hazır olan Gutenberg Düzenleyicisidir. En azından resmi sürüm bu!

Gutenberg editörü hakkında ne düşündüğünüzden bağımsız olarak, bu editörün gelecek WordPress sürümlerinde ortadan kalkmayacağını anlamak önemlidir. Nedeni basit: “Klasik” WordPress editörü yaşını göstermeye başladı. Buna ek olarak, benzer platformlarda bulunan editörlere aşina olan yeni nesil kullanıcılar, Gutenberg stil editörü ile klasik editörden daha rahatlar.

Gutenberg Bloklarını Özelleştirme

Gutenberg editörü, içeriğe istenen işlevselliği eklemek için istendiğinde kullanılabilecek ayrı bileşenler olan 'bloklar' fikrine dayanmaktadır. Bu Gutenberg blokları sayesinde kullanıcı, okuyucular için değer katan ayarlanabilir ve bağımsız olarak yönetilebilir bölümler ekleyebilir.

Özelleştirme, WordPress'in temelinde yer aldığından, Gutenberg editörü, kullanıcıların CMS'lerine özel bloklar eklemelerine yardımcı olan özelleştirilmiş blok şablonlarını destekler.

Özelleştirilmiş Gutenberg blok şablonları oluşturmanın iki yolu vardır. Her iki yöntemin de biraz WordPress geliştirme bilgisi gerektirdiğini unutmayın.

Gutenberg Bloklarını Kaydedin

İlk yöntem, önceden doldurulmuş bloklar oluşturmak için kullanılabilecek özel blok şablonları oluşturmayı içerir. Bunun için function.php dosyasına aşağıdaki kodu ekleyin.

 add_action('init', function() {
    $args = dizi(
        'genel' => doğru,
        'etiket' => 'Haberler',
        'show_in_rest' => doğru,
        'template_lock' => 'tümü',
        'şablon' => dizi(
            dizi('çekirdek/paragraf', dizi(
                'yer tutucu' => 'Son Dakika Haberleri',
            ) ),
            dizi('çekirdek/görüntü', dizi(
                'hiza' => 'doğru',
            ) ),
        ),
    );

    register_post_type('haber', $args);
} );

Gutenberg bloğu için bu özel şablonun çalışırken nasıl görüneceği aşağıda açıklanmıştır:

Yukarıdaki kod parçacığında, bloğun içeriğinden 'core/paragraph' dizi parametresi sorumludur. Benzer şekilde, 'çekirdek/görüntü' dizi parametresi, görüntüleri üç şekilde yüklemenize izin verir: Doğrudan yükleme, Medya Kitaplığından Seçme ve Bir URL kullanarak Gömme.

'show_in_rest' parametresi, WordPress çekirdeğine bu özel bloğun WordPress REST API aracılığıyla alınabilmesi gerektiğini belirtir.

'template_lock' argümanı, 'all' olarak ayarlandığında, özel blokların şablona eklenmesini (veya kaldırılmasını) engeller.

Bu şablona özel blok eklemek söz konusu olduğunda, 'şablon' alt dizisini kullanın. Örneğin, aşağıdaki parçacığı göz önünde bulundurun:

 'şablon' => dizi(
            dizi( 'çekirdek/başlık', dizi( 'düzey' => '4', 'içerik' => 'Başlık') ),
            dizi('çekirdek/paragraf'),
        )

Gutenberg Eklentisi Oluşturun

Özel şablon ve Gutenberg şablonlarıyla çalışırken en iyi uygulama, özel Gutenberg Düzenleyici eklentisi için özel bir eklenti oluşturmaktır.

Tüm eklentiler gibi, bu eklenti de web sitesinde kurulu tüm eklentiler için ayrı klasörler içeren wp-content/plugins dizininde bulunacaktır.

Eklentiyi oluşturmak için wp-content/plugins dizinine gidin ve yeni bir klasör oluşturun. Klasörün adı, özel Gutenberg şablon eklentisinin adı olmalıdır. Bu eğitimin amacı için eklentime 'Gutenberg Blokları' adını verdim. Böylece klasörün adı ' Gutenberg-Blocks ' olacaktır.

Bu klasörde Gutenberg-blocks.php adında bir dosya ve ona aşağıdaki kodu oluşturun:

 /**
 * Eklenti Adı: Gutenberg Blocks
 * Yazar: Muhammed Owais Alam
 * Açıklama: Bu eklenti, kullanıcıların Gutenberg editörü için bir WordPress Gutenberg özel şablonu eklemesine izin verir.
 * Sürüm: 1.0.0
 */

add_action('init', function() {
    $args = dizi(
        'genel' => doğru,
        'etiket' => 'Haberler',
        'show_in_rest' => doğru,
        'template_lock' => 'tümü',
        'şablon' => dizi(
            dizi('çekirdek/paragraf', dizi(
                'yer tutucu' => 'Son Dakika Haberleri',
            ) ),
            dizi('çekirdek/görüntü', dizi(
                'hiza' => 'doğru',
            ) ),
        ),


    );

    register_post_type('haber', $args);
} );

Bu kodun yalnızca bir kılavuz olması amaçlandığını ve ayrıntıları gereksinimlerinize uyacak şekilde değiştirebileceğinizi unutmayın. Yüklendiğinde, bu eklenti mevcut eklenti listesinde görünür.

Gutenberg WordPress Tema Örneği – Gutenberry

Dikkat dağıtmayan yeni editör Gutenberg, neredeyse bir yıldır WordPress çekirdeğinin bir parçası. Ancak, Gutenberry çıkana kadar internette başarılı ve iyi düşünülmüş bir Gutenberg teması bulmak oldukça zordu.

Gutenberry şu anda en iyi %100 Gutenberg'e hazır temalardan biridir. Bu temiz ve minimal tema, Gutenberg'de oluşturuldu ve size benzeri görülmemiş düzenleme kolaylığı ve örnek teşkil eden hız getirdi. Örneğin, Google Speed, Gutenberry A 97'yi derecelendirir.

Bu ipucu teması, tümü zengin medya entegrasyonuna sahip modern bloglar için oluşturulmuş 5 Ana Sayfa tasarımıyla birlikte gelir. Ayrıca, Gutenberry size tonlarca Blog ve Gönderi düzeni, 10'dan fazla widget, çalışma formu ve güçlü sosyal medya entegrasyonu sunar.

Gutenberg temasının dikkate değer özellikleri şunlardır:

• Örnek Veri Yükleyici
• Ömür Boyu 7/24 Destek
• Optimize Kaynak Kodu
• MailChimp-hazır
• Tam Duyarlı
• Alternatif Modül Düzenleri
• 3 Dinamik Blog Düzeni

Kapatıyorum!

Gutenberg şablonlarını özelleştirmek, özel gereksinimlerle başa çıkmak için Gutenberg düzenleyicisini özelleştirmenin harika bir yoludur. WordPress'teki her şeyde olduğu gibi, özel Gutenberg şablonu oluşturma süreci, basit bir satır içi kod ekleme veya özel bir eklenti kurma meselesidir.