Membuat Tema WordPress : bagian 3

Sudah siap melanjutkan misi pembuatan tema wordpress? kalo begitu kita lanjutkan misi kita.
Yang akan kita lakukan minggu ini adalah peng-update-tan file header.php, index.php agar menampilkan informasi-informasi yang sesuai dengan apa yang telah disetting di dalam wordpress, misalnya Judul Situs sesuai dengan Nama Situs yang telah anda buat berikut slogannya, Menu yang ada disesuaikan dengan page yang telah dibuat, dan konten menampilkan daftar posting yang ada. dan banyak lagi.

header.php

seperti biasa, kita mulai menyiksa file header.php ini :).

Updating Blog Information

Kita mulai dengan dengan mengupdate title tag dalam tag head.

<title>Ariona Theme Framework</title>

Update menjadi seperti berikut :

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

Dengan begitu, title blog akan sesuai dengan Nama situs anda, dan jika anda membuka suatu posting, title menjadi nama situs diikuti dengan judul posting.

selanjutnya, kita tambahkan area untuk me-load plugin-plugin wordpress. sebelum tag penutup </head>, tambahkan kode berikut.

<?php wp_head(); ?>

Kita lanjut ke Judul Situs, Caranya hampir sama dengan title, kita gunakan template tag <?php bloginfo('name'); ?>, jadi update kode berikut :

<h1>Your Site title</h1>

menjadi

<h1><?php bloginfo('name'); ?></h1>

dan untuk slogan ubah kodenya menjadi seperti berikut

<small><?php bloginfo('description'); ?></small>

Untuk merubah, Nama Situs dan Slogan anda dapat masuk ke halaman Admin, dan klik menu Settings > Generals, ubah bagian Site Title dan Tagline.

Setting Site Title dan Slogan
Nama Situs dan Slogan

Updating Menu

Kita lanjut dengan Menu, Menu akan kita sesuaikan dengan Page yang telah dibuat, jadi update Kode berikut :

<nav> <!-- One Level navigation, for Page Navigation -->
	<ul>
		<li class="selected"><a href="index.html" title="">Home</a></li>
		<li><a href="" title="">Semantic</a></li>
		<li><a href="" title="">Style</a></li>
		<li><a href="" title="">Framework</a></li>
		<li><a href="" title="">Documentation</a></li>
	</ul>
	<div style="clear:both"></div>  <!-- Clear fix, Don't Delete or sky will fall to your head -->
</nav> <!-- End Of Page Navigation -->

Menjadi seperti berikut :

<nav> <!-- One Level navigation, for Page Navigation -->
	<ul>
		<li class="selected"><a href="<?php bloginfo('url') ?>" title="">Home</a></li>
		<?php wp_list_pages('title_li'); ?>
	</ul>
	<div style="clear:both"></div>  <!-- Clear fix, Don't Delete or sky will fall to your head -->
</nav> <!-- End Of Page Navigation -->

Menu pertama, “home” kita acu ke halaman situs kita, dan selanjutnya kita gunakan template tag dari wordpress, hasilnya adalah list disertai dengan link Page yang telah dibuat.

Untuk Menambahkan Page, anda dapat masuk ke menu Pages > Add New.

Looping Content

Kita lanjutkan ke Content, seperti anda lihat pada template sebelum kita konversi (index.html), terdapat daftar posting. kita akan sesuaikan daftar tersebut dengan daftar posting yang ada dalam wordpress.
Kita akan menggunakan looping (Pengulangan), untuk menyelesaikan bagian ini, yuk kita mulai.
Buka file index.php, kita akan baris kode berikut ini agar menampilkan daftar posting yang tersedia.

<article>
	<section class="post-meta">
		<h2>
			<a href="single.html">a very very loooooooong post title</a>
		</h2>
		<img src="<?php bloginfo('template_directory'); ?>/images/thumb.jpg" alt="" width=120 height=120 class="wp-post-image" />
		<small>oleh Rian Ariona / tutorial, photoshop / 73 Komentar</small>
		<p>post-excerpt or short description post-excerpt or short description post-excerpt or short description post-excerpt or short description</p>
		<a href="" title="">read more</a>
	</section><!-- End of Post Meta contaning Title, Author, Category and an Excerpt -->
</article>

<div class="paginate">
	<div class="prev">Prev</div>
	<div class="next">Next</div>
</div>

Kita tambah, ubah kode menjadi seperti berikut :

<?php 
if(have_posts()):
	while(have_posts()) : the_post(); 
?>
<article>
	<section class="post-meta">
		<h2>
			<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
		</h2>
		<?php the_post_thumbnail(array(120,120)); ?>
		<small>oleh <?php the_author(); ?> / <?php the_category(','); ?> / <?php comments_popup_link('No Comments;', '1 Comment', '% Comments'); ?></small>
		<p><?php the_excerpt(); ?></p>
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">read more</a>
	</section><!-- End of Post Meta contaning Title, Author, Category and an Excerpt -->
</article>
	<?php endwhile; ?>
<?php else: ?>
		<p>Maaf Tidak ada posting ditemukan</p>
