Jumat, 30 November 2012

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:





view plaincopy to clipboardprint?




    

  1. <html>  
    2. 

  2.    <head>  
    3. 

  3.       <title>Theme Ujicoba</title>  
    4. 

  4.    </head>  
    5.

Nah, untuk memanggil style.css, kita tinggal menambahkan sebaris kode ini sebelum tag</head>:





view plaincopy to clipboardprint?




    

  1. <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />  
    2.

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:





view plaincopy to clipboardprint?




    

  1. <html>  
    2. 

  2.    <head>  
    3. 

  3.       <title>Theme Ujicoba</title>  
    4. 

  4.       <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />  
    5. 

  5.    </head>  
    6.

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





view plaincopy to clipboardprint?




    

  1. #wrap {  
    2. 

  2.   border:solid 1px #000;  
    3. 

  3.   width:900px;  
    4. 

  4.   margin:0 auto;  
    5. 

  5.   padding:10px;  
    6. 

  6.   }  
    7.

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





view plaincopy to clipboardprint?




    

  1. #header {  
    2. 

  2.   height:120px;  
    3. 

  3.   background:#cccccc;  
    4. 

  4.   }  
    5.

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





view plaincopy to clipboardprint?




    

  1. #maincontent {  
    2. 

  2.   margin-top:10px;  
    3. 

  3.   }  
    4. 

  4. #content {  
    5. 

  5.   width:590px;  
    6. 

  6.   background:#FFCC00;  
    7. 

  7.   float:left;  
    8. 

  8.   }  
    9. 

  9. #sidebar {  
    10. 

  10.   width:300px;  
    11. 

  11.   background:#FF9900;  
    12. 

  12.   float:left;  
    13. 

  13.   margin-left:10px;  
    14. 

  14.   }  
    15.

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





view plaincopy to clipboardprint?




    

  1. #lebar {  
    2. 

  2.   background:#FF3300;  
    3. 

  3.   margin-bottom:10px;  
    4. 

  4.   }  
    5. 

  5. #kiri {  
    6. 

  6.   background:#660000;  
    7. 

  7.   width:145px;  
    8. 

  8.   float:left;  
    9. 

  9.   margin-right:10px;  
    10. 

  10.   }  
    11. 

  11. #kanan {  
    12. 

  12.   background:#660000;  
    13. 

  13.   width:145px;  
    14. 

  14.   float:left;  
    15. 

  15.   }  
    16.

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
Diposting oleh di Tidak ada komentar:

Kamis, 29 November 2012

Membuat Custom Background:WP Themes


Sepertinya makin seru aja nih kegiatan kita utak-atik Themes WordPress. Dan kali ini saya ingin tunjukkan sebuah jurus lagi untuk membuat themes anda lebih gaya dan full fungsi. Apalagi kalau bukan custom background. hehehe..

Walaupun hasil akhirnya nanti sangat keren, tapi bikinnya ternyata gampang banget. Bahkan cuma perlu edit 1 file doang. Apalagi kalau bukan file functions.php yang selama ini sudah menemani kita dalam mempercanggih tampilan blog. Apa sih kode rahasianya? Nih, copy dan paste ke functions.php anda ya


    

  1. add_custom_background();  
    2.
Hah? cuman gitu doang mas? Trus apalagi yang diedit?
Karena background itu dimana-mana cuma ada satu, jadi kita ndak perlu ngasih tahu WordPress dimana backgroundnya hehehe.. Dia sudah cukup cerdas untuk menebaknya.
Tapi setelah saya coba, ternyata ada masalah nih dengan theme kita saat kita pasangin fungsi ini. Masalahnya yaitu, background bagian dalam ikut-ikutan berubah warna. Maklum, kemarin waktu bikin kita ndak ngisi dengan warna sehingga dianggap transparant. Nah, kita perbaikin yuk.
Buka style.css dan cari kode ini:





view plaincopy to clipboardprint?




    

  1. #wrap {  
    2. 

  2.   border:solid 1px #000;  
    3. 

  3.   width:900px;  
    4. 

  4.   margin:0 auto;  
    5. 

  5.   padding:10px;  
    6. 

  6. }  
    7.
lalu kita tambahin deh kode warna latar belakang untuk tulisannya, misalnya putih sehingga jadinya seperti ini:





view plaincopy to clipboardprint?




    

  1. #wrap {  
    2. 

  2.   border:solid 1px #000;  
    3. 

  3.   width:900px;  
    4. 

  4.   margin:0 auto;  
    5. 

  5.   padding:10px;  
    6. 

  6.   background:#ffffff;  
    7. 

  7. }  
    8.
Diposting oleh di Tidak ada komentar:

Rabu, 28 November 2012

Menginformasikan letak sidebar widget di Themes:di WP



Berikutnya kita akan menunjukkan kepada WordPress dimana letak sidebarnya. Gak mungkinkan kita cuma daftarin aja widgetnya tapi nggak kita tunjukkan mau muncul dimana. Konyol dong jadinya. Bagaimana caranya?
Buka file index.php dan kita cari kode sidebar kita yang dahulu. Kalau tidak salah, kodenya kemarin seperti ini:





view plaincopy to clipboardprint?




    

  1. <div id="sidebar">  
    2. 

  2.   <div id="lebar">  
    3. 

  3.     Iklan kotak ada disini  
    4. 

  4.   </div>  
    5. 

  5.   <div id="kiri">  
    6. 

  6.     Menu-menu sidebar kiri ada disini  
    7. 

  7.   </div>  
    8. 

  8.   <div id="kanan">  
    9. 

  9.     Menu-menu sidebar kanan ada disini  
    10. 

  10.   </div>  
    11. 

  11. </div>  
    12.
