Membuat Tema WordPress : bagian 2

Sudah siap membuat Tema WordPress? sudah satu minggu berlalu, saya yakin anda sudah benar-benar siap :). Agar lebih mudah dalam pembuatan tema wordpress, silahkan download Template Web yang telah saya buat untuk objek konversi ke Tema WordPress.

Download Template

Jika anda sudah mengerti bagaimana pengkonversian yang akan dilakukan di artikel ini dan selanjutnya anda diharapkan mampu untuk mengkonversi Desain Web yang telah anda lakukan menjadi tema WordPress seutuhnya.

Sudah download Templatenya? jika sudah… Let’s Rock!!

Pemanasan

Ekstrak file Template yang telah di download ke folder baru dengan nama “Ariona Theme” (atau sesuai dengan selera anda). Simpan folder tersebut ke dalam folder Tema WordPress anda. jika anda menginstallnya di XAMPP, maka alamat foldernya adalah.

C:/xampp/htdocs/wordpress/wp-content/themes/
Lokasi Folder Tema WordPress

Buat file baru dengan nama index.php, lalu Copy seluruh Code yang ada dalam file index.html.
Buka file style.css, dan di bagian awal anda dapat melihat beberapa informasi seperti berikut :

/*
Theme Name: Ariona Theme
Author: Ariona Rian
Author URI: http://ariona.net/
Description: Tema Terkeren yang pernah ditemukan di jagad wordpress
*/

Edit Informasi tersebut sesuai dengan kehendak anda. Theme Name adalah informasi untuk Nama Tema, Author untuk Pembuat Tema, Author URL untuk Website Author, dan Description untuk deskripsi Tema.

Informasi ini akan di tampilkan di halaman pemilihan tema WordPress.Screenshot tema diambil dari file screenshot.jpg, file screenshot harus berukuran 300x255px.

Informasi Tema

Anda dapat mengaktifkan Tema tersebut dengan mengklik tombol Activate, namun jika anda buka situs wordpress anda, yang tampil adalah seperti berikut.

Broken Theme

Apa yang terjadi? Desain HTML kita jadi rusak! oops!, tenang kita perbaiki sekarang.

Absolute dan Relative URL

Tampilan tersebut menjadi rusak karena file CSS yang ada tidak terload, begitu juga dengan gambar-gambar yang ada. ini dikarenakan lokasi gambar dan lokasi file CSS masih bersifat relative. maksudnya relative terhadap lokasi file HTML kita, misalnya /images/thumb.jpg.

Padahal lokasi seharusnya adalah : localhost/wordpress/wp-content/themes/ArionaThemes/Image/.
Agar lebih mudah dan Lokasi ini lebih dinamis anda dapat mengkonversinya menjadi absolute URL, jadi lokasi akan berubah sesuai lokasi tema wordpress kita. untuk itu pada bagian pemanggilan style dalam file index.html.

<link rel="stylesheet" href="style.css" />

Ganti dengan :

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />

maka secara otomatis lokasi style.css akan berubah dengan lokasi tema wordpress yang kita buat.
begitu juga dengan pemanggilan gambar, misalnya kode berikut.

<img src="images/thumb.jpg" alt="" width=120 height=120 class="wp-post-image" />

tambahkan template tag berikut pada src nya :

<img src="<?php bloginfo('template_directory'); ?>/images/thumb.jpg" alt="" width=120 height=120 class="wp-post-image" />

That’s it, silahkan refresh browser anda.

Splitting it up!

Selanjutnya kita akan memisahkan bagian header, siderbar dan footer dari file index.php dan memasukannya ke dalam file header.php, sidebar.php dan footer.php.

header.php

Kita mulai dengan header.php, jadi buat file header.php terlebih dahulu, lalu Cut (Ctrl+X. ingat, Cut bukan Copy) begian kode berikut dari file Index.php dan paste ke file header.php yang telah dibuat.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
		...
</head>
<body>
		...
		</header> <!-- End of Header-->

Kembali ke file index.php, setelah kode untuk bagian header di hapus, tambahkan kode berikut tepat di baris awal, sebelum <div id="container">.

<?php get_header(); ?>

<div id="container">
			<div id="content">

sidebar.php

Selanjutnya kita garap sidebar.php, buat file baru dengan nama sidebar.php, lalu dalam file index.html, Cut Code berikut dan paste ke file sidebar.php :

<aside>
	<h2><i>Welcome!!</i></h2>
		...

</aside> <!-- End of Sidebar -->

pada file index.php, setelah bagian sidebar di potong, tambahkan kode berikut tepat di atas <footer> :

<?php get_sidebar(); ?>

footer.php

Terakhir kita eksekusi bagian footer, pasti sudah tahu kan apa yang harus dilakukan, ya.. pertama buat file baru dengan nama footer.php, dan cut bagian kode berikut pada index.php dan paste ke file footer.php.

<footer>
	<div id="primary">
			...
	
</div> <!-- End of Wrapper Site -->
</body>
</html>

dan tambahkan kode berikut di akhir file index.php

<?php get_footer(); ?>

Run it up

Sekarang Refresh browser anda, niscaya (cieh) penampilan tema kita sama seperti sebelumnya, hehe… itu karena kita baru memecah bagian-bagian tema, kita belum memberikan fungsionalitas untuk mengupdate isi tema sesuai dengan isi situs.

Preview Tema Sementara

Jika terdapat error, pastikan tidak ada salah penulisan. Untuk komparasi silahkan download file berikut dan samakan dengan kode yang telah anda buat.
Download

Selanjutnya…

Sudah dulu yah :). Untuk minggu depan kita akan membuat content yang terdapat dalam tema kita berubah sesuai dengan isi dari situs wordpress yang kita miliki, misalnya Judul Situs dan Slogan pada header, Menu, dan Daftar posting yang akan disesuaikan dengan posting yang telah dibuat.

Category WordpressTag , ,

7 Komentar untuk “Membuat Tema WordPress : bagian 2

  1. gan kok saya cut html sampe trus saya pindahin ke header.php

    kok error ya?

    pada udh saya tambahin di index.phpnya

    erronya : Call to undefined function get_header()

  2. gan kok saya cut html sampe trus saya pindahin ke header.php

    kok error ya?

    pada udh saya tambahin di index.phpnya

    erronya : Call to undefined function get_header()

Tinggalkan Komentar Anda