Dunia Blogger

Kali ini saya menguntit dari web tetangga tentang Cara Membuat Theme WordPress yang ternyata mudah.
Membuat theme WordPress tidak sesulit yang bayangan banyak blogger.Sederhana jika kita mulai belajar dan melaksanakan berbagai komponen yang memegang Theme. Dalam tutorial ini Budhe coba menyertakan semua langkah yang diperlukan dalam membuat theme wordpress sendiri.
So let’s get to it …. (Budhe ora ngerti artine

).
Menyiapkan server lokal.
Budhe sarankan pakai Bitnami WordPress agar tidak ada kesulitan,tinggal instal saja di komputer.
Membuat file theme dan template
Secara default,blog WordPress baru Anda memiliki theme Twenty ten. Kebanyakan pengguna wp melangkah cepat mencari pengganti theme default dan mencari Theme yang lebih profesional dan advance. Saat ini Anda dapat menemukan jutaan theme WordPress di seluruh web, yang dibuat oleh para profesional baik sebagai gratis dan premium. Tapi jika Sob lebih memilih untuk belajar cara membuat theme wordpress sendiri,kita akan belajar bersama-sama.
Sekarang kita akan mulai membuat theme wordpress satu kolom.
Membuat index.php dan style.css
Buat folder baru dan beri nama apa saja yang nantinya akan di menjadi nama theme. Buka editor teks favorit (saran budhe Notepad ++).Buat file php baru,masukkan kode berikut:

01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

02

03<html xmlns="http://www.w3.org/1999/xhtml">

04

05<head profile="http://gmpg.org/xfn/11">

06

07<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

08

09<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

10

11<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->

12

13<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

14

15<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

16

17<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />

18

19<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

20

21<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

22

23<?php wp_get_archives('type=monthly&format=link'); ?>

24

25<?php //comments_popup_script(); // off by default ?>

26

27<?php wp_head(); ?>

28

29</head>

30

31<body>

32

33</body>

34

35</html>

Simpan dengan nama index.php.
Kemudian buka lagi sebuah dokumen baru,masukkan kode berikut:

1/*

2Theme Name: Nama ThemeKamu

3Theme URI: alamatblogkamu.com

4Description: Deskripsi theme kamu

5Version: 1.0

6Author: Nama kamu

7Author URI: http://www.alamatblogkamu.com

8

9*/

Sesuaikan nama theme, Theme URL, deskripsi, versi, authort dll.Simpan dulu dengan nama style.css, kita akan kembali untuk mendefinisikan file css nanti. Sekarang, saatnya untuk membuat sisa file dan menambahkan loop legendaris.
Copy dan paste folder theme ke direktory theme tempat Sob menginstal Bitnami wordpress,misalnya C:Program FilesBitNami WordPress Stackappswordpresshtdocswp-contentthemes.Login ke admin wordpress lalu aktifkan theme.
Karena kita belum menambahkan apapun di dalam theme,jadi seharusnya blog wordpress masih terlihat kosong dlam browser. Jika Sob mendapatkan pesan kesalahan,ulang semua langkah diatas.
Membuat header.php
Untuk membuat bagian teratas dari layout blog ,kita akan membuat header. Tambahkan kode berikut di antara tag body di index.php.

`1`	`<!--?php get_header(); ?-->`

Ini akan menciptakan dua box yang mengendalikan posisi atas layout blog, seperti logo,wrapper dan header. Tag-tag yang digunakan adalah div tags yang disertakan untuk membantu Anda nanti dalam mengendalikan header dalam stylesheet CSS.
Kemudian buka editor teks lagi,buat dokumen baru, tambahkan kode berikut kemudian simpan sebagai header.php.

01<div id="wrapper">

02

03<div id="header">

04

05<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

06

07<?php bloginfo('description'); ?>

08

09</div>

10

11</div>

