Cara Membuat Theme Wordpress Part 3

Kita lanjutkan ke Cara Membuat Theme Wordpress Part 3 disini kita akan membuat index.php untuk dijadikan halaman dasar dari theme wordpress kita. Masukan script code dibawah ini ke index.php yang telah kita buat sebelumnya pada Cara Membuat Theme Wordpress Part 2.

<html>
   <head>
      <title>Theme seo-aku.blogspot.com</title>
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
   </head>
   <body>
      <div id="wrapper">
       <div id="header">
        Lokasi header disini
     </div>
     <div id="contentutama">
        <div id="content">
         Artikel nanti tampil disini
      </div>
      <div id="sidebar">
         <div id="frame">
            Frame ada disini
         </div>
         <div id="kolom">
            kolom tampil sidebar disini
         </div>
      </div>
     </div>
     <div style="clear:both;"></div>
     <div id="footer">
        Footer hadir disini
     </div>
    </div>
   </body>
</html>

lalu save dan lihat hasilnya di localhost/wordpress dan hasilnya cm ada tulisan2 saja, tenang dulu karena untuk memposisikan objek diperlukan style.css, dibawah ini masukan script code ke style.css yang pernah kita buat sebelumnya.

/*
Theme Name: SEO AKU Themes
Theme URI: http://seo-aku.blogspot.com
Description: Sebuah theme SEO untuk wordpress
Author: M.Salman
Author URI: http://seo-aku.blogspot.com
Version: 1.0
Tags: SEO AKU theme wordpress, seo garut, seo-aku.blogspot.com
.
SEO AKU themes is copyrighted by M.Salman.
.
*/
#wrapper {
border:dashed 1px #000;
width:980px;
margin:0 auto;
padding:10px;
}
#header {
height:150px;
background:#CCCCFF;
}
#contentutama {
margin-top:10px;
}
#content {
width:640px;
background:#F0F0F0 ;
float:left;
}
#sidebar {
width:330px;
background:#00FF99;
float:left;
margin-left:10px;
}
#frame {
background:#FF99FF;
margin-bottom:5px;
}
#kolom {
background:#CCFF00;
width:320px;
float:left;
margin-right:5px;
margin-left:5px;
}
#footer {
background: #EDEDED;
text-align:center;
margin-top:20px;
padding:10px;
}

Ok lalu save style.css kita dan lihat tampilanya akan menjadi seperti gambar dibawah ini.

Ok Cara Membuat Theme Wordpress Part 3 saya cukupkan sekian, bersambung ke Cara Membuat Theme Wordpress Part 4

Rabu, 23 Januari 2013

Cara Membuat Theme Wordpress Part 3

Tidak ada komentar:

Posting Komentar