<?php endif; ?>
<div class="paginate">
	<div class="prev"><?php previous_posts_link() ?></div>
	<div class="next"><?php next_posts_link() ?></div>
</div>

Jika kita konversi ke bahasa manusia :), kira kira seperti berikut :

jika ada Posting maka :
	Selama ada Posting :
		Tuliskan Judul posting
		Tuliskan Penulis, Kategori, jumlah komentar
		Tuliskan Rangkuman
		...
Jika tidak ditemukan posting
	tulis "Maaf Tidak ada posting ditemukan"

Tampilkan Link ke Posting sebelumnya
Tampilkan Link ke Posting selanjutnya

Jika di tampilkan di browser, akan ditemukan error seperti berikut.

Error

ini dikarenakan kita memanggil fungsi <?php the_post_thumbnail(); ?> tapi kita belum menambahkan fungsinya. untuk itu, buat file baru dengan nama functions.php, dan tambahkan kode berikut.

<?php
if (function_exists('add_theme_support')) { add_theme_support('post-thumbnails'); }
?>

gimana? ada sedikit pencerahan? kalau kurang coba ganti lampunya, he.he πŸ˜€

Widget, Widget dan Widget

Keberadaan Sidebar dan footer tidak lain adalah untuk penempatan Widget WordPress, pada template yang sedang kita konversi, sidebar memiliki dua area Widget, yaitu diatas search box dan di bawahnya. di bagian footer saya juga sudah menambahkan dua area untuk widget.
Buka file sidebar.php, lalu edit menjadi seperti berikut :

<aside>
	<ul>
	<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_atas')) : ?>
		<li>
  			<h2><i>Welcome!!</i></h2>
			<p>Welcome to the ariona Theme Framework, you can customize all element in this theme, with a semantic HTML5 structure, easy to style!, check out the documentation</p>
		</li>
	<?php endif; ?>			
	</ul>					
	<div class="search">
		<i>Search  : </i>
		<form action="">
			<input type="text" name="" value="" placeholder="">
			<input type="submit" name="" value="">
		</form>
	</div> <!-- End of Search Box, this searchbox made special for Sidebar -->
	<ul>
	<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_bawah')) : ?>
	<?php endif; ?>			
	</li>
</aside> <!-- End of Sidebar -->

Silahkan coba masuk ke admin panel, dan masuk ke menu Appearance > Widget. namun apa yang terjadi? yang tampil malah seperti berikut:

No Widget Defined

Ini karena kita belum mendaftarkan sidebar yang telah kita buat :). untuk mendaftarkannya harus bawa KTP, hehe. Buka file functions.php, tambahkan kode berikut:

if (function_exists('register_sidebar')) {
  	register_sidebar(array(
		'id'=>'sidebar_atas',
		'name'=>'Sidebar Atas',
	));
	register_sidebar(array(
		'id'=>'sidebar_bawah',
		'name'=>'Sidebar Bawah',
	));
}

id, adalah nama unik untuk sidebar,dan dipanggil pada fungsi sebelumnya. dynamic_sidebar('sidebar_atas'), sedangkan name akan ditampilkan di halaman Widget. Sekarang anda dapat menambahkan widget pada tema yang kita buat.

Available Widget

Selanjutnya kita buat area widget untuk footer, pada template saya telah menyediakan dua lokasi untuk widget, footer-right dan footer-left. berikut bagian kode footernya.

<footer>
	<div id="primary">	
		<ul>
			<li>
				<h2></h2>
				<p>Copyright © 2011 by Ariona</p>
			</li>
		</ul>
	</div> <!-- End of Primary Footer -->
	<div id="secondary">
		<ul>
			<li>
				<h2></h2>
				<p>Theme Design by @ariona_rian. <br/>Default Theme View Inspired by <a href="http://belajarwebdesign.com">belajarwebdesign.com</a></p>
			</li>
		</ul>
	</div> <!-- End of Secondary Footer -->
</footer> <!-- End of Footer -->

Sama halnya dengan sidebar kita ganti kode setelah ul menjadi seperti berikut.

<footer>
	<div id="primary">	
		<ul>
			<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('footer_kiri')) : ?>
				<li>
					<h2></h2>
					<p>Copyright © 2011 by Ariona</p>
				</li>
			<?php endif; ?>
		</ul>
	</div> <!-- End of Primary Footer -->
	<div id="secondary">
		<ul>
			<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('footer_kanan')) : ?>
			<li>
				<h2></h2>
				<p>Theme Design by @ariona_rian. <br/>Default Theme View Inspired by <a href="http://belajarwebdesign.com">belajarwebdesign.com</a></p>
			</li>
		<?php endif; ?>
		</ul>
	</div> <!-- End of Secondary Footer -->
</footer> <!-- End of Footer -->

Oo.. ya hampir lupa.. saya belum menjelaskan maksud kondisi di atas, perhatikan baris kode berikut :

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('footer_kanan')) : ?>