Setiap kali file index.php di load, kode tadi akan memberitahu browser untuk menemukan header.php beserta kodenya.
File header.php sekarang kita jadikan sebagai bagian dari file template,selanjutnya kita akan membuat file template untuk sidebar dan footer. Dari pada harus memasukkan semua kode dalam satu file, dengan file template kita dapat membagi kode untuk setiap bagian dan hanya memberitahu browser untuk mengambilnya saat halaman dimuat.
Menambahkan Loop
Setelah mendefinisikan header,saatnya untuk menambahkan elemen yang legendaris untuk blog WordPress. Loop adalah streamline posting yang ada di hampir semua homepage blog WordPress.
Buka index.php dan tambahkan kode ini diantara tag body, di bawah potongan header.

01<div id="box">

02<!--?php if(have_posts()) : ?--><!--?php while(have_posts()) : the_post(); ?-->

03<div class="post">

04<h3></h3>

05<div class="entry">

06<!--?php the_content(); ?--></div>

07</div>

08<!--?php endwhile; ?-->

09

10<!--?php endif; ?--></div>

Membuat sidebar.php
Seperti loop, sidebar adalah elemen wajib dari setiap blog. Di dalamnya bisa Sob masukkan recent post, categories, blogroll,tab dll. Buat dokumen baru dengan editor teks,masukkankode berikut kemudian simpan sebagai sidebar.php.

01<div class="sidebar">

02

03<ul>

04

05<?php wp_list_pages('depth2&title_li=<h2>Pages</h2>'); ?>

06

07<li><h2><?php _e('Categories'); ?></h2>

08

09<ul>

10

11<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

12

13</ul>

14

15</li>

16

17<li><h2><?php _e('Archives'); ?></h2>

18

19<ul>

20

21<?php wp_get_archives('type=monthly'); ?>

22

23</ul>

24

25</li>

26

27<?php get_links_list(); ?>

28

29</ul>

30

31</div>

Kemudian tambahkan kode berikut di bawah div akhir dari tag “box” di index.php untuk menyertakan file template sidebar.

`1`	`<!--?php get_sidebar(); ?-->`

Membuat footer.php
Bagian akhir dari “invisible box” untuk struktur konten dan desain blog WordPress, sekarang kita akan membuat footer. Buat dokumen baru,masukkan kode berikut lalu simpan ke folder theme sebagai footer.php.

1<div id="footer">

2Copyright 2012 <!--?php bloginfo('name'); ?--></div>

Tambahkan juga kode ini ke index.php

`1`	`<!--?php get_footer(); ?-->`

Membuat single.php dan page.php
Karena ada perbedaan adalah konten dan tata letak struktur untuk Page dan single Post, kita tidak bisa melupakan untuk membuat dua file template yang berbeda. Buka editor teks dan buat dua dokumen baru.Masukkan kode berikut dan simpan sebagai single.php.

01<?php get_header(); ?>

02

03<div id="box">

04

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

06

07        <div class="post" id="post-<?php the_ID(); ?>">

08

09            <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

10

11            <div class="entry">

12

13                <?php the_content(); ?>

14

15            </div>

16            <div class="comments-template">

17<?php comments_template(); ?>

18</div>

19        </div>

20

21    <?php endwhile; ?>

22

23        <div class="navigation">

24            <?php previous_post_link('%link') ?> <?php next_post_link(' %link') ?>

25        </div>

26

27    <?php endif; ?>

28

29</div>

30

31<?php get_sidebar(); ?>

32

33<?php get_footer(); ?>

Dan kode ini sebagai page.php.

01<?php get_header(); ?>

02

03<div id="box"

04

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

06

07    <div class="post">

08

09        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

10

11    <div class="entry">

12

13        <?php the_content(); ?>

14

15    </div>

16</div>

17

18<?php endwhile; ?>

19    <div class="navigation">

20    <?php posts_nav_link(); ?>

21</div>

22<?php endif; ?>

23

24</div>

25

26

27<?php get_sidebar(); ?>

28<?php get_footer(); ?>

Simpn di folder theme.Untuk halaman single post kita telah memastikan untuk memasukkan komentar, sedangkan konten di page akan hanya tampil sebagai halaman statis.
Membuat functions.php
Sebelum kita melanjutkan untuk membuat file template footer, kita harus memastikan widget sidebar siap. Untuk melakukannya kita harus mendefinisikannya sebagai fungsi theme, yang dilakukan melalui file functions. Buat dokumen baru,masukkan kode berikut lalu simpan sebagai functions.php dalam folder theme.

