Konversi Desain dari Photoshop ke Theme WordPress

Tutorial ini adalah kelanjutan dari 2 tutorial sebelumnya di situs Desain Digital, yaitu Mendesain Blog Elegan dengan Photoshop dan dilanjutkan dengan memotong PSD atau slicing. Di tutorial ini kita akan mengubah hasil desain menjadi theme WordPress. Kita akan berkenalan dengan HTML5 dan beberapa efek CSS3 seperti box shadow, text shadow, dan rounded corner.

Preview

Di bawah adalah hasil akhir tutorial. Sedikit berbeda dengan mockup PSD awal karena ada penambahan widget di bagian footer. Klik gambar untuk melihat live demo-nya.

Mendesain Blog Elegan Bag. 3 - Konversi ke Theme WordPress

Resource dan alat yang dibutuhkan

  • File hasil tutorial slicing minggu lalu, bisa diunduh di sini.
  • Editor teks seperti Notepad++ (Windows) atau Gedit (Linux).
  • WordPress Codex, sebagai sumber referensi segala sesuatu tentang WordPress.
  • Tutorial dan pengenalan dasar-dasar pembuatan theme WordPress dari WP Designer.
  • XAMPP untuk membuat lokal server dan menjalankan WordPress di PC. Tutorial XAMP bisa dilihat di sini.
  • WP Theme Test Data, sebuah dummy post resmi dari WordPress, digunakan untuk mengetes theme. Masukkan Test Data melalui dashboard WP –> Tools –> Import dan pilih Import from WordPress.
  • Firefox/Safari/Chrome + Firebug (opsional) untuk melakukan live preview dan mengecek elemen HTML/CSS. Pengguna Opera bisa menggunakan widget Opera Dragonfly.

Memahami Struktur Theme WordPress

Sebuah theme WordPress terdiri dari beberapa file PHP yang terpisah. Tetapi sebuah theme WordPress paling tidak harus mempunyai 2 buah file yaitu index.php dan style.css. Index.php digunakan untuk menampilkan halaman sebuah blog WordPress, sedangkan style.css untuk mengatur tampilannya.

Berikut daftar file yang akan kita buat dalam tutorial ini:

  1. style.css sebagai pengatur tampilan blog.
  2. header.php untuk menampilkan header blog memasukkan informasi dasar halaman blog (doctype, charset, judul blog, memanggil eksternal file CSS, dan tag-tag PHP dasar WordPress).
  3. index.php untuk menampilkan halaman muka blog (dalam index.php kita panggil header.php, sidebar.php dan footer.php sehingga menjadi sebuah halaman lengkap).
  4. sidebar.php untuk menampilkan sidebar blog.
  5. footer.php untuk menampilkan footer blog.
  6. single.php menampilkan halaman posting blog.
  7. comments.php untuk menampilkan komentar dan form komentar di sebuah posting atau halaman.
  8. page.php menampilkan halaman blog seperti halaman kontak, keterangan penulis dll.
  9. functions.php untuk membuat berbagai fungsi PHP WordPress.
  10. reset.css mengatur tag-tag HTML standar yang belum diatur oleh style.css. Bisa diunduh di sini.
  11. screenshots.png menampilkan preview dari theme.

Persiapan

Buat folder di directory theme WordPress dan beri nama Elegant-Design. Kumpulkan gambar hasil slicing ke dalam folder bernama images dan masukkan ke folder Elegant-Design. Buatlah terlebih dahulu informasi desain kita dalam style.css

/*
Theme Name: Elegant Design
Theme URI: http://cekerholic.com
Description: Elegant Design for Wordpress Blog
Version: 1.0
Author: Mohammad Jeprie & Aris FM
Author URI: http://www.desaindigital.com
*/

Buat juga pengaturan beberapa tag HTML dasar yang sering dipakai dalam halaman web seperti paragraf, daftar (list), emphasis (huruf bercetak miring), bold (huruf tebal), gambar, tautan, dan lain-lainnya. WordPress juga memiliki kode CSS standar yang akan kita masukkan ke style.css

