Cara Membuat Tema Blok: 4 Metode Terbaik di tahun 2023

Jika Anda baru mengenal pengembangan tema WordPress, Anda mungkin bertanya-tanya bagaimana cara membuat tema blok. Sejak diperkenalkannya editor blok, cara pembuatan tema WordPress telah berubah untuk mengakomodasinya.

Jika Anda membandingkan tema klasik, misalnya Dua Puluh Tujuh Belas dengan tema blok, misalnya Dua Puluh Dua Puluh Tiga, Anda akan melihat sejumlah perbedaan.

Perbedaan utamanya adalah pada tema klasik, halaman web dirender berkat template PHP. Dalam tema blok, mereka dirender melalui blok, templat HTML (di folder bagian dan templat), dan pola blok PHP (di folder pola).

Anda mungkin juga memperhatikan bahwa tema blok tidak memiliki file functions.php ; ini opsional dalam tema blok. Ada file style.css , tetapi kosong selain dari header. Warna dan tipografi tema ditangani dalam file theme.json .

Dalam postingan ini, kita akan mempelajari cara membuat tema blok sehingga Anda dapat memahami bagaimana rasanya memanfaatkan pengalaman Editor Situs WordPress yang baru.

📚 Daftar Isi :

• Mengapa membangun tema blok?
• Cara membangun tema blok dengan Theme Handbook
• Cara membuat tema blok dengan FullSiteEditing.com
• Menggunakan tema Blockbase sebagai titik awal
• Cara membuat tema blok dengan plugin Buat Tema Blok

Mengapa membangun tema blok?

👉 Ada beberapa manfaat membangun tema blok, yaitu:

• Blokir tema hanya memuat gaya yang diperlukan untuk blok yang dirender pada halaman, sehingga meningkatkan kinerja.
• Blokir tema tidak perlu mengantrekan lembar gaya secara manual.
• Alih-alih menggunakan fungsi add_theme_support() , file theme.json menangani aspek khusus tema, seperti logo khusus.
• Tidak perlu menulis kode tambahan untuk menerapkan fitur aksesibilitas (mis. Lewati ke konten, navigasi keyboard, dan tengara). Mereka dibuat secara otomatis.
• Pengguna dapat menyesuaikan warna dan tipografi untuk tema dan blok.
• Pengguna tidak perlu mengetahui kode untuk mengedit semua bagian situs web mereka.

Cara membangun tema blok dengan Theme Handbook

Buku Pegangan Tema WordPress memiliki gambaran umum yang bagus tentang tema blok dengan perbandingan antara mereka dan tema klasik. Tema blok telah didukung sejak diperkenalkannya WordPress 5.9. Mereka juga kadang-kadang dikenal sebagai tema penyuntingan situs lengkap ( walaupun sejak saat itu WordPress beralih dari terminologi editor situs lengkap ).

Untuk mulai membuat tema blok, Anda memerlukan file style.css dan file templates/index.html . File theme.json bersifat opsional tetapi sangat disarankan.

Contoh struktur tema ditunjukkan di bawah ini.

File theme.json berisi pengaturan gaya untuk tema Anda, termasuk warna, tipografi, tata letak, dan spasi. Ini juga mengontrol bagaimana bagian templat diatur pada halaman (header, footer, dll.) dan memungkinkan Anda menentukan templat halaman khusus dan gaya global.

Editor Situs memberi Anda kendali penuh atas desain situs Anda. Untuk menggunakannya, Anda harus memiliki tema blok aktif di situs Anda. WordPress hadir dengan beberapa, atau Anda dapat menemukan lebih banyak lagi dengan masuk ke Appearance > Themes > Add New dan memfilter berdasarkan Block Themes . Arahkan kursor ke tema yang Anda inginkan dan klik tombol Instal untuk menginstalnya, dan tombol Aktifkan untuk menjadikannya tema aktif.

Lalu buka Penampilan > Editor untuk mengaktifkan Editor Situs.

Anda dapat menggunakan antarmuka editor blok untuk mengubah templat tema. Berikut contoh mengubah template 404 di Twenty Twenty Three:

Dan inilah contoh mengedit bagian template Post Meta di Twenty Twenty Three:

Anda juga dapat mengedit gaya tema dengan memilih templat atau bagian templat dan mengeklik ikon Gaya setengah bulan. Berikut adalah contoh mengedit palet warna dengan panel Styles :

Teks di dalam templat atau bagian templat File HTML tidak dapat diterjemahkan. Jika Anda ingin tema Anda dapat diterjemahkan, Anda harus membuat blok pola PHP. Contoh diberikan pada halaman Internasionalisasi dari buku pegangan tema blok.

Anda dapat menggunakan Editor Situs untuk menyesuaikan tema yang ada dan mengekspor perubahan sebagai tema baru. Disarankan agar Anda menggunakan WordPress 6.0 atau lebih tinggi untuk melakukan ini untuk dukungan tema lengkap. Anda mungkin juga merasa berguna untuk mengunduh Data Pengujian Unit Tema untuk membuat tema blok Anda.

