Pengantar Tema Blok WordPress

Komponen yang membentuk tema khas WordPress tidak banyak berubah selama bertahun-tahun. Sedemikian rupa sehingga salah satu pendiri proyek Matt Mullenweg menyindir itu sekolah lama Kubrick theme (dirilis tahun 2005) masih berfungsi dengan sistem manajemen konten versi modern.

Tentu, pengembang tema telah menambahkan tambahan mereka sendiri. Kami telah melihat semuanya, mulai dari UI pengaturan kompleks hingga pembuat halaman terintegrasi. Tetapi pada intinya, tema telah mempertahankan struktur yang konsisten. Artinya, sampai pengenalan tema blok.

Tema blok diatur untuk menjadi masa depan WordPress. Mereka akan mengubah cara kita membangun dan memelihara situs web. Selain itu, mereka lebih terintegrasi dengan editor blok Gutenberg daripada rekan “klasik” mereka.

Ingin tahu tentang apa semua keributan itu? Hari ini, kami akan memberi tahu Anda tentang dasar-dasar tema blok WordPress. Sepanjang jalan, kita akan mengeksplorasi bagaimana mereka membandingkan dan kontras dengan tema tradisional. Mari kita mulai!

Mengapa Blokir Tema?

Selama beberapa tahun pertama keberadaannya, editor blok terutama menjadi sarana untuk menata dan membangun konten. Jika dikombinasikan dengan tema klasik, ini berarti halaman dan postingan dapat dibuat sesuai keinginan Anda.

Dalam hal membuat perubahan yang memengaruhi keseluruhan tema, Penyesuai WordPress tetap menjadi sumber daya utama. Alat ini menyediakan akses ke pengaturan desain dan tata letak yang telah disediakan oleh pembuat tema. Jika tidak ada di Customizer, Anda mungkin harus menggali kode.

Namun, salah satu prinsip utama editor blok adalah membuat antarmuka yang lebih terpadu di dalam dasbor WordPress. Kami telah melihat ini terjadi dengan layar Widget pindah ke UI berbasis blok. Penyesuai tidak cocok dengan cetakan ini.

Pengenalan Full Site Editing (FSE) adalah langkah selanjutnya dalam proses ini. Ini lebih dari sekadar menata halaman dan posting kami. Sekarang, setiap aspek desain tema (header, footer, template halaman, dll.) dapat dikelola langsung di dalam WordPress.

Blokir tema berfungsi sebagai pintu gerbang ke fungsi ini. Karena itu, mereka dibuat secara eksklusif dengan mempertimbangkan balok.

Mengubah header situs web dengan Editor Situs WordPress.

Cara Kerja Bagian Dalam dari Tema Blok WordPress

Tidak ada banyak kesamaan antara tema klasik dan blok. Namun keduanya memiliki seperangkat aturan dasar yang memandu riasan mereka. Jika Anda mengunduh tema blok dan menavigasi struktur filenya, beberapa kontras utama mungkin menonjol.

File Template Adalah HTML, Bukan PHP

Dalam tema klasik, Anda akan menemukan file template dengan nama seperti index.php dan header.php. Blokir tema menghilangkan PHP dan sebagai gantinya membawa .html ekstensi file.

Di dalam, file template berisi kombinasi HTML dan markup blok. Sebagai contoh, mari kita lihat ini templat dari dokumentasi WordPress resmi:

<!-- wp:site-title /-->

<!-- wp:image {"sizeSlug":"large"}  -->
<figure class="wp-block-image size-large">
    <img  src="https://cldup.com/0BNcqkoMdq.jpg" alt="" />
</figure>
<!-- /wp:image -->
 
<!-- wp:group -->
<div class="wp-block-group">
    <!--  wp:post-title /-->
    <!--  wp:post-content /-->
</div>
<!-- /wp:group -->
 
<!-- wp:group -->
<div class="wp-block-group">
    <!-- wp:heading  -->
     <h2>Footer</h2>
    <!--  /wp:heading -->
</div>
<!-- /wp:group -->

Markup blok terlihat sangat mirip komentar HTML. Tapi itu termasuk sintaks untuk memanggil blok tertentu ke dalam template. Situs web Pengeditan Situs Lengkap WordPress memiliki referensi berguna yang mencakup markup untuk setiap blok default.

Dan jika jenis kode ini tampak familier, Anda mungkin pernah melihat sesuatu yang serupa di dalam kode Gutenberg editor kode melihat.

Penggunaan Folder

Tema klasik mampu menyimpan template di dalam folder, tetapi itu bukan keharusan. Blokir tema memerlukan beberapa subfolder:

