Panduan Pengembangan Tema WordPress Anak

Ada sejumlah alasan mengapa pengembang WordPress mulai menggunakan tema anak. Mereka memberi Anda kesempatan untuk menyesuaikan tata letak yang unik di atas tema lain yang ada. Ini sangat cocok untuk pemula yang ingin bermain-main dengan membangun tema mereka sendiri.

Selain itu banyak desain premium akan merilis pembaruan baru seiring waktu. Jika Anda membuat perubahan pada file tema inti, file tersebut akan ditimpa saat melakukan pembaruan, tetapi tema anak terpisah dan tersimpan dengan rapi. Ini berarti Anda dapat membangun dari tema premium yang ada dan menghemat banyak waktu dalam proses.

Dalam panduan ini saya ingin memperkenalkan konsep dasar membangun tema anak WordPress dan mengapa itu ide yang bagus.

Mulai

Tema anak tidak sesulit kelihatannya. Manfaat dari mematikan tema induk berarti Anda tidak perlu menulis semua HTML / CSS dari awal. Tema anak akan secara otomatis menggunakan file template yang Anda sertakan, seperti sidebar.php atau footer.php. Tetapi jika mereka hilang, maka tema anak Anda akan menarik file yang sama dari induknya.

Fungsionalitas ini menawarkan sejumlah besar kebebasan untuk menyesuaikan templat yang sudah ada. Ini juga bagus untuk menyentuh area di sekitar situs web Anda untuk acara-acara khusus, seperti menambahkan pola desain untuk Natal atau Tahun Baru.

File yang Diperlukan Anda

Anda hanya perlu satu lembar gaya .css untuk mengatur tema anak di WordPress. Anda juga perlu membuat direktori baru di / wp-content / tema folder yang akan menampung tema anak Anda. Perhatikan bahwa Anda tidak membuat folder ini di dalam tema induk, tetapi tepat di sampingnya di direktori tema yang sama.

Pengembang akan sering menyertakan functions.php dan screenshot.png di folder yang sama dengan file CSS baru Anda. Tangkapan layar ditampilkan di panel admin WordPress Anda dan file tema fungsi dapat digunakan untuk banyak perubahan backend.

Tetapi untuk sekarang kita harus fokus pada stylesheet utama. Ini biasa disebut style.css dan menyertakan tajuk komentar dengan informasi meta utama. Ini penting karena tema Anda hanya akan ditampilkan sebagai anak-anak jika Anda memasukkan nama direktori orang tua. Di bawah ini adalah contoh komentar tajuk:

 / * Nama Tema: Twenty Eleven Child Theme URI: http: //example.com/ Deskripsi: Tema anak untuk desain Twenty Eleven Penulis: Jake Rocheleau Penulis URI: http: //www.hongkiat.com/blog/ Templat: twentyeleven Versi: 0.1 * /

Nilai untuk templat harus menjadi nama direktori untuk tema orang tua yang disertakan. Selain itu, semua tag lain harus familier dengan tema WordPress standar.

Meskipun semua templat PHP induk akan digunakan, style.css induk asli akan tidak diimpor secara otomatis. Jika Anda ingin menghilangkan style asli Anda harus memasukkannya di bagian atas dokumen style.css anak Anda. Di bawah ini adalah contoh termasuk tema WP Twenty Eleven.

 @import url ("... /twentyeleven/style.css");

Menyiapkan Gaya Baru

Menerapkan aturan CSS ke tema Anda semudah mengedit aslinya. Jika Anda tahu elemen mana yang perlu Anda targetkan maka gunakan pemilih yang sama di tema anak Anda sendiri.

Kami dapat melakukan demo dengan beberapa perubahan yang sangat mudah untuk tautan dan paragraf. Saya telah menggunakan kode dari tema Twenty Eleven asli untuk menargetkan berbagai elemen. Terkadang perlu menggunakan pemilih yang lebih spesifik untuk mengganti desain yang lebih lama.

 body padding: 0 1.4em;  # halaman margin: 1,667em otomatis; lebar maks: 900px;  a color: # 5281df; teks-dekorasi: tidak ada; font-family: Calibri, Tahoma, Arial, sans-serif;  a: fokus, a: aktif, a: hover text-decoration: underline;