/* ------------------------------
Basic Styles
----------------------------- */
body {
   background:#fff url(images/bg.png);
   color:#444;
   font:13.5px/1.5 Helvetica,Arial,sans-serif;
   margin:;
   min-width:1024px;
   padding:;
   text-align:left;
}
 
   /* Link */
   a {
       color:#1A9CD8;
       outline:;
       text-decoration:none;
   }
   a:active,a:hover,a:focus{
       text-decoration:underline;
   }
 
   /* Heading */
   h1{font-size:30px;}
   h2{font-size:24px;}
   h3{font-size:16px;}
   h4{font-size:14px;}
   h5{font-size:13px;}
   h6{font-size:12px;}
   h7{font-size:11px;}
 
   /* Basic HTML Tags */
   * {
       margin:;
       padding:;
   }
   img{border:}
   strong, b {font-weight: bold;}
   em, i {font-style: italic;}
   p {
   margin:  15px;
   padding:;
   }
   small {font-size:85%}
   ins{background:#adadad}
   dl {margin:   15px ;}
   dt {font-weight: bold;}
   sup {
       font-size:smaller;
       line-height:normal;
       vertical-align:super;
   }
   sub {
       font-size:smaller;
       line-height:normal;
       vertical-align:sub;
   }
   dd {
       margin-bottom:15px;
       margin-left:
   }
   blockquote {
       background:url("images/block.png") no-repeat transparent;
       font-style:italic;
       margin:   10px;
       padding:   30px;
   }
   ul {
       list-style:outside disc;
       margin:   15px;
       padding:
   }
   ol {
       list-style:outside decimal;
       margin:    15px;
       padding:
   }
   ol ol{list-style:upper-alpha}
   ol ol ol{list-style:lower-roman}
 
   /* HTML5 Elements */
   article,aside,footer,header,nav,section{display:block}
 
/* ------------------------------
Common Class & Wordpress Default CSS
----------------------------- */
.hide {display:none}
.aligncenter, div.aligncenter {
   display:block;
   margin-left:auto;
   margin-right:auto;
}
.alignleft {
   float:left;
   margin-right:10px;
}
.alignright {
   float:right;
   margin-left:10px;
}
 
.wp-caption {
   background-color: #f3f3f3;
   border: 1px solid #ddd;
   -khtml-border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px; /* optional rounded corners for browsers that support it */
 
   margin: 10px;
   padding-top: 4px;
   text-align: center;
}
.wp-caption img {
   border:  none;
   margin: ;
   padding: ;
}
.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   margin: ;
   padding:  4px 5px;
}
.sticky {
   background:url("images/featured.png") no-repeat scroll left top transparent;
   display:block;
   float:right;
   height:71px;
   position:relative;
   right:-23px;
   top:-23px;
   width:71px;
}

Membuat header.php

File header.php berisi tentang informasi dasar blog (DOCTYPE, charset, judul, pengkodean karakter dll), memanggil eksternal CSS, page navigation menu, logo blog, widget sosial media, dan category navigation. Di header.php juga terdapat kode PHP WordPress yang berfungsi untuk mengaktifkan plugin yaitu wp_head(). Berikut kode lengkap header.php beserta penjelasannya:

<!DOCTYPE html><!-- DOCTYPE blog-->
<html lang="id"><!--Mendefinisikan bahasa yang digunakan blog-->
 
<head><!--Informasi dasar halaman -->
    <meta charset="utf-8" /><!-- pengkodean karakter-->
 
   <!-- Judul blog -->
    <title><?php if (is_home()) {
   	 echo bloginfo('name');}
   	 elseif (is_category()) {
   	 echo __('Category » ', 'blank'); wp_title(' | ', TRUE, 'right');
   	 echo bloginfo('name');}
   	 elseif (is_tag()) {
   	 echo __('Tag » ', 'blank'); wp_title(' | ', TRUE, 'right');
   	 echo bloginfo('name');}
   	 elseif (is_search()) {
   	 echo __('Search results » ', 'blank');echo the_search_query();echo ' | ';
   	 echo bloginfo('name');}
   	 elseif (is_404()) {
   	 echo '404 '; wp_title(' | ', TRUE, 'right');
   	 echo bloginfo('name');}
   	 else {
   	 echo wp_title(' | ', TRUE, 'right');
   	 echo bloginfo('name');}
   	 ?>
    </title>
 
    <!-- Memanggil CSS eksternal-->
    <link rel="stylesheet" href="<?php bloginfo('template_url');?>/style.css" type="text/css" media="screen"/>
 
    <!-- Memanggil Favicon Blog-->
    <link rel="shortcut icon" href="<?php bloginfo('url'); ?>/favicon.ico" />
 
    <!-- Memanggil umpan RSS blog-->
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS" href="<?php bloginfo('rss2_url');?>" />
 
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> <!-- Mengaktifkan komentar bersarang  -->
    <?php wp_head(); //kode PHP agar plugin bisa bekerja 
    ?>
</head>
 
<!-- Halaman yang terlihat di peramban dimulai dari kode di bawah ini-->
<body>
 
<!-- Page Navigation (dengan dropdown menu)-->
<nav>
    <ul>
   	 <li <?php if(is_home()) { ?> class="current_page_item"<?php } ?>>
   	 <a href="<?php bloginfo('home'); ?>">home</a></li>
   	 <?php wp_list_pages('sort_column=menu_order&short_order=DESC&title_li=&number=10'); 
