kencur,sikencur,aplikasi,tips dan trik, informasi,aplikasi sekolah gratis,pendidikan,aplikasi sekolah,bejalar office

WordPress: Belajar membuat theme sendiri (part 1)

Membuat wordpress theme sendiri (part 1)

Membuat wordpress theme sendiri (part 1)

Belajar membuat wordpress theme sendiri. Untuk memulainya anda hanya membutuhkan sedikit kemampuan tentang HTML, CSS dan tentunya PHP. Mengapa demikian? ya karena 3 hal tersebut mutlak telah dan sedang digunakan oleh wordpress. Kalau belum mengerti 3 hal tersebut tentunya kita akan kesulitan untuk memulai ini. Oh iya, kalo untuk belajar lebih baik menggunakan webserver lokal di pc kita saja, misal menggunakan XAMPP untuk windows OS.

Kita mulai saja part 1 ini dengan membuat theme yang sangat sederhana dan kita gunakan Belajar1 sebagai nama theme. Buat direktori baru di dalam direktori theme anda, misal: Belajar1 , lalu buat file style.css dan isi dengan kode css berikut:

/*
Theme Name:Belajar1
Theme URI:http://kencur.net/
Description: Belajar membuat sendiri theme wordpress part 1
Version:0.1
Author:Securesh
Author URI:http://kencur.net/
Tags:one columns, untuk belajar
*/
/* ----- Reset ----- */

@charset "utf-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px; 
}

a:link {
	color: #00C;
	text-decoration: underline;
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}

.container {
	width: 960px;
	background: #FFF;
	margin: 0 auto; 
}

.header {
	background: #ADB96E;
}
.menu{
	text-transform: capitalize;
}
.menu ul {
	list-style:none;
	margin:0;
	padding:0;
}
.menu ul li{
	float: left;
	margin-right: 10px;
}
.content {
	background: #C0C0C0;
	padding: 10px 0;
	width: 960px;
	float: left;
}

.footer {
	background: #CCC49F;
	position: relative;
	clear: both;
	margin-top: 10px;
	padding: 20px 0;
}
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

File ini (style.css) digunakan oleh mesin wordpress untuk mengatur tampilan blog dan juga digunakan untuk mengidentifikasikan nama theme, pembuat theme, deskripsi theme, alamat theme dan tag theme. Lihat bagian atas dari kode css tersebut.
Buat file index.php di direktori yang sama dengan style.css dan isi dengan kode berikut:

<!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 if ( is_front_page() ) { bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); } else { wp_title( '&laquo;', true, 'right' ); bloginfo( 'name' ); }	?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>
<body>
<div class="container">
	<!-- HEADER -->
	<div class="header">
			<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
			<p class="description"><?php bloginfo('description'); ?></p>
    </div>
    <div class="menu">
		<ul>
		<li><a href="<?php echo get_option('home'); ?>" title="Home">Home</a></li>
		<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
		</ul>
	</div>
	<!-- ISI -->
	<div class="content">
	<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent Link to'); ?>
			<?php the_title_attribute(); ?>">
			<?php the_title(); ?></a></h2>
			<?php the_content(__('(more...)')); ?>
			<?php wp_link_pages(); ?>
			<p class="the_category"><span class="hide"><?php _e('Categories'); ?>: </span><?php the_category(', ') ?></p>
			<p class="the_tags"><?php the_tags("<span >".__('Tags: ')."</span>", ', ', '');  ?> <span><?php comments_popup_link(__('No Comments'), __('1 Comment'), __('% Comments'),"icon-comment"); ?></span></p>
		</div>
	<?php endwhile; ?>
	<div class="navigation">
		<?php next_posts_link(__('Post Lama')) ?>
		<?php previous_posts_link(__('Post Baru')) ?>
	</div>
	<?php else : ?>
	<div class="post">
		<h2><?php _e('Tidak Ditemukan'); ?></h2>
		<p><?php _e('Maaf, Yang anda cari tidak ada.'); ?></p>
	</div>
	<?php endif; ?>
	</div>
	<!-- FOOTER -->
	<div class="footer">
    <p><a href="<?php echo get_option('home'); ?>/"><b><?php bloginfo('name'); ?></b></a>  &copy; 2011 .</p>
    <p><a href="<?php echo esc_url( __( 'http://wordpress.org/') ); ?>" title="<?php esc_attr_e( 'Belajar membuat theme wordpress' ); ?>" rel="generator"><?php printf( __( 'Powered by %s'), 'WordPress' ); ?></a></p>
	</div>
</div>
<?php wp_footer();?>
</body>
</html>

File ini digunakan sebagai design untuk output dari query yang diterima mesin wordpress.
Apabila sudah selesai, coba aktifkan theme baru anda. Buat screenshot wordpress blog anda lalu simpan sebagai screenshot.png dan letakan di direktori theme baru anda. Nantinya file ini digunakan sebagai preview theme anda pada saat anda berada di wp-admin.
File-file tersebut bisa anda download disini.

Selesai sudah theme wordpress kita yang sederhana sekali :D , Penambahan widget di sidebar dengan menggunakan theme ini tidak dapat dilakukan, karena membutuhkan beberapa function tambahan. Tunggu post saya selanjutnya tentang menambahkan fitur tersebut pada theme kita ini.

Comments Page 2 of 2
1 2

Komentar

7 thoughts on “WordPress: Belajar membuat theme sendiri (part 1)”

  1. securesh berkata:

    @ arif:
    plugin yang terpasang di local dan yang di webhost sama apa gak mas?
    mungkin karna bentrok dengan plugin yang terpasang, atau bisa juga karena ada function yang bermasalah pada theme buatan mas nya.
    kalo tidak keberatan bisa email saya saja langsung mas :)

    1. arif berkata:

      udah solved mas, ternyata yang salah ada di kompresinya, dulu format .zip Ultra compressed, sekarang pake .zip Store dah bisa…

      1. securesh berkata:

        oh,, untung dah solved, selamet deh saya jadinya :)

  2. Cikiciew berkata:

    wah ilmunya sunggu sangat bermaanfaat mass, saya juga mau coba bikin template sendiri..
    siapa tau template buiatan saya bisa di jual.. :D

    mari bersilahturahmi ke web saya juga mas….
    http://www.cikiciew.com/tips-trick/cara-gabung-windowsxpwindows7hiren’s-bootcd-dalam-satu-flash-disk Cara Gabung WindowsXP+Windows7+Hiren’s BootCD Dalam Satu Flash Disk

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *