Memulai dengan Tema Anak WordPress

Artikel ditulis oleh:
  • WordPress
  • Diperbarui: Jul 27, 2013

Jadi, Anda bayangkan yang memulai tweak Anda di dunia WordPress dan Anda telah menemukan banyak tema yang luar biasa. Anda bahkan menemukan banyak tema premium dan kebanyakan dari mereka benar-benar sepadan dengan harganya (beberapa buku untuk tampilan dan kode profesional). Dan sebagian besar tema yang Anda temukan adalah begitu dekat, tetapi tidak ada yang persis seperti yang Anda inginkan. Akan lebih baik untuk dapat memindahkan bilah menu sedikit, mengganti font, menambahkan blok teks baru.

Nah, jika ini terdengar asing, panduan ini cocok untuk Anda. Di sini kita akan terjun ke dunia tema anak, di mana Anda dapat melakukan hampir semua hal yang Anda inginkan tanpa merusak tema hebat yang Anda beli, atau kehilangan pembaruan di masa mendatang karena apa pun yang Anda lakukan akan dibatalkan.

Mengedit tampilan tanpa memodifikasi file tema

Singkatnya, itulah tema anak adalah: Menyesuaikan tanpa memodifikasi file asli. Tema anak pada dasarnya akan memiliki fungsi dan tampilan tema utama Anda yang sama (orang tua), kecuali Anda secara eksplisit mengatakan sebaliknya.

Ini akan berisi setidaknya file 2, style.css dan file functions.php, semua file lain akan diambil dari tema induk jadi kecuali Anda membuat file baru di direktori tema anak Anda, Anda akan menggunakan file induk.

Kami memiliki banyak kemungkinan di sini, tetapi keuntungan utamanya adalah Anda dapat kembali ke tema asli dengan mudah, sehingga Anda juga dapat memperbarui tema utama tanpa kehilangan suntingan apa pun, karena mereka selesai dalam folder yang benar-benar berbeda.

Ayo tangan kita kotor

Jadi, langkah pertama adalah membuat direktori tema anak baru di bawah folder / wp-content / themes / Anda. Sebut saja "Twenty-Child", dan mari buat file styles.css dasar kami:

/ * Nama Tema: URI Dua Puluh Anak Tema: http://www.webrevenue.co Keterangan: Mempelajari tema Anak sekarang Author: Rochester Oliveira Pengarang URI: http://www.webrevenue.co/author/rochester/ Templat: twentytwelve * / / * Memanggil file CSS tema utama * / @import ("../ twentytwelve / style.css"); / * Tambahkan apa pun yang Anda inginkan di bawah * /

Parameternya (di antara parameter opsional lainnya dihilangkan):

  • Nama Tema: Nama yang akan Anda lihat di bawah layar pemilihan tema
  • Theme URI: Tautan yang akan ditampilkan di sana
  • Deskripsi: Deskripsi singkat sehingga Anda akan mengingat tentang apa ini
  • Pengarang: Yang telah membuat tema anak
  • Penulis URI: Jika Anda ingin menautkan ke situs penulis
  • Templat: Folder tema utama (jadi jika Anda ingin menggunakan tema yang berbeda sebagai utama, cukup ganti parameter ini)

Setelah Anda menambahkan kode ini, Anda akan melihat Tema Anak di bawah admin WP> Penampilan> Tema. Anda dapat memilihnya sekarang dan semua perubahan yang dilakukan akan terlihat di situs Anda.

Editing Tema Anak 101

Ini bisa sia-sia jika Anda tidak memiliki pengetahuan CSS, bukan? Salah! CSS sebenarnya cukup mudah dan Anda dapat menemukan banyak cuplikan untuk membantu Anda di sana. Berikut ini beberapa kiat sederhana untuk membantu Anda dalam penyesuaian Anda.

#1 Pasang Firebug

Banyak orang menyukai Chrome dan Safari (begitu juga saya!), Tetapi bagi saya FireFox jauh lebih baik untuk pengembangan. Jadi, jika Anda ingin menggunakannya, saya sarankan Anda juga menginstal firebug, yang merupakan alat luar biasa untuk memahami semua pemilih yang aktif dalam elemen saat ini.

Setelah Anda menginstalnya, Anda dapat menekan F12 atau klik kanan di suatu tempat di halaman dan pilih "Inspect Element". Anda akan melihat jendela baru dengan halaman HTML dan CSS saat ini (dan banyak tab lain yang berguna, mungkin kita bisa membicarakannya nanti).

Di kotak CSS Anda akan melihat dari atas ke bawah semua aturan CSS diterapkan ke elemen saat ini, dan aturan yang lebih "spesifik" di bagian atas. Itu keren, tapi coba lihat apa yang bisa Anda lakukan dengan info ini

