Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Bagaimana Membuat Tema WordPress dari Awal

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Hadie Danker (you can also view the original English article)

Berdasarkan artikel terbaru dari "PSD to HTML", tutorial ini akan menjelaskan template HTML/CSS dan mengubahnya menjadi theme Wordpress. Ada Begitu banyak yang dapat Anda lakukan saat membuat theme anda sendiri. Jadi, kita akan belajar bagaimana theme yang tersetruktur, pembuata files utama hingga memecah file index.php

Sekilas - Tentang Struktur Sebuah Theme Wordpress

Struktur sebuah theme WordPress sangat sederhana, saya ingin memulai dengan file CSS. Ini rincian segala sesuatu yang digunakan pada theme untuk wordpress. Kemudian ada file index.php - ini adalah file template yang bisa anda gunakan untuk meng include template dengan code PHP. Seperti apa yang ada di file header.php dan footer.php, juga dapat di gunakan untuk menginclude seluruh file yang ada di situs wordpress. Sekarang kebanyakan sebuah theme tidak hanya menggunakan empat file tersebut karena WordPress memungkinkan anda untuk menggunakan file template tata letak dengan isi yang berbeda. Dan itu di definisikan sebagai layout files, seperti archives.php dan single.php. Namun anda juga membuat file sendiri, misalnya, jika anda menginginkan membuat halaman yang memiliki tata letak yang sama sekali berbeda dengan aslinya.

Karena ini adalah topik yang cukup besar maka kita akan membagi dengan dua seri, bagian ini akan membahas membuat tema sederhana namun berfungsi template standar HTML & CSS, dan bagian kedua akan membahas lebih banyak fitur canggih lainya.

Langkah 1 - style.css

Style sheet adalah file yang mendefinisikan tema untuk Wordpress. Ada beberapa hal sederhana yang perlu anda lakukan. Yang pertama adalah mengubah nama utama (jika anda memiliki lebih dari satu) file untuk style.css, berikutnya anda perlu menambahkan komentar di dalam file tersebut.

Kode di atas semua berada di dalam komentar, sehingga tidak akan mempengaruhi style. Sekarang aku mengisinya dengan beberapa detail, ini akan digunakan oleh WordPress untuk menampilkan rincian tema untuk admins. Pastikan anda meletakanya pada bagian paling atas tanpa white-spaces sebelumnya.

Saya sudah merubah nama file style sheet dari template, sekarang bernama 1.css. Saya juga telah membuat folder baru yang di sebut typography-paramount yang akan menjadi nama Theme WordPress pada saat saya mengupload nya. Letakan file style.css di dalam folder tersebut, tapi jangan di bawah direktori lain karena tidak akan terbaca oleh Wordpress.

Langkah ke 2 - Header dan Footer

Pada langkah ini, kita akan membuat dua file header.php dan footer.php. Meskipun keduanya adalah opsional tapi keduanya banyak digunakan di banyak theme Wordpress. Membuat file dua tersebut tidak begitu sulit.

header.php

Dimulai dengan header, membuat file baru dalam folder tema dengan nama header.php, kemudian membuka index.php di template dan salin kode di bawah ini. Ini akan menjadi header dan akan ditampilkan di setiap halaman situs tersebut, ingatlah bahwa ketika membuat template lain.

Kita sekarang akan menambahkan template tag WordPress untuk header.php, ini akan memberitahu WordPress dimana untuk meng inject konten ke theme. Ingat juga untuk mengubah link stylesheet.

Ada cukup banyak yang di tambahkan, tapi semua cukup sederhana ketika anda melihat nya. Semua tag di atas di dokumentasikan di dalam WordPress Codex, saya hanya akan menjelaskan beberapa fungsi saja.

language_attributes() - Menampilkan jenis bahasa untuk tag <html>
bloginfo() - Digunakan untuk menampilkan informasi Situs, parameter yang tersedia wi Codex, 'name' artinya adalah judul blog tersebut.
wp_title() - Menampilkan judul setiap halaman.
wp_head() - menampilkan link javascript dan hal-hal header lainya
get_option() - Mengambil nilai dari database wp_options
wp_list_pages() - Menampilkan link ke Halaman, parameter semacam halaman dengan benar dan juga menghentikan WordPress mencetak judul default.

footer.php

Buat file footer.php dan salin semua code di bawah ini mulai dari <div id="footer"> hingga bawah dan simpan. Sebuah Footer dinamis yang menampilkan tahun saat ini dengan benar, judul situs dan tautan Feed adalah hal yang biasa ada di sebuah theme. Jadi silahkan menambahkannya.

Saya sudah menambahkan footer untuk menampilkan ikon hak cipta (copyright), di ikuti tahun berjalan (<?php the_time('Y'); ?>) dan nama situs (<?php bloginfo('name'); ?>). Kemudian di baris berikutnya saya menempatkan tautan ke rss feed (<?php bloginfo('rss2_url'); ?>).

wp_footer() adalah yang digunakan WordPress untuk menambahkan sesuatu kebagian bawah situs, lebih sering digunakan oleh plugin untuk menambah kode tracking.

Langkah ke 3- File Utama

Kita sekarang akan membuat file index.php.

index.php

Ini adalah salah satu kode yang harus ada di theme WordPress (selain style.css), jadi mari kita mulai. Buat file dan letakan bersama file lainya. Kemudian tambahkan code berikut ini.

Ini akan memberitahu WordPress untuk menyertakan file header.php dan footer.php. Karena tutorial ini di bagi menjadi 2 seri maka kita akan membuat sidebar di artikel berikutnya. Anda dapat memilih untuk meninggalkan div dalam html status atau hanya tinggalkan saja dan ikuti apa yang saya lakukan. Tambahkan kode berikut ini di antara kedua tag sebelumnya.

Inilah yang WordPress sebut WordPress Loop. Baris pertama PHP adalah awal loop, endwhile adalah akhir loop tersebut. WordPress mengisi loop untuk setiap artikel di situs, dan jika tidak ada akan meberitahu "Woops... Sorry, no posts we're found.". Saya juga sudah menambah tautan sebagai navigasi yang akan mengarahkan ke halaman berikutnya, sehingga pengunjung dapat melihat konten yang lebih lama tanpa menggunakan arsip.

Dalam artikel berikutnya kita akan membahas lebih lanjut single.php. Ini akan menjadi apa yang ditampilkan jika pengunjung mengklik judul posting. Juga akan membahas sistem komentar, tidak seperti di index.php

Tes - Apakah berjalan dengan baik?

Jadi kita sekarang memiliki empat file di dalam theme, dengan asumsi bahwa anda tidak lupa memperbaharui file index.php. dan harusnya ini bekerja sebagai sebuah theme yang simple.

Test kedalam theme preview yang sudah di install WordPress terbaru, perhatikan sekeliling yang ada sepertinya ada masalah dengan judul yang panjang, mudah untuk diperbaiki dengan menambahkan kode berikut ini bagian #content h3 di dalam style sheet.

Lanjut ke Bagian ke 2.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.