Rabu

Cara Membuat Theme WordPress

Posted by Unknown Posted on 22.13 3 comments
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}
 sumber : http://belajar-wordpress.com/2012/07/membuat-theme-wordpress/
Read More
Langganan: Postingan (Atom)