Membuat Tema WordPress : bagian 5 (fin)

Tidak terasa, tutorial pembuatan tema WordPress sampai pada tahap akhir. Sebenarnya pembuatan tema pada bagian ke-4 sebelumnya sudah bisa anda gunakan, namun pada tutorial ini saya akan menjelaskan bagaimana cara pembuatan template untuk page.

Apa perbedaan Post dan Page

Jika anda berada di halaman admin, terdapat menu untuk membuat posting (Add New Post) ada juga menu untuk membuat page baru (Add New Page), lalu apa perbedaan antara keduanya?

Page biasa digunakan untuk membuat halaman statis, misalnya halaman Kontak, halaman Homepage untuk situs bisnis, atau halaman statis lainnya. Dan anda tidak bisa menambahkan kategori atau tag paga page ini seperti yang anda lakukan pada posting.

Satu template untuk semua

Sekali anda membuat template, anda dapat menggunakannya untuk sejumlah page yang akan anda buat, kecuali anda membuat template khusus untuk page tertentu, misalnya template arsip dan lainnya.

Untuk membuat page template anda tinggal menambahkan baris kode berikut di awal file template :

<?php
/*
	Template Name: Template Arsip
*/
?>

Jika anda membuat Page baru, maka template tersebut siap untuk dipilih.

Memilih Template untuk page

Template Full Width

Pada template HTML yang anda download pada bagian ke-2, terdapat beberapa halaman khusus, seperti full-width.html, dan archives.html. File template ini akan kita ubah menjadi template untuk page. Namun pada pada bagianke-4 ini kita hanya akan mengkonversi template full width saja.

Karena sebenarnya, template full width ini sama dengan single.html tapi tidak terdapat sidebar di dalamnya, jadi copy single.php dan beri nama “template-fullwidth.php”. Lalu tambahkan kode berikut di awal baris untuk merubahnya menjadi template:

<?php	
/*
	Template Name: Full Width
*/
?>

Lalu kita modifikasi kode berikut :

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

Menjadi seperti berikut, mengacu pada file full-width.html yang terdapat pada template yang anda download.

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

Hapus baris kode post-meta berikut, karena kita tidak membutuhkannya pada page.

<section class="post-meta">
	<h2>
	...
</section><!-- End of Post Meta contaning Title, Author, Category and an Excerpt -->

Ganti dengan kode untuk menampilkan title (Judul Page) saja :

<h2><?php the_title(); ?></h2>

Terakhir, hapus baris-baris kode berikut,karena kita tidak membutuhkannya:

<?php comments_template(); ?>

berikut :

<div class="paginate">
	<div class="prev"><?php previous_posts_link() ?></div>
	<div class="next"><?php next_posts_link() ?></div>
</div>

dan kode berikut :

<?php get_sidebar(); ?>

Template Full Width, selesai. Untuk mencobanya silahkan buat Page Baru, dan pilih Template Full Width, masukkan sedikit teks, dan klik tombol preview untuk melihat hasilnya.

Preview Template Full Width

Download Source Code

Kesimpulan

Dengan berakhirnya bagian ke-4 ini, berakhir pula tutorial seri membuat tema wordpress, saya harap anda dapat memahami langkah-langkah pembuatan tema wordpress dan bisa mengkonversi desain web html menjadi tema wordpress. untuk latihan anda dapat mendownload template html yang tersebar di internet dan mencoba mengkonversinya ke dalam tema wordpress.
Selanjutnya anda dapat mengikuti tutorial-tutorial wordpress lainnya untuk menambah fungsionalitas dari tema anda.

Category WordpressTag , , ,

16 Komentar untuk “Membuat Tema WordPress : bagian 5 (fin)

    1. Begini Mas…

      1. Masuk DB WP…
      2. Pilih Menu Appearance di Table sebelah kiri..
      3. Pilih Menu Themes, ——–>>>> UpLoad Theme… selesai.. πŸ˜€

    1. maksudnya urutan menu? kalo urutan menu itu berdasarkan abjad. kalaupun mau diubah posisinya bisa pake plugin category order, untuk page, setiap pembuatan pasti ada ordernya.

      kalo maksudnya membuat page template home jadi halaman awal ketika membuka situs, disetting disini, settings > reading , bagian static page. tentuin mana page yang ingin ditampilkan pertama kali di bagian front-page.

  1. mas kalo di tema ini kan authornya gak ngelink…

    biar ngelink ke “http://….com/?author=1” cara nya gimana??

    terima kasih..

  2. Tutorialnya sangat bermanfaat sekali, tapi sayang ya nggak dilanjutkan dengan perkembangan terkini. Seperti :
    1. Bgaimana cara membuat theme drag and drop
    2. Membuat theme yang bisa di integrasikan dengan plugin slider
    . Dan lain sebagainya…

  3. tutorialnya bagus & bermanfaat banget gan, tapi ada yg kurang gan
    seharusnya plus video dari bagian 1 sampai bagian 5. pasti tambah ok and Jempol.

Tinggalkan Komentar Anda