Cara Menggunakan Komponen Blok Template di Tema WordPress Klasik

Terkadang, fitur tak terduga itulah yang membuat WordPress begitu kuat. Hal-hal kecil yang Anda tidak tahu bahwa Anda membutuhkannya dapat berdampak besar.

WordPress 6.1 telah menghadirkan salah satu permata tersembunyi ini: kemampuan untuk menggunakan bagian template blok dalam tema klasik.

Dibutuhkan kemampuan tema blok dan mem-portingnya ke rekan klasik mereka. Tema klasik masih mendominasi pasar. Oleh karena itu, masuk akal untuk mempercepatnya dengan alat terbaru.

Mari jelajahi apa yang dilakukan fitur ini dan mengapa Anda mungkin ingin menggunakannya. Kemudian, kami akan mendemonstrasikan bagaimana Anda dapat menerapkannya di situs web Anda.

Apa itu Bagian Templat Blok?

WordPress 5.9 memperkenalkan kemampuan Pengeditan Situs Penuh. Saat digabungkan dengan tema blok, fitur ini memungkinkan pengguna untuk mengedit berbagai template di bagian belakang.

Blokir bagian templat mewakili area mana pun dari situs web yang ingin Anda kelola di dalam WordPress Editor Situs. Contohnya termasuk header dan footer situs. Tapi mereka juga bisa memasukkan area khusus.

Secara teoritis, bagian templat blok bisa seluas atau sesempit yang Anda suka. Ini memungkinkan desainer web untuk menentukan hanya elemen tema yang ingin mereka buat dapat diedit. Paling-paling, ini menawarkan kenyamanan bagi pemilik situs sambil melindungi tata letak dari kecelakaan besar.

Berbeda dengan templat khusus yang telah lama digunakan dalam tema klasik, bagian templat blok disimpan sebagai file HTML. Mereka juga terdiri dari markup blok, bukan PHP.

Tema klasik secara tradisional menggunakan Penyesuai WordPress untuk membuat area tertentu dapat diedit. Fitur ini berfungsi cukup baik tetapi tidak memiliki kemampuan lanjutan dari Editor Situs. Sekarang, ada cara bagi tema-tema ini untuk melewati batasan itu.

Menambahkan Bagian Templat Blok ke Tema Klasik

Menambahkan bagian templat blok ke tema WordPress klasik adalah proses 4 langkah yang relatif sederhana. Berikut adalah contoh cara mengatur sesuatu.

Langkah 1: Izinkan Bagian Blok Templat di Tema Anda

Langkah pertama melibatkan mengizinkan tema Anda untuk menggunakan bagian-bagian template blok. Ini dapat dicapai dengan menambahkan cuplikan kode ke tema Anda functions.php mengajukan:

Potongan kode milik Pelajari WordPress.

Perhatikan bahwa jika tema Anda functions.php file sudah memiliki fungsi yang menambahkan dukungan tema untuk item lain, Anda hanya perlu menempelkannya add_theme_support( 'block-template-parts' ); dalam fungsi yang ada.

Langkah 2: Rancang Templat Anda di Editor Blok

Selanjutnya, saatnya menjalankan Editor Blok WordPress. Cara termudah untuk melakukan langkah ini adalah dengan membuat halaman baru – kita akan memanggil halaman kita sendiri “Bagian Blok Uji”. Itu dapat dihapus setelah bagian template blok kita aktif dan berjalan.

Di dalam halaman ini, kami telah membuat tata letak dua kolom sederhana. Ini mencakup informasi kontak klien fiktif kami dan tautan ke profil media sosial mereka. Semuanya di sini menggunakan blok standar yang disertakan dengan inti WordPress.

Idenya adalah untuk memungkinkan klien kami mengedit informasi ini sesuai kebutuhan – tetapi tanpa harus menyentuh tata letak situs lainnya.

Template blok kami dibuat di dalam WordPress.

Langkah 3: Salin dan Tempel Markup Blok ke dalam File HTML

