Membuat Template WordPress Dengan Mudah 3

Membuat Template WordPress Dengan Mudah –

Heading, Ini adalah pertemuan ketiga dalam seri Membuat Template WordPress Dengan Mudah Versi Kodjodesign Bandung Barat.Setelah kita melakukan tata letak layout di artikel sebelumnya, sekarang kita mengutak-atik bagian headernya. Disini kita akan mulai mencoba memasukkan fungsi-fungsi WordPress ke dalam theme WordPress.

 

  1.    <head>
  2.      <meta charset=”<?php websiteinfo( ‘charset’ ); ?>” />
  3.      <title>
  4.      <?php
  5.         wp_title( ‘|’, true, ‘right’ );
  6.       websiteinfo( ‘name’ );
  7.      ?>
  8.      </title>
  9.      <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php websiteinfo( ‘styleshe             et_url’ ); ?>” />
  10. <link rel=”pingback” href=”<?php websiteinfo( ‘pingback_url’ ); ?>” />
  11. <?php if ( is_singular() && get_option( ‘thread_comments’ ) )
  12. wp_enqueue_script( ‘comment-reply’ );
  13. wp_head();
  14. ?>
  15. </head>

Saya  jelasin satu per satu  Kode diatas untuk menggantikan kode di index.php sebelumnya. Cari tag <head> hingga </head> lalu ganti dengan kode diatas. ini penjelanan fungsinya:

<meta charset=”<?php websiteinfo( ‘charset’ ); ?>” />

Kode ini untuk memberitahu browser kita memakai karakter apa dalam website. Biarin seperti itu aja.

<title>

<?php

wp_title( ‘|’, true, ‘right’ );

websiteinfo( ‘name’ );

?>

</title>

 

Membuat Template WordPress Dengan Mudah

Kode ini untuk mengatur title website. Akan muncul di bagian paling atas browser. Kode wp_title akan berubah-ubah menurut judul artikel. Kalau di halaman depan, maka dia tidak akan memunculkan apa-apa. Sedangkan kode websiteinfo(‘name’);

akan memunculkan nama website anda. Anda bisa mengubah nama website melalui menu Settings – General

 

<link rel=”pingback” href=”<?php websiteinfo( ‘pingback_url’ ); ?>” />

 

Ini kode untuk menerima ping back dari website lain. Jadi kalau ada yang ngasih link ke kita, kita bisa langsung tahu.

<?php if ( is_singular() && get_option( ‘thread_comments’ ) )

wp_enqueue_script( ‘comment-reply’ );

wp_head();

?>

Kalau kode diatas kita perlukan agar fungsi reply comment berfungsi. Tahu kan reply comment? Contohnya di website ini. Kalau anda klik reply, maka secara otomatis form akan muncul disana dan anda bisa langsung ketik komentar di bawahnya. Canggih ya?

Nah, kalau udah dimasukkan semua, simpan deh filenya index.php dan coba anda lihat hasilnya. Untuk menguji titlenya, coba buka sebuah artikel melalui menu Posts – Posts. Klik view salah satu artikel. Seharusnya judulnya sudah berganti-ganti menurut judul artikelnya.

Oke, kita sudah belajar aneka atribut di head. Kiata lajutkan lagi ke Header

 

Membuat Template WordPress Dengan Mudah

Membuat Theme WordPress Bagian Header

Bada Bagian ini kita akan pasang judul Website ukuran besar di bagian header. Kemudian kita tambahkan juga description dengan font lebih kecil di bawahnya dan nanti dekat dengan batas bawah header kita pasang menu navigasi. Untuk sementara menu navigasinya pakai list page saja. Nanti kita akan merubahnya menjadi custom menu. Keren kan?

Langsung aja buka file index.php lalu fokus pada zona header yaitu baris antara tag

<div id=”header”> hingga </div>. Yuk kita lihat lagi kodenya:

<div id=”header”>

Lokasi header

</div>

