Tutorial WordPress: Cara Membuat Tema WordPress dari HTML (Pt 2)

  1. 1. Tutorial WordPress: Cara Membuat Tema WordPress dari HTML (Bagian 1)
  2. 2. Sedang Dibaca: Tutorial WordPress: Cara Membuat Tema WordPress Dari HTML (Bagian 2)
  3. 3. Pengantar Anatomi Tema WordPress

Pada bagian pertama tutorial ini, kami membahas dasar-dasar mengubah template HTML menjadi tema WordPress. Jika Anda sedikit penasaran, kami mempelajari beberapa hal tentang memisahkan template HTML menjadi file PHP, menyatukannya kembali, menata gaya dan memberi nama tema WordPress. Sungguh, kami belajar banyak, dan Anda pasti ingin membiasakan diri dengan konsep yang kami bahas di tutorial pertama kami untuk menikmati porsi kedua ini. Dalam postingan hari ini, kami akan membahasnya lebih jauh. Kami akan membahas beberapa area lagi sehingga Anda dapat membuat tema WordPress yang berfungsi penuh. Jadi, tanpa basa-basi lagi, ini dia.

Mengonfigurasi Gambar dan File JavaScript

Jika Anda memiliki gambar di template HTML asli (index.html), Anda mungkin memperhatikan gambar tersebut berhenti muncul setelah memotong template menjadi file PHP. Jangan khawatir sama sekali, begitulah PHP. Misalnya, jika Anda memiliki logo di bagian header seperti ini…

<img alt="your_logo_alt_text" src="images/logo.jpg" />

…Anda perlu sedikit bermain-main dengan kodenya. Kode yang akan saya ungkapkan sebentar lagi akan membantu browser menemukan logo Anda (atau gambar lainnya) di folder gambar  Anda, yang merupakan (atau seharusnya menjadi) subfolder dari direktori utama tema Anda. Nah, untuk menampilkan logo Anda di bagian header, buka file header.php dan ganti kode di atas dengan kode berikut:

<img alt="your_logo_alt_text" src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" />

Fungsi get_template_directory_uri() mengembalikan url untuk direktori tema Anda. JADI jika Anda menambahkan logo Anda ke dalam folder gambar, maka kode tersebut akan mengambil logo tersebut.

Perhatikan perbedaannya? Jelasnya, potongan kode ini hanya akan memperbaiki logo Anda. Untuk memperbaiki gambar lain, Anda perlu menulis ulang kodenya dengan cara yang sama. Hal-hal yang mudah sekali.

Mari kita beralih ke JavaScript. Jika situs HTML Anda menggunakan JavaScript, buat folder bernama js dan letakkan skrip Anda di sana. Anda dapat memanggilnya di file header.php menggunakan kode berikut:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/example.js"></script>

Kode di atas menggunakan example.js sebagai ilustrasi. Jangan lupa ganti bagian tersebut dengan nama file JavaScript Anda.

Tentu saja jika Anda membuat tema untuk orang lain, maka Anda harus memuat file js Anda dengan wp_enqueue_scripts. Lihat postingan AJ tentang menambahkan JavaScript ke tema WordPress untuk info dan tips lebih lanjut.

File Templat

Pada bagian pertama tutorial ini, kami menyebutkan empat file template dasar yaitu index.php, header.php, sidebar.php dan footer.php. File template mengontrol bagaimana situs web Anda akan ditampilkan di web. Templat mendapatkan informasi dari database MySQL WordPress Anda dan menerjemahkannya ke dalam kode HTML yang ditampilkan di browser web. Dengan kata lain, file template adalah elemen penyusun tema WordPress. Untuk lebih memahami template, mari kita pelajari konsep yang disebut hierarki template.

Kami akan menggunakan analogi. Jika pengunjung mengklik link kategori (yaitu link ke kategori) seperti http://www.yoursite.com/blog/category/your-category/, WordPress menggunakan hierarki template untuk menghasilkan file (dan konten) yang tepat sebagai dijelaskan di bawah ini:

  • Pertama, WordPress akan mencari file template yang sesuai dengan ID kategori
  • Jika ID kategorinya misalnya 2, WordPress akan mencari file template bernama kategori-2.php
  • Jika kategori-2.php tidak tersedia, WordPress akan menggunakan file templat kategori umum seperti kategori.php
  • Jika file templat ini juga tidak tersedia, WordPress akan mencari templat arsip umum seperti archive.php
  • Jika templat arsip generik tidak ada, WordPress akan kembali ke file templat utama, index.php

Begitulah cara kerja template WordPress, dan Anda dapat menggunakan file-file ini untuk menyesuaikan tema WordPress agar sesuai dengan kebutuhan Anda. File templat lainnya meliputi:

home.php or index.php

Digunakan untuk merender indeks postingan blog

front-page.php

Digunakan untuk merender halaman statis atau postingan terbaru seperti yang diatur pada tampilan halaman depan

single.php

Digunakan untuk merender satu halaman posting

single-{post-type}.php

