December 16th, 2010
[code] : Skeleton Code Untuk Template WordPress
Hello… Untuk post kali ini saya akan tunjukan kepada anda Skeleton Code a.k.a Kod Rangka untuk Template WordPress. Skeleton code ini saya design untuk memudah kan kerja pembangunan template wordpress dengan lebih mudah terutamanya kepada mereka yang bukan dari bidang pengaturcaraan. Untuk membuat template wordpress yang asas, anda hanya perlu mahir HTML dan CSS.
1. Reka Struktur Template Anda
Sebagai contoh, saya memerlukan satu template yang mempunyai header, contain, sidebar dan footer. Jadi saya membahagikan kepada 3 bahagian utama (header, main, footer). Untuk contain dan sidebar saya letak kan dibawah main.
Kemudian mula membuat Code untuk skeleton tersebut. index.php… Untuk bahagian ini, sy hanya membuat rangka utama template.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="styles.css" type="text/css" media="screen" /> <body> <div id="wrapper"> <div id="container"> <div id="header"></div> <div id="main"> <div id="contain"></div> <div id="sidebar"></div> </div> <div id="footer"></div> </div><!--container-end--> </div><!--wrapper-end--> </body> </html>
2. Menambah Code Asas WordPress
Code Asas WordPress disini saya maksudkan adalah seperti snippet2 wordpress seperlu untuk mendapatkan nama blog menggunakan bloginfo(‘name’). Untuk mendapatkan kod-kod asas didalam wordpress, sila rujuk post saya WordPress Cheat List.
<!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><?php wp_title('«', true, 'right'); ?><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<?php if( is_singular() ) wp_enqueue_script('comment-reply'); ?>
<?php wp_head(); ?>
<body>
<div id="wrapper">
<div id="container">
<div id="navigation">
<ul id="pages">
<li><a href="<?php echo get_option('home'); ?>">Home</a></li>
<?php wp_list_pages('title_li=' );?>
</ul>
<div id="delimiter"></div>
</div>
<div id="header"> <!-- HEADER -->
<h1>
<a href="<?php echo get_option('home'); ?>">
<?php bloginfo('name'); ?>
</a>
</h1>
</div>
<div id="navigation">
<ul id="categories">
<?php wp_list_categories('show_count=0&title_li&hide_empty=0&exclude=1'); ?>
</ul>
<div id="delimiter"></div>
</div>
<div id="main">
<div id="contain"></div>
<div id="sidebar"></div>
</div>
<div id="footer">
Design by <a href="http://www.beyta.net">Beyta | Tajuzzaman bin Tajol Molok</a>
<a href="#wrapper">Top</a>
</div>
</div> <!-- container-closed -->
</div> <!-- wrapper-closed -->
<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
</body>
</html>
Untuk bahagian header itu, saya akan gunakan untuk banner dan nama laman web… jadi saya masukkan
<?php bloginfo('name'); ?> <!-- wordpress snippet untuk get nama blog -->
Kemudian masukkan code ini di dalam id contain.
<?php if(have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?>>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(''); ?>
<ul>
<li><?php the_time('F js, Y') ?></li>
<li>Posted in <?php the_category(', ')?></li>
<li><?php comments_number('No Comments','1 Comment','% Comments'); ?></li>
</ul>
</div>
<?php endwhile; ?>
<div>
<ul>
<li><?php previous_posts_link('Older') ?></li>
<li><?php next_posts_link('Newer') ?></li>
</ul>
</div>
<?php else : ?>
<h2>Nothing Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<p><a href="<?php echo get_option('home'); ?>">Return to the homepage</a></p>
<?php endif; ?>
*untuk post kali ini, dibahagian sidebar anda boleh letak kan apa yang anda minat… kerana kebiasaan di bahagian sidebar akan saya letak kan widget-widget yang mn memerlukan tutorial selanjutnya dan agak rumit. Jadi untuk tutorial ini, kita letak kan apa sahaja di bawah id sidebar.
3. styles.css
Seleteah selesai, anda boleh lah membuat code CSS pula. nama folder css anda perlu styles.css. Pastikan anda comment di dalam Style.css anda kerana ianya diperlukan oleh wordpress untuk mengenali template dan menunjukkan nya di administration panel.
/*
Theme Name: My Skeleton
Theme URI: http://www.beyta.net
Description: Skeleton Design For WordPress Theme
Version: 1
Author: Sir Beyta
Author URI: http://www.beyta.net
*/
body{margin: 0 0;background:#333;}
#delimiter {clear: both;}
#wrapper{width:1000px; margin:0 auto; background:#f0f0f0; }
#container{width:98%; margin:0 auto; }
#header{border:1px solid #CCC;}
#navigation{border:1px solid #CCC;}
#navigation ul{list-style: none;padding: 0;margin: 0;}
#navigation li{float: left;margin: 0 0.15em;}
#main{border:1px solid #CCC;}
#contain{width: 75%;float:left;}
#sidebar{width:23%;float:right;}
#footer{border:1px solid #ccc;}
#comments{background:#999}
. Header, Content, Sidebar dan Footer
Setelah selesai CSS, anda perlulah memecah kan design code yang telah anda buat tadi kepada 4 form, iaitu :
- header.php
- index.php
- sidebar.php
- footer.php
header.php => cut dan masukkan code dari <head> sehingga </div> untuk id=header. Kemudian gantikan dengan
<?php get_header() ?> di form index.php tadi.
sidebar.php => masukkan <div id=”sidebar”> ….. </div>
footer.php => masukkan seperti copyrighted ataupun design by.
index.php =>
gantikan code div header yang telah anda cut dengan
<?php get_header() ?>
Sama seperti footer dan sidebar anda.
Hasilnya boleh dimuat turun disini : DOWNLOAD
ANTARA YANG MENARIK
|
|
|
|
|
