Wordpress adalah sebuah web aplikasi yang memudahkan kita untuk membuat sebuah website atau blog. Pada postingan kali ini kita akan membahas bagaimana membuat tema wordpress sendiri secara manual. Sebelum memulai kita harus tahu dasar-dasar dari sebuah wordpress, berikut adalah bagiannya :
– home.php : digunakan untuk menampilkan halaman depan
– header.php : Digunakan untuk menampilkan bagian header
– sidebar.php : digunakan untuk menampilkan bagian sidebar
– footer.php : digunakan untuk menampilkan bagian footer
– single.php : digunakan untuk menampilkan artikel.
– page.php : digunakan untuk menampilkan page.
– search.php : digunakan untuk menampilkan hasil pencarian.
– archive.php : digunakan untuk menampilkan arsip blog (arsip tanggal, bulan, dll).
– functions.php : digunakan untuk mengatur fungsi-fungsi yang berlaku di blog.
– 404.php : digunakan untuk menampilkan halaman error 404
buatlah sebuah 10 file dengan nama dan format seperti diatas. Simpan dalam 1 folder.
Langkah kedua :
buatlah file dengan nama style.css dengan isi seperti berikut :
/* Theme Name: Tema Saya Theme URI: http://minggo.co.id/ Description: Tema pertama yang saya buat mybroadcaster.blogspot.com Author: Rizal Hidayat Author URI: http://facebook.com/izalhidayatx Version: 1.0 */
Theme Name: isilah dengan nama tema yang ingin anda buat
Theme URI: isilah dengan tlink tema Anda
Description: isilah dengan diskripsi singkat theme anda
Author: isilah dengan nama anda
Author URI: isilah dengan URL pribadi anda
Version: isi dengan versi tema.
Disini Anda dapat mengatur layout sesuai keinginan Anda.
dan isi style css ini dengan kode css yang Anda buat. jika belum mengerti membuat kode css silahkan pelajari di W3School
Theme URI: isilah dengan tlink tema Anda
Description: isilah dengan diskripsi singkat theme anda
Author: isilah dengan nama anda
Author URI: isilah dengan URL pribadi anda
Version: isi dengan versi tema.
Disini Anda dapat mengatur layout sesuai keinginan Anda.
Langkah ketiga :
Buatlah file index.php dan isi dengan kode html Anda.
contoh :
Buatlah file index.php dan isi dengan kode html Anda.
contoh :
<html> <head> <title>Tema Saya</title> </head> <body> <div id="wrap"> <div id="header"> Lokasi header ada disini </div> <div id="maincontent"> <div id="content"> Artikel akan muncul disini </div> <div id="sidebar"> <div id="lebar"> Iklan kotak ada disini </div> <div id="kiri"> Menu-menu sidebar kiri ada disini </div> <div id="kanan"> Menu-menu sidebar kanan ada disini </div> </div> </div> <div style="clear:both;"></div> <div id="footer"> Footer ada disini </div> </div> </body> </html>
Langkah keempat :
Masukkan kode berikut ke bagian <head>............</head> pada index.php. Ini berfungsi untuk memberi judul dan deskripsi website utama Anda.
<head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title> <?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?> </title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); wp_head(); ?> </head>Langkah Kelima :
Masukkan kode ini di file index.php. ini berfungsi untuk memberi judul website, deskripsi, menu dan judul halaman pada webste wordpress yang kita buat:
<div id="header">
<h1 class="blogtitle"><?php bloginfo('name');?></h1>
<p class="description"><?php bloginfo('description');?></p>
<div id="menu">
<ul>
<li><a href="<?php bloginfo('url');?>">Home</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
</div>
berikut adalah kode css nya, masukkan pada style.css.blogtitle {
font-size:30px;
padding:30px 0 0 30px;
margin:0;
}
.description {
font-size:14px;
padding-left: 30px;
margin:0;
}
#menu {
margin-top:10px;
padding:0;
background:#000;
height:30px;
}
#menu ul {
margin: 0;
padding: 5px 0 0 15px;
list-style: none;
display: block;
}
#menu li , #menu li a{
float: left;
position: relative;
margin-right:10px;
color:#ffffff;
text-decoration: none;
}
bersambung ke postingan selanjutnya >>
0 comments:
Post a Comment
Ayo diskusi disini ..