thinkrooms » theme http://www.thinkrooms.com Web Developer, Web Designer, Internet Solution, Network and System Integration Sun, 08 Nov 2009 04:43:38 +0000 en hourly 1 http://wordpress.org/?v=3.0 Tutorial Dasar Perancangan Theme WordPress http://www.thinkrooms.com/2008/03/27/tutorial-dasar-perancangan-theme-wordpress/ http://www.thinkrooms.com/2008/03/27/tutorial-dasar-perancangan-theme-wordpress/#comments Thu, 27 Mar 2008 02:19:31 +0000 tyohan http://thinkrooms.com/2008/03/27/tutorial-dasar-perancangan-theme-wordpress/ WordPress adalah blog engine terpopuler saat ini. Hal ini karena WordPress bersifat open dan mudah untuk dikostumasi dan ditambahkan fitur dengan bermacam template dan plugin yang tersedia secara gratis. Namun tentu ada ingin memiliki tampilan blog yang unik dan beda dengan yang lain. Untuk permulaan anda tentu dapat menggunakan theme yang telah tersedia. Atau juga bisa menggunakan template default yaitu Kubrick. Namun untuk anda yang ingin merancang sendiri tampilan blog WordPress anda inilah caranya. Merancang theme WordPress memerlukan keahlian HTML, CSS, dan dasar PHP. Saya tidak mengajarkan hal tersebut disini.  Jadi kalau anda telah memiliki keahlian tersebut silakan melanjutkan tutorial ini. Template yang kita rancang akan menggunakan engine WordPress 2.3 yang merupakan versi mayor terbaru saat tutorial ini dibuat yang telah mendukung widget secara default. Kebanyakan template mendukung 1 sidebar saja, namun tutorial ini sidebar yang saya gunakan ada 2 yaitu sidebar pada halaman depan atau hompage dan sidebar pada halaman posting. Tujuannya agar kita bisa memberikan link yang sesuai dengan posting agar pengunjung tertarik mengunjungi posting lainnya.

Konsep dari theme WordPress adalah menggunakan template tag. Halaman theme akan digunakan sesuai dengan halaman yang diload. Contohnya pada saat konten posting kita ditampilkan maka yang dipanggil adalah file single.php. Bila yang ditampilkan adalah page maka yang dipanggil adalah page.php. Demikian juga dengan pemanggilan archive, category, dan halaman lainnya.

Agar lebih dapat dimengerti silakan ikut langkah tutorial berikut. Berikut adalah langkah-langkah perancangan dasar theme WordPress:

  1. Langkah pertama siapkan template HTML & CSS yang sudah siap pakai. Template ini berupa template lengkap yang merupakan halaman web statis yang akan kita ubah menjadi themes WordPress. Anda sebaiknya merancang template HTML CSS terlebih dahulu sebelum mengubahnya menjadi themes WordPress. Template ini nanti akan kita pilah-pilah menjadi bagian-bagian dari theme WordPress. Berikut adalah kode HTML dari template basic kita: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
       <div id="header">
       <ul id="pagelist">
       <li>home</li>
        <li>about</li>
        <li>contact</li>
    </ul>
        <h1>Title Blog</h1>
        <h3>Blog Description</h3>
    </div>
    <div id="content">
       <div id="content-right">
        <h2>Category</h2>
            <ul>
                <li>internet</li>
                <li>flash</li>
                <li>web</li>
                <li>php</li>
            </ul>
         <h2>Archive</h2>
            <ul>
                <li>03/2008</li>
                <li>02/2008</li>
                <li>01/2008</li>
            </ul>
        </div>
        <div id="content-left">
              <h2>Posting title</h2>
            <div>posting content here. posting content here. posting content here. posting content here. posting content here. posting content here. posting content here. posting content here.
            </div>
            <h2>Posting title</h2>
            <div>posting content here. posting content here. posting content here. posting content here. posting content here. posting content here. posting content here. posting content here.
            </div>
            <h2>Posting title</h2>
            <div>posting content here. posting content here. posting content here. posting content here. posting content here. posting content here. posting content here. posting content here.
            </div>
        </div>
    </div>
    <div id="footer">
       <p>Basic Template Footer </p>
    </div>
</div>
</body>
</html>

    Dan file style.css yang merupakan file style dari template kita:

    @charset "utf-8";
body{
       font-family:Arial, Helvetica, sans-serif;
       }
#container {
       width: 955px;
       margin:0 auto;
}
#header{
       height:100px;
       border-bottom:1px dotted #666666;
       }
