Mendesain Template | KafeinKode

Kursus bahasa arab berkualitas

Mendesain Template

Anonim 2 Comments



Tahap satu sampai tahap tiga dalam pembuatan template WordPress sudah kita lalui, sekarang kita memasuki tahap keempat dalam pembuatan template WordPress, yaitu membuat kerangka template atau bisa juga kita sebut dengan mendesain template WordPress. Pada tahapan ini kita belum mulai bermain-main dengan JavaScript, kita baru hanya sebatas bermain-main dengan HTML dan CSS saja ditambah lagi sedikit bahasa pemrograman PHP, tetapi pada tahapan yang keempat ini, pembahasannya akan sangat berkaitan erat dengan pembahasan tahap ke dua dalam membuat template WordPress, Anda bisa membaca tahap kedua dalam membuat template WordPress di http://www.kafeinkode.com/mengenal-elemen-elemen-website/.

Dalam membuat template WordPress, ada tahapan di mana kita harus mendesain template WordPress, mendefenisikan dan menentukan tata letak elemen-elemen website, di manakah letak main wrapper, apakah di kanan atau di kiri, bagaimana style headernya, tingginya, warnanya, lalu di manakah letak sidebar wrapper, di kanan atau di kiri? untuk lebih jelasnya Anda bisa mempelajari tutorial di bawah ini, sebelumnya Saya asumsikan Anda sudah memahami HTML dan CSS biar gak pusing.

Mendesain-Template

Mendesain template WordPress

Step 1: Langkah pertama dalam mendesain template WordPress yang harus kita lakukan adalah mendesain halamannya terlebih dahulu dalam satu file. Taruhlah kita buat sebuah file terlebih dahulu lalu kita beri nama tes.html. Kemudian kita tuliskan kode HTML dan CSS di bawah ini:

<!DOCTYPE html>
<html>
<head>
    <title></title>




<style type="text/css">
       body{background: black; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}

/* Wrapper 
-----------*/
.outer-wrapper{width:1130px;margin:0 auto;background: brown; ;margin-top:0}
header{width:1070px;height:120px;margin:0 auto; background: green;}
.sidebar-wrapper{height: 200px; float:right;width:310px;margin-right:30px;margin-top:20px; background:blue;}
.main-wrapper{height: 200px; float:left;width:740px;margin-left:30px;margin-top:20px; background: yellow;}
footer{text-align: center; background: white; margin-top: 20px;}
.clear{clear: both}
/* End Wrapper 
--------------*/

    </style>




</head>
<body>




<div class="outer-wrapper">




<header>




<h1>ini Judul Header</h1>








<h2>ini Deskripsi header</h2>




     </header>









<div class="main-wrapper">


ini elemen main wrapper 

</div>









<div class="sidebar-wrapper">


ini elemen sidebar wrapper 

</div>








<div class='clear'></div>




 




<footer>              
                ini elemen footer Copyright © 2014-2015 : kafeinkode - All Rights Reserved Template designed and developed by <a class="footer-text" href="https://facebook.com/jenengesaadiki">Saad Abdurrazaq</a>       
    </footer>




 </div>




<!-- outer-wrapper -->
</body>
</html>

Simpan filenya. Kemudian jalankan file tersebut dengan mengklik kanan pada filenya, kemudian pilih “Open with firefox browser” atau bisa juga menggunakan chrome. Setelah Anda buka file tersebut, maka Anda akan melihat tampilan dari file tersebut seperti ini, Anda bisa mengubah desainnya sesuka Anda, Anda juga bisa mendesain template WordPress sesuka Anda.
desweb
inilah desain awal suatu template. Sekarang kita beralih ke langkah yang kedua.

 

Step 2: Seperti yang telah kita ketahui pada pembahasan sebelumnya, tepatnya pada tahap pertama dalam membuat template WordPress yaitu mengenal hirarki template WordPress, di situ kita dapat mengetahui bahwasanya dalam membuat dan mendesain template WordPress dibutuhkan setidaknya 18 file, oleh karena itu, kita akan memecah belahkan kode HTML dan CSS yang telah kita tuliskan pada step 1, lalu kemudian kita akan menempatkan potongan-potongan kode tadi di setiap file yang akan kita tentukan di bawah ini:

 

Step 3: Pada langkah yang ketiga ini, kita akan coba memecah belah kode HTML dan CSS yang telah kita tulis pada step 1, pertama-tama bukalah file header.php, lalu letakklanlah kode ini:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>



<div class="outer-wrapper">