Opsi ekspor tersedia saat mengedit template tema atau bagian template. Pilih tiga titik , lalu pilih Ekspor .

Tema Anda akan memiliki nama yang sama dengan tema aktif. Jadi sebelum Anda menginstal tema Anda di situs, Anda harus mengganti nama file zip menjadi nama tema baru Anda. Anda juga perlu mengganti nama tema dan domain teks di file style.css Anda, serta nama penulis dan tautan di style.css dan readme.txt .

👉 Anda dapat menggunakan alat pencarian dan ganti untuk mengubah hal berikut:

• Domain teks dalam string terjemahan
• Awalan untuk fungsi PHP
• Siput yang digunakan dalam blok pola

Cara membuat tema blok dengan FullSiteEditing.com

Carolina Nymark memiliki sumber daya yang bagus untuk membuat tema blok di FullSiteEditing.com, yang menjadikannya alat hebat lainnya tentang cara membuat tema blok.

Dia memandu Anda membuat tema blok dari awal, dimulai dengan membuat file style.css , templates/index.html , theme.json dan functions.php . Anda perlu menginstal plugin Gutenberg untuk mengikuti tutorial.

Anda akan mempelajari lebih lanjut dengan mengikuti tutorial dan menambahkan kode seperti yang diberikan, tapi jangan khawatir jika Anda membuat kesalahan – Anda dapat mengunduh kode di GitHub.

Bagian pengaturan di theme.json adalah tempat Anda menentukan pengaturan seperti warna dan tipografi, dan bagian gaya adalah tempat Anda menerapkannya pada tema.

Theme.json mengikuti format ini:

 { "version": 2, "settings": { "color": {}, "typography": {} }, “styles”: {} }

Beginilah tampilan tema setelah warna dan tipografi ditentukan di theme.json :

Berikut adalah definisi warna dalam pengaturan:

 "color": { "palette": [ { "slug": "primary", "color": "#111", "name": "Primary" }, { "slug": "secondary", "color": "#fefefe", "name": "Secondary" }, { "slug": "tertiary", "color": "#383838", "name": "Tertiary" }, { "slug": "quaternary", "color": "#00838f", "name": "Quaternary" }, { "slug": "quinary", "color": "#4fb3bf", "name": "Quinary" } ],

Dan contoh penggunaannya di bagian gaya:

 "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--secondary)" }, "elements": { "link" :{ "color": { "text": "var(--wp--preset--color--quinary)" } } },

Berikut referensi di bagian gaya ke bagian template header dan footer:

 "templateParts": [ { "name": "header", "area": "header", "title": "Header" }, { "name": "footer", "area": "footer", "title": "Footer" } ]

Pelajaran selanjutnya mempelajari sintaks theme.json lebih dalam, menunjukkan kepada Anda cara:

• Aktifkan dan nonaktifkan palet warna, filter duotone, dan gradien
• Tetapkan warna batas dan tautan
• Terapkan warna pada elemen dan blok
• Tambahkan jenis font, termasuk Google Fonts
• Tentukan ukuran font
• Gunakan tipografi yang lancar dengan Gutenberg
• Mengaktifkan atau menonaktifkan tinggi garis
• Nonaktifkan yang berikut ini:
  • opsi tutup drop
  • kontrol berat font
  • gaya miring
  • transformasi teks menjadi huruf besar
  • pilihan spasi huruf
  • kontrol dekorasi teks
• Tentukan lebar konten
• Aktifkan margin dan padding
• Atur blockGap (jarak vertikal antar blok)
• Tambahkan atau nonaktifkan skala spasi khusus
• Tetapkan tinggi minimum untuk blok grup dan poskan konten
• Atur posisi blok grup menjadi lengket
• Tambahkan gaya arahkan kursor dan fokus
• Tambahkan efek bayangan kotak
• Tambahkan CSS khusus
• Menerapkan variasi gaya global
• Filter theme.json dengan PHP
• Ubah variasi gaya blok

Anda dapat mengatur gaya secara global atau per blok. Untuk menargetkan blok yang tepat, konsultasikan dengan Referensi Blok Inti.

Menggunakan tema Blockbase sebagai titik awal

Tema Blockbase adalah tema pemula sederhana yang dapat Anda sesuaikan. Ini membutuhkan versi PHP 5.7 atau lebih tinggi, dan WordPress 6.1 atau lebih tinggi.

Blockbase berisi templat berikut:

• 404
• Arsip
• Kosong
• Footer Saja
• Header dan Footer Saja
• Indeks
• Halaman
• Mencari
• Lajang

Dan bagian template berikut:

• footer
• tajuk
• berpusat pada header
• header-default
• header-linier
• header-minimal
• selebar header
• pasca-meta
• ikon pasca-meta

Anda dapat menggunakan Editor Situs untuk memodifikasi template dan bagian template ini, atau mengedit file theme.json . Anda juga dapat memodifikasi tipografi, warna, dan tata letak menggunakan opsi Styles.