#searchform{
       float:right;
}
#pagelist{
       margin-top:20px;
       float:right;
       text-align:right;
       list-style:none;
       clear:right;
       text-transform:lowercase;
}
#pagelist li{
       float:left;
       text-align:right;
       margin-left:20px;
}
#content{
       margin-top:20px;
}
#content-left{
       width:582px;
       }
#content-right{
       background-color:#CCCCCC;
       float:right;
       width:360px;
       }
#content-right h2{
       margin-left:10px;
       }
#footer{
       margin-top:20px;
       clear:both;
       text-align:center;
       border-top:1px dotted #666666;
}
  2. Selanjutnya kita akan membagi atau memotong kode HTML penyusun template diatas. Kode HTML kita bagi menjadi 4 bagian menjadi 4 file PHP yaitu:
    • Header.php, file yang akan menyimpan bagian header theme WordPress. Yang perlu dipertimbangkan pada bagian ini adalah header akan selalu di load atau ditampilkan pada tiap halaman WordPress kita. Jadi potong bagian penting yang harus diload tiap kita akan membuka semua halaman blog. Contohnya adalah bagian tag <head> pada file HTML dan sedikit bagian pad tag <body> pada contoh template basic diatas bagian yang dimasukkan adalah pada bagian header. Jadi untuk pemotongan awal inilah isi dari file header.php: 
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
       <div id="header">
        <h1>Title Blog</h1>
        <h3>Blog Description</h3>
    </div>
    • Index.php, yaitu file utama yang akan diload pada saat pertama kali blog kita dibuka. File ini merupakan halaman depan dari blog WordPress kita karena itu tempatkan bagian body dari HTML template basic kita yang merupakan bagian konten utama dari template kita. Pada contoh template basic yang merupakan konten utama adalah pada bagian konten posting di blok content-left. Dengan demikian isi dari file index.php adalah sebagai berikut: 
      <div id="content-left">
              <h2>Posting title</h2>
            <div>posting content here. posting content here. posting content here. posting content here. posting content here. posting content here. posting content here. posting content here.
            </div>
            <h2>Posting title</h2>
            <div>posting content here. posting content here. posting content here. posting content here. posting content here. posting content here. posting content here. posting content here.
            </div>
            <h2>Posting title</h2>
            <div>posting content here. posting content here. posting content here. posting content here. posting content here. posting content here. posting content here. posting content here.
            </div>
        </div>
    </div>
    • Sidebar.php, yaitu bagian sub content dari blog kita. Pada sidebar kita menempatkan beberapa informasi singkat dari blog kita seperti kategori, arsip, daftar link, dan sebagainya. Pada template basic yang dimaksud sidebar adalah pada blok content-right. Karena itu isi dari file sidebar.php adalah: 
          <div id="content">
           <div id="content-right">
            <h2>Category</h2>
                <ul>
                    <li>internet</li>
                    <li>flash</li>
                    <li>web</li>
                    <li>php</li>
                </ul>
             <h2>Archive</h2>
                <ul>
                    <li>03/2008</li>
                    <li>02/2008</li>
                    <li>01/2008</li>
                </ul>
            </div>
    • Footer.php, hampir sama dengan bagian header yaitu bagian penutup blog yang akan selalu diload setiap blog kita diakses. Dengan demikian pada bagian template basic kita yang dimaksud adalah blok footer. Kita bisa menempatkan kode javascript pada bagian ini. Isi dari footer.php akan menjadi sebagai berikut: 
          <div id="footer">
           <p>Basic Template Footer </p>
        </div>
    </div>
    </body>
    </html>
  3. Setelah selesai membagi template basic kita menjadi sub-sub template maka selanjutnya kita akan mengubah kode-kode HTML biasa dengan menambahkan beberapa kode PHP yang merupakan template tag dari WordPress. Template tag ini berfungsi untuk meload isi sebenarnya blog kita dari engine blog WordPress. Dengan demikian template tag akan menampilkan isi-isi dari blog. Berikut adalah perubahan pada file themes basic WordPress yang telah kita potong-potong sebelumnya:
    • Header.php, pada file ini kita menempatkan template tag yang akan meload beberapa komponen blog seperti blog-title, blog-description, page-menu, dan lain-lain. File ini bisa dipanggil dengan template tag <?php get_header(); ?>.  Berikut isi file header.php yang kita ubah: 
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="container">
       <div id="header">
        <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
        <h3><?php bloginfo('description'); ?></h3>
        <div id="searchform">
              <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
            <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
            <input type="submit" id="searchsubmit" value="Search" />
            </form>
         </div>
