Anatomi tema WordPress

Ini adalah bab dari “Up and Running: Panduan Praktis untuk Pengembangan WordPress,” panduan multimedia untuk pengembangan WordPress yang diluncurkan 16 Juni. Paket lengkapnya mencakup e-book lengkap, 50+ video tutorial pengembangan tema dan plugin, dan wawancara panduan kode dengan 13 pengembang WordPress terbaik dunia. Praorder sekarang di upandrunningwp.com untuk diskon 20%!

Takeaways utama:

• Tema WordPress terbuat dari serangkaian bagian yang konsisten. Bagian penting dari tema non-anak termasuk style.css , functions.php , dan beberapa jenis file template PHP (seperti header.php , footer.php , dan index.php ).
• Sebagai sumber utama gaya CSS tema, style.css menentukan tampilan visual tema. Bagian komentar di bagian atas style.css juga tempat nama tema, penulis, dll., didaftarkan.
• functions.php adalah tempat Anda menambahkan fungsionalitas presentasi ke tema Anda. Melalui functions.php , Anda akan menambahkan CSS stylesheet, file JavaScript, menu nav, area widget, dan fungsionalitas lainnya.
• File template secara informal dapat dibagi menjadi: file template "selalu digunakan" ( header.php dan footer.php , dan sidebar.php jika berlaku); file dalam hierarki template WordPress (seperti index.php , single.php , dan page.php ); dan “bagian template” (cuplikan tidak lengkap yang diambil dari file template lain untuk mengurangi pengulangan).
• Tema bisa sangat besar dan kompleks; tetapi ini adalah bagian yang paling penting dan dapat diprediksi di sana.

Bab singkat ini berkisar pada diagram besar. Kenapa menunggu? Ini dia:

Jangan panik! Anda akan segera memahami ini. Di sisa bab ini, kami akan menjelaskan setiap bagian diagram secara lebih mendalam.

Apalah arti sebuah nama?

WordPress memutuskan bagaimana memperlakukan file tema berdasarkan namanya.

Hal pertama yang harus diperhatikan adalah bahwa setiap file dalam diagram memiliki nama khusus. functions.php , style.css , index.php —tidak ada satu pun dari file-file ini yang diberi nama secara tidak sengaja, dan tidak ada satu pun dari namanya yang sembarang.

WordPress memutuskan bagaimana memperlakukan file tema berdasarkan namanya. Ini memiliki perlakuan khusus yang ditulis untuk functions.php , tetapi tidak ada sama sekali untuk functionz.php . Jadi jika Anda mengunggah satu set instruksi sebagai functions.php , WordPress akan menafsirkannya; tetapi jika Anda mengunggah instruksi yang sama seperti functionz.php , WordPress akan, secara default, mengabaikan file itu dan instruksinya sepenuhnya.

style.css

style.css adalah sumber utama tampilan visual tema.

style.css adalah sumber utama gaya CSS tema. Dengan demikian, ini adalah sumber utama tampilan visual tema—mulai dari pilihan font dan warna hingga apakah tema beroperasi pada kisi responsif.

Jadi, misalnya, jika Anda memasukkan CSS berikut ke dalam style.css tema Anda :

p {
color: blue;
}

…maka apa pun yang ada dalam paragraf, di mana pun di situs Anda saat menjalankan tema Anda, akan berubah menjadi biru. Benar-benar keren, bukan?

style.css adalah tempat Anda akan melakukan sebagian besar pekerjaan Anda untuk membuat tema Anda terlihat seperti yang Anda inginkan.

Kontrol visual semacam ini berarti ada banyak pekerjaan yang harus dilakukan di style.css —inilah tempat Anda akan melakukan sebagian besar pekerjaan Anda untuk membuat tema Anda terlihat seperti yang Anda inginkan.

style.css juga cara Anda mendaftarkan tema Anda

style.css juga menampung bagian komentar di header-nya, di mana data tema—nama tema, penulis, tema induk jika ada, dan seterusnya—didaftarkan. Itu terlihat sebagai berikut:

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