Disinilah kita perintahkan WordPress meletakkan widget sidebar. Dan perlu diingat, walaupun namanya sidebar widget, tapi tidak menutup kemungkinan untuk diletakkan di tempat lain lho (misalnya header atau footer). Karena kitalah yang menentukan dimana widget tersebut akan muncul.
Ada 2 cara untuk menampilkan widget.
Pertama widget baru muncul kalau ada isinya. Kalau ndak ada isinya dia hilang seolah-olah tidak ada. Cara ini bisa kita terapkan di sidebar lebar. Kita asumsikan, sidebar lebar digunakan untuk menampilkan iklan banner atau adsense. Nah, kalau tidak ada iklan sama sekali, maka sidebar itu hilang sehingga hanya memunculkan sidebar kiri dan kanan saja. Maka kita ganti kode untuk menampilkan sidebar lebar dengan kode berikut:





view plaincopy to clipboardprint?




    

  1. <?php if ( is_active_sidebar( 'sidebar-lebar' ) ) : ?>    
    2. 

  2. <div id="lebar">  
    3. 

  3.   <ul>            
    4. 

  4.   <?php dynamic_sidebar( 'sidebar-lebar' ); ?>      
    5. 

  5.   </ul>  
    6. 

  6. </div>  
    7. 

  7. <?php endif; ?>  
    8.
Lihat kan? Kita gunakan fungsi IF untuk melakukan pengecekan apakah sidebar lebar ada isinya atau tidak (maksudnya widgetnya terisi atau tidak). Kalau ada, maka munculkan isinya. Kalau ndak ada ya hilangkan beserta DIV-nya sehingga tampilan kotak lebarnya ikut hilang. Gak lucu kok kalau kita cuma menampilkan kotak kosong doang.
Fungsi <?php dynamic_sidebar( 'sidebar-lebar' ); ?> kita pakai untuk memunculkan isi sidebar widget. Dalam hal ini sidebar widget dengan ID sidebar-lebar.
Cara kedua menampilkan widget adalah jika ada isinya, maka tampilkan isinya. Tapi jika tidak ada isinya, maka tampilkan isi default. Jadi lokasi widgetnya tidak pernah kosong. Ini akan kita terapkan untuk sidebar kiri dan kanan. Kodenya seperti ini:





view plaincopy to clipboardprint?




    

  1. <div id="kiri">  
    2. 

  2.   <ul>  
    3. 

  3.   <?php if ( ! dynamic_sidebar( 'sidebar-kiri' ) ) : ?>  
    4. 

  4.     <!-- KODE-KODE DEFAULT UNTUK SIDEBAR KIRI -->  
    5. 

  5.   <?php endif; ?>  
    6. 

  6.   </ul>  
    7. 

  7. </div>  
    8. 

  8. <div id="kanan">  
    9. 

  9.   <ul>  
    10. 

  10.   <?php if ( ! dynamic_sidebar( 'sidebar-kanan' ) ) : ?>  
    11. 

  11.     <!-- KODE-KODE DEFAULT UNTUK SIDEBAR KANAN -->  
    12. 

  12.   <?php endif; ?>  
    13. 

  13.   </ul>  
    14. 

  14. </div>  
    15.
Nah, sudah paham kan? Sekarang tinggal kreatifitas anda sendiri yang menentukan isian defaultnya apa. Inilah kode sidebar yang saya buat dengan isian default untuk sidebar kiri adalah form search dan arsip, sedangkan untuk sidebar kanan saya isi meta. Cekidot !!





view plaincopy to clipboardprint?




    

  1. <div id="kiri">  
    2. 

  2.   <ul>  
    3. 

  3.   <?php if ( ! dynamic_sidebar( 'sidebar-kiri' ) ) : ?>  
    4. 

  4.   <li id="search" class="widget-container widget_search">  
    5. 

  5.     <?php get_search_form(); ?>  
    6. 

  6.   </li>  
    7. 

  7.   
    8. 

  8.   <li id="archives" class="widget-container">  
    9. 

  9.     <h3 class="widget-title">Arsip</h3>  
    10. 

  10.     <ul>  
    11. 

  11.       <?php wp_get_archives( 'type=monthly' ); ?>  
    12. 

  12.     </ul>  
    13. 

  13.   </li>  
    14. 

  14.   <?php endif; ?>  
    15. 

  15.   </ul>  
    16. 

  16. </div>  
    17. 

  17. <div id="kanan">  
    18. 

  18.   <ul>  
    19. 

  19.   <?php if ( ! dynamic_sidebar( 'sidebar-kanan' ) ) : ?>  
    20. 

  20.   <li id="meta" class="widget-container">  
    21. 

  21.     <h3 class="widget-title">Meta</h3>  
    22. 

  22.     <ul>  
    23. 

  23.       <?php wp_register(); ?>  
    24. 

  24.       <li><?php wp_loginout(); ?></li>  
    25. 

  25.       <?php wp_meta(); ?>  
    26. 

  26.     </ul>  
    27. 

  27.   </li>  
    28. 

  28.   <?php endif; ?>  
    29. 

  29.   </ul>  
    30. 

  30. </div>  
    31.
Sekarang coba lihat blog anda. Sebelum kita pasang widget, seharusnya tampilannya seperti ini:
Tampilan sidebar sebelum dipasang widget
Tampilan sidebar sebelum dipasang widget
Dan inilah tampilan wp-admin pada menu widget
Menu Widget
Menu Widget
Tampilannya masih ancur ya? Gpp, besok kita styling bagian sidebar ini. Anda pelajari dulu apa yang sudah saya sampaikan sampai paham. Insya Allah ke depan kita akan lebih banyak utak-atik kode lagi. Buat anda yang nyasar kesini dan bingung mulai dari mana, klik disini untuk melihat daftar isinya.
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)