<ul id="pagelist"><li><a href="<?php bloginfo('url'); ?>">home</a></li><?php wp_list_pages('depth=1&title_li='); ?></ul>
    </div>
    • Index.php, pada file ini kita akan meload daftar posting yang kita miliki. Berikut isi dari perubahan pada file index.php: 
      <?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="content-left">
        <?php if (have_posts()) : ?>

              <?php while (have_posts()) : the_post(); ?>

                     <div id="post-<?php the_ID(); ?>">
                            <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                            <small><?php the_time('F jS, Y') ?>  by <?php the_author() ?> </small>

                            <div>
                                  <?php the_content('Read the rest of this entry »'); ?>
                            </div>

                            <p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
                     </div>

              <?php endwhile; ?>

              <div class="navigation">
                     <div class="nav-left"><?php next_posts_link('« Older Entries') ?></div>
                     <div class="nav-right"><?php previous_posts_link('Newer Entries »') ?></div>
              </div>

       <?php else : ?>

              <h2>Not Found</h2>
              <p>Sorry, but you are looking for something that isn't here.</p>
              <?php include (TEMPLATEPATH . "/searchform.php"); ?>

       <?php endif; ?>
        </div>
    </div>
    </div>
<?php get_footer(); ?>
    • Sidebar.php, pada file ini kita akan meload beberapa widget yang telah kita set pada wordpress administrator. Sidebar yang diload ada 2 macam. Bila sidebar dipanggil oleh hompage atau page biasa maka yang diload adalah sidebar 1, sedangkan bila sidebar dipanggil oleh single post atau halaman yang menampilkan isi posting maka yang dipanggil adalah sidebar 2. File ini dipanggil dengan template tag <?php get_sidebar(); ?> Berikut adalah isi perubahan pada file sidebar.php: 
      <div id="content">
    <div id="content-right">
        <?php if ( function_exists('dynamic_sidebar')): ?>
              <?php if (is_single()): dynamic_sidebar(2) ?>
        <?php else : dynamic_sidebar(1) ?>
        <?php endif; ?>  
       <?php endif; ?>          
</div>
    • Footer.php, pada file ini tidak terlalu banyak fungsi yang penting. Hanya sedikit informasi mengenai blog ini. File ini dipanggil dengan template tag <?php get_footer(); ?>. Berikut adalah isi dari footer.php: 
      <div id="footer">
       <p>
              <?php bloginfo('name'); ?> is proudly powered by
              <a href="http://wordpress.org/">WordPress</a>
              <br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
              and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
              <!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
       </p>
    </div>
</div>
<?php wp_footer(); ?>
</body>
</html>
  4. Setelah mengubah file template basic kita menjadi file theme  WordPress maka kita perlu menambahkan beberapa file theme lagi untuk melengkapi theme kita agar dapat bekerja secara penuh. Berikut ada file-file yang perlu kita buat:
    • Single.php, merupakan file theme turuan dari index.php. Strukturnya hampir sama namun yang membedakan adalah isi yang diload. Anda bisa mengkopi file index.php dan menyimpannya dengan filename single.php dan mengubahnya sedikit.  Pada bagian isi posting dan postmetadata Berikut adalah isi dari file single.php: 
      <?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="content-left">
              <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                     <div id="post-<?php the_ID(); ?>">
            <h2><?php the_title(); ?></h2>
            <small><?php the_time('F jS, Y') ?>  by <?php the_author() ?> </small>
            <div>
                <?php the_content('<p class="serif">Read the rest of this entry »</p>'); ?>
            <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
            <?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>
            </div>
            <p class="postmetadata alt">
            <small>
            This entry was posted on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>
            and is filed under <?php the_category(', ') ?>.
            You can follow any responses to this entry through the <?php comments_rss_link('RSS 2.0'); ?> feed.
            <?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
                // Both Comments and Pings are open ?>
                You can <a href="#respond">leave a response</a>, or <a href="<?php trackback_url(); ?>" rel="trackback">trackback</a> from your own site.
            <?php } elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
                // Only Pings are Open ?>
                Responses are currently closed, but you can <a href="<?php trackback_url(); ?> " rel="trackback">trackback</a> from your own site.
            <?php } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
                // Comments are open, Pings are not ?>
                You can skip to the end and leave a response. Pinging is currently not allowed.

            <?php } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
                // Neither Comments, nor Pings are open ?>
                Both comments and pings are currently closed.
            <?php } edit_post_link('Edit this entry.','',''); ?>
            </small>
            </p>
                     </div>
       <div class="navigation">
        <div class="nav-left"><?php next_posts_link('« Older Entries') ?></div>
        <div class="nav-right"><?php previous_posts_link('Newer Entries »') ?></div>
       </div>
       <?php comments_template(); ?>
       <?php endwhile; else: ?>
              <p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
        </div>
    </div>
