Bloggingly

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

• Langkah #0 : Pendahuluan, serta tools – tools yang dibutuhkan
• Langkah #1 : Memahami Struktur File Theme Wordpress
• Langkah #2 : Memahami Tag – tag XHTML & Kegunaannya, dan aturan penulisannya
• Langkah #3 : Membuat File Dasar Theme Wordpress : index.php & style.css
• Langkah #4 : Memuat Konten Blog Ke Dalam Theme
• Langkah #5 : Mendesain Theme Menggunakan CSS
• Langkah #6 : Merapihkan Styling CSS

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

Seperti yang sudah kami sebutkan pada langkah #1, mengenai struktur file Theme Wordpress : Theme wordpress terdiri dari berbagai file. Pada 7 langkah sebelumnya, kita telah menghasilkan 3 file inti dari theme wordpress : index.php, style.css, dan function.php.

Pada post kali ini, kita akan membuat file yang lainnya : header.php, comment.php, single.php, page.php, archive.php, dan search.php.

Sebentar, sepertinya ada yang terlewat. Bagaimana dengan footer.php dan home.php?

Well, karena pada latihantheme ini kita tidak menampilkan footer apapun, maka tidak kita butuhkan file footer.php ini.  Sedangkan untuk home.php, karena settingan index.php sudah sesuai dengan apa yang kita butuhkan tampilan halaman depan, maka kita tidak membutuhkan home.php untuk latihantheme.

Ok, Langsung saja kita bahas satu persatu. buka browser dan akses localhost/wordpress, dan buka index.php menggunakan notepad ++.

membuat header.php

header.php merupakan file untuk mendefinisikan data – data pada header, lalu digunakan secara bersama oleh tiap file. gunanya? agar header tiap file dipastikan seragam. persis seperti konsep style.css : satu file yang mendefinisikan seluruh halaman, maka dari itu dibuat dalam file tersendiri, dan digunakan secara bersama – sama. tujuannya? agar tampilan seragam. begitu pula dengan header.

Kalau kita analisa, apa sih yang membedakan halaman ( yang standar y ) home, post, page, tag dan categories? hanya kontennya. Sidebar, header dan footernya sama. Maka dari itu, dari pada menduplikasi konten file, lebih baik tampilan yang sama ditulis dalam satu file terpisah dan script tersebut digunakan secara bersamaan oleh semua file. Enough for the theory. Sekarang praktek :

1. buka file baru pada notepad ++.
2. buka file index.php. select kode dari baris sesudah tag <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″> hingga <?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’);?></ul></div>, lalu tekan CTR + X alias cut.
3. Paste script yang tadi di cut ke file baru notepad++, lalu save dengan nama header.php
4. Kembali ke file index.php. pada bagian yang tadi kita pindahkan scriptnya ke header.php, ketik / copypaste kode ini : <?php get_header(); ?>

Penjelasan : <?php get_header(); ?> merupakan tag wordpress yang berfungsi untuk me-LOAD seluruh script yang terdapat pada file
header.php

OK, sekarang, file header.php beres

Membuat comment.php

comment.php merupakan “kerangka” dari tampilan komentar :  apa yang akan ditampilkan jika ada komentar, apa yang akan ditampilkan jika tidak ada komentar, dan apa yang ditampilkan jika sistem komentar blog anda membutuhkan pengunjung login terlebih dahulu. Sistem komentar yang akan kita gunakan ini saya ambil dari kerangka kubrick. Theme default bawaan wordpress.

Buat file baru pada notepad ++, copy paste script berikut dan save dengan nama comments.php :

<?php // Jangan menghapus baris ini!
if (!empty($_SERVER['SCRIPT_FILENAME']) && ‘comments.php’ == basename($_SERVER['SCRIPT_FILENAME']))
die (’Please do not load this page directly. Thanks!’);

if (!empty($post->post_password)) { // jika ada password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {  // dan passwordnya tidak sesuai dengan cookie, yang artinya pengunjung sedang tidak login. script ini yang akan muncul
?>

<p class=”nocomments”>Post ini di kunci. masukan password untuk membaca post ini</p>

<?php
return;
}
}

/* variabel ini untuk membuat alternatif background comment*/
$oddcomment = ‘class=”alt” ‘;
?>

<!– Kerangka Comment dimulai dari sini –>

<?php if ($comments) : ?>
<h3 id=”comments”><?php comments_number(’Tidak ada komentar’, ‘Satu Komentar’, ‘% Komentar’ );?> to &#8220;<?php the_title(); ?>&#8221;</h3>

<ol class=”commentlist”>

<?php foreach ($comments as $comment) : ?>

<li <?php echo $oddcomment; ?>id=”comment-<?php comment_ID() ?>”>
<?php echo get_avatar( $comment, 32 ); ?>
<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == ‘0′) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br />