//Memanggil daftar page dari blog
 ?>
    </ul>
</nav>
 
<div id="header-wrapper">
    <div class="bgheader-wrapper">
    <header>
   	 <h1>
   		 <a href="<?php bloginfo('url');?>"><?php bloginfo('name');?></a><!--Menampilkan judul dan link blog-->
   	 </h1>
  	 	<p class="hide"><?php bloginfo('description');?></p><!-- Menampilkan deskripsi blog-->
 
   	<!-- Menampilkan widget Social Media -->
   	 <section>
   		 <a class="sm subscriber" href=”<?php bloginfo(rss2_url); ?>”>Subscribe to RSS Feed</a>
   		 <a class="sm fans" href=”http://facebook.com”>Connect with me</a>
   		 <a class="sm follower" href="http://twitter.com/FM_Aris" ><?php print twitter_followers_counter('FM_Aris') ?> Followers</a><!--Ganti “FM_Aris” dengan nama Twitter anda
   	 </section>
 
   	 <!-- Membuat category navigation-->
   	 <ul id="nav">
   		 <?php wp_list_categories('title_li=&orderby=count&number=9'); 
//Menampilkan daftar kategori
?>
   	 </ul>
    </header>
    </div>
</div>
 
<div id="wrapper">

Sekarang mengatur tampilannya dengan CSS. Kita mulai dari navigation menu-nya dulu. Silakan masukkan kode ini di style.css

/* ------------------------------
Navigation Menu
----------------------------- */
nav {
   background:transparent url(images/nav_bg.png);
   font-size:11px;
   height:30px;
   margin:;
   min-width:1024px;
   padding:;
   text-transform:uppercase;
   width:100%;
}
nav a {
   color:#fff;
   display:block;
   margin-right:10px;
   text-decoration:none;
}
nav ul {
   line-height:30px;
   list-style:none;
   margin: auto;
   padding: 20px;
   width:960px;
}
nav li {
   float:left;
   list-style:none;
   margin-right:10px;
   position:relative;
}
nav li:hover ul {display:block;}
nav li:hover ul ul {display:none;}
nav ul ul {
   background:#111;
   border:1px solid #adadad;
   display:none;
   line-height:15px;
   margin:;
   padding:2px;
   position:absolute;
   width:130px;
}
nav ul ul li {
   float:none;
   margin:;
   padding:   5px;
}
nav li li:hover ul {display:block}
nav ul ul ul {
   left:130px;
   top:-3px;
}

Cobalah lakukan tes di peramban, seharusnya kita akan melihat tampilan seperti ini:

Mendesain Blog Elegan Bag. 3 - Konversi ke Theme WordPress

Berikutnya mengatur tampilan header. Kita akan bermain dengan efek CSS rollover image pada bagian logo blog.

/* ------------------------------
Header Area
----------------------------- */
#header-wrapper {
   background:#070707;
   display:block;
   height:167px;
   margin:;
   min-width:1024px;
   width:auto;
}
.bgheader-wrapper{
   background: url(images/head_bg.jpg)no-repeat left;
   display:block;
   height:167px;
   margin: auto;
   max-width:1160px;
}
#header-wrapper header{
   margin: auto;
   height:167px;
   padding: 20px;
   width:960px;
}
#header-wrapper h1 {
   float:left;
   margin:;
   padding:30px  47px;
}
#header-wrapper h1 a {
   background-image:url(images/logo.png);
   float:left;
   height:86px;
   margin:;
   text-indent:-9999px;
   width:334px;
}
h1 a:hover{background-position: 86px;} /* Membuat efek rollover ketika logo situs di hover */

Langkah berikutnya adalah mengatur widget sosial media.

/* Social Media */
   #header-wrapper section{
       float:right;
       padding:25px  ;
       width:220px;
   }
   .sm {
       color:#FFFFFF;
       float:left;
       height:32px;
       line-height:32px;
       margin-bottom:5px;
       padding-left:40px;
       width:100%;
   }
   .subscriber{background:url(images/rss.png)no-repeat}
   .fans{background:url(images/fb.png)no-repeat}
   .follower{background:url(images/tw.png)no-repeat}

Langkah berikutnya mengatur category navigation. Saatnya bermain-main dengan CSS3, kita akan membuat efek rounded corner dan box shadow.