<?php get_footer(); ?>
    • Selain single.php yang memiliki struktur mirip dengan index.php ada juga file yang mirip yaitu page.php. File ini digunakan untuk menampilkan halaman yang dibuat. Contohnya halaman about dan contact. Berikut contoh page.php: 
      <?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="content-left">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
       <div id="post-<?php the_ID(); ?>">
              <h2><?php the_title(); ?></h2>
              <div>
              <?php the_content('<p class="serif">Read the rest of this entry »</p>'); ?>
              <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
              </div>
       </div>
<?php endwhile; else: ?>
    <p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
    </div>
</div>
<?php get_footer(); ?>
    • Untuk menampilkan daftar komentar pada suatu post maka diperlukan file comments.php. File ini dapat dipanggil dengan template tag  <?php comments_template(); ?> 
      <?php // Do not delete these lines
       if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
              die ('Please do not load this page directly. Thanks!');
       if (!empty($post->post_password)) { // if there's a password
              if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {  // and it doesn't match the cookie
                     ?>
                     <p class="nocomments">This post is password protected. Enter the password to view comments.</p>
                     <?php
                     return;
              }
       }
       /* This variable is for alternating comment background */
       $oddcomment = 'class="alt" ';
?>
<?php if ($comments) : ?>
       <h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
       <ol>
       <?php foreach ($comments as $comment) : ?>
              <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
                     <?php comment_author_link() ?> says:
                     <?php if ($comment->comment_approved == '0') : ?>
                     <em>Your comment is awaiting moderation.</em>
                     <?php endif; ?>
                     <br />
                     <small><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('j F Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit','  ',''); ?></small>
                     <?php comment_text() ?>
              </li>
       <?php  $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : ''; ?>
       <?php endforeach; /* end for each comment */ ?>
       </ol>
 <?php else : // this is displayed if there are no comments so far ?>
       <?php if ('open' == $post->comment_status) : ?>
              <!-- If comments are open, but there are no comments. -->
        <?php else : // comments are closed ?>
              <!-- If comments are closed. -->
              <p>Comments are closed.</p>
       <?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<h3 id="respond">Leave a Reply</h3>
<?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>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?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">Logout »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Name <?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" />
<label for="email"><small>Mail (will not be published) <?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><textarea name="comment" id="comment" cols="50%" 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;?>
<?php endif;?>
    • Berikutnya adalah file functions.php yang merupakan file untuk menyimpan fungsi-fungsi yang berkaitan dengan theme buatan kita. Pada file ini kita mendeklarasikan widget yang kita inginkan. Pada file ini juga dapat memberi fungsi tambahan untuk administrasi theme dari WordPress administrator: 
      <?php
if ( function_exists('register_sidebar') ){
    register_sidebars(2,array('before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => "</div>",
'before_title' => '<h2>',
'after_title' => "</h2>"));
       }
?>
  5. Selesailah theme WordPress kita. Sebenarnya masih ada file file lain yang dibutuhkan untuk menampilkan secara keseluruhan fungsi blog WordPress. Akan tetapi file tersebut tidak bersifat harus ada. Bila file tersebut tidak ada blog kita masih dapat menampilkan konten dengan baik. File-file itu dapat tergantikan oleh file default atau oleh file lainnya. Contohnya adalah archive.php,search.php,category.php, dll. Bila ingin tampilan theme anda dapat lebih spesifik maka anda dapat melengkapi file-file tersebut. Anda tinggal meng-copy semua file tersebut ke dalam 1 folder dan memasukkannya ke folder theme WordPress. Selanjutnya anda dapat mengaktifkan theme buatan anda dari menu Presentation pada WordPress Administrator.

Bila ingin menggunakan theme WordPress yang lebih lengkap maka theme default WordPress 2.3 adalah permulaan yang bagus. Kelengkapan fungsi dan file theme dapat dijadikan referensi untuk pengembangan theme anda sendiri.  Contoh theme wordpress yang kita gunakan diatas merupakan theme yang sangat dasar. Anda dapat memperbaiki theme tersebut dengan memodifikasi theme dan CSS dari theme tersebut. Anda juga dapat menambahkan beberapa gambar agar lebih menarik. Selamat berkreasi.

Referensi

]]> http://www.thinkrooms.com/2008/03/27/tutorial-dasar-perancangan-theme-wordpress/feed/ 9