by Panduan Pemula untuk Mengembangkan Tema WordPress – Dalam panduan ini, kita akan membahas bagaimana Anda bisa memulai pengembangan tema. Kami kemudian akan membawa Anda selangkah demi selangkah melalui proses pembuatan tema kustom baru.Jika Anda ingin sesuatu dilakukan dengan benar, Anda mungkin harus melakukannya sendiri.
Panduan Pemula untuk Mengembangkan Tema WordPress
phpbbstyles – Meskipun ada banyak tema WordPress yang tersedia , menemukan satu yang memiliki tampilan dan fungsionalitas yang tepat yang Anda butuhkan bisa jadi sulit. Bahkan, Anda mungkin tergoda untuk membuat tema sendiri. Namun, memulai dengan pengembangan tema bisa terasa luar biasa — terutama untuk pemula.
Baca Juga : Statistik dan Fakta WordPress yang Menarik
Untungnya, membuat tema khusus untuk WordPress adalah proses yang relatif mudah. Itu juga tidak memerlukan banyak pengetahuan teknis atau pengalaman dengan pengembangan web. Selain itu, membangun tema Anda sendiri dapat sepadan dengan usaha karena Anda dapat membuat situs Anda terlihat dan beroperasi dengan benar.
Pengantar Pengembangan Tema WordPress
Anda ingin situs Anda terlihat bagus dan memiliki semua fungsi yang Anda butuhkan, jadi Anda harus memeriksa Direktori Tema WordPress . Sayangnya, tidak ada yang Anda lihat memenuhi semua persyaratan Anda, dan Anda tidak ingin berkompromi dengan visi Anda. Mungkin Anda menginginkan sesuatu yang unik yang akan membuat situs Anda menonjol, atau Anda tidak ingin menghabiskan uang untuk tema premium .
Pada titik ini, Anda mungkin mulai mempertimbangkan untuk membuat tema Anda sendiri. Untungnya, mengembangkan tema untuk WordPress bukanlah urusan yang terlalu rumit seperti yang Anda bayangkan. Berkat keramahan pengguna yang melekat pada platform dan banyak alat yang tersedia, hampir semua orang dapat membuat tema khusus.
Kami akan membawa Anda melalui proses pembuatan tema pertama Anda. Untuk memulai, Anda memerlukan dua hal:
Situs web WordPress Anda sendiri
Paket hosting berkualitas Anda juga akan mendapat manfaat dari pengalaman dengan lingkungan pementasan lokal , karena Anda akan menggunakannya untuk membuat tema Anda. Memiliki beberapa pemahaman tentang CSS dan PHP juga akan membantu (jika tidak perlu).
Terakhir, ada satu alat penting yang ingin Anda miliki, yang akan membuat proses pembuatan tema menjadi lebih mudah: tema pemula.
Apa itu Tema Pemula (Dan Mengapa Anda Harus Menggunakannya)
Tema pemula adalah tema WordPress sederhana yang dapat Anda gunakan sebagai dasar untuk membuatnya sendiri. Menggunakan starter memungkinkan Anda membangun kerangka kerja yang solid, tanpa harus khawatir tentang kerumitan yang terlibat dalam pengkodean tema dari awal. Ini juga akan membantu Anda memahami cara kerja WordPress dengan menunjukkan kepada Anda struktur dasar sebuah tema dan bagaimana semua bagiannya bekerja bersama.
Ada banyak tema pemula yang sangat baik di luar sana, termasuk Underscores , UnderStrap , dan Bones (hanya untuk beberapa nama).
Kami akan menggunakan Garis Bawah untuk contoh kami di bawah ini. Ini adalah pilihan yang solid untuk pemula, karena hanya berisi dasar-dasarnya. Plus, tema pemula ini dikembangkan oleh Automattic, yang membuatnya lebih aman, kompatibel, dan didukung dengan baik dalam jangka panjang.
Cara Mengembangkan Tema WordPress Pertama Anda
Dengan persiapan yang sudah selesai, Anda akhirnya siap untuk mulai membuat tema pertama Anda. Seperti yang kami sebutkan, kami akan menggunakan tema pemula untuk panduan ini.Namun, jika Anda ingin mencoba membuat semuanya sendiri tanpa template, Anda boleh melakukannya. Ingatlah bahwa ini akan membutuhkan lebih banyak kemampuan pengkodean dan pemahaman tentang pengembangan web.
Langkah 1: Siapkan Lingkungan Lokal
Hal pertama yang perlu Anda lakukan adalah membuat lingkungan pengembangan lokal . Ini secara efektif merupakan server yang Anda instal di komputer Anda, yang dapat Anda gunakan untuk mengembangkan dan mengelola situs WordPress lokal. Situs lokal adalah cara aman untuk mengembangkan tema tanpa memengaruhi situs langsung Anda dengan cara apa pun.
Ada banyak cara Anda dapat membuat lingkungan lokal, tetapi kami akan menggunakan DesktopServer . Ini adalah cara cepat dan mudah untuk menginstal WordPress versi lokal secara gratis dan kompatibel dengan Mac dan Windows. Untuk memulai, pilih versi gratis DesktopServer, selesaikan proses pendaftaran, lalu unduh penginstal.
Setelah penginstal diunduh, Anda dapat menjalankannya. Setelah penginstalan selesai, Anda dapat membuka program, di mana Anda akan diminta untuk mengonfigurasi lingkungan lokal baru Anda. Ini adalah proses yang mudah , dan situs WordPress lokal Anda akan siap dalam beberapa menit. Setelah diinstal, situs baru Anda akan terlihat dan berfungsi persis seperti situs web WordPress langsung.
Langkah 2: Unduh dan Instal Tema Pemula Anda
Seperti kebanyakan tema pemula, Garis Bawah sangat mudah untuk memulai. Faktanya, yang perlu Anda lakukan hanyalah membuka situs web dan memberi nama tema Anda.Jika mau, Anda juga dapat mengeklik Opsi Lanjutan untuk menyesuaikan tema dasar lebih lanjut. Di sini Anda dapat mengisi informasi lebih lanjut, seperti nama penulis, dan memberikan deskripsi tema.
Ada juga _sassify! opsi, yang akan menambahkan file Syntactically Awesome StyleSheets (SASS) ke tema Anda. SASS adalah bahasa preprocessing untuk CSS, yang memungkinkan Anda menggunakan variabel, nesting, operator matematika, dan banyak lagi.Setelah menentukan pilihan, Anda dapat mengeklik Generate , yang akan mengunduh file .zip yang berisi tema awal Anda. Ini adalah inti di mana Anda akan mengembangkan tema Anda sendiri, jadi instal di situs lokal Anda . Setelah Anda menginstal tema Anda, Anda dapat melihat pratinjau situs Anda untuk melihat tampilannya. Ini sangat mendasar sekarang, tetapi itu tidak akan lama!
Langkah 3: Pahami Cara Kerja WordPress di Balik Layar
Sebelum Anda dapat menyesuaikan tema Anda, Anda harus memahami tujuan dari komponennya dan bagaimana mereka cocok satu sama lain. Pertama, mari kita bahas file template , yang merupakan blok bangunan utama dari tema WordPress. File-file ini menentukan tata letak dan tampilan konten di situs Anda. Misalnya, header.php digunakan untuk membuat header, sedangkan comments.php memungkinkan Anda untuk menampilkan komentar.
WordPress menentukan file template mana yang akan digunakan pada setiap halaman dengan menelusuri hierarki template . Ini adalah urutan di mana WordPress akan mencari file template yang cocok setiap kali halaman di situs Anda dimuat. Misalnya WordPress akan mencari file template berikut dalam urutan ini:
- File yang cocok dengan slug, seperti this-post .
- File yang cocok dengan ID postingan.
- File posting tunggal generik, seperti single.php .
- File arsip, seperti archive.php .
- File index.php .
Karena file index.php diperlukan oleh semua tema, ini adalah default jika tidak ada file lain yang dapat ditemukan. Garis bawah sudah berisi file templat paling umum, dan mereka akan langsung berfungsi. Namun, Anda dapat bereksperimen dengan mengeditnya jika Anda ingin merasakan bagaimana mereka bekerja bersama.
Elemen penting lainnya yang perlu Anda pahami adalah The Loop . Ini adalah kode yang digunakan WordPress untuk menampilkan konten, jadi dalam banyak hal, ini adalah jantung situs Anda. Itu muncul di semua file template yang menampilkan konten posting, seperti index.php atau sidebar.php .Loop adalah subjek kompleks yang kami sarankan Anda baca lebih lanjut jika Anda ingin memahami lebih baik bagaimana WordPress menampilkan konten posting. Untungnya, loop sudah terintegrasi ke dalam tema Anda berkat Underscores, jadi tidak perlu khawatir tentang itu untuk saat ini.
Langkah 4: Konfigurasikan Tema Anda
Sangat mudah untuk berpikir bahwa tema murni untuk tujuan kosmetik, tetapi sebenarnya memiliki dampak besar pada fungsionalitas situs Anda. Mari kita lihat bagaimana Anda dapat membuat beberapa penyesuaian dasar.Tambahkan Fungsionalitas dengan ‘Hooks’
Hooks adalah cuplikan kode yang dimasukkan ke dalam file template, yang memungkinkan Anda menjalankan tindakan PHP di berbagai area situs, menyisipkan gaya, dan menampilkan informasi lainnya. Sebagian besar kait diimplementasikan langsung ke inti WordPress, tetapi beberapa juga berguna untuk pengembang tema.
Mari kita lihat beberapa pengait yang paling umum dan kegunaannya:
- wp_head() — Ditambahkan ke elemen <head> di header.php, dan mengaktifkan gaya, skrip, dan informasi lain yang berjalan segera setelah situs dimuat.
- wp_footer() — Ditambahkan ke footer.php tepat sebelum tag </body>. Ini sering digunakan untuk memasukkan kode Google Analytics.
- wp_meta() — Ini biasanya muncul di sidebar.php, untuk menyertakan skrip tambahan (seperti tag cloud).
- comment_form() — Ditambahkan ke comments.php langsung sebelum tag </div> penutup file untuk menampilkan data komentar. Ini sudah akan disertakan dalam tema Garis Bawah Anda. Namun, kami tetap menyarankan Anda mengunjungi Database Hooks untuk melihat semua kait yang tersedia dan mempelajari lebih lanjut tentangnya.
Tambahkan Gaya dengan CSS
Cascading Style Sheets (CSS) adalah apa yang mendefinisikan tampilan untuk semua konten di situs Anda. Di WordPress, ini dilakukan dengan menggunakan file style.css . Anda sudah memiliki file ini termasuk dalam tema Anda, tetapi saat ini hanya berisi gaya dasar default.Jika Anda ingin contoh cepat tentang cara kerja CSS, Anda dapat mengedit salah satu gaya di sini dan menyimpan file untuk melihat efeknya. Misalnya, Anda dapat menemukan kode berikut (biasanya pada baris 485):
Langkah 5: Ekspor Tema dan Unggah ke Situs Anda
Setelah Anda selesai mengutak-atik tema Anda, inilah saatnya untuk memastikannya berfungsi dengan baik. Anda dapat memastikan ini dengan menguji tema. Untuk memastikan dengan cepat bahwa tema Anda akan berkinerja baik di sebagian besar keadaan, Anda dapat menggunakan data Tes Unit Tema . Ini adalah kumpulan data tiruan yang dapat Anda unggah ke situs Anda, yang berisi banyak variasi gaya dan konten yang berbeda. Ini akan memungkinkan Anda untuk melihat bagaimana tema Anda mengatasi data yang tidak terduga.
Ketika Anda telah menguji tema Anda secara menyeluruh dan yakin bahwa tema tersebut memenuhi standar yang disyaratkan , yang tersisa sekarang adalah mengekspornya. Cara termudah untuk melakukannya adalah dengan menemukan di mana situs web diinstal pada mesin lokal Anda, kemungkinan besar di folder bernama Situs Web di dalam direktori Dokumen default Anda . Buka folder situs web dan akses /wp-content/themes/ , di mana Anda akan menemukan tema Anda.