/* Category Navigation */
   #nav {
       border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
 
       box-shadow:1px 1px 2px #444;
       -moz-box-shadow:1px 1px 2px #444;
       -webkit-box-shadow:1px 1px 2px #444;
 
       background:transparent url(images/cat_bg.png);
       float:left;
       font-size:13px;
       font-weight:700;
       height:30px;
       line-height:30px;
       list-style:none;
       margin:-10px  ;
       padding:;
       width:959px;
   }
   #nav a{
       color:#7f7f7f;
       display:block;
       text-decoration:none;
   }
   #nav li {
       background:transparent url(images/cat_border.png)no-repeat right;
       display:inline-block;
       list-style:none;
       padding: 5px;
       position:relative;
   }
   #nav li a {padding: 10px;}
   .submenu {background:url(images/arrow.png)no-repeat right 12px;}
   #nav li:hover ul {display:block;}
   #nav li:hover ul ul {display:none;}
   #nav ul {
       border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
 
       box-shadow: 1px 2px #444;
       -moz-box-shadow: 1px 2px #444;
       -webkit-box-shadow: 1px 2px #444;
 
       background:#efefef;
       display:none;
       margin:;
       padding:2px;
       position:absolute;
       width:150px;
   }
   #nav ul li {
       background:none;
       float:none;
       margin:;
       padding:   5px;
   }
   #nav ul li:hover {
       background:#dbdbdb;
   }
   #nav li li:hover ul {display:block}
   #nav ul ul {
       left:150px;
       top:-3px;
   }

Lakukan tes di peramban lagi, hasilnya akan tampak seperti di bawah.

Mendesain Blog Elegan Bag. 3 - Konversi ke Theme WordPress

Membuat index.php

Index.php berfungsi menampilkan halaman depan blog secara keseluruhan. Secara umum fungsi index.php adalah:

  1. Menampilkan header.php dengan perintah <?php get_header(); ?>.
  2. Menampilkan konten blog melalui the_loop().
  3. Menampilkan sidebar dengan perintah <?php get_sidebar(); ?>.
  4. Menampilkan footer dengan perintah <?php get_footer(); ?>.

Kali ini daftar posting akan kita tampilkan dalam bentuk excerpt atau ringkasan dengan thumbnail image. Berikut ini adalah isi dari index.php:

<?php get_header(); ?>
 
<div id="content">    
    <?php if (have_posts()) : while (have_posts()) : the_post(); //Awal Wordpress Loop 
    ?>
 
    <article>
    <span <?php post_class(); ?>></span>
   	 <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
   	 <?php the_post_thumbnail(); ?>
   	 <?php the_excerpt();?>
 
   	 <p class="metadata">
   		 <span class="author"><?php the_author_posts_link(); ?></span>
   		 <span class="tags"><?php the_tags(''); ?></span>
   		 <span class="date"><?php the_time('d M Y');?></span>
   	 </p>
   	 <p style="text-align:right"><a class="more" href="<?php the_permalink();?>">Read More</a></p>
    </article>
    <?php endwhile;endif; //Akhir Wordpress Loop ?>
    <p class="navigation"><span class="nav-next"><?php next_posts_link('« older posts') ?></span>
    <span class="nav-prev alignright"><?php previous_posts_link('newer posts »') ?></span></p>
 
</div>
 
<?php get_sidebar();?>
<?php get_footer();?>

Atur dulu tampilan daftar posting. Di sini kita akan berkenalan dengan efek CSS3, yaitu gradient background dan text shadow pada bagian navigasi halaman.