Maksudnya, kita Cek terlebih dahulu, Jika tidak ada fungsi dynamic sidebar pada wordpress, atau tidak ada siderbar (widget) yang diregistrasikan, maka baris kode selanjutnya yang akan di tampilkan. Pada contoh sidebar Atas, setelah baris kode ini saya menambahkan teks Welcome, bla..bla..bla.. Teks ini akan tampil jika area tersebut tidak diisi dengan sidebar. Namun jika kita menambahkan widget, teks tersebut akan hilang :).
Selanjutya, seperti biasa, kira daftarkan terlebih dahulu widget footer yang telah kita buat. tambahkan kode berikut pada functions.php

if (function_exists('register_sidebar')) {
  	register_sidebar(array(
		...
	));
	register_sidebar(array(
		...
	));
	register_sidebar(array(
		'id'=>'footer_kiri',
		'name'=>'Footer Kiri',
	));
	register_sidebar(array(
		'id'=>'footer_kanan',
		'name'=>'Footer Kanan',
	));
}

Terakhir, pada bagian footer, tepat sebelum tag </html> :

	<?php wp_footer(); ?>
</html>

tag ini berfungsi untuk menyimpan plugin wordpress, sama halnya dengan wp_head(); pada header.php.

Huufft.. Beres juga. silahkan coba buka wordress anda, tambahkan beberapa widget lalu perhatikan previewnya. Widget telah terpasang dan ditampilkan dengan benar, jika anda mendapatkan error, periksa kembali kodenya, untuk komparasi silahkan download file berikut. isinya adalah tema hasil edit pada bagian ketiga ini.
Download Source

Kesimpulan

Sampai tutorial bagian Ke-3 ini kita sudah membuat template HTML kita hampir menjadi Tema WordPress, kita telah membagi-bagi file kedalam struktur tema wordpress, menampilkan posting, dan membuat area untuk widget. Pada bagian selanjutnya (4) kita mulai mengeksekusi halaman Single.php, halaman ketika kita membaca posting, dan memberikan fungsi pada Area Komentar. jadi tunggu tutorial minggu depan :).

Category WordpressTag , ,

39 Komentar untuk “Membuat Tema WordPress : bagian 3

  1. om, kalau mau buat elemen baru di home (main_index) gimana ya?.
    jadi maksudnya gini, walaupun blog ane blog article, tapi ane pegen di home page itu disisipin kolom khusus buat slideshow post post terdahulu, jadi mirip blog magazine
    bagaimana ya om?. ane cari cari referensi lom dapet dapet drtd.. help me ya om.. πŸ˜€

    1. buat template page untuk homepagenya mas. nanti disetting di menu Settings > reading > front Page.
      untuk menampilkan daftar posting di page template digunakan wp_query.
      download contoh template pagenya disini.

  2. Tutorial yang sangat baik, terimakasih sangat membantu saya yang sedang belajar ttg wordpress.

    Mau memberi tahu sepertinya ada typo sedikit, di bagian:

    <?php blog_info('name'); ?>
    

    sepertinya seharusnya tidak pakai underscore, jadi:

    <?php bloginfo('name'); ?>
    

    soalnya sempat menemukan error ketika saya menggunakan dalam format offline dengan WAMP.

    Terus sharing ya mas πŸ™‚

  3. mau tanya admin.. klo saya mau menampilkan Prev sma Next gmn ya?? di saya tidak tampil. saya di home post. menampilkan 5 postingan trakhir..

    // limit 5
    <?php
    if(have_posts()):
    while(have_posts()) : the_post();

    //looping posting

    nah.. itu tampilkna prev sam nexnt gimana??

    script saya

    mohon bantuannya admin. terimakasih

  4. mas, jika di file index.html ada 2 menu ( services.html dan blog.html ), supaya service.html dan blog.html muncul di tampilan menu wordpress. pas saya klik menu service, halamannya blank.. bagaimana caranya supaya muncul isi dari file service.html tsb? thx before

  5. wah, keren…
    mas, saya dapet sedikit masalah. ketika saya masuk ke admin panel, dan masuk ke menu Appearance > Widget, pada menu appearancenya tidak ada pilihan ‘widget’. itu kira2 kenapa ya??
    mohon pencerahannya

  6. Mas mohon bantuanya dong ceritanya saya suruh bikin yang kaya gini http://demo7.bursatokoonline.com/
    mohon tutorialnya dari awal mas saya nyari di tutorial anda g nemu yg kaya gini
    ni saya uda coba bikin ngeditnya di local tp masalahna saya pengen faham yg dari awal ni yg udah jadi baru kaya gini jadinya

    itu singglenya blm jalan trus selainya file apanya lagi yang harus dikerjain?
    makasih sebelumny

  7. Mas mohon bantuanya dong ceritanya saya suruh bikin yang kaya gini http://demo7.bursatokoonline.com/
    mohon tutorialnya dari awal mas saya nyari di tutorial anda g nemu yg kaya gini
    ni saya uda coba bikin ngeditnya di local tp masalahna saya pengen faham yg dari awal ni yg udah jadi baru kaya gini jadinya

    itu singglenya blm jalan trus selainya file apanya lagi yang harus dikerjain?

    makasih sebelumny

Tinggalkan Komentar Anda