Sekarang setelah tata letak kami dibuat, saatnya untuk menyalin dan menempelkan markup blok ke dalam file HTML.

Ada beberapa opsi untuk menyalin markup blok:

  1. Pilih blok yang ingin Anda salin di dalam Editor Blok dan masukkan CTRL + C (atau COMMAND + C di Mac) untuk menyalin markup, ATAU;
  2. Masukkan Editor Kode WordPress untuk halaman Anda dengan mengklik Pilihan tombol di dalam Editor Blok, lalu salin markup yang relevan;

Beralih ke Editor Kode di dalam WordPress.

Selanjutnya, buka kode atau aplikasi pengeditan teks pilihan Anda dan rekatkan markup blok ke dalam file baru. Markup kami terlihat seperti ini:

Simpan file sebagai dokumen HTML ke dalam /parts direktori tema Anda (buat folder jika belum ada). Perhatikan bahwa Anda tidak memerlukan apa pun di file selain markup blok.

Sebagai contoh kita, kita akan memanggil file kita footer-contact-info.html. Catat nama file, karena kita akan membutuhkannya di langkah terakhir.

Langkah 4: Tambahkan Templat Bagian Blok ke Tema Anda

Sekarang kita telah membuat template bagian blok, kita harus menambahkannya ke template PHP di tema klasik kita.

WordPress memiliki fungsi bawaan yang disebut block_template_part() yang dapat kita gunakan untuk memanggil bagian templat blok kita ke dalam tema. Itu menggunakan nama file HTML (minus ekstensi “.html”) untuk mencari template. Berikut tampilan kode kita:

Kita dapat menambahkan fungsi ini di mana pun kita ingin menampilkan bagian template blok. Dalam hal ini, kami akan menambahkannya ke footer.php templat.

Yang tersisa hanyalah mengunggah file tema yang diperbarui ke server. Setelah selesai, kami akan menyegarkan halaman dan menemukan bagian templat blok kami dengan bangga ditampilkan di bagian bawah situs.

Bagian templat blok kami ditampilkan di ujung depan situs web.

Edit Bagian Templat Blok Anda Kapan Saja

Setiap kali kami perlu melakukan perubahan, bagian templat blok kustom kami hanya dengan beberapa klik saja. Untuk menemukan template, kunjungi Tampilan > Bagian Templatlalu klik nama templat (footer-contact-info).

Layar Bagian Templat WordPress.

Pengeditan dapat dilakukan melalui Editor Blok – sama seperti halaman atau pos WordPress mana pun. Simpan perubahan Anda dan perubahan tersebut akan muncul di bagian depan situs web.

*Catatan: Beberapa implementasi awal dari fitur ini mengandung bug yang menyebabkan bagian templat blok tidak dapat diedit di dalam WordPress. Menambahkan a theme.json file ke tema untuk sementara memperbaiki masalah.

Mengubah tata letak di dalam Editor Blok WordPress.

Membawa Tema WordPress Klasik ke Era Blok

Kemampuan untuk menggunakan bagian-bagian templat blok dalam tema WordPress klasik adalah sebuah langkah maju. Pengembang tema dapat tetap menggunakan kekuatan dan fleksibilitas yang ditawarkan oleh tema berbasis PHP sambil menambahkan dukungan template blok jika diperlukan.

Ini juga merupakan cara untuk membuka elemen tertentu hingga pengeditan back-end tanpa harus beralih ke tema blok. Prosesnya mudah diterapkan dan jauh lebih sedikit padat karya daripada memulai dari awal. Hasilnya adalah penghematan waktu dan uang.

Selain itu, ini memberi kami cara untuk melampaui Penyesuai. Fitur itu kemungkinan akan dihapus dari waktu ke waktu, jadi kemampuan untuk beralih ke blok komponen template membantu kami memulai migrasi lebih awal.

Yang terbaik dari semuanya, ada banyak kasus penggunaan potensial untuk fungsi ini. Ini mungkin hanya hal yang Anda butuhkan untuk menambahkan lapisan kenyamanan ke proyek WordPress Anda berikutnya.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top