Menyisipkan Snippet Pada Tema WordPress

Pada kesempatan kali ini saya kan menjelaskan cara menyisipkan snippet pada berkas tema. Ada dua berkas dalam tema WordPress yang sering dimodifikasi, yaitu berkas style.css dan function.php.

Struktur Tema

Tema WordPress terdiri dari kumpulan berkas-berkas. Kita bisa memodifikasi tema dengan cara mengubah kode yang terdapat pada berkas-berkas tersebut.

Setiap tema WordPress memiliki struktur yang berbeda-beda, ada yang sederhana ada yang kompleks. Namun biasanya tema WordPres sekurang-kurangnya memiliki berkas yang terdiri dari:

• style.css
• function.php

Berkas-berkas standar lain yang ada dalam tema diantaranya:

• index.php
• single.php
• page.php
• archive.php
• search.php
• author.php
• dll.

Untuk lebih lengkapnya mengenai struktur tema silahkan lihat di website resmi WordPress.

Memodifikasi Tema

Kode-kode yang terdapat dalam tema WordPress bisa dimodifikasi, sekalipun kamu bukan seorang pemrogram.

Bila kamu rajin berselancar, ada banyak orang yang membagikan potongan kode (snippet) yang bisa diterapkan pada tema. Salah satunya dalam blog ini. Kamu tinggal menyalin dan menyisipkan snippet tersebut pada tema yang kamu gunakan.

Seringkali seorang pemula menemukan sebuah snippet untuk suatu fungsi tertentu, namun terjadi error ketika disisipkan dalam tema. Hal itu bisa terjadi karena cara menyisipkan snippet yang salah.

Bagaimana seharusnya snippet disisipkan?

Menyisipkan snippet pada style.css

Cascading Style Sheets atau CSS sebenarnya bukan bahasa pemrograman, melainkan sekumpulan perintah untuk mengatur tampilan dari html.

Berkas style.css pada tema WordPress ditulis dengan menggunakan perintah CSS. Berkas ini berfungsi mengatur tampilan tema, seperti jenis font, layout, warna, dekorasi, dan aturan-aturan lainnya.

Berkas style.css harus diawali dengan keterangan mengenai sebuah tema. Sebagai contoh, berikut ini keterangan style.css pada tema Jurnal WP.

/*  
Theme Name: Jurnal WP
URI: https://jurnalwp.com
Description: Dibuat khusus untuk Jurnal WP
Version: 1.0
Author: Cecep Risnandar
*/

Nah, bila kamu ingin menambahkan kode CSS pada tema tersebut pastikan disisipkan setelah teks keterangan tema.

Misalnya, saya akan menyisipkan CSS yang mengatur jenis dan ukuran font seperti berikut:

body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}

Bila snippet CSS di atas diaplikasikan pada berkas style.css tema Jurnal WP, maka posisinya seperti ini:

/*  
Theme Name: Jurnal WP
URI: https://jurnalwp.com
Description: Dibuat khusus untuk Jurnal WP
Version: 1.0
Author: Cecep Risnandar
*/

body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}

Menyisipkan snippet pada function.php

Berkas function.php bekerja layaknya sebuah plugin yang bisa mengatur fungsi-fungsi pada WordPress.

Perintah yang ada dalam berkas function.php berlaku baik untuk front end atau halaman yang dilihat pengunjung, maupun back end atau halaman yang digunakan pengguna terdaftar untuk mengelola website, atau disebut juga admin area.

Isi berkas function.php ditulis dalam bahasa PHP, oleh karenanya harus dimulai dengan ‘<?php‘ dan diakhiri dengan ‘?>‘.

Bila kamu ingin menambahkan snippet pada berkas function.php pastikan berada dalam tag PHP tersebut.

Contoh, saya ingin mendaftarkan fungsi register sidebar berikut ini:

add_theme_support( 'automatic-feed-links' );

if ( function_exists('register_sidebar') )
	register_sidebar(array(
		'before_widget' => '<li>',
		'after_widget' => '</li>',
		'before_title' => '',
		'after_title' => '',
	));

Bila diaplikasikan pada berkas function.php akan menjadi seperti ini:

<?php
/* Sisipkan snippet setelah ini */

add_theme_support( 'automatic-feed-links' );

if ( function_exists('register_sidebar') )
	register_sidebar(array(
		'before_widget' => '<li>',
		'after_widget' => '</li>',
		'before_title' => '',
		'after_title' => '',
	));

/* sisipkan snippet sebelum ini */
?>

Dalam prakteknya bisa jadi berkas function.php yang ada pada tema yang kamu gunakan telah penuh dengan kode.

Bila kondisinya seperti itu, kamu bisa menambahkan snippet di bagian paling akhir atau paling awal. Atau, bisa juga di tengah-tengah namun pastikan snippet yang kamu sisipkan tidak memotong kode yang telah ada.