Tutorial Cara Membuat Theme Wordpress Sendiri ( Langkah #4 : Memuat Konten Blog Ke Dalam Theme)

Kategori : Basic / Newbie's, Coding, Design Tags: Cara Membuat Theme Wordpress , Pada 11 Nov 2008 oleh F

Lanjutan dari seri Tutorial Cara Membuat Theme Wordpress Sendiri. Untuk memastikan tidak ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal :

Ok. Seperti pada post sebelumnya, awali dengan nyalakan XAMPP Control Panel, hidupkan Apache Server & Database MySQLnya, lalu buka aplikasi browser dan buka halaman dashboard administrator wordpress lokal anda ( http://localhost/wordpress/wp-admin ).

Pada post kali ini, kita akan “memuat” konten blog kepada Theme Wordpress yang telah kita buat kemarin. Tepatnya, memasukkan konten blog ke halaman utama blog ( index.php ) yang filenya telah kita buat kemarin. Maka dari itu, coba perhatikan struktur halaman utama sebuah blog wordpress pada umumnya :

Elemen halaman utama blog wordpress

Dari contoh sebuah halaman utama blog wordpress ini, bisa kita simpulkan elemen - elemen yang membangun sebuah halaman blog wordpress :

Header / Nama Blog
Tagline Blog
Menu ( Memberikan link ke page / halaman statis )
Post & Metadata Post( Terdiri dari judul post, potongan/keseluruhan post, link read more, link komentar, link tags, dan link category )
Link untuk membaca entri sebelumnya ( Previous page )
Sidebar

Pada Post pendahuluan saya sudah menjelaskan mengenai rumus sederhana membuat wordpress theme :

WordPress Theme = XHTML + tag-tag PHP untuk memanggil fungsi & konten WordPress + CSS + Javascript ( untuk efek2 tertentu )

Pada Langkah #2 kita sudah mempelajari sedikit mengenai tag - tag XHTML. pada post kali ini, yang akan kita pelajari adalah bagian tag - tag PHP untuk memanggil fungsi & konten wordpress. Kita akan bahas satu persatu tag yang akan kita gunakan untuk memanggil elemen - elemen halaman utama blog wordpress.

Sekarang, buka file index.php pada folder latihantheme : kita mendapati satu file php yang masih kosong. Untuk pendahuluan, ketik / copy paste script ini diantara <head> dan </head> :

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title><?php bloginfo(’name’); ?><?php wp_title(); ?></title>

<meta http-equiv=”Content-Type” content=”<?php bloginfo(’html_type’); ?>; charset=<?php bloginfo(’charset’); ?>” />
<meta name=”generator” content=”WordPress <?php bloginfo(’version’); ?>” /> <!– leave this for stats please –>
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(’rss2_url’); ?>” />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(’rss_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(’atom_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(’pingback_url’); ?>” />
<?php wp_get_archives(’type=monthly&format=link’); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>

Ok, script apa ini?

script yang anda baru copy paste kan adalah tag php untuk memanggil informasi pada <head>. Kita sudah bahas pada langkah #2 bagian Tag Pembangun Halaman bahwa informasi yang ditulis diantara tag <head> dan </head> adalah informasi mengenai halaman web yang tidak ditampilkan pada browser. Informasi ini dimuat untuk kepentingan teknis, seperti SEO. Yup, hal yang teknis dan sudah strict. maka dari itu copy dan paste saja.

Header / Nama Blog

Header / Nama Blog dipanggil menggunakan tag sederhana ini :

<h1><a href=”<?php echo get_option(’home’); ?>/”><?php bloginfo(’name’); ?></a></h1>

Ketik / Copy paste kan ke file index.php, diantara tag <body> dan </body>

Tagline Blog

Tagline Blog dipanggil menggunakan tag sederhana ini :

<?php bloginfo(’description’); ?>

Ketik / Copy paste kan ke file index.php, diantara tag <body> dan </body>, setelah tag pemanggil nama blog

Menu ( Memberikan link ke page / halaman statis )

Menu untuk link ke halaman statis dipanggil menggunakan tag ini :

<ul>
<li class=”first”><a href=”<?php echo get_option(’home’); ?>/”>Home</a></li>
<?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’);?>
</ul>

Ok, yang ini agak sedikit tricky. kita bahas yang satu ini.

pertanyaan pertama yang keluar adalah : mengapa menggunakan tag unordered list + list item? jadi list dengan bullet style dong? well, pertama kali mempelajari hal ini di blog Kang Didats, saya juga memiliki pertanyaan serupa. Jawabannya : Pada design menggunakan CSS, memang begini gayanya. nantinya, si menu akan dibuat memanjang secara horizintal, di styling menggunakan CSS
selanjutnya, penjelasan list item pertama : <?php echo get_option(’home’); ?>/ adalah tag untuk memanggil halaman home blog wordpress, maka dari itu ditaruh sebagai nilai dari atribur href yang melink ke home
penjelasan list item kedua : <?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’);?> merupakan tag untuk memanggil link ke page, dan menyusunnya sebagai list item.

Post & Metadata Post ( Terdiri dari judul post, potongan/keseluruhan post, link read more, link komentar, link tags, dan link category )

Waw, yang ini Lebih tricky lagi. bagian post ini menggunakan fungsi loop pada php. yang dimaksud dengan loop disini adalah pengulangan. Coba anda perhatikan, ada berapa post & metadata yang muncul pada halaman utama blog wordpress? jumlah pengulangan tergantung pada setting di bagian setting > reading. Namun intinya, bagian ini menggunakan fungsi loop, dengan parameter jumlah pengulangan yang di setting pada Setting > Reading.

ini tag yang dibutuhkan untuk memuat Post & Metadata post pada theme :

<?php if(have_posts()):?>
<?php while(have_posts()):the_post(); ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h2>

<?php _e(’Category :’); ?> <?php the_category(’, ‘) ?> <?php _e(’| ‘);?> <?php the_tags(); ?> <?php _e(’| ‘);?> <?php the_time(’M') ?> <?php the_time(’d') ?>, <?php the_time(’Y'); ?> <?php _e(’by’); ?> <?php the_author(); ?>
<?php comments_popup_link(’No Comments’, ‘1 Comment’, ‘% Comments’); ?> <?php edit_post_link(’Edit’, ‘ | ‘, ”); ?>

<?php the_content(); ?>

</div>
<?php endwhile; ?>
<div class=”navigation”>
<?php posts_nav_link(); ?>
</div>
<?php else: ?>
<div class=”post”>
<h2><?php _e(”The page you’ve requested does not exist.
Suggestions:
<ul>
<li>Check the spelling of the address you typed</li>
<li>If you are still having problems, please contact us</li>
</ul>”); ?></h2>
</div>
<?php endif; ?>

Penjelasan :

<?php if(have_posts()):?> mengecek, jika terdapat post pada database, maka lakukan perintah dibawah hingga tag <?php else: ?>
<?php while(have_posts()):the_post(); ?> = ulangi ( loop ) konten sejumlah parameter pada setting > reading
<div class=”post” id=”post-<?php the_ID(); ?>”> = mengelompokkan post dalam div khusus
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h2> = memuat judul post dan link, dalam ukuran header 2
<?php the_content(); ?> = memuat konten post
<?php _e(”); ?> = Memuat tulisan yang berada dalam ”
<?php the_category(’, ‘) ?> = Memuat category yang dimiliki post
<?php the_tags(); ?> = memuat Tag yang dimiliki post
<?php the_time(’M') ?> = Memuat data waktu ( bulan ) post di publikasi
<?php the_time(’d') ?> = Memuat data waktu ( tanggal) post di publikasi
<?php the_time(’Y'); ?> = Memuat data waktu ( tahun ) post di publikasi
<?php the_author(); ?> = Memuat data penulis post
<?php comments_popup_link(’No Comments’, ‘1 Comment’, ‘% Comments’); ?> = Memuat jumlah komentar yang dimiliki post
<?php edit_post_link(’Edit’, ‘ | ‘, ”); ?> = Memuat link edit pada post, jika pengakses halaman blog merupakan author dari post
<?php endwhile; ?> = Mengakhiri pengulangan ( loop ) yang dilakukan <?php while(have_posts()):the_post(); ?>
<?php posts_nav_link(); ?> = Memuat link “Next Page” atau “Previous Page”
<?php else: ?> = Mengakhiri perintah yang dilakukan <?php if(have_posts()):?> . Artinya, jika tidak ditemukan post pada database, kalukan perintah yang tertulis setelah <?php else: ?> hingga <?php endif; ?>
<?php endif; ?> = mengakhiri semua perintah yang ada di bagian <?php if(have_posts()):?>

Well, a litle bit tricky kan?

Sidebar

yang ini lebih tricky lagi. perhatikan bagian ini baik - baik : Untuk mengelola sidebar, tim developer wordpress telah mengembangkan sistem widget, sistem yang memungkinkan anda menambah atau mengurangi konten sidebar hanya dengan drag and drop pada bagian Design > Widget. kami membahasakan ini dengan istilah widget ready.

nah, untuk memfungsikan fungsi widget ini, diperlukan file khusus bernama function.php. maka dari itu, buat file baru ( Ctr + N ) pada aplikasi notepad ++ anda, lalu ketik / copy paste script ini :

<?
if ( function_exists(’register_sidebar’) )
register_sidebars(1);
?>

Save pada direktori latihantheme dengan nama file function.php

sekarang, coba perhatikan : register_sidebars(1); . angka 1 disini berarti sistem wordpress akan membuat satu sidebar. Jika anda hendak membuat lebih dari satu sidebar, ganti saja jumlah dalam tanda kurungnya. untuk tutorial ini, kita hanya akan menggunakan satu sidebar saja. jadi tidak usah diganti dulu.

Sekarang, tag untuk memuat sidebar pada theme. Ketik / Copy Paste tag berikut pada file index.php, setelah tag <?php endif; ?> :

<?php dynamic_sidebar(1);?>

perhatikan : ada angka 1 disana. jika anda meregister sidebar lebih dari satu, maka anda perlu membuat beberapa tag seperti ini, dengan inisial angka berbeda. Namun pada tutorial ini, kita bermain denga satu sidebar saja dulu, jadi tidak usah diganti.

Bingung Mengetikkan kodenya secara terpisah? Ini Summarynya

!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title><?php bloginfo(’name’); ?><?php wp_title(); ?></title>

<meta http-equiv=”Content-Type” content=”<?php bloginfo(’html_type’); ?>; charset=<?php bloginfo(’charset’); ?>” />
<meta name=”generator” content=”WordPress <?php bloginfo(’version’); ?>” /> <!– leave this for stats please –>
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(’rss2_url’); ?>” />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(’rss_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(’atom_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(’pingback_url’); ?>” />
<?php wp_get_archives(’type=monthly&format=link’); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>

</head>

<body>

<h1><a href=”<?php echo get_option(’home’); ?>/”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>

<ul>
<li class=”first”><a href=”<?php echo get_option(’home’); ?>/”>Home</a></li>
<?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’);?>
</ul>

<?php if(have_posts()):?>
<?php while(have_posts()):the_post(); ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h2>

<?php _e(’Category :’); ?> <?php the_category(’, ‘) ?> <?php _e(’| ‘);?> <?php the_tags(); ?> <?php _e(’| ‘);?> <?php the_time(’M') ?> <?php the_time(’d') ?>, <?php the_time(’Y'); ?> <?php _e(’by’); ?> <?php the_author(); ?>
<?php comments_popup_link(’No Comments’, ‘1 Comment’, ‘% Comments’); ?> <?php edit_post_link(’Edit’, ‘ | ‘, ”); ?>

<?php the_content(); ?>

</div>
<?php endwhile; ?>
<div class=”navigation”>
<?php posts_nav_link(); ?>
</div>
<?php else: ?>
<div class=”post”>
<h2><?php _e(”The page you’ve requested does not exist.
Suggestions:
<ul>
<li>Check the spelling of the address you typed</li>
<li>If you are still having problems, please contact us</li>
</ul>”); ?></h2>
</div>
<?php endif; ?>

<?php dynamic_sidebar(1);?>

</body>
</html>

Ok. sekarang kita memiliki 3 file : index.php yang sudah bisa memuat konten dari blog, function.php yang berisi fungsi widget, dan style.css. Sekarang, masuk Dashboard > Design > Theme, lalu activate Theme Latihan ini. Lihat tampilan theme latihan kita.

Yup, cukup untuk pembahasan post ini : Memuat Konten blog pada theme. Pada post selanjutnya kita akan membahas Styling Theme menggunakan CSS.

Ada pertanyaan? atau Ada langkah yang kurang jelas? Atau mungkin ada yang terlewat? izinkan kami mengetahuinya. silahkan sampaikan pandangan anda melalui kolom komentar

Enjoy!

Share on Facebook

------------------------------------------------------------------------------------

Anda merasa post di blog ini bermanfaat untuk anda?

Dapatkan update harian bloggingly GRATIS di RSS Reader anda! Subscribe sekarang RSS FEED BLOGGINGLY !

Apa itu RSS? Kenali RSS di halaman ini

Komentar oleh aimyaya

2008-11-19 15:40:19

Wah banyak juga..
Saya juga sudah nyoba lewat trial and error..

Balas Komentar Ini

Komentar oleh F

2008-11-20 04:50:48

Yup. agak panjang juga. saya tambahkan penjelasan2 dasar sih

Komentar oleh evan

2008-11-26 10:40:09

z binggung dengan penjelasan anda?? z cuma mau nya apa si sebenarya fungsi edit css pada worpress

Bloggingly