Bikin Tema WP: Layout

Jika kemarin anda sudah belajar menentukan zona-zona di blog termasuk juga membuat desain sementara blog. Saat-nya kita mengatur wilayah tiap zona. Seperti diketahui, kemarin kita cuma memberi nama saja zona-zona yang ada menggunakan tag DIV. Nah, hari ini kita akan menentukan lebar masing-masing zona lengkap dengan tata letaknya sehingga tampilannya nanti akan mendekati design awal kita.

Untuk itu, kita akan buka kembali file index.php dan meminta file tersebut untuk mengakses file style.css yang akan menjadi pemandu dalam tata letak dan tampilan blog nanti. caranya gimana? Perhatikan baris 1 -4 di file index.php yang sudah kita buat kemarin. Disana terlihat kode seperti ini:

<html>
   <head>
      <title>Theme Ujicoba</title>
   </head>

Nah, untuk memanggil style.css, kita tinggal menambahkan sebaris kode ini sebelum tag </head>:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Disana terdapat sebuah fungsi WordPress yaitu bloginfo. Fungsi ini berguna untuk menampilkan informasi blog termasuk nama, deskripsi, rss, dll. Karena kita akan memanggil file style.css theme, maka kita gunakan perintah <?php bloginfo( 'stylesheet_url' ); ?>

Simpanlah file index.php yang sudah kita tambahin style. Biar jelas, hasil akhir kodenya nanti akan seperti ini:

<html>
   <head>
      <title>Theme Ujicoba</title>
      <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
   </head>

Sampai sini paham ya?

Oke, berikutnya kita beralih ke style.css dan mulai menentukan luas wilayah tiap-tiap zona. Zona awal yang kita tentukan adalah wrap. Fungsi zona ini untuk menentukan luas wilayah keseluruhan blog. Ibaratnya, ini pagar paling luar lah. Masukkan ini di baris paling bawah style.css

#wrap {
  border:solid 1px #000;
  width:900px;
  margin:0 auto;
  padding:10px;
  }

Sekarang simpan dan coba lihat blog anda. Harusnya sudah ada garis hitam di batas terluar teritori blog. Dan kotaknya tepat berada di tengah-tengah browser. Dari perintahnya kira-kira jelaskan? border untuk nentukan garis tepi, width=lebar, margin jarak antara border dengan tepi browser atau elemen lain. Padding untuk menentukan jarak antara border dengan tulisan.

Seharusnya tampilan blog anda akan seperti ini (klik untuk memperbesar):

Makin seru ya? Yuk, kita tangani bagian headernya. Untuk header ini, kita tentukan saja tingginya. Nantinya bisa kita isi juga lho dengan gambar. Tapi untuk sementara kita bikin jarak dulu biar ndak puyeng ๐Ÿ™‚ lagi-lagi tambahkan kode ini di bagian paling bawah style.css lalu simpan

#header {
  height:120px;
  background:#cccccc;
  }

Ada 2 perintah lagi yang kita masukkan yaitu height untuk menentukan tinggi header. Dalam contoh diatas saya buat 120 pixel. Untuk lebarnya tidak kita tentukan karena dia akan mengikuti wrap yang sudah kita tentukan di atas tadi. Kemudian perintah background adalah menentukan latar belakang zona header ini. Dalam contoh ini saya buat warna abu-abu. Untuk kode-kode warna lain, anda bisa lihat di: html-color-codes.com

Harusnya sekarang kalau direfresh blog anda, maka akan ada box abu-abu di bagian headernya. Tidak usah screen shot ya? Udah bisa bayangkan kan? Kalau belum ya lihat aja blog anda sendiri.. xixixi..

Berikutnya adalah bagian content. Untuk maincontent kita cuma akan berikan perintah untuk mengambil jarak 10px dari header sehingga kelihatan putih wilayahnya nanti akan mengikuti isinya yaitu content dan sidebar. Kita langsung kerjakan ketiganya ya di style.css

#maincontent {
  margin-top:10px;
  }
#content {
  width:590px;
  background:#FFCC00;
  float:left;
  }
#sidebar {
  width:300px;
  background:#FF9900;
  float:left;
  margin-left:10px;
  }

Ada satu perintah tambahan lagi yaitu float:left;. Perintah ini dipakai untuk membuat elemen dibawahnya mengalir ke sebelah kanan. Maksudnya left adalah elemen yang bersangkutan ada di kiri dan yang lain ada di kanan ๐Ÿ™‚