WordPress membaca komentar ini untuk mendapatkan informasi tentang tema Anda. Jadi blok komentar kecil di atas—dan tidak ada yang lebih menarik atau lebih teknis—adalah yang menyebabkan tema Anda muncul di daftar tema situs Anda di Appearance > Themes di area admin WordPress:

Anda dapat melihat contoh data registrasi sebenarnya dari sebuah tema pada baris 1 sampai 6 dari style.css dalam grafik besar, Anatomy of a WordPress Theme.

function.php

functions.php adalah tempat Anda menambahkan fungsionalitas khusus ke tema Anda. Ini bisa menjadi banyak sekali, termasuk:

• Menambahkan stylesheet CSS (termasuk style.css itu sendiri) dan file JavaScript
• Mendaftarkan area menu nav dan area widget
• Menentukan ukuran gambar khusus yang Anda inginkan untuk tersedia di situs Anda
• Memfilter konten halaman Anda

functions.php “berbicara dengan” sisa WordPress terutama melalui kait WordPress (juga disebut kait tindakan dan filter), yang memungkinkannya menambahkan fungsionalitas di tempat yang tepat. Kami masuk lebih dalam ke cara kerja functions.php di Konsep Inti Tema WordPress: 3. Menambahkan Fungsionalitas dengan functions.php , dan kami mendapatkan lebih banyak kait di WordPress Hooks (Tindakan dan Filter): Apa yang Mereka Lakukan dan Bagaimana Mereka Bekerja.

File template PHP

File template situs WordPress menentukan markup situs. Tanpa mereka, tidak ada apa-apa di halaman.

Sebagian besar file tema adalah file template PHP-nya. Jika functions.php adalah otak tema, dan style.css adalah pakaiannya, dan file template adalah tubuh sebenarnya.

File template adalah file ,code>.php yang berisi campuran markup HTML dan kode PHP. (Periksa grafik itu dan Anda akan melihat tampilannya.)

File template membuat markup dengan dua cara

Bersama-sama, file-file ini menentukan markup situs : HTML sebenarnya yang ditampilkan browser saat mengunjungi situs Anda. Mereka melakukannya dengan dua cara.

1. HTML

Pertama, file template mencetak HTML langsung ke browser, seperti file .html biasa. Apa pun yang tidak ada di dalam <!--?php?--> bukan PHP: ini hanyalah HTML biasa yang langsung masuk ke halaman. Jadi jika header.php tema menyertakan sedikit HTML seperti berikut:

<body class="site-body">

Itulah yang akan dilihat browser di setiap halaman web WordPress yang menyertakan header.php , yang seharusnya semuanya.

2. PHP

File template benar-benar berfungsi dengan baik menggunakan PHP, yang dikompilasi menjadi, atau berubah menjadi, HTML. Sebagai contoh sederhana, file header.php yang sama dapat berisi kode berikut:

<body class="<?php echo 'site-body'; ?>">

PHP yang ditambahkan hanya menggemakan (mencetak) badan site-body string langsung ke halaman. Jadi server melakukan pemrosesan PHP ekstra pada akhirnya, tetapi browser masih melihat HTML lama yang sama.

Seperti yang dapat Anda bayangkan, file template tema sangat penting: tanpanya, secara harfiah tidak ada apa-apa di halaman.

File template "Selalu digunakan"

header.php dan footer.php biasanya digunakan di mana saja dalam sebuah tema, karena sebagian besar situs menginginkan header dan footer yang konsisten di halaman yang berbeda.

Beberapa file template digunakan di setiap halaman web di situs. Contoh utama adalah header.php dan footer.php .

File-file ini sering digunakan sehingga WordPress memiliki fungsi khusus untuk memasukkannya ke dalam file template lain: get_header() dan get_footer() . Dipanggil dengan cara ini, tanpa parameter, fungsi-fungsi tersebut cukup mengambil header.php dan footer.php , dan meletakkannya di tempat fungsi tersebut dipanggil.

