Tutorial Cara Membuat Theme WordPress Sendiri ( Langkah #7 : Melengkapi File

Theme )

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 :

001<?php // Jangan menghapus baris ini!

002^if^{(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php'}⁼⁼ basename($_SERVER['SCRIPT_FILENAME']))

003die('Please do not load this page directly. Thanks!');

004

005if(!empty($post->post_password)) { // jika ada password 006

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

007?> 008

009^{<p class="nocomments">Post ini di kunci. masukan password untuk membaca} post ini</p> 010 011<?php 012return; 013} 014} 015

016/* variabel ini untuk membuat alternatif background comment*/

017$oddcomment= 'class="alt" '; 018?>

019

020 021

022<?php if($comments) : ?>

023^{<h3 id="comments"><?php comments_number('Tidak ada komentar', 'Satu} Komentar', '% Komentar');?> to “<?php the_title(); ?>”</h3> 024

025<ol class="commentlist"> 026

027<?php foreach($commentsas$comment) : ?> 028

029<li <?php echo$oddcomment; ?>id="comment-<?php comment_ID() ?>"> 030<?php echoget_avatar( $comment, 32 ); ?>

031<cite><?php comment_author_link() ?></cite> Says: 032<?php if($comment->comment_approved == '0') : ?> 033<em>Your comment is awaiting moderation.</em> 034<?php endif; ?>

035<br /> 036

title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit','  ',''); ?></small> 038 039<?php comment_text() ?> 040 041</li> 042 043<?php

044/* Membuat setiap komentar memiliki class yang berbeda */

045$oddcomment= ( empty( $oddcomment) ) ? 'class="alt" ': ''; 046?>

047

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

050</ol> 051

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

053

054<?php if('open'== $post->comment_status) : ?>

055 056

057<?php else: // komentar di disable ?>

058 059<p class="nocomments">Tidak Menerima Komentar.</p>

060

061<?php endif; ?> 062<?php endif; ?> 063

064<?php if('open'== $post->comment_status) : ?> 065<h3 id="respond">Berikan Komentar Anda</h3> 066

067^{

068<?php if( get_option('comment_registration') && !$user_ID) : ?> 069

<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>

070

071 072<?php else: ?>

method="post"id="commentform"> 074

075 076<?php if( $user_ID) : ?>

077

<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 »</a></p>

078

079 080<?php else: ?>

081

<p><input type="text"name="author"id="author"value="<?php echo $comment_author; ?>"size="22"tabindex="1"<?php if($req) echo "aria-required='true'"; ?> />

082^{<label for="author"><small>Nama <?php if}^{($req) echo}^{"(required)";} ?></small></label></p>

083

084

<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'"; ?> />

085^{<label for="email"><small>E-Mail (tidak akan dipublikasikan) <?php if} ($req) echo"(required)"; ?></small></label></p>

086

087^{<p><input type="text"}^name="url"^id="url"^{value="<?php echo} $comment_author_url; ?>"size="22"tabindex="3"/>

088<label for="url"><small>Website</small></label></p> 089

090<?php endif; ?> 091

092^{

093

094^{<p><textarea name="comment"}^id="comment"^cols="100%"^rows="10" tabindex="4"></textarea></p>

095

096^{<p><input name="submit"}^{type="submit"}^id="submit"^tabindex="5"^{value="Submit} Comment"/>

097<input type="hidden"name="comment_post_ID"value="<?php echo $id; ?>"/> 098</p>

099<?php do_action('comment_form', $post->ID); ?> 100

101</form> 102

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

Wow. cukup panjang bukan? 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(‘« %link’) ?><br /><?php next_post_link(‘ %link »’) ?></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 :

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(‘« %link’) ?><br /><?php next_post_link(‘

%link »’) ?> 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

Dalam dokumen Tutorial Cara Membuat Theme WordPress Sendiri - Full Tutorial (Halaman 42-50)