Jika lihat blog anda sekarang, harusnya bagian tengah sudah terpecah jadi dua bagian. Untuk content dan untuk sidebar. Yuk, kita terusin lagi menambahkan style untuk zona lebar, kiri dan kanan yang ada di dalam sidebar

#lebar {
  background:#FF3300;
  margin-bottom:10px;
  }
#kiri {
  background:#660000;
  width:145px;
  float:left;
  margin-right:10px;
  }
#kanan {
  background:#660000;
  width:145px;
  float:left;
  }

Perintahnya udah ngerti semua kan? Gak ada yang baru ๐Ÿ™‚ Kalau dilihat sekarang, mustinya sudah mulai mirip deh desain blog kita. Cuma masih warna-warni.. hehehe.. Gpp, ini biar anda lebih mudah melihat elemen-elemennya. Untuk footernya kita biarkan aja gitu ya? Dan inilah hasil akhirnya sampai pelajaran ini

Oke, biar ada waktu untuk praktek, silahkan deh dicoba dulu di rumah. Insya Allah besok kita lanjutin dengan perintah-perintah yang lebih keren lagi.

PS: Jangan lupa ngajak teman untuk ikutan belajar ya? Biar seru!

Dicari dengan kata kunci:

bikin tema wordpress,membuat theme wp,membuat layout dengan css,membuat template wordpress dengan dreamweaver,tema wp,cara edit template wordpress dengan dreamweaver,fungsi layout,membuat theme wordpress dengan dreamweaver,tema layout,layout tema