1<?php

2if ( function_exists('register_sidebar') )

3    register_sidebar();

4?>

Kemudian tambahkan kode ini ke sidebar.php di baris kedua setelah tag div di baris pertama.

1<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

Menambahkan Komentar
Untuk menambahkan komentar di bagian bawah postingan dalam single post, kita harus membuat file template baru. Buat dokumen baru dengan editor teks,masukkan kode berikut lalu simpan sebagai comments.php.

001<?php 

002if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Please do not load this page directly. Thanks!');

003if (!empty($post->post_password)) { // if there's a password

004    if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {  // and it doesn't match the cookie

005?>

006

007<h2><?php _e('Password Protected'); ?></h2>

008<p><?php _e('Enter the password to view comments.'); ?></p>

009

010<?php return;

011    }

012}

013

014     

015

016$oddcomment = 'alt';

017

018?>

019

020

021

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

023    <h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>

024

025<ol class="commentlist">

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

027

028    <li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

029

030<div class="commentmetadata">

031<strong><?php comment_author_link() ?></strong>, <?php _e('on'); ?> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> <?php _e('at');?> <?php comment_time() ?></a> <?php _e('Said&#58;'); ?> <?php edit_comment_link('Edit Comment','',''); ?>

032        <?php if ($comment->comment_approved == '0') : ?>

033        <em><?php _e('Your comment is awaiting moderation.'); ?></em>

034        <?php endif; ?>

035</div>

036

037<?php comment_text() ?>

038    </li>

039

040<?php /* Changes every other comment to a different class */

041    if ('alt' == $oddcomment) $oddcomment = '';

042    else $oddcomment = 'alt';

043?>

044

045<?php endforeach; ?>

046    </ol>

047

048<?php else : ?>

049

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

051    <!-- If comments are open, but there are no comments. -->

052    <?php else : // comments are closed ?>

053

054     

055<p class="nocomments">Comments are closed.</p>

056

057    <?php endif; ?>

058<?php endif; ?>

059

060

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

062

063        <h3 id="respond">Leave a Reply</h3>

064

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

066<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p>

067

068<?php else : ?>

069

070<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

071<?php if ( $user_ID ) : ?>

072

073<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 &raquo;</a></p>

074

075<?php else : ?>

076

077<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="40" tabindex="1" />

078<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

079

080<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="40" tabindex="2" />

081<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

082

083<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="40" tabindex="3" />

084<label for="url"><small>Website</small></label></p>

085

086<?php endif; ?>

087

088<!--<p><small><strong>XHTML:</strong> <?php _e('You can use these tags&#58;'); ?> <?php echo allowed_tags(); ?></small></p>-->

089

090<p><textarea name="comment" id="comment" cols="60" rows="10" tabindex="4"></textarea></p>

091

092<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />

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

094</p>

095

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

097

098</form>

099

100<?php endif; ?>

101

102<?php endif; ?>

Merancang theme

Meskipun Budhe tidak ingin memberikan rancang theme ini untuk sob gunakan, sayangnya kita telah mencapai langkah terakhir dan di sini Sob akan mendapatkannya.Untuk mulai mencoba menyesuikan stylesheet,Budhe akan meninggalkan Sob untuk bereksperimen menentukan desain terbaik. Buka style.css dan tambahkan kode ini.

01/*

02Theme Name: Nama ThemeKamu

03Theme URI: alamatblogkamu.com

04Description: Deskripsi theme kamu

05Version: 1.0

06Author: Nama kamu

07Author URI: http://www.alamatblogkamu.com

08

09*/

10

11

12body{

13     

14}

15

16a:link, a:visited{

17     

18}

19

20a:hover{

21     

22}

23

24#wrapper{

25     

26}

27

28#header{

29     

30}

31

32#box{

33     

34}

35

36.sidebar{

37     

38}

39

40#footer{

41     

42}

43

44.comments-template{

45     

46}

47

48.comments-template ol{

49     

50}

51

52.comments-template ol li{

53     

54}

55

56.comments-template h2, .comments-template h3{

57     

58}

59

60.commentmetadata{

61     

62}

63

64.comments-template p.nocomments{

65     

66}

67

68.comments-template textarea{

69     

70}