Buat Tema WordPress Anda Sendiri

Diterbitkan: 2021-12-21

Dalam artikel sebelumnya, kami telah memeriksa bagaimana Anda dapat menyesuaikan situs web WordPress, membuat tema atau template anak Anda sendiri.

Hari ini, kita akan melihat bagaimana Anda dapat membangun tema WordPress Anda sendiri. Mari kita pergi!

Mengapa Membangun Tema WordPress Anda Sendiri?

WordPress menyediakan banyak cara untuk menyesuaikan situs web Anda. Jadi, mengapa Anda merasa perlu membuat tema sendiri? Dalam beberapa kasus, tema siap pakai mungkin tidak sesuai dengan desain merek Anda atau memiliki fungsi yang Anda butuhkan. Tema khusus dapat mengatasi masalah ini dan memberi Anda gaya situs yang Anda inginkan dengan semua fungsi yang Anda butuhkan tanpa harus bergantung pada tema pihak ketiga.

Persyaratan Sebelum Membuat Tema

Untuk dapat meniru langkah-langkah berikut dalam contoh di bawah ini, kita harus memiliki pengaturan instalasi WordPress dan siap digunakan, baik secara lokal atau di ruang server yang Anda kelola. Jangan coba ini di situs langsung. Buat lingkungan pengujian sebagai gantinya.

Pengetahuan dan pemahaman tentang CSS, PHP, dan HTML juga diperlukan.

Buat Tema

Kami akan memberi nama tema kami "Tema Pertama Saya". Langkah pertama adalah membuat file yang diperlukan agar tema dapat terlihat di area admin. Untuk melakukan ini, kita akan membuat file style.css dan index.php.

Kami membuat subfolder untuk tema kami, di bawah folder wp-content/themes/ yang kami beri nama "my-first-theme" dan tambahkan 2 file ini ke folder itu.

Pada titik ini, tema harus terlihat sebagai pilihan di area admin.

Jika salah satu dari file tersebut hilang, Anda akan mendapatkan pesan peringatan bahwa tema rusak. Misalnya jika index.php hilang, Anda akan melihat sesuatu seperti ini:

Di dalam file style.css kita akan menambahkan beberapa komentar yang memberitahu WordPress tentang tema kita. Info terpenting adalah nama yang akan dicantumkan di bawahnya. Selain itu, Anda dapat mengatakan siapa Penulisnya atau memberikan URI Penulis sehingga pengguna dapat mengunjungi situs web untuk mempelajari lebih lanjut tentang tema Anda. Berikan deskripsi untuk ditampilkan di popup modal tema admin dan versi instalasi.

 /* Theme Name: My First Theme Author: Dev Loper Author URI: https://my-first-theme.com Description: This is my theme's description Version: 1.0 */

CATATAN: Anda juga dapat menentukan lisensi Anda. Jika Anda ingin tema Anda didistribusikan di WordPress, tema Anda harus kompatibel dengan GPL.

Jika Anda perlu menampilkan gambar logo, masukkan file screenshot.png di tempat yang sama dengan file style.css dan index.php.

Sekarang jika Anda mengaktifkan tema Anda di layar admin tema, Anda akan melihat sesuatu seperti ini:

Dan jika Anda mengklik "Detail Tema" Anda akan melihat ini:

File Tema

Sekarang saatnya menulis beberapa kode di file index.php. Sebagai ujian, buka file dengan editor favorit Anda dan masukkan segala jenis elemen HTML, misalnya

 <h1>My First Theme's Content</h1>

Simpan file dan kunjungi front end. Anda seharusnya hanya melihat judul "Konten Tema Pertama Saya"

Pada titik ini, Anda harus memutuskan tata letak apa yang akan dimiliki tema Anda.

Tata Letak Tema

Rute yang harus diikuti dari sini tidak terbatas. Kami sangat menyarankan Anda meluangkan waktu dan mempelajari cara kerja tema WordPress. Lebih penting lagi, pastikan Anda sepenuhnya memahami hierarki template sebelum melanjutkan dengan menyusun tema Anda sendiri.

Singkatnya, apa yang dilakukan WordPress adalah menyediakan cara untuk memanggil file php yang berbeda sesuai dengan jenis kontennya. Ini dicapai dengan pertanyaan. Kueri memeriksa apakah halaman yang saat ini dilihat memiliki posting atau merupakan halaman hasil pencarian atau jenis konten lainnya, dan mengeluarkan kode yang sesuai.

Contoh klasik adalah memisahkan header dan footer dengan membuat file individual untuk masing-masing file. Untuk melihat contoh yang sangat sederhana tentang bagaimana Anda dapat melakukannya sendiri, masukkan potongan kode ini ke dalam file index.php.

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

Kode ini, menggunakan fungsi WordPress bawaan wp_head() dan wp_footer(), menyediakan tata letak konten default yang mencakup header dengan logo, judul, dan menu, badan utama tempat kueri akan menampilkan konten yang tepat, dan footer yang berisi info situs.

Jika kita ingin membagi kode ini dan menggunakan file header.php dan footer.php yang terpisah maka Anda harus membuat file di bawah folder tema.

Dan bagi kode seperti ini:

index.php

 <?php get_header(); ?> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <?php get_footer();

Header.php

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header>

Footer.php

 <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

Dan itu saja! Anda telah membuat tema pertama Anda!

Tema Pemula

Kami melihat di atas tentang cara membuat tema secara manual... file apa yang harus dibuat dan kode apa yang dapat Anda sertakan. Jika Anda sudah terbiasa dengan ini, Anda dapat menghemat waktu dengan mengunduh tema pemula WordPress dalam hitungan detik. Coba Underscore misalnya, di mana Anda bisa memberi nama dan langsung mengunduh file zip tema.

Mengagumkan, bukan?

Kesimpulan

Tema WordPress khusus adalah solusi hebat ketika Anda membutuhkan lebih banyak fleksibilitas sebagai pengembang. Membuat tema bisa tampak seperti proses yang menakutkan. Semoga seperti yang ditunjukkan artikel ini, sebenarnya cukup mudah dilakukan. Kuncinya adalah jangan terburu-buru sebelum Anda mulai coding. Ambil langkah mundur, pelajari struktur tema yang memenuhi persyaratan Anda, lalu lakukan.