Ini memodifikasi lebar konten menjadi 800px:

Dan inilah variasi gaya Ruby Wine:

Dan ini adalah blok hak cipta yang ditambahkan ke bagian templat footer:

Ketika Anda selesai dengan penyesuaian Anda, ingatlah untuk mengekspor tema Anda dan mengubah nama dan domain teks.

Dalam tema yang diekspor, kode untuk footer diperbarui dengan blok hak cipta yang ditambahkan:

Cara membuat tema blok dengan plugin Create Block Theme

Metode lain untuk membuat tema blok adalah dengan menggunakan plugin Create Block Theme yang dibuat oleh tim WordPress.org.

Ini membutuhkan WordPress 6.0 atau lebih tinggi, dan PHP 7.0 atau lebih tinggi. Anda harus memiliki tema blok sebagai tema aktif untuk menggunakan plugin.

Setelah menginstal plugin, buka Appearance > Create Block Theme dan pilih salah satu dari enam opsi berikut (Saya menggunakan tema Twenty Twenty Three):

Ekspor Dua Puluh Dua Puluh Tiga

[Ekspor tema yang diaktifkan dengan perubahan pengguna]

Opsi ini membuat file zip baru bernama dua puluh dua puluh tiga. Anda perlu mengganti namanya untuk menggunakannya di situs, jika tidak maka akan diganti ketika ada pembaruan untuk Dua Puluh Dua Puluh Tiga.

Buat anak dari Dua Puluh Dua Puluh Tiga

[Buat tema anak baru. Tema yang saat ini diaktifkan akan menjadi tema induk.]

Plugin memberi Anda formulir yang harus diisi untuk membuat tema.

Klon Dua Puluh Dua Puluh Tiga

[Buat tema baru dengan mengkloning tema yang diaktifkan. Tema yang dihasilkan akan memiliki semua aset tema yang diaktifkan serta perubahan pengguna.]

Anda mendapatkan formulir yang sama untuk diisi seperti untuk tema anak.

Timpa Dua Puluh Dua Puluh Tiga

[Simpan perubahan USER saat TEMA berubah dan hapus perubahan USER. Perubahan Anda akan disimpan dalam tema di folder.]

Perhatikan bahwa jika Anda memilih opsi ini, perubahan tema Anda akan ditimpa saat tema diperbarui.

Buat tema kosong

[Buat tema “kosong” boilerplate di dalam direktori tema situs ini.]

Isi formulir dengan penyesuaian Anda lalu aktifkan tema saat dibuat. Tema Anda hadir dengan templat dan bagian templat minimal – hanya halaman indeks, footer, dan header, sehingga Anda dapat menambahkan dan menyesuaikannya. Itu juga tidak memiliki gaya yang diterapkan.

Buat variasi gaya

[Simpan perubahan pengguna sebagai variasi gaya Dua Puluh Dua Puluh Tiga.]

Anda membuat variasi dengan mengisi kolom Variasi , lalu menekan tombol Hasilkan .

Variasi gaya baru Anda terlihat di panel Gaya Editor Situs saat Anda mengedit templat atau bagian templat.

Pilih variasi gaya yang Anda buat, lalu buka bagian Warna untuk mengedit warna dan menerapkannya pada tema.

Mengelola Google Font

Anda dapat menambah atau menghapus font di plugin Create Block Theme dengan masuk ke Appearance > Manage Theme Fonts .

Daftar menunjukkan font apa yang Anda gunakan. Untuk menghapus jenis font atau variasi font, klik tautan Hapus Keluarga Font atau Hapus .

Untuk menambahkan font Google baru, klik tombol Tambahkan Google Font . Pilih font yang Anda inginkan dari menu dropdown dan centang varian font yang Anda inginkan. Kemudian pilih tombol Tambahkan Google Font ke tema Anda .

Untuk menambahkan font lokal, gunakan tombol Tambahkan Font Lokal dan telusuri font yang ingin Anda gunakan di sistem Anda. Itu harus dalam .otf , .ttf , .woff , atau . format file woff2 . Klik tombol Unggah font ke tema Anda setelah selesai.

Untuk menggunakan font baru dalam tema Anda, kembali ke panel Styles dan pilih tipografi yang ingin Anda ubah. Pilih font yang Anda inginkan di menu dropdown.

Setelah selesai, ingatlah untuk menyimpan perubahan tema Anda.

Itulah cara membuat tema blok! 🚀

Bagus sekali; sekarang Anda telah mempelajari cara membuat tema blok. Tema blok adalah masa depan WordPress, dan membuka peluang bagi non-pembuat kode untuk membangun situs web mereka sendiri dan menyesuaikannya menggunakan blok.

Desainer dan pengembang ingin mempelajari sintaksis theme.json untuk membuat warna tema, tipografi, dan opsi spasi, serta memanfaatkan pola blok agar tema mereka dapat diterjemahkan.

Apakah Anda masih memiliki pertanyaan tentang cara membuat tema blok? Beri tahu kami di komentar!