<small class=”commentmetadata”><a href=”#comment-<?php comment_ID() ?>” title=”"><?php comment_date(’F jS, Y’) ?> at <?php comment_time() ?></a> <?php edit_comment_link(’edit’,'&nbsp;&nbsp;’,”); ?></small>

<?php comment_text() ?>

</li>

<?php
/* Membuat setiap komentar memiliki class yang berbeda */
$oddcomment = ( empty( $oddcomment ) ) ? ‘class=”alt” ‘ : ”;
?>

<?php endforeach; /* Akhir dari setiap komentar */ ?>

</ol>

<?php else : // Jika setting komentar enable namun tidak ada komentar, maka script dibawah ini dieksekusi ?>

<?php if (’open’ == $post->comment_status) : ?>
<!– Jika sistem komentar enable, namun belum ada komentar yang masuk. –>

<?php else : // komentar di disable ?>
<!– Jika sistem komentar di disable, script ini yang muncul –>
<p class=”nocomments”>Tidak Menerima Komentar.</p>

<?php endif; ?>
<?php endif; ?>

<?php if (’open’ == $post->comment_status) : ?>
<h3 id=”respond”>Berikan Komentar Anda</h3>

<!– Jika setting komentar membutuhkan pengunjung login terlebih dahulu untuk memberikan komentar, script ini dieksekusi–>
<?php if ( get_option(’comment_registration’) && !$user_ID ) : ?>
<p>You must be <a href=”<?php echo get_option(’siteurl’); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>”>logged in</a> to post a comment.</p>

<!– Jika setting komentar terbuka, script ini dieksekusi –>
<?php else : ?>
<form action=”<?php echo get_option(’siteurl’); ?>/wp-comments-post.php” method=”post” id=”commentform”>

<!– Jika pengakses halaman sedang login, script ini yang dieksekusi–>
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href=”<?php echo get_option(’siteurl’); ?>/wp-admin/profile.php”><?php echo $user_identity; ?></a>. <a href=”<?php echo get_option(’siteurl’); ?>/wp-login.php?action=logout” title=”Log out of this account”>Log out &raquo;</a></p>

<!– Jika pengakses alaman tidak sedang login, form ini yang muncul–>
<?php else : ?>
<p><input type=”text” name=”author” id=”author” value=”<?php echo $comment_author; ?>” size=”22″ tabindex=”1″ <?php if ($req) echo “aria-required=’true’”; ?> />
<label for=”author”><small>Nama <?php if ($req) echo “(required)”; ?></small></label></p>

<p><input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?>” size=”22″ tabindex=”2″ <?php if ($req) echo “aria-required=’true’”; ?> />
<label for=”email”><small>E-Mail (tidak akan dipublikasikan) <?php if ($req) echo “(required)”; ?></small></label></p>

<p><input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?>” size=”22″ tabindex=”3″ />
<label for=”url”><small>Website</small></label></p>

<?php endif; ?>

<!–<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>–>

<p><textarea name=”comment” id=”comment” cols=”100%” rows=”10″ tabindex=”4″></textarea></p>

<p><input name=”submit” type=”submit” id=”submit” tabindex=”5″ value=”Submit Comment” />
<input type=”hidden” name=”comment_post_ID” value=”<?php echo $id; ?>” />
</p>
<?php do_action(’comment_form’, $post->ID); ?>

</form>

<?php endif; // endif jika butuh komentar membutuhkan registrasi dan belum login ?>

<?php endif; // hapus baris ini dan semuanya akan menjadi mimpi buruk?>

Wow. cukup panjang buka? kami tidak akan menjelaskan perintah2 yang terdapat pada comments.php karena itu akan membuat post ini menjadi terlalu panjang. Namun ketika anda sudah men-savenya di notepad ++ nanti, anda akan dapat melihat penjelasan dari tag, yang kami buat di file comments.php ( berwarna hijau )

Membuat single.php

single.php adalah file yang mendefinisikan apa saja yang akan di tampilkan pada halaman post ( halaman post adalah halaman yang menampilkan post dan komentarnya ). ketika anda mengakses halaman post, file ini yang digunakan sbagai kerangka halaman tersebut. Langsung saja langkahnya :

1. buat file baru di notepad ++
2. copypaste semua konten index.php ke file baru tersebut, lalu save dengan nama single.php
3. hapus tag <?php comments_popup_link(’No Comments’, ‘1 Comment’, ‘% Comments’); ?>. mengapa dihapus? karena pada post, metadata tentang jumlah komentar tidak akan ditampilkan
4. ganti tag<div class=”navigation”><?php posts_nav_link(); ?></div> dengan <div class=”navigation”><?php previous_post_link(’&laquo; %link’) ?><br /><?php next_post_link(’ %link &raquo;’) ?></div>
5. setelah tag yang tadi kita save, ketik / copypaste tag ini : <div id=”commentall”><?php comments_template(); ?></div> TEPAT SETELAH TAG YANG BARU KITA GANTI TADI lalu save.

single.php beres

Penjelasan :