/parts
Berisi item yang dapat digunakan kembali seperti header, footer, dan sidebar.

/templates
Rumah template untuk berbagai jenis konten. Item seperti halaman, arsip posting, dan, posting tunggal adalah contoh umum. Perhatikan bahwa konvensi penamaan mereka mengikuti Hirarki template WordPress – kesamaan lain dengan tema klasik.

Salah satu efek samping positif dari penataan ini adalah tema-tema akan lebih tertata dengan baik. Memiliki struktur folder standar berarti lebih sedikit waktu yang dihabiskan untuk mencari file tertentu.

Tema.json Styling

Itu theme.json file digunakan untuk menetapkan pengaturan default ke editor blok. Ini berarti, antara lain, dimungkinkan untuk mengatur palet warna default, tipografi, dan spasi. Pengaturan dapat di seluruh situs atau diterapkan ke blok tertentu.

Sejak theme.json akan secara otomatis menghasilkan CSS yang sesuai berdasarkan konfigurasinya, Anda mungkin tidak perlu mengisi tema style.css mengajukan cukup banyak. Dalam skenario itu, stylesheet digunakan untuk mendefinisikan beberapa dasar, sementara yang lainnya bergantung pada file model baru ini.

Contoh struktur tema blok WordPress.

Membuat dan Mengedit Template

WordPress telah lama menyediakan kemampuan untuk mengedit file template tema langsung di dalam dasbor. Ini sering tidak disarankan, karena bahkan kesalahan pengkodean kecil dapat membuat situs web tidak dapat diakses. Belum lagi kemungkinan perubahan ditimpa saat tema diperbarui (dengan demikian, sebagian alasan untuk menggunakan tema anak). Beberapa pengembang mematikan fitur sama sekali untuk menghindari kemungkinan bencana yang jauh.

Tetapi tema blok adalah tentang pengeditan di dalam dasbor. Template yang disertakan dengan tema dapat diubah melalui editor blok, dan template kustom baru juga dapat dibuat.

Seperti yang Anda harapkan, kode sepenuhnya opsional dalam skenario ini. Semuanya dapat diedit melalui Editor Situs baru (Penampilan > EditorDiperlukan WordPress 5.9 atau lebih tinggi) yang menggantikan Penyesuai lama saat tema blok diaktifkan. Dan, seperti halnya halaman atau postingan, Editor Situs menggunakan UI editor blok yang sudah dikenal.

Dan itu tidak semua. Perubahan apa pun yang Anda buat dalam WordPress dapat diekspor. Ini akan memungkinkan Anda untuk menggunakan tema blok khusus Anda di beberapa situs web.

Ini menurunkan hambatan masuk bagi mereka yang ingin menyesuaikan atau bahkan membuat tema. Sekarang, mata dasar untuk desain dan pengetahuan tentang blok dapat mengarah ke situs web khusus.

Daftar template di dalam WordPress Full Site Editor.

Hal-hal yang Perlu Diingat

Sebelum Anda masuk dan mengganti semua situs web Anda untuk menggunakan tema blok, ada beberapa hal yang harus Anda ketahui.

Pertama dan terpenting, tema blok adalah teknologi baru lahir. Tidak semua fitur telah diselesaikan dan beberapa praktik terbaik perlu diperbaiki. Plus, kami baru mulai melihat bagaimana tema ini bekerja di lingkungan produksi. Harapkan beberapa perubahan saat berbagai hal berkembang.

Jika Anda membuat situs untuk klien dan ingin mempertahankan fleksibilitas di masa mendatang, tema hibrida mungkin menarik. Mereka memungkinkan penggunaan fitur FSE sambil tetap mempertahankan struktur PHP dari tema klasik. Anda bahkan bisa retrofit tema yang ada untuk menggunakan fungsi ini.

Terakhir, blokir tema tidak mengeja akhir untuk tema klasik – setidaknya tidak untuk masa mendatang. Dengan itu, transisi ke cara tema baru ini tidak harus segera. Tidak apa-apa, misalnya, bereksperimen dengan balok di lingkungan lokal sambil tetap mengandalkan tema klasik favorit Anda dalam produksi.

Contoh dari tema Dua Puluh Dua Puluh Dua.

Blokir Sumber Daya Tema

Jika Anda ingin mempelajari lebih lanjut tentang tema blok WordPress, ada beberapa sumber luar biasa yang tersedia. Berikut adalah beberapa favorit kami:

.

Leave a Comment

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

Scroll to Top