simpan filenya, dan biarkan seperti itu dulu.

 

Step 4: Buka file index.php, lalu letakkanlah potongan kode HTML di bawah ini, lalu simpan dan bairkan seperti itu dulu:




<div class="main-wrapper">


ini elemen main wrapper 

</div>



karena index.php merupakan elemen main-wrapper, maka kita hanya menuliskan kode HTML dari main wrappernya saja.

 

Step 5: Buka file sidebar.php, lalu letakkan kode di bawah ini kemudian save.




<div class="sidebar-wrapper">


ini elemen sidebar wrapper 

</div>



 

Step 6: Buka file footer.php, lalu letakkan potongan kode HTML di bawah ini:

</div>



<!-- outer-wrapper -->
</body>
</html>

fix! tata letak layoutnya sudah kita pecah-pecah dan kita bagi-bagi, tinggal tiga step lagi yang harus kita lakukan pada tahapan yang keempat ini.

 

Step 7: Ada satu yang masih kurang dalam mendesain template WordPress, yaitu kode CSSnya. Buka file style.css, lalu letakkan kode CSS di bawah ini:

body{background: black; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}

/* Wrapper
-----------*/
.outer-wrapper{width:1130px;margin:0 auto;background: brown; ;margin-top:0}
header{width:1070px;height:120px;margin:0 auto; background: green;}
.sidebar-wrapper{height: 200px; float:right;width:310px;margin-right:30px;margin-top:20px; background:blue;}
.main-wrapper{height: 200px; float:left;width:740px;margin-left:30px;margin-top:20px; background: yellow;}
footer{text-align: center; background: white; margin-top: 20px;}
.clear{clear: both}
/* End Wrapper
--------------*/

 

Step 8: Fix! Semua kode HTML dan CSS yang telah kita tulis pada step pertama telah kita pecah-pecahkan dan kita tempatkan setiap potongan kodenya pada file-file yang bersangkutan, artinya kita telah melakukan tahapan ini dengan sempurna, ada beberapa langkah lagi yang harus kita selesaikan, salah satunya yaitu, menghubungkan file style.css ke semua file yang telah kita buat, atau bisa juga kita katakan “Meload file style.css agar terlihat stylenya”. Letakkan kode ini tepat dibawah kode </head> di file header.php

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen" />

kode tersebut berfungsi untuk memanggil lalu meload file style.css.

simpan filenya, sekarang coba reload blognya, bagaimana tampilannya? jika memang tampilan blognya masih kosong alias null, atau memang tampilan blognya tidak sempurna, jangan panik! Ada satu langkah lagi, yaitu langkah terakhir yang belum kita selesaikan dalam mendesain template WordPress. Apa itu?

 

Step 9: Make your logic!! Coba perhatikan, file index.phpnya, apa fungsi dari file index.php? Ada yang salah dengan kodenya? Atau ada yang kurang? Jika Anda memang sudah benar-benar memahami hirarki template WordPress dan logic Anda cukup bagus, Anda akan mengetahui bahwa pemanggilan file header, sidebar dan footer belum Anda lakukan di index.php, oleh karenanya, kita akan melakukan pemanggilan file header, sidebar, dan footer di file index.php.
berikut hasil akhir kode yang tertulis di file index.php setelah dilakukan pemanggilan file header, sidebar dan footer.

<?php get_header(); ?>



<div class="main-wrapper">


ini elemen main wrapper 

</div>



<?php get_sidebar(); ?>
<?php get_footer(); ?>

get_header();: Merupakan suatu kode yang digunakan untuk memanggil file header.php.
get_sidebar();: Merupakan suatu kode yang digunakan untuk memanggil file sidebar.php.
get_footer();: Merupakan suatu kode yang digunakan untuk memanggil file footer.php.

Sekarang, coba lihat hasilnya! Pastinya tampilannya sudah persis dengan desain awal kan? Jika ya, berarti tahap keempat dalam membuat template WordPress yaitu mendesain template WordPress sudah fix. Sekarang kita lanjut ke tahap kelima.

Tahapan lengkap cara membuat template WordPress, bisa Anda lihat di http://www.kafeinkode.com/membuat-template-wordpress/

 

Kursus bahasa arab berkualitas

[shareaholic app="recommendations" id="20730868]

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Pingback: Membuat Template WordPress | KafeinKode

  2. admin@mixotekno.com'

    mantap sekali artikelnya gan, lengkap dan mudah di praktekan, ijin coba buat blog saya mixotekno.com. Salam kafeinkode!!

    Reply