• Tag pada poin ke 3 merupakan perintah untuk menampilkan jumlah komentar
• Tag pada poin ke 4 merupakan link ke post selanjutnya dan post sebelumnya, dengan link berupa judul post
• tag pada poin ke 5 merupakan perintah untuk me load comments.php pada halaman yang ada

Membuat page.php

page.php adalah file yang mendefinisikan apa saja yang akan ditampilkan pada halaman statis ( page ) wordpress. contoh : halaman about me. Ok, langsung saja langkah pembuatannya :

1. buat file baru di notepad ++ ( ctr + n )
2. copypaste semua konten single.php ke file baru tersebut, lalu save dengan nama page.php
3. hapus tag <?php _e(’Category :’); ?> <?php the_category(’, ‘) ?> <?php _e(’| ‘);?> <?php the_tags(); ?> <?php _e(’| ‘);?>. Mengapa dihapus? karena halaman statis wordpress tidak memiliki category dan tags
4. ganti <?php previous_post_link(’&laquo; %link’) ?><br /><?php next_post_link(’ %link &raquo;’) ?> dengan <?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
5. Save. page.php beres.

Penjelasan :

• tag <?php the_category(’,’ )?> merupakan tag untuk memanggil category dari post
• tag <?php the_tags();?> merupakan tag untuk memanggil tags dari post
• tag pada poin ke 4 merupakan tag untuk memanggil link jika halamana post di “break this post”

Membuat archive.php

archive.php adalah file yang mendefinisikan apa saja yang akan ditampilkan pada bagian archive, tag, dan category. Lankah cukup sederhana :

1. buat file baru di notepad ++ ( Ctr + N )
2. copypaste semua konten index.php, ingat y, index.php, ke file baru tersebut. Lalu save dengan nama archive.php
3. ganti tag <?php the_content(); ?> dengan <?php the_excerpt(); ?>
4. Save. archive.php beres

Penjelasan :

• tag pada poin ke 3 merupakan tag untuk memanggil excerpt / ringkasan dari post yang dimaksud

Membuat search.php

search.php adalah file yang mendefinisikan apa – apa yang tampil pada halaman “hasil pencarian”. Well, yang satu ini cukup mudah :

1. buat file baru di notepad ++ ( Ctr + N )
2. Copypaste semua konten archive.php, lalu save dengan nama search.php
3. ketik / copypaste tag <h2>Hasil Pencarian Untuk “<span><?php echo $s; ?></span>”</h2> tepat setelah tag <?php if(have_posts()):?>
4. Ganti tag ini : <?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>”); ?> dengan <?php _e(”Tidak ada halaman yang sesuai untuk kata kunci”); ?> “<?php echo $s; ?>”

search.php beres

Penjelasan :

tag pada poin ke 3, <?php echo $s; ?> merupakan tag untuk memanggil keyword yang digunakan untuk pencarian

tag pada poin ke 4 merupakan tag untuk memanggil kalimat yang disetting untuk keluar jika pencarian tidak menghasilkan apa – apa

Membuat screenshot latihantheme

Agar sebuah theme memiliki preview ketika di lihat dari dashboard admin wordpress, Sebuah theme perlu memiliki sebuah file image bernama snapshot dengan ukuran 300 X 250 piksel. jenis file bisa .png, jpg, atau gif. Kami mengcapture tampilan latihantheme menggunakan add ons firefox bernama screengrab, lalu meresizenya menggunakan microsoft office picture manager, lalu di letakan di direktori latihantheme. Yup, Sesederhana itu.

***

Wohooo!!! akhirnya selesai sudah Seri Tutorial Cara Membuat Theme Wordpress Sendiri ini. Satu pekan yang panjang eh?

Beberapa dari anda mungkin merasa bahwa panduan yang disajikan oleh seri tutorial ini tidak lengkap. Well, dengan senang hati saya mengatkana bahwa ya, memang benar seri tutorial ini sengaja hanya menampilkan dasarnya saja. Mengapa? karena kebutuhan tiap orang akan theme wordpress berbeda. Maka dari itu, seri ini hanya menampilkan dasarnya saja.

Lalu, jika saya  ingin menampilkan sesuatu pada theme saya dan saya belum tahu caranya serta tidak dibahas pada tutorial ini bagaimana dong?

Pertanyaan bagus. Cara yang saya gunakan untuk mengatasi ini : cari theme yang secara struktur menampilkan apa yang kita butuhkan, lalu download theme tersebut. Setelah di download, “bedah” theme tersebut, dan cari tahu tag / script apa yang digunakan theme tersebut untuk menampilkan konten2 tertentu.

atau, mungkin kami bisa membantu? silahkan kontak melalui contact form saja.

Anyway, hasil dari tutorial membuat theme ini, anda bisa download latihantheme disini :

LatihanTheme (43.01 KB)

P.S. : Kalau menemukan bug, tolong di laporkan ke bloggingly y! thanks

Ok, Tutorial cara membuat theme wordpress sendiri SELESAI sampai disini.

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