Sekarang kita ganti tulisan Lokasi header dengan nama Website dan sekaligus diskripsi di bawahnya lalu kita pasang juga list page. Kode lengkapnya seperti ini:

  1.  <div id=”header”>
  2.   <h1 class=”websitetitle”><?php websiteinfo(‘name’);?></h1>
  3.   <p class=”description”><?php websiteinfo(‘description’);?></p>
  4.   <div id=”menu”>
  5.     <ul>
  6.     <li><a href=”<?php websiteinfo(‘url’);?>”>Home</a></li>
  7.     <?php wp_list_pages(‘title_li=’); ?>
  8.     </ul>
  9.   </div>
  10. </div>

Penjelananya satu per satu

mulai dari baris <h1 class=”websitetitle”><?php websiteinfo(‘name’);?></h1>. Ini akan menampilkan judul website di dalam header kita.

Disini kita memakai class agar bisa dengan mudah kita atur nanti. Dan ketika ada di single page, h1 ini akan kita rubah menjadi div sehingga bisa SEO friendly.

Baris berikutnya adalah untuk menampilkan diskripsi. Kita beri class juga agar CSS tahu bahwa cuma bagian ini saja yang dirubah font maupun tata letaknya.

Berikutnya adalah zona menu. Perintah wp_list_page kita pakai untuk menampilkan list page kita. Sebelum menampilkan page, kita tambahkan satu menu lagi yaitu Home. Jika anda ingin menambahkan menu lagi anda tinggal ikuti saja alur seperti pembuatan link home diatas.

Jangan dulu dibuka websitenya karena pasti masih berantakan kita sesuaikan dulu posisinya

Sekarang kita buka style.css dan kita atur lagi header websitenya.

  1. body {
  2.   font-family: Georgia, “Bitstream Charter”, serif;
  3.   }
  4. .websitetitle {
  5.   font-size:30px;
  6.   padding:30px 0 0 30px;
  7.   margin:0;
  8.   }
  9. .description {
  10. font-size:14px;
  11. padding-left: 30px;
  12. margin:0;
  13. }
  14. #menu {
  15. margin-top:10px;
  16. padding:0;
  17. background:#000;
  18. height:30px;
  19. }
  20. #menu ul {
  21. margin: 0;
  22. padding: 5px 0 0 15px;
  23. list-style: none;
  24. display: block;
  25. }
  26. #menu li , #menu li  a{
  27. float: left;
  28. position: relative;
  29. margin-right:10px;
  30. color:#ffffff;
  31. text-decoration: none;
  32. }

Kalo ada yang mau ditanyakan tentang kode diatas silahkan subscribe(komentar ) dengan senanghati saya akan menjawabnya.

Selanjutnya

Agar mudah mengaturnya, kita tempatkan kode tersebut tepat diatas kode #maincontent biar teratur

Silahkan di cek dulu hasil desainnya.

Apakah Sama Seperti Ini

Membuat Template WordPress Dengan Mudah

Kalau udah sama sampai saat ini kita tepuk tangan dulu buat anda. Lanjut Yuu

Membuat Template WordPress Dengan Mudah

Membuat Theme WordPress Bagian Konten

Sekarang kita masuk  ke bagian konten. Disini nanti akan kita munculkan artikel-artikel

Untuk itu mari fokus lagi ke index.php dan kita akan memodifikasi kode ini:

  1. <div id=”content”>
  2.    Artikel akan muncul disini
  3. </div>

 

Looping

Stop dulu! sebelum kita masuk ke kode, saya perlu jelaskan dulu soal istilah looping. Looping artinya perulangan. Dalam WordPress pengulangan ini dilakukan untuk menampilkan artikel. Misalnya di halaman depan kita setting untuk tampil 10 artikel, maka looping akan melakukan pengulangan perintah menampilkan artikel hingga 10 kali.