/* ------------------------------
Main Content
----------------------------- */
#wrapper{
   margin:50px auto 10px;
   overflow:hidden;
   padding: 20px;
   width:960px;
}
#content{
   float:left;
   width:710px;
   margin: 29px  ;
}
article,#comments .commentbody,#respond,.pingbacklist li,.trackbacklist li {
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
 
   box-shadow:1px 1px 2px #444;
   -moz-box-shadow:1px 1px 2px #444;
   -webkit-box-shadow:1px 1px 2px #444;
 
   background:#fff;
   margin:3px  20px;
   padding:20px;
}
article h2 {
   margin:  13px;
}
article img{
   height:auto;
   max-width:670px;
}
.wp-post-image {
   border:5px solid #adadad;
   float:left;
   height:140px;
   margin:5px 20px 20px ;
   width:140px;
}
 
   /* Post Metadata & More Link */
   .metadata{
       font:italic 12px/24px Georgia, Serif;
       margin:30px  ;
   }
   .metadata span{
       margin-right:20px;
       padding:5px  5px 35px;
   }
   .author{
       background:transparent url(images/author.png)no-repeat left;
   }
   .tags{
       background:transparent url(images/tag.png)no-repeat left;
   }
   .date{
       background:transparent url(images/date.png)no-repeat left;
   }
   .more {
       background:url("images/read_more.png") repeat scroll   transparent;
       color:#444444;
       float:right;
       font:italic 11px/22px georgia,times,serif;
       height:22px;
       text-align:center;
       text-decoration:none!important;
       text-shadow:1px 1px #FFFFFF;
       width:81px;
   }
 
   .nav-prev a,.nav-next a{
       border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
 
       box-shadow:1px 1px 2px #444;
       -moz-box-shadow:1px 1px 2px #444;
       -webkit-box-shadow:1px 1px 2px #444;
 
       background:-moz-linear-gradient(center top , #efefef, #ccc)repeat scroll transparent;
       background:-webkit-gradient(linear, center top, center bottom, from(#efefef), to(#ccc));
       border:1px solid #ccc;
       color:#444;
       font:italic 12px/24px georgia,times,serif;
       padding:6px 12px;
       text-decoration:none!important;
       text-shadow:1px 1px #fff;
   }

Jika dilihat di peramban, maka kita akan mendapatkan pesan error. Ini terjadi karena ada tag PHP yang harus diatur dengan functions.php, yaitu post thumbnail. Bagian functions.php akan kita bahas nanti. Tampilan akhir konten blog akan seperti di bawah.

Mendesain Blog Elegan Bag. 3 - Konversi ke Theme WordPress

Di bawah adalah tampilan efek gradient background dan text-shadow pada navigasi halaman.

Mendesain Blog Elegan Bag. 3 - Konversi ke Theme WordPress

Membuat sidebar.php

Bagian ini cukup sederhana. File sidebar.php akan menampilkan kotak pencarian dan widget dinamis yang dapat kita ubah melalui dashboard WordPress. Sama seperti di index.php, di sini kita juga membutuhkan functions.php agar sidebar widget bisa berfungsi. Berikut kode sidebar.php:

<aside id="sidebar">
	<!--Form Pencarian-->
   	 <form id="search" method="get" action="<?php bloginfo('url'); ?>/">   				 
   		 <input type="text" class="search-field" name="s" value="<?php the_search_query(); ?>" />
   		 <input type="submit" value="<?php _e('Search'); ?>" class="search-submit"/>    
   	 </form>
 
   <!-- Widget Dinamis -->
    <section>
   	 <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar') ) : else : ?>
   	 <?php endif; ?>
    </section>
 
</aside>

Mari kita atur tampilannya dengan CSS.

/* ------------------------------
Sidebar
----------------------------- */
#sidebar{
   float:left;
   width:220px;
}
 
/* Kotak Pencarian */
#sidebar form{width:220px}
.search-field{
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
 
   box-shadow:1px 1px 2px #444;
   -moz-box-shadow:1px 1px 2px #444;
   -webkit-box-shadow:1px 1px 2px #444;
 
   background:transparent url(images/search_bg.png);
   border:;
   height:24px;
   padding:5px;
   width:209px;
}
.search-submit{
   background:transparent url(images/search.png);
   border:;
   height:21px;
   left:185px;
   position:relative;
   text-indent:-9999px;
   top:-27px;
   width:21px;
}
#sidebar section{
   float:none;
   padding:;
}
.sidebar{
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
 
   box-shadow:1px 1px 2px #444;
   -moz-box-shadow:1px 1px 2px #444;
   -webkit-box-shadow:1px 1px 2px #444;
 
   background:#fff;
   float:left;
   font:italic 12px Georgia,Serif;
   margin:  20px;
   padding:10px;
   width:199px;
}
#sidebar h3 {
   margin:  10px;
}
#sidebar section ul{
   list-style:none;
   margin:;
   padding:;
}
#sidebar section ul ul,#sidebar section ul ul ul{margin-left:20px;}
#sidebar section li{
   margin:  5px;
}

Tampilannya nanti akan seperti di bawah.

Mendesain Blog Elegan Bag. 3 - Konversi ke Theme WordPress

Membuat footer.php

Footer yang kita buat akan berbeda dengan hasil tutorial PSD yang dulu, kita akan menambahkan widget dinamis agar footer terlihat lebih penuh.

</div> <!-- End Wrapper -->
 
<div id="foot-wrapper">
<aside id="foot-widget">
    <section class="footw1">
   	 <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('foot widget 1') ) : else : ?>
   	 <?php endif; ?>
    </section>
 
    <section class="footw2">
   	 <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('foot widget 2') ) : else : ?>
   	 <?php endif; ?>
    </section>
 
    <section class="footw3">
   	 <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('foot widget 3') ) : else : ?>
   	 <?php endif; ?>
    </section>
 
    <section class="footw4">
   	 <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('foot widget 4') ) : else : ?>
   	 <?php endif; ?>
    </section>
</aside>
 