Mengapa file-file ini digunakan di mana-mana? Itu karena sebagian besar situs menginginkan header dan footer yang konsisten di halaman yang berbeda. Jika satu halaman memiliki logo perusahaan dan menu navigasi utama, sebaiknya Anda ingin halaman lain melakukan hal yang sama. Hal yang sama berlaku untuk footer Anda di bagian bawah halaman.

Sebagai catatan, sidebar.php juga merupakan jenis file ini, karena sering kali sebagian besar jenis halaman web di situs akan berbagi satu sidebar—mungkin dengan pengecualian halaman lebar penuh yang didedikasikan untuk menampilkan Jenis halaman posting. sidebar.php juga memiliki fungsinya sendiri, get_sidebar() .

File dalam hierarki template WordPress

Kegembiraan yang sebenarnya terjadi pada file seperti index.php , single.php , dan page.php . File-file ini menentukan markup apa yang akan muncul untuk berbagai jenis data posting .

Untuk mengulanginya, WordPress tahu halaman mana yang digunakan untuk jenis data posting apa. Sebagai contoh:

• Jika halaman web yang diminta melibatkan posting jenis Halaman (misalnya, halaman Tentang Anda), WordPress kemungkinan akan menggunakan page.php untuk membangun halaman web itu.
• Jika halaman web yang diminta adalah posting jenis Post individual (misalnya, Anda melihat posting blog tertentu), WordPress kemungkinan akan menggunakan single.php untuk membuatnya.
• Jika Anda melihat semua jenis Postingan yang Anda tulis pada tahun 2014, WordPress kemungkinan akan menggunakan archive.php untuk membangun halaman web itu.

Inilah keajaiban hierarki template WordPress , yang kami bahas secara mendalam di Konsep Inti Tema WordPress: 1. Hirarki Template.

File template ini didasarkan pada loop

File template "dalam-templat-hierarki" ini semuanya berbagi sesuatu yang sangat penting: Mereka dibangun di sekitar The Loop, salah satu prinsip inti mutlak pengembangan WordPress.

Kami masuk jauh ke dalam The Loop dalam Konsep Inti Tema WordPress: 2. Memproses Postingan dengan The Loop. The Loop benar- benar keren, jadi jika Anda baru mengenalnya, pegang kaus kaki Anda agar The Loop tidak meledakkannya!

Bagian template

Katakanlah ada bagian dari index.php dan page.php yang persis sama. Haruskah kita mengulangi kode itu di kedua file itu?

Sebenarnya, KERING—”Jangan Ulangi Dirimu Sendiri!”—adalah seruan perang untuk programmer yang baik. Pengulangan menyebabkan segala macam masalah. Bagaimana jika Anda ingin mengubah sesuatu tentang bagian yang berulang? Sekarang Anda harus mengubahnya di dua tempat. Bagaimana jika Anda lupa mengubahnya di satu tempat, atau membuat kesalahan di satu file tetapi tidak di tempat lain? Sekarang kode Anda tidak sinkron dan situs Anda bermasalah. (Sekarang: bagaimana jika Anda mengulangi kode yang sama dua puluh kali? Anda harus mengulangi setiap perubahan yang Anda buat dua puluh kali, dan berharap Anda "menangkap semuanya.")

Bagian template mengambil bagian yang mungkin akan diulang dari file template, dan memindahkannya ke file baru. Dengan cara ini, baik index.php dan page.php keduanya dapat dengan mudah merujuk ke bagian template yang sama, daripada menulisnya dua kali satu per satu; dan jika Anda ingin mengubah bagian itu, Anda hanya mengubahnya sekali.

Sekarang Anda tahu anatomi tema Anda

Ini adalah hal-hal yang harus benar-benar dipahami tentang tema WordPress. Bahkan tema ThemeForest yang terlalu besar akan dibangun di sekitar kerangka inti ini, jadi pahami bagaimana bagian ini saling terkait dan Anda akan memiliki banyak kekuatan untuk memahami tema WordPress.

Dengan kesimpulan pelajaran anatomi itu, tiga bab berikutnya menyelami empat prinsip pemrograman penting yang menjelaskan bagaimana sebuah tema bekerja:

1. Hirarki template WordPress
2. Putaran
3. function.php
4. kait WordPress

Maju!