Cara Membuat Template Gutenberg

Salah satu keuntungan membuat halaman dan posting dengan Gutenberg Blocks adalah kemampuan untuk menyimpannya sebagai template. Membuat template untuk Gutenberg adalah cara yang bagus untuk membantu mempercepat proses penerbitan. Ada beberapa cara untuk membuatnya. Pada artikel ini, kita akan melihat cara membuat template Gutenberg.

Kami akan membahas tiga metode untuk membuatnya:

1. Membuat tata letak untuk ditambahkan ke pustaka Gutenberg Anda untuk diekspor atau dikloning.
2. Membuat tata letak untuk disalin dan ditempel saat Anda ingin menggunakannya.
3. Membuat tata letak untuk ditambahkan sebagai tata letak default untuk halaman, posting, atau jenis posting kustom.

Metode ini memungkinkan kita menggunakan kembali blok saja. Tidak ada pengaturan lain yang akan disertakan.

Mengapa Membuat Template Gutenberg

Setelah Anda mendesain halaman atau tata letak posting Anda, Anda dapat menyimpan daftar blok dengan atributnya untuk digunakan kembali. Ini memberi Anda awal yang baik dalam membuat konten karena Anda tidak harus fokus pada tata letak. Templat blok memungkinkan Anda memiliki desain yang konsisten.

Templat blok dapat memiliki konten placeholder. Mereka bisa statis atau dinamis. Anda dapat menentukan status default sesi editor. Anda bahkan dapat mengimpor atau mengekspor template Anda sebagai file JSON, sehingga Anda dapat menggunakan kembali desain Anda di beberapa situs web atau membaginya dengan orang lain. Anda dapat menguncinya sehingga pengguna dapat menambahkan konten tetapi tidak mengubah blok.

Metode 1: Buat Template Tata Letak

Templat tata letak memungkinkan Anda menggunakan fitur multi-pilih yang awalnya ditambahkan untuk memungkinkan kami memindahkan atau menghapus beberapa blok pada saat yang bersamaan.

Kami dapat memilih dan menambahkan satu blok pada satu waktu atau beberapa blok sekaligus ke perpustakaan blok global kami yang dapat digunakan kembali. Ini memudahkan untuk mengekspornya sebagai file JSON.

Contoh Tata Letak Template

Saya telah membuat tata letak sederhana yang dapat saya gunakan sebagai posting blog, ulasan produk, dll. Sangat mudah untuk menyimpan ini ke perpustakaan untuk digunakan kembali.

Tempatkan kursor Anda di blok pertama yang ingin Anda sertakan dan seret mouse Anda ke blok terakhir untuk menyorotnya.

Di atas blok pertama, Anda akan melihat tiga titik di sebelah kiri. Klik titik dan pilih Tambahkan ke Blok yang Dapat Digunakan Kembali .

Bilah pesan hijau di bagian atas akan menunjukkan bahwa blok telah dibuat. Beri nama tata letak yang masuk akal bagi Anda dan pilih Simpan .

Pesan di bilah hijau akan menunjukkan bahwa blok telah diperbarui. Anda telah membuat tata letak!

Untuk menggunakannya, buat halaman atau posting baru dan buka opsi (tiga titik). Di bawah Alat , pilih Kelola Semua Blok yang Dapat Digunakan Kembali .

Ini menunjukkan daftar semua blok Anda. Di sini, Anda dapat mengekspor dan mengimpor blok Anda sebagai file JSON. Blok yang dapat digunakan kembali bersifat global. Jika Anda mengedit, maka Anda akan mengedit aslinya. Untuk mempertahankan yang asli dan membuat postingan baru menggunakan tata letak, Anda harus mengekspornya, mengganti namanya, dan mengimpor tata letaknya.

Duplikat Posting

Untungnya, kami memiliki pilihan lain. Sebuah plugin bernama Duplicate Post menambahkan fitur kloning untuk blok Gutenberg.

Dalam pengaturan Duplikat Posting , aktifkan Blok .