84 thoughts on “Bikin Tema WP: Layout

  1. grandchief

    Hum berhasil mas,tapi untuk edit kode css yang pertama kok kayaknya gagal mas ya karena nggak ada garis yang muncul,apa karena bordernya berwarna putih ya?

    1. Bony

      Ada yang error di perintah memanggil file style.css.
      Di tutorial tertulis:
      ( โ€˜stylesheet_urlโ€™ )
      Saya ganti menjadi:
      (โ€˜stylesheet_urlโ€™)
      Perbedaannya ada di spasi.

  2. iwan

    kalau pake dreamweaver bagaimana mas??? lebih gampang kah???
    soal na ane dah lupa script2 na html nih…..

    1. admin Post author

      Gak pernah pakai dreamweaver sih, jadi nggak tahu ya. Tapi kalau yang dipakai mode HTML-nya ya bisa aja.. hehehe..

  3. anggi nasution

    makasih ya mas buat tutorialnya.

    Saya sedang coba buat menu drop down mas di wordpress,
    kasih tutorialnya dong mas, secara step by step…..???

    maksih lagi ya mas
    salam

  4. umar

    makasih mas lutvi saya memang lagi mendalami wordpress…sangat membantu sekali…semoga makin bertambah ilmunya…..

  5. agus

    mas lutvi saya mau menanyakan kok garisnya g muncul ya?? apa ada yang kurang dari kode css yang saya tulis :

    /* 
     Theme Name: Theme Gue 
     Theme URI: http://wordpress.or.id/ 
     Description: Theme Pertama yang Gue Buat untuk Bangsa Indonesia Tercinta 
     Author: Lutvi Avandi 
     Author URI: http://lutviavandi.com/ 
     Version: 1.0 
     */  
     #wrap {  
       border:solid 7px #CC0;  
       width:900px;  
       margin:0 auto;  
       padding:10px;  
       }
    

  6. ekaperintis

    Mau tanya kakak, kalau penulisan id dalam style.css nya tidak berurutan, maksudnya tidak mengikuti susunan yang ada, misalnya

    kode asal :
    #wrap {
    border:solid 1px #000;
    width:900px;
    margin:0 auto;
    padding:10px;
    }

    #header {
    height:120px;
    background:#cccccc;
    }

    kemudian saya ubah menjadi #header dulu baru #wrap dulu,,,

    Apakah bermasalah atau tidak ?

    Makasih

  7. masher

    mas, saya masih belum paham dengan perintah #lebar, #kiri, dan #kanan. mengapa perintah tersebut sudah terdefinisi sbg sidebar bukan sbg header, content atau yg lainnya? makasih atas balasannya.

    1. Lutvi Avandi Post author

      tanda pagar didepan string pada CSS itu artinya ID atau identitas. Dan yang namanya identitas ya sesuka yang ngasih nama ๐Ÿ™‚ Mau pakai nama #masher1 #masher2 #masher1000 ya nggak ada masalah. Jadi itu bukan perintah. Nah, yang di dalam kurung kurawal itulah baru perintah yang akan dijalankan oleh setiap tag yang memiliki identitas yang disebutkan ๐Ÿ™‚ Silahkan googling dan dalam soal basic CSS biar makin paham

  8. TheFirst

    mas, hasilnya di mozilla sama ie kok berbeda ya? pake mozilla sama hasilnya sprti contoh gmbr d atas tapi, setelah dibuka dngn ie wrap sama sidebarnya terletak di sebelah kiri semua. kira2 kesalahan terletak di mana ya? thanks…

  9. Dany

    mas perintah <link rel="stylesheet" type="text/css" media="all" href="” />
    gagal, file style.css nya tidak terbaca, saya menggunakan dreamweaver cs5.5

  10. opick

    itu karena copy paste ya codenya?
    sebagian hasil copy paste kalo outputnya dilihat view source-nya maka akan terdapat tambahan simbol2 yg tidak bisa dibaca dibrowser..

    sebaiknya anda ketikan saja codenya manual, sekalian belajar css juga lho…
    Ok.

    1. Dany

      tp setelah saya coba di notepad++ bisa, akhirnya saya coba lanjutin dan berhasil hhehe !! thkz udh berbagi !!

  11. bendol

    saya ada masalah pada tag id=”wrap”

    yg mana kalau aku status login (admin)

    wrap tsb bergeser kebawah kira2 30px (saya kira mirip2 margin) tapi kalau saya logout wrapnya kembali normal yaitu nempel di bagian paling atas kata lain g ada jarak antara top dan wrap

  12. Bony

    Mas, ada yang error di perintah memanggil file style.css.
    Di tutorial tertulis:
    ( ‘stylesheet_url’ )
    Saya ganti menjadi:
    (‘stylesheet_url’)
    Perbedaannya ada di spasi.
    Bukan mengajari, hanya untuk koreksi saja jika ada rekan2 lainnya yang mengalami error serupa.
    Salam,
    Bony

  13. sani

    kenapa saya belum berhasil ya..?tidak ada yang muncul sama sekali kalo script : <link rel="stylesheet" type="text/css" media="all" href="” /> di masukan di bagian headernya. knapa ya?

  14. david sianipar

    Mohon bantuan, bagaimana caranya mengganti web yg sudah online dengan menggunakan dreamweaver ingin kami ganti dengan web berbasis wordpress, terimakasih

  15. Ugie

    Mas Lutvi…. makasih banyak tutornya… punyaku dah di coba kok malah syntaxnya error…. error muncul pas saya masukil

    <head><title>
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'; ?>"/>
    </title>
    </head>

    kenapa yaaa?? mohon bantuannya…

  16. Ugie

    tolong donk mas kok syntaxnya masih error terus kenapa yaa??… padahal udah sama semua…

    uji coba
    <link rel="stylesheet" type="text/css" media="all" href="

    <div id="header"
    Lokasi Header Disini

    <div id="maincontent"

    Artikel akan muncul disini

    iklan kotak ada disini

    Menu sidebar kiri disini

    <div id="kanan"
    menu-menu sidebar kanan disini

    Footer ada disini

  17. Ugie

    tolong donk mas kok syntaxnya masih error terus kenapa yaa??โ€ฆ padahal udah sama semuaโ€ฆ tolong donk mas kok syntaxnya masih error terus kenapa yaa??โ€ฆ padahal udah sama semuaโ€ฆ

  18. Ugie

    tolong donk mas kok syntaxnya masih error terus kenapa yaa??โ€ฆ padahal udah sama semuaโ€ฆ

    <html>
    <head><title>uji coba</title>
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' );"/>
    </head>
    <body>
    <div id="wrap">
      <div id="header"
        Lokasi Header 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 sidebar kiri disini
        </div>
        <div id="kanan"
        menu-menu sidebar kanan disini
        </div>
      </div>
      </div>
      <div style="clear:both;">
      </div>
      <div id="footer">
        Footer ada disini
      </div>
    </div>
    </body>
    </html>
    
    </body>
    </html>
    

    1. ann

      di baris ke tiga
      <?php bloginfo( 'stylesheet_url' )
      spasi di ( 'stylesheet_url' ) diilangin jadi ('stylesheet_url')

      <div id="header"
      belum ada tanda div penutup, seharusnya , ke bawahnya jg masih ada kode dv yg belum ditutup.

      lanjut mas lutvi ๐Ÿ™‚

  19. membuat blog keren

    mas saya mau tanya nie ..
    saya pernah baca sebuah tutor yang cara memangginl file CSS nya kaya gini katanya ..

    sedikit membingunkan ๐Ÿ˜€ .

    apa ada perbedaannya y ?

  20. iqbal

    mantap juragan..
    jadi makin melek nih.
    makasih ilmunya. semoga menjadi amal ibadah amiin. ๐Ÿ™‚
    tetap semangat mastah ^:)^

  21. susy

    gimana caranya munculin gambar di halaman awal?
    kayak disini ada gambar reog?
    bisa tolong ajarkan saya?

  22. Lohan

    mantep.. dr kmarin gak mudeng” saya..
    trus karena gak mudeng saya coba” praktek & copypaste di notepad C++, eh lama” jadi mudeng…
    Baca tanpa praktek = 0

  23. Fariza

    Syukurlah setelah 63 tahun RI Merdeka, baru nemu tutorial WP Theme yang gamblang, lanjut mas bro, semangat belajar ah mumpung lagi banyak waktu nih, thanks

  24. mrrie

    mas gmna caranya manggil style.css tanpa melalui php?? maksud sy ky metode biasa klo manggil css dari html.

  25. bayu

    <link rel="stylesheet" type="text/css" media="all" href="” />

    stylesheet_url artinya manggil style.css ya bang? dengan media=”all” brarti manggil semua file yg extensinya .css .
    kalo style.css ane ditaroh di folder css, cara manggilnya gimana bang?
    gini (‘stylesheet_url/css’) ato gini (‘css/stylesheet_url’) ato biasa kaya gini ato yang lainnya?
    mohon pencerahannya….

    Thanks
    Bayu N

  26. Amra

    mantap gan…. untuk di opera bagus tampilannya kayak screen shoot di atas, tapi kalo pake mozilla dan chrome jadi berantakan, side bar kanan jadi numpuk di sidebar kiri, knpa itu ya? thank u bro….

    1. JAH

      sama kayak agan diatas nih? sepertinya ada yang salah dengan cssnya jadi ga beraturan di mozila dan chrome. mungkin ada yang bisa kasih pencerahan?

  27. Bagus

    mau tnya mas, klau file css didalam folder css dan css lebih dari 1 bagaimana ya? udah cari digoogle blum nemu juga mas, Terima Kasih..

  28. Dandi

    mas saya sudah sampai tahap ini, tapi kendalanya garisnya ndak keluar saya coba cari solusinya blom nemu juga, mungkin bisa di bantu

    <html>  
       <head>  
          <title>Theme Ujicoba</title>  
          <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />  
       </head> 
       <body>  
          <h1>Judul Artikel</h1>  
          <p>Artikel yang ingin dimunculkan</p>  
       </body>  
    </html>

    /* 
    Theme Name: webset
    Author : kangdola
    Email : cak di
    Version: 0.1
    */
    #wrap {  
      border:solid 1px #000000;  
      width:900px;  
      margin:0 auto;  
      padding:10px;  
      }
        #header {  
          height:120px;  
          background:#cccccc;  
          }  
    

  29. important link

    I simply want to tell you that I am all new to blogs and really loved you’re page. Probably Iโ€™m planning to bookmark your blog post . You amazingly have awesome well written articles. Regards for sharing with us your webpage.

  30. Morton Pessin

    Hi there! I could have sworn Iโ€™ve visited this site before but after looking at some of the posts I realized itโ€™s new to me. Regardless, Iโ€™m certainly happy I came across it and Iโ€™ll be bookmarking it and checking back often!

  31. Dominic Bias

    Hi, I do deem this is an first-rate web situate. I stumbledupon it I will resume nonetheless yet again while i have bookmarked it. Capital and freedom is the supreme route to change, may you live full and continue to guide others.

  32. Nicholas Hail

    It’s appropriate time to make some plans for the future and it’s time to be happy. I’ve read this post and if I could I want to suggest you few interesting things or suggestions. Maybe you can write next articles referring to this article. I want to read even more things about it!

  33. Logan Wiginton

    Heya iโ€™m for the first time here. I found this board and I find It really useful & it helped me out a lot. I hope to give something back and help others like you helped me.

Comments are closed.