Digunakan untuk merender jenis posting khusus, mis. jika post-type adalah sebuah produk, WordPress akan menggunakan single-product.php

page.php

Digunakan untuk merender halaman statis

category.php or archive.php

Digunakan untuk merender indeks Arsip Kategori

author.php

Digunakan untuk merender penulis

date.php

Digunakan untuk merender tanggal

search.php

Digunakan untuk merender hasil pencarian

404.php

Digunakan untuk merender halaman kesalahan server 404

Ini hanyalah daftar singkat, masih banyak template WordPress lainnya. Topik tentang templat adalah topik yang besar, dan cara terbaik untuk mempelajari cara bermain-main dengan file templat adalah dengan membaca perpustakaan Pengembangan Tema yang luas di WordPress. Alternatifnya, Anda dapat membaca Bagian Templat yang lebih singkat di WordPress Codex.

Tag Templat

Mengingat kami baru saja memperkenalkan File Templat, wajar jika kami menyebutkan satu atau dua hal tentang tag templat, dan perannya dalam tema WordPress. Menurut WordPress.org, “…tag template digunakan dalam template blog Anda untuk menampilkan informasi secara dinamis atau menyesuaikan blog Anda, menyediakan alat untuk menjadikannya individual dan menarik seperti Anda.”

Dalam tutorial kami sebelumnya, Anda bertemu dengan beberapa tag template seperti get_header, get_sidebar, get_footer dan bloginfo. Di bagian berikut, kami akan menambahkan beberapa tag template ke tema WordPress yang baru kami buat. Saya berasumsi Anda sudah memasukkan deklarasi DOCTYPE di file header.php Anda. Jika belum, ini kodenya:

<!DOCTYPE HTML>

Deklarasi DOCTYPE memberi arti pada kode HTML Anda. Setelah itu, mari kita ubah tag HTML pembuka. Kami akan menyertakan atribut lang menggunakan tag Language_attributes seperti:

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>

Kode di atas akan menghasilkan yang berikut:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

Dengan deklarasi DOCTYPE dan tag atribut_bahasa, struktur tema Anda sah dan browser akan memahami kode Anda. Jika Anda membuat tema untuk blog, penting untuk menempatkan link ke URL pingback dan RSS feed di kepala Anda. Di header.php Anda, tambahkan kode berikut:

<link title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" rel="alternate" type="application/rss+xml" /><link href="<?php bloginfo('pingback_url'); ?>" rel="pingback" />

Apakah Anda memperhatikan bagaimana kami menggunakan tag info blog untuk menyertakan umpan RSS ('rss2_url') dan pingback ('pingback_url')? Sebelum menyimpan file header.php anda, tambahkan juga kode berikut:

<?php wp_head(); ?>

Tag wp_head di atas akan menarik stylesheet dan file JavaScript yang diperlukan oleh plugin Anda. Jika Anda mengabaikan kode kecil ini, plugin Anda mungkin tidak berfungsi sesuai keinginan. Mari kita tambahkan judul halaman ke tema WordPress kita menggunakan – sekali lagi – tag bloginfo. Di file header.php Anda, tambahkan kode berikut:

<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>

Tag pertama wp_title akan menambahkan judul halaman atau postingan Anda dan tag kedua bloginfo('nama') akan menambahkan nama blog Anda. Sekarang tema WordPress Anda memiliki judul halaman, bagaimana kalau kita membuat tangkapan layar untuk tema kita, mengemas ulang tema, dan beristirahat?

Membuat Tangkapan Layar Untuk Tema Anda

Saat Anda mengunggah tema pengujian untuk pertama kalinya, Anda pasti memperhatikan bahwa tema tersebut tidak memiliki tangkapan layar di Panel Tema WordPress. Kelihatannya menjemukan, terutama jika Anda memiliki tema lain dengan tangkapan layar berwarna. Tapi jangan khawatir, membuat screenshot untuk tema Anda sangatlah mudah. Cukup buat gambar menggunakan editor gambar favorit Anda (misalnya Adobe Photoshop) atau ambil layar tema Anda. Pastikan gambar Anda memiliki lebar 600 piksel dan tinggi 450 piksel. Simpan gambar sebagai screenshot.png di folder tema Anda. Simpan semua perubahan, kompres folder tema Anda ke dalam arsip ZIP. Unggah tema dan aktifkan untuk melihat perubahan baru Anda ?

Kesimpulan

Saya ingin percaya tutorial kedua ini memberi Anda wawasan lebih dalam tentang cara membuat tema WordPress dari HTML statis. Dalam waktu dekat, saya akan memperkenalkan Anda pada aspek lain dari tema WordPress, namun sementara itu, saya telah menyiapkan sumber daya berikut hanya untuk Anda:

  • Templat – Kodeks WordPress
  • Tag Templat – Kodeks WordPress
  • Buat Tema WordPress Anda Sendiri dari Templat HTML – SitePoint
  • Membuat Tema WordPress dari HTML Statis – WPtuts+

Selamat berkreasi!