Saya sekarang memiliki opsi kloning di perpustakaan Blok. Kloning tata letak yang Anda inginkan lalu edit. Setiap tata letak bersifat global, jadi Anda harus mengkloning dan mengedit setiap kali Anda ingin menggunakan tata letak.

Metode 2: Cara Alternatif Mudah untuk Membuat Template Gutenberg

Metode ini hanyalah cheat sederhana, tetapi berhasil. Pertama, buat tata letak yang ingin Anda gunakan kembali lengkap dengan konten placeholder apa pun.

Selanjutnya, beralih ke editor kode. Untuk melakukan ini, pilih tiga titik di sudut kanan atas. Di bawah Editor , pilih Editor Kode .

Sorot dan salin kodenya.

Tempel kode ke editor teks dan simpan untuk digunakan kembali.

Saat Anda siap menggunakan template, cukup buat postingan baru, beralih ke editor kode, dan tempel kode.

Saya sekarang memiliki posting baru yang dapat saya mulai menambahkan konten.

Metode 3: Buat Jenis Posting Kustom

Templat blok adalah argumen. Anda dapat menambahkan argumen ke halaman dan posting, atau Anda dapat membuat jenis posting baru. Tata letak akan dikaitkan dengan jenis posting itu, jadi ketika Anda membuat jenis posting itu, tata letak ditampilkan secara default.

Ini bagus untuk membuat tata letak untuk berbagai jenis artikel. Misalnya, Anda dapat memiliki jenis posting ulasan produk, jenis posting ringkasan liburan, jenis posting resep, dll., dan ketika Anda memuat jenis posting, itu secara otomatis memberi Anda tata letak yang terkait dengannya.

Membuat template meliputi:

• Mengatur status default secara dinamis.
• Mendaftarkannya sebagai tata letak default untuk jenis posting tertentu.

Mendeklarasikan Template

Template itu sendiri akan dideklarasikan sebagai larik blockTypes. Ini dilakukan dalam JavaScript atau di PHP. Seperti yang ditunjukkan oleh buku pegangan pengembang Gutenberg, itu akan terlihat seperti ini:

const template = [

[ 'block/name', {} ], // [ blockName, attributes ]

];

Atau ini:

'template' => array(

array( 'block/name' ),

),

Mendaftarkan Template dalam Jenis Posting Kustom

Jenis posting kustom juga dapat mendaftarkan template. Ini bisa terlihat seperti ini:

function myplugin_register_book_post_type() {

$args = array(

'public' => true,

'label'  => 'Books',

'show_in_rest' => true,

'template' => array(

array( 'core/image', array(

'align' => 'left',

) ),

array( 'core/heading', array(

'placeholder' => 'Add Author...',

) ),

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

),

);

register_post_type( 'book', $args );

}

add_action( 'init', 'myplugin_register_book_post_type' );

Array mengidentifikasi dari mana blok berasal dan nama blok. Dalam contoh ini, array menggunakan 'inti/paragraf'. Ini berarti blok tersebut berasal dari inti WordPress (sebagai lawan dari plugin) dan namanya paragraf (mengidentifikasi blok mana yang akan digunakan).

Mendaftarkan Template di Halaman dan Posting

Jika Anda menambahkan template ke halaman atau posting, itu akan dimuat secara otomatis setiap kali Anda membuat halaman atau posting. Saya lebih suka menambahkannya ke jenis posting khusus tertentu karena Anda memiliki lebih banyak kebebasan berkreasi dan menyederhanakan proses pembuatan konten dengan membuat templat lebih mudah ditemukan.

Jika Anda memutuskan untuk menambahkannya ke halaman atau posting, Anda dapat menggunakan kode ini:

function my_add_template_to_posts() {

$post_type_object = get_post_type_object( 'post' );

$post_type_object->template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

);

$post_type_object->template_lock = 'all';

}

add_action( 'init', 'my_add_template_to_posts' );

Template Bersarang