#2 Pertimbangkan kekhususan CSS (atau pemilih berat)

Setiap aturan CSS memiliki pemilihnya, properti dan nilainya. Tetapi ketika peramban menemukan 2 atau lebih banyak aturan yang akan memengaruhi elemen yang sama, ia harus memilih yang mana yang lebih cocok. Kami biasanya memiliki "aturan" ini untuk memahami apa yang akan dipertimbangkan:

  • ! deklarasi penting akan menimpa yang lain
  • CSS sebaris akan menimpa apa pun kecuali! aturan penting
  • ID (#header, #footer, # container…) bernilai poin 100
  • Kelas (.main, .nav, .box) bernilai 10 poin
  • Tag (tubuh, div, p, a) bernilai titik 1
  • Universal selector dan pseudo class (*,: hover,: after) bernilai 0 tetapi mereka akan berlaku jika ada “tie”

Ok, mari kita lihat contoh untuk lebih memahami ini. Klik kanan tajuk situs Anda menggunakan dua puluh dua belas dan Anda akan melihat bahwa CSS pertama yang muncul adalah ini:

.site-header {padding: 1.71429em 0; } artikel, samping, detail, figcaption, gambar, footer, header, hgroup, nav, section {display: block; }

Selektor pertama memiliki poin 10 (karena ini adalah kelas), dan yang kedua memiliki titik 1 masing-masing (karena koma hanya memisahkan pemilih yang berbeda) itulah mengapa ia muncul di bagian atas. Jika Anda memiliki sesuatu seperti #header div, maka pemilih itu pasti akan menjadi yang pertama muncul.

Mengapa ini sangat penting?

Karena untuk mengedit tema utama tanpa mengedit file CSS-nya, Anda harus SELALU menggunakan aturan yang memiliki lebih banyak poin daripada aturan yang ditentukan dalam tema utama. Dan Anda bisa pintar dalam hal ini dan menggunakan kode sederhana. Misalnya untuk menimpa properti ini:

.site-header {padding: 1.71429em 0; }

Anda dapat menambahkan ini di CSS tema anak Anda, tetapi Anda tidak boleh:

.site-header {padding 15px 0! penting; }

Karena ini adalah kode yang buruk, dan itu lebih sulit untuk ditimpa lagi jika Anda perlu mengubah itu dalam satu halaman, misalnya. Jadi Anda bisa menggunakan ini dengan mudah:

body .site-header {padding: 15px 0; }

Pemilih ini memiliki poin 11, yang lebih besar dari 10 asli dan karenanya kode ini akan diterapkan.

#3 Manfaatkan fungsi dengan baik

File child function.php adalah satu-satunya file yang akan dimuat IN ADDITION ke file asli. Itu adalah solusi cerdas yang dilakukan oleh tim WP, jadi Anda dapat menyimpan fungsi asli dan menambahkan fungsi Anda sendiri. Hasil tangkapannya adalah, fungsi tema anak akan dimuat pertama dan pengembang tema HARUS melakukan sesuatu seperti ini untuk menghindari konflik saat mendeklarasikan fungsi:

if (! function_exists ('top_menu')) {function top_menu () {// cool code here} add_action ('wp_head', 'top_menu'); }

Itu karena jika Anda mendefinisikan suatu fungsi dalam file tema anak Anda, itu dapat menimpa yang asli. Jika pengembang tema tidak melakukannya dengan cara ini Anda akan berakhir dengan kesalahan PHP yang jelek (karena fungsi yang sama sedang dibuat dua kali).

#4 Pelajari beberapa properti CSS

Tahukah Anda bahwa Anda dapat menyembunyikan dan menambahkan barang menggunakan CSS? Anda harus menginstal firebug untuk menemukan pemilih yang tepat, tetapi Anda dapat menyembunyikan item dengan menambahkan kode ini:

isi {display: none}

Untuk menambahkannya lebih rumit, karena Anda hanya dapat menambahkan teks kecil, jika Anda ingin teks "Di Jual!" Setelah label harga, misalnya Anda dapat menggunakan kode ini:

.harga del: setelah {color: red; konten: "Dijual!"; }

Bagaimana menurut Anda?

Apa pendapat Anda tentang panduan ini? Apakah Anda akan mempertimbangkan untuk menggunakan tema anak? Apakah Anda sudah menggunakannya? Beri tahu kami menggunakan bagian komentar di bawah ini!

Tentang Rochester Oliveira

Saya seorang desainer web dan pengusaha dari Itajubá (MG), Brasil. Saya suka menulis tentang topik yang tidak jelas dan melakukan beberapa hal keren.