Dalam perubahan ini saya telah mengurangi ukuran tubuh secara keseluruhan dan juga menghapus beberapa bantalan dari tepinya. Semua penyeleksi ini dapat ditemukan tercantum dalam dokumen .css asli. Perlu dicatat bahwa saya juga mengubah beberapa properti untuk semua tautan jangkar yang mencakup tumpukan font dan pilihan warna yang berbeda.

Hal-hal penting!

CSS memiliki deklarasi khusus untuk menandai prioritas di atas gaya lainnya. Sintaks ditampilkan sebagai !penting dimulai dengan tanda seru dan berakhir di akhir properti CSS Anda. Ini diperlukan jika Anda memiliki gaya kaskade dari tema induk yang mengabaikan aturan khusus Anda sendiri.

 a color: # 5281df! important; teks-dekorasi: tidak ada; font-family: Calibri, Tahoma, Arial, sans-serif;

Di atas saya telah menyalin perubahan asli saya dan mengedit warna teks jangkar dengan klausa penting. Ini akan diutamakan di atas semua gaya lain dari kedalaman pemilih yang sama. Elemen yang lebih jelas (seperti #access li: hover> a) biasanya akan memegang gaya mereka sendiri kecuali warna masih diwarisi dari pemilih asli kami. Dalam hal ini, tema induk kami tidak menyiapkan properti font-family pada tautan jangkar, sehingga kami tidak mengalami masalah warisan.

Jika Anda kesulitan membuat perubahan tetap, coba muncul salah satu dari tanda penting ini di akhir pernyataan properti Anda. Ini bukan perbaikan yang sempurna untuk setiap masalah warisan, tapi itu berguna lebih sering daripada yang Anda pikirkan.

Kloning functions.php

Berbeda dengan stylesheet utama, tema anak Anda akan mengimpor fungsi induknya secara otomatis. Ini berarti Anda tidak perlu menyalin kode PHP apa pun untuk tetap aktif di tema baru Anda. Namun, jika Anda ingin mendefinisikan ulang beberapa fungsi, Anda dapat membangun functions.php lain dan menulis dalam kode baru Anda dengan perubahan apa pun.

Sebagai contoh, saya telah membangun sebuah fungsi yang mem-parsing beberapa file JavaScript ketika templat memulai. Ini akan menghapus versi skrip jQuery dan SWFObject yang lebih lama, sekaligus menambahkan versi terbaru ke wp_head daerah.

 // antrian file js untuk memuat function mytheme_js () if (is_admin ()) kembali; wp_deregister_script ('jquery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ('jquery'); wp_deregister_script ('swfobject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ('swfobject');  add_action ('init', mytheme_js);

Saya harus menunjukkan bahwa jika Anda mengimpor kode dari parent functions.php maka Anda harus menggunakan nama fungsi yang berbeda. Kalau tidak, PHP akan memberikan kesalahan fatal dan Anda harus FTP ke server untuk memperbaiki kesalahan.

Bekerja dengan File Tema

Kategori tema yang paling luas adalah membuat tata letak khusus dan jenis halaman. Secara default tema anak Anda akan mewarisi semua file tema orang tuanya. Tetapi Anda memiliki opsi untuk membuat file tema anak baru dan WP akan mendaftarkan ini sebagai templat 'primer'.

Sebagai contoh archive.php dan index.php digunakan untuk masing-masing menampilkan arsip posting dan layar beranda. Jika ada perubahan yang ingin Anda lakukan yang memerlukan pengeditan HTML maka Anda akan lebih aman mengkloning file induk dan mengeditnya di direktori tema anak.

Template Halaman Kustom

Sementara kita berbicara tentang file templat, saya juga ingin memperkenalkan sepotong fungsi WordPress yang tidak banyak diketahui. Anda dapat membuat templat halaman dan posting yang akan dipilih dari panel Admin saat membuat konten baru. Bahkan jika tema induk tidak memiliki file templat kustom baru, WordPress akan tetap menggunakan anak di tempat a page.php atau single.php.

Pertama buat file baru bernama page-offer.php. Ini akan menjadi “penawaran istimewa” halaman promosi yang bertema berbeda dari yang lainnya. Di sini Anda dapat menyalin kode halaman asli Anda atau bahkan membangun tema sepenuhnya dari awal. Satu-satunya kode yang perlu kami beri tahu WordPress tentang template baru ini adalah pengaturan komentar di PHP.

Alternatif lain untuk metode ini adalah membuat halaman khusus yang dinamai dengan nomor ID unik. Jadi alih-alih memuat default archive.php untuk halaman penulis Anda dapat membuat file seperti penulis-ID.php di mana ID adalah nomor ID WordPress unik pengguna. Meskipun sistem ini lebih membebani karena Anda harus membuat file templat baru untuk masing-masing penulis di situs Anda.

Menjadi lebih bermanfaat jika Anda dapat menggabungkan kedua teknik ini dengan file templat lainnya. Terutama kategori dan tag bekerja dengan baik menggunakan file tema mereka sendiri. Juga jika Anda menautkan ke lampiran dalam konten Anda maka Anda akan ingin mempertimbangkan kemungkinan tata letak templat yang berbeda untuk setiap jenis pantomim. Saya menyertakan hierarki templat di bawah ini untuk lampiran gambar JPEG sederhana:

image.php
jpeg.php
image_jpeg.php
attachment.php

Alat WordPress yang Bermanfaat

WordPress sendiri memiliki sistem plugin serbaguna yang dapat mengatur banyak penyesuaian. Karena tema anak sangat baru, belum ada serangan hebat dari rilis pihak ke-3 (belum). Namun ada beberapa alat yang dapat Anda periksa untuk membuat waktu pengembangan Anda sedikit lebih pendek.

Yang jelas disebutkan adalah plugin One-Click Child Theme yang dibuat dan diuji untuk versi WordPress 3.x terbaru. Itu menambahkan tautan menu ke Admin Anda “Tema” bagian untuk membangun anak secara otomatis menggunakan tema yang sedang aktif. Ini luar biasa jika Anda tidak ingin main-main dengan FTP dan ingin bermain-main dengan beberapa ide baru.

Jika Anda berencana untuk mengedit file-file ini dalam panel admin Anda juga akan menikmati sorotan sintaks yang lebih jelas. Ini tidak ditawarkan di WordPress secara default, tetapi Anda dapat menginstal Editor Kode Lanjutan untuk beberapa fungsionalitas yang jauh lebih baik. Ini membuat mengarungi blok kode PHP dan HTML / CSS jauh lebih mudah dikelola.

Sumber daya tambahan

Seiring dengan semua tips dalam panduan ini saya ingin berbagi satu set tautan penting untuk pengembang tema. Sudah ada begitu banyak artikel bagus dan tema anak gratis yang bisa Anda periksa untuk mempelajari lebih dalam tentang subjek ini. Saya menambahkan koleksi indah dari sumber daya di bawah ini:

8 Tema Gratis Dua Puluh Sebelas Anak
WordPress Online Codex »Tema Anak
Cara membangun Tema Anak WordPress menggunakan Hooks dan Filter
Beberapa Kata tentang Tema Anak
Cara Membuat, Mengubah, dan Menggunakan Tema Anak di WordPress

Kesimpulan

Saya harap proses membangun tema anak WordPress menjadi lebih jelas bagi Anda setelah membaca artikel ini. Saya telah mencoba menjelaskan bagaimana tema anak dapat mewarisi templat CSS dan PHP dari orangtua. Selain itu, sangat mudah untuk memanipulasi file tertentu dan membuat tema unik Anda sendiri.