<footer>
    <p><span class="alignleft"> Copyright © <?php the_time('Y');?> <?php bloginfo('name');?> </span>
    <span class="alignright">Designed by <a href="http://desaindigital.com/">Mohammad Jeprie</a> & coded by <a href="http://cekerholic.com/">Aris FM</a></span>
    <?php wp_footer();?>
    </p>
</footer>
 
</div><!-- End Foot Wrapper -->
</body>
</html>

Atur tampilannya.

/* ------------------------------
Footer
----------------------------- */
#foot-wrapper {
   background:#070707;
   color:#999;
   display:block;
   margin:;
   min-width:1024px;
   width:auto;
}
#foot-wrapper a{
   color:#999;
   text-decoration:underline;
}
#foot-wrapper aside{
   margin: auto;
   overflow:hidden;
   padding:20px;
   width:960px;
}
#foot-wrapper section{
   float:left;
   width:225px;
}
.footw1,.footw2,.footw3{margin-right:20px;}
footer{
   background:transparent url(images/nav_bg.png);
   font:italic 12px Georgia,Serif;
   height:30px;
   line-height:30px;
   min-width:1024px;
   width:100%;
}
footer p{
   margin: auto;
   width:960px;
}

Tampilan footer.

Mendesain Blog Elegan Bag. 3 - Konversi ke Theme WordPress

Membuat single.php dan page.php

Secara umum single.php dan page.php memiliki kode yang sama dengan index.php, hanya saja di single.php dan page.php ada tambahan kode untuk menampilkan kolom komentar. Untuk menampilkan kolom komentar cukup memanggil comments.php dengan perintah <?php comments_template(' ', true); ?> sebelum akhir the_loop(). Kode lengkapnya seperti ini:

<?php get_header(); ?>
 
<div id="content">    
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
    <article <?php post_class(); ?>>
   	 <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
   	 <?php the_post_thumbnail(); ?>
   	 <?php the_content();?>
   	 <?php wp_link_pages('before=<p class="pagingpost">Page: &after=</p>&next_or_number=number&pagelink=%'); ?>
   	 <p class="metadata">
   		 <span class="author"><?php the_author_posts_link(); ?></span>
   		 <span class="tags"><?php the_tags(''); ?></span>
   		 <span class="date"><?php the_time('d M Y');?></span>
   	 </p>
    </article>
    <?php comments_template('', true); ?>
    <?php endwhile;endif;?>
</div>
 
<?php get_sidebar();?>
<?php get_footer();?>

Di page.php, metadata posting (nama penulis, tag dan tanggal posting) akan kita hilangkan. Hapus kode berikut dari page.php

   	 <p class="metadata">
   		 <span class="author"><?php the_author_posts_link(); ?></span>
   		 <span class="tags"><?php the_tags(''); ?></span>
   		 <span class="date"><?php the_time('d M Y');?></span>
   	 </p>

Membuat comments.php

File comments.php berfungsi untuk menampilkan daftar komentar dan kotak komentar. Daftar komentar akan dibuat terpisah antara komentar, pingback, dan trackback dengan menggunakan callback function yang diatur di functions.php.

<?php
// Do not delete these lines
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
if ( post_password_required() ) { ?>
<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
<?php
return;
}
?>
 
<!-- You can start editing here. -->
<section id="comments">
 
<?php if (have_comments()) : global $wp_query; ?>
 
    <?php if (!empty($comments_by_type['comment'])) { ?>
   	 <h3><?php echo count($wp_query->comments_by_type['comment']); ?> Comments</h3>
   	 <ol class="commentlist">
   		 <?php wp_list_comments('type=comment&callback=mytheme_comment'); ?>
   	 </ol>
    <?php } ?>
    <?php if (!empty($comments_by_type['pingback'])) { ?>
   	 <h3 id="pingbacks"><?php echo count($wp_query->comments_by_type['pingback']); ?> Pingbacks</h3>
   	 <ol class="pingbacklist">
   		 <?php wp_list_comments('type=pingback&callback=mytheme_pings'); ?>
   	 </ol>
    <?php } ?>
    <?php if (!empty($comments_by_type['trackback'])) { ?>
   	 <h3 id="trackbacks"><?php echo count($wp_query->comments_by_type['trackback']); ?> Trackbacks</h3>
   	 <ol class="trackbacklist">
   		 <?php wp_list_comments('type=trackback&callback=mytheme_pings'); ?>
   	 </ol>
    <?php } ?>
 