Anda bahkan dapat membuat sarang template di dalam blok Container (misalnya, blok kolom). Ini dilakukan dengan menetapkan templat bersarang ke blok itu sendiri. Sebagai contoh:

$template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add a root-level paragraph',

) ),

array( 'core/columns', array(), array(

array( 'core/column', array(), array(

array( 'core/image', array() ),

) ),

array( 'core/column', array(), array(

array( 'core/paragraph', array(

'placeholder' => 'Add a inner paragraph'

) ),

) ),

) )

);

Mengunci Template

Anda dapat mengunci template menggunakan kode ini:

'template_lock' => 'all', // or 'insert' to allow moving

Contoh Template dengan Jenis Posting Kustom

Saya ingin membuat jenis posting khusus yang disebut Buku yang kita lihat di atas. Ini akan menampilkan template tata letak dan akan menyertakan gambar, judul, dan paragraf.

Kode akan ditempelkan ke file functions.php. Selalu gunakan tema anak saat menambahkan kode ke file PHP. Jika tidak, kode akan ditimpa saat Anda memperbarui tema.

Anda harus menulis kode dengan tangan (saya sarankan menggunakan contoh kode yang saya tunjukkan). Salah satu opsi adalah membuat tata letak yang Anda inginkan dan kemudian melihat kode (klik pada tiga titik di sudut kanan atas dan pilih Editor Kode di bagian Editor ). Ini akan menunjukkan blok dengan atributnya dari tata letak yang telah Anda buat sehingga Anda dapat mengetahui sebelumnya bagaimana mengatur blok dalam kode Anda.

Masuk ke Theme Functions (functions.php) dan paste kodenya. Saya menempelkan kode di bagian paling bawah. Ini adalah situs pengujian dan saya tidak berencana untuk menyimpan kodenya, jadi saya tidak menggunakan tema anak.

Jenis posting baru ditambahkan ke menu dasbor yang disebut Buku. Ini termasuk daftar dan tautan Tambahkan Baru . Saya mengklik Add New dan template baru saya ditambahkan ke editor di mana saya bisa mulai menambahkan konten.

Blok ditempatkan dalam urutan yang muncul dalam kode dan menyertakan atribut yang ditugaskan. Anda dapat menempatkan sebanyak mungkin blok dalam kode yang Anda inginkan dan memberi mereka atribut apa pun yang Anda inginkan. Anda dapat membuat sebanyak mungkin jenis posting khusus yang Anda inginkan dan masing-masing dapat memiliki tata letak default yang unik. Contoh ini mencakup teks placeholder.

Mengakhiri Pikiran

Itulah tampilan kami tentang cara membuat template Gutenberg. Ketiga metode ini bekerja dengan baik. Templat yang dapat digunakan kembali atau salah satu metode duplikasi mungkin merupakan pilihan yang lebih baik jika Anda tidak ingin membuat jenis posting kustom baru. Saya suka jenis posting khusus karena memudahkan untuk memilih jenis konten yang ingin Anda buat dan template sudah disortir untuk Anda.

Jenis posting khusus mudah dibuat jika Anda merasa nyaman dengan kode dan paling nyaman digunakan di WordPress. Kerugian utama dalam membuat template untuk ditambahkan ke functions.php Anda adalah Anda membuat tata letak dalam kode daripada di editor Gutenberg, sehingga tidak visual.

Saya suka Anda dapat menambahkan konten yang sudah jadi ke template Anda. Ini bagus untuk teks placeholder untuk menunjukkan kepada kontributor informasi apa yang pergi ke mana. Templat yang dapat digunakan kembali adalah cara yang bagus untuk mempercepat dan merampingkan proses alur kerja Anda, dan merupakan cara yang bagus untuk membuat tata letak halaman dan posting untuk dibagikan.

Kami ingin mendengar dari Anda. Sudahkah membuat template Gutenberg? Beri tahu kami tentang pengalaman Anda di komentar di bawah.

Gambar Unggulan melalui Nadia Snopek / shutterstock.com