Untuk melakukan loop, biasanya kita memakai perintah while. Yang artinya, selama masih ada artikel yang ingin ditampilkan, maka ulangi lagi. Perintah ini sangat fleksibel. Ketika kita membuat halaman artikel, berarti kan disana cuma ada 1 artikel saja yang akan ditampilkan. Maka while pun akan bekerja 1 kali saja. Enak kan?

Banyak fungsi-fungsi WP yang harus dimasukkan dalam loop ini. Artinya anda tidak bisa meletakkan di luar loop. Contoh yang paling sering ditemui adalah fungsi the_title, the_content, the_date, dll.

Sekarang kita coba belajar bikin loop dulu. Ini kodenya. Pasang kode ini menggantikan tulisan Artikel akan muncul disini

  1.   <div id=”content”>
  2.    <?php if ( have_posts() ) : ?>
  3.     <?php while ( have_posts() ) : the_post(); ?>
  4.       <?php the_title();?><br/>
  5.     <?php endwhile;?>
  6.    <?php endif;?>
  7.   </div>

Kita bahas satu per satu ya. Pertama fungsi have_posts(). Fungsi ini untuk mengecek apakah ada tulisan yang ingin ditampilkan. Kita pakai fungsi IF untuk pengecekan. Jika have_posts ada isinya, maka perintah di bawahnya akan di eksekusi. Jika tidak ya langsung ke endif.

Kemudian while seperti dijelaskan diatas. Selama ada tulisan (have_post) maka the_post. Fungsi the_post digunakan untuk mengambil data di have_post dan kemudian dengan fungsi-fungsi lainnya kita akan menampilkannya satu per satu.

Sebagai bahan belajar kali ini, kita cuma akan menampilkan judul website saja dan mengakhirinya dengan tanda <br/> untuk mengganti baris.

Sekarang jika anda melihat website, maka akan ada judul-judul artikel disana. Cobalah membuat beberapa artikel agar terlihat bagaimana loop bekerja.

Nah, silahkan berkreasi, ingin menampilkan apa di website anda. Dan ini beberapa fungsi yang bisa anda pakai:

– the_permalink : digunakan untuk menampilkan URL artikel
– the_title : untuk menampilkan judul artikel
– the_content : untuk menampilkan konten artikel. Jika lebih dari 1 artikel, maka yang muncul cuma sampai tanda readmore
– the_excerpt: untuk menampilkan beberapa karakter awal artikel dan menghilangkan kode HTML-nya
– the_time : untuk menampilkan kapan artikel ini di publikasikan
– the_author : untuk menampilkan penulisnya
– the_category : untuk menampilkan kategori artikel

Untuk menambah wawasan, anda bisa coba  baca artikel tentang fungsi-fungsi lainnya di codex.wordpress.org

Sampai Sini Bagaimana apakah anda masih bisa mengikuti??

karena kita akan melanjutka ke sesi selajutnya yaitu.

 

Mengatur Konten WordPress

Pada Custom Template kodjodesign Bandung Barat

 

nah sekarang kita mulai lebih dalam lagi memasuki bagian konten sebelum di copy  anda bisa dilihat dulu dan mempelajarinya, kalo bingung copy langsung aja deh gak apa-apa nanti tanyain langsung yang gak dimengertinya.

 

  1.   <div id=”content”>
  2.    <?php if ( have_posts() ) : ?>
  3.     <?php while ( have_posts() ) : the_post(); ?>
  4.     <div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
  5.       <h2 class=”title”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h2>
  6.       <p><?php the_content(); ?></p>
  7.       <div id=”postmeta”>Publish on <?php the_time(‘F jS, Y’); ?> under <?php the_category(‘, ‘); ?> by <?php the_author(); ?> |
  8.       <?php comments_popup_link(‘No Comments &raquo;’, ‘1 Comment &raquo;’, ‘% Comments &raquo;’); ?>
  9.       <?php edit_post_link(‘Edit’,”,’|’); ?></div>
  10. </div>
  11. <?php comments_template(); ?>
  12. <?php endwhile;?>
  13. <?php endif;?>
  14. </div>