<?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 class="nocomments">Comments are closed.</p>
</section>
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
</section>
<section id="respond">
<h3><?php comment_form_title( 'Leave Your Comment Here' ); ?></h3>
<div class="cancel-comment-reply">
<small><?php cancel_comment_reply_link(); ?></small>
</div>
<?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 wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out »</a></p>
<?php else : ?>
<p><label for="author">Name <?php if ($req) echo ""; ?></label><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /></p>
<p><label for="email">Email <?php if ($req) echo ""; ?></label><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> /></p>
<p><label for="url">Url</label><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
<p><label for="comment">Comment</label><textarea name="comment" id="comment" rows="10" tabindex="4"></textarea></p>
<span><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<?php comment_id_fields(); ?>
</span>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
</section>
 
<?php endif; // if you delete this the sky will fall on your head ?>

Lalu atur tampilannya di style.css

/* Comments */
   #comments{
       margin:50px  ;
       width:inherit;
   }
   #comments h3{
       margin:  20px;
       text-shadow:1px 1px #fff;
   }
   #comments ol{
       list-style:none;
       margin:;
   }
   #comments li{position:relative}
   #comments .avatar{
       border:3px solid #adadad;
       float:left;
       margin:20px  20px 20px;
   }
   #comments p{
       font-size:13px;
       font-weight:400;
   }
   #comments .commentbody{padding-left:110px}
   #comments .fn {font-size:15px;}
   #comments .comment-meta {font-size:11px;}
   #comments .reply {
       font-size:13px;
       font-style:italic;
       margin:;
       text-align:right;
   }
   ol.commentlist li ul.children {
       list-style:none;
       margin:;
       padding-left:80px;
   }
 
   ol.commentlist li ul.children li.depth-5,ol.commentlist li ul.children li.depth-6,ol.commentlist li ul.children li.depth-7,
   ol.commentlist li ul.children li.depth-8,ol.commentlist li ul.children li.depth-9,ol.commentlist li ul.children li.depth-10{
       margin-left:-80px;
       padding:
   }
 
       /* Comment Form */
       #respond{
           position:relative;
       }
       #respond h3{
           border-bottom:1px solid #adadad;
           margin-bottom:15px;
           padding-bottom:5px;
       }
       #commentform{
           width:inherit;
       }
       #commentform label {float:left}
       #commentform input {
           border:1px solid #adadad;
           display:block;
           margin-left:100px;
           padding:2px;
           width:200px;
       }
       #commentform textarea{
           border:1px solid #adadad;
           font:inherit;
           padding:2px;
           width:99%;
       }
       #commentform #submit{margin-left:!important;}
       .cancel-comment-reply{margin-bottom:20px;}

Tampilan daftar dan kolom komentar seperti di bawah.

Mendesain Blog Elegan Bag. 3 - Konversi ke Theme WordPress

Membuat functions.php

Ini adalah bagian yang sangat vital dalam theme ini, fungsi-fungsi di functions.php digunakan dalam hampir semua file. Mulai dari header.php, index.php, sidebar.php, footer.php, page.php dan single.php, sampai comments.php. Berikut kode lengkap functions.php dengan beberapa penjelasannya:

<?php
    // Mengatur widget dinamis di sidebar dan footer
    if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
   	 'name' => 'sidebar',
   	 'before_widget' => '<div class="sidebar">',
   	 'after_widget' => '</div>',
   	 'before_title' => '<h3>',
   	 'after_title' => '</h3>'
    ));
    register_sidebar(array(
   	 'name' => 'foot widget 1',
   	 'before_widget' => '<div>',
   	 'after_widget' => '</div>',
   	 'before_title' => '<h3>',
   	 'after_title' => '</h3>'
    ));
    register_sidebar(array(
   	 'name' => 'foot widget 2',
   	 'before_widget' => '<div>',
   	 'after_widget' => '</div>',
   	 'before_title' => '<h3>',
   	 'after_title' => '</h3>'
    ));
    register_sidebar(array(
   	 'name' => 'foot widget 3',
   	 'before_widget' => '<div>',
   	 'after_widget' => '</div>',
   	 'before_title' => '<h3>',
   	 'after_title' => '</h3>'
    ));
    register_sidebar(array(
   	 'name' => 'foot widget 4',
   	 'before_widget' => '<div>',
   	 'after_widget' => '</div>',
   	 'before_title' => '<h3>',
   	 'after_title' => '</h3>'
    ));
}
 
    //Mengatur tampilan excerpt (ringkasan posting)
    function improved_trim_excerpt($text) {
    global $post;
    if ( '' == $text ) {
   	 $text = get_the_content('');
   	 $text = apply_filters('the_content', $text);
   	 $text = str_replace(']]>', ']]>', $text);
   	 $text = preg_replace('@<script[^>]*?>.*?</script>@si', '', $text);
   	 $text = strip_tags($text, '<p>');
   	 $excerpt_length = 75;
   	 $words = explode(' ', $text, $excerpt_length + 1);
   	 if (count($words)> $excerpt_length) {
   		 array_pop($words);
   		 array_push($words, '...');
   		 $text = implode(' ', $words);
   		 }
   	 }
   	 return $text;
    }
 
    remove_filter('get_the_excerpt', 'wp_trim_excerpt');
    add_filter('get_the_excerpt', 'improved_trim_excerpt');
 
    //Mengatur thumbnail image
    add_theme_support( 'post-thumbnails' );    
    set_post_thumbnail_size( 150, 150, true );
    add_image_size( 'single-post-thumbnail', 150, 150, true );
 
    //Menampilkan jumlah follower Twitter
    function twitter_followers_counter($username) {
 
    $cache_file = CACHEDIR . 'twitter_followers_counter_' . md5 ( $username );
 
    if (is_file ( $cache_file ) == false) {
   	 $cache_file_time = strtotime ( '1984-01-11 07:15' );
    } else {
   	 $cache_file_time = filemtime ( $cache_file );
    }
 
    $now = strtotime ( date ( 'Y-m-d H:i:s' ) );
    $api_call = $cache_file_time;
    $difference = $now - $api_call;
    $api_time_seconds = 1800;
 
    if ($difference >= $api_time_seconds) {
   	 $api_page = 'http://twitter.com/users/show/' . $username;
   	 $xml = file_get_contents ( $api_page );
 
   	 $profile = new SimpleXMLElement ( $xml );
   	 $count = $profile->followers_count;
   	 if (is_file ( $cache_file ) == true) {
   		 unlink ( $cache_file );
   	 }
   	 touch ( $cache_file );
   	 file_put_contents ( $cache_file, strval ( $count ) );
   	 return strval ( $count );
    } else {
   	 $count = file_get_contents ( $cache_file );
   	 return strval ( $count );
    }
}
    //Mengatur tampilan daftar komentar
    function mytheme_comment($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
    <?php echo get_avatar($comment,$size='65',$default='<path_to_url>' ); ?>
    <div class="commentbody" id="comment-<?php comment_ID(); ?>">
    <p class="vcard"><?php printf(__('<strong class="fn">%s</strong>'), get_comment_author_link()) ?>
    <span class="comment-meta commentmetadata"> <?php printf(__('%1$s at %2$s'), get_comment_date(),get_comment_time()) ?></span><?php if($args['max_depth']!=$depth) { ?></p>
    <?php if ($comment->comment_approved == '0') : ?>
    <em><?php _e('Your comment is awaiting moderation') ?></em>
    <br />
    <?php endif; ?>
    <?php comment_text() ?>
    <p class="reply"><?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?></p>
    <?php } ?>
    </div>
    <?php
}
    //Mengatur tampilan pingback dan trackback
    function mytheme_pings($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
    <p class="vcard"><?php printf(__('<strong class="fn">%s</strong>'), get_comment_author_link()) ?>
    <span class="comment-meta commentmetadata"> <?php printf(__('%1$s at %2$s'), get_comment_date(),get_comment_time()) ?></span><?php if($args['max_depth']!=$depth) { ?></p>
    <?php if ($comment->comment_approved == '0') : ?>
    <em><?php _e('Your comment is awaiting moderation') ?></em>
    <br />
    <?php endif; ?>
    <?php comment_text() ?>
    <?php } ?>
    <?php
}
 
?>

Membuat Screenshot Theme

Sebenarnya theme WordPress yang kita buat sudah jadi dan bisa dipakai. Namun, WordPress menerapkan standar mewajibkan preview image untuk setiap theme. Untuk membuatnya, silakan aktifkan theme yang baru kita buat, capture halaman dengan tombol print screen. Perkecil di Photoshop dengan ukuran 300 x 225 px dan beri nama screenshot.png.

Mendesain Blog Elegan Bag. 3 - Konversi ke Theme WordPress

Hasil Akhir

Hasil akhir dari tutorial ini adalah sebuah theme WordPress dengan lima buah widget dinamis, satu di sidebar dan empat di footer. Theme WordPress ini telah saya validasi bahasa markahnya melalui validator W3, untuk CSS masih terdapat cukup banyak error saat divalidasi, terutama browser specific properties untuk efek-efek CSS3 yang belum distandarisasi oleh W3. Di bawah adalah tampilan theme WordPress yang kita buat, klik gambar untuk melihat hasilnya secara langsung.

Mendesain Blog Elegan Bag. 3 - Konversi ke Theme WordPress

Download Hasil Tutorial

Silakan download theme WordPress hasil tutorial ini dengan meng-klik tombol di bawah ini. Ada juga bonus file HTML/CSS buat non pengguna WordPress

WordPress Theme

HTML/CSS Template

© 2013 Aris FM. Proudly powered by Middleman & Github