Saya jelasin per barisnya ya. Baris pertama sampai ketiga sudah saya jelaskan di cara membuat konten bagian looping. Jadi kita langsung baris ke empat yaitu:

<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>></div>

Disini kita pasang DIV pada bagian awal dan akhir tiap artikel. Gunanya sangat banyak, siapa tahu nanti anda ingin memberi warna khusus background tulisan yang di sticky atau anda mau memberi warna khusus untuk kategori tertentu. Banyakdeh  nanti manfaatnya. Selain itu,  juga akan merapikan struktur themes anda nantinya.

Selanjutnya:

Membuat Template WordPress Dengan Mudah

<h2 class=”title”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h2>

Disini saya menempatkan tag H2 dan A untuk menampilkan judul artikel

<?php the_title(); ?>.

Tak hanya itu, saya juga menempatkan <class=”title” > di tag <H2> sehingga nanti bisa kita atur stylenya.

 

<p><?php the_content(); ?></p>

Kode diatas digunakan untuk menampilkan isi artikel. Jika kode ini ada di home atau archive, maka dia akan mencari tanda <!–read more–> secara otomatis dan memotongnya. Anda bisa memodifikasi tulisan default yang muncul di tempat pemotongan dengan menggunakan kode ini:

<!–more Baca Selengkapnya–>

Selanjutnya kita akan bahas langsung 3 baris karena nanti di website 3 baris kode ini akan muncul hanya sebaris saja. Jadi kita sikat aja langsung ketiganya. OK?

 

  1. <div id=”postmeta”>Publish on <?php the_time(‘F jS, Y’); ?> under <?php the_category(‘, ‘); ?> by <?php the_author(); ?> |
  2. <?php comments_popup_link(‘No Comments &raquo;’, ‘1 Comment &raquo;’, ‘% Comments &raquo;’); ?>
  3. <?php edit_post_link(‘Edit’,”,’|’); ?></div>

 

Membuat Template WordPress Dengan Mudah

Tiga baris diatas, diapit dengan DIV dengan id=”postmeta”. Kita beri id karena nanti akan kita rubah style-nya sehingga berbeda dengan konten. Biasanya sih dibuat ukurannya lebih keci.

Di dalam post meta ini kita masukkan tanggal artikel ini di publish dengan kode

<?php the_time(‘F jS, Y’); ?>.

Kita juga akan menampilkan kategori artikel ini dengan perintah

<?php the_category(‘, ‘); ?>.

Lalu disambung dengan menampilkan penulis artikel dengan kode

<?php the_author(); ?>.

Baris berikutnya adalah kode untuk menampilkan jumlah komentar lengkap dengan link menuju lokasi komentar. Kata-kata dalam kurung adalah tulisan yang akan muncul bila tidak ada komentar, 1 komentar dan lebih dari satu komentar.

Baris yang dalam post meta ini adalah link Edit. Link ini hanya muncul jika anda login sebagai admin atau editor atau author artikel tersebut. Jika bukan itu, maka link tidak akan muncul.

Terakhir kode yang akan kita bahas adalah <?php comments_template(); ?>. Seperti nama fungsinya, kode ini adalah untuk menampilkan komentar lengkap dengan form untuk mengisi komentarnya.

Dan kita lihat hasilnya Apakah seperti ini??

Membuat Template WordPress Dengan Mudah

free wordpress theme6

Sekian dulu postingannya tetap pantengin terus kodjodesign.com Webdesign Bandung Barat karena selanjutnya akan kita bahas Style Konten WordPress.

Membuat Template WordPress Dengan Mudah

6 Comments

  1. carolena says:

    saya mau nulis artikel tentang teknologi tetapi tempatnya di mana ya?

  2. bisnis papua says:

    Bermanfaat untuk belajar wordpress template

Leave a Reply