Temukan Rahasia 4 langkah belajar HTML, PHP & MySQL. Klik Disini!

Tutorial desain theme WordPress: WordPress Theme Tricks
web hosting indonesia


Mau Cari Informasi tentang Teknologi/Game? Cari Artikel Disini!


Terbit 03.09.2008. Edisi Sep 2008. Sudah ada 47 Komentar.
DHINATACOM

Pembahasan seri tutorial desain theme WordPress dalam 2 artikel terakhir telah membahas berbagai perintah PHP standar WordPress. Jadi tentu Anda sudah mengetahui sedikit banyak letak dan fungsi dari berbagai perintah tersebut. Artikel kali ini akan membantu Anda menggunakan berbagai trik yang digunakan oleh para pembuat theme WordPress dalam mengolah perintah WordPress untuk membuat sebuah theme yang lebih baik dan unik. Kebanyakan dari mereka juga bukan programmer kok, jadi kalau Anda mau belajar pasti bisa. Berikut ini adalah beberapa trik yang bisa Anda coba, siapa tahu beberapa diantaranya sedang Anda cari tahu cara membuatnya.

Mari kita mulai... ayuk

Title Tag Dinamis

Title tag adalah tag dasar HTML yang digunakan untuk menampilkan judul halaman pada browser. Dalam sebuah blog keterangan title tag selalu berubah mengikuti halaman yang dibuka. Kalau ingin membuat sebuah title tag yang lebih dinamis skrip berikut boleh dicoba:

PLAIN TEXT
PHP:
  1. <title>
  2. <?php
  3. if (is_home()) {
  4. echo bloginfo('name');
  5. } elseif (is_404()) {
  6. echo 'Error 404';
  7. } elseif (is_category()) {
  8. echo 'Arsip Kategori:'; wp_title('');
  9. } elseif (is_search()) {
  10. echo 'Hasil Pencarian';
  11. } elseif ( is_day() || is_month() || is_year() ) {
  12. echo 'Arsip:'; wp_title('');
  13. } else {
  14. echo wp_title('');
  15. }
  16. ?>
  17. </title>

Kalau mau cara yang lebih praktis, plugin WP bernama All in One SEO Pack bisa dicoba.

Konten Dinamis

Sebagai contoh Jika ada sebuah konten yang hanya ingin Anda tampilkan pada homepage, gunakan skrip berikut:

PLAIN TEXT
PHP:
  1. <?php if ( is_home() ) { include (TEMPLATEPATH . '/namafile.php'); } ?>

Anda bisa mengganti is_home dengan perintah lainnya seperti is_404 (halaman 404), is_category (halaman arsip), is_search (hasil pencarian), is_day (arsip harian), is_month (arsip bulanan), dan is_year (arsip tahunan). Contoh penerapan konten dinamis pada blog ini ada pada sidebar. Bagian atas sidebar yaitu icon menu dan sponsor selalu ada disemua halaman, namun bagian bawahnya selalu berubah-ubah mengikuti jenis halaman yang dibuka. Kalau Anda teliti maka perbedaan tampilan sidebar antara halaman Single, Category, dan Page pada blog ini akan terlihat.

Template Unik Single

PLAIN TEXT
PHP:
  1. <?php
  2. $post = $wp_query->post;
  3. if ( in_category('1') ) {
  4. include(TEMPLATEPATH . '/single1.php');
  5. } elseif ( in_category('2') ) {
  6. include(TEMPLATEPATH . '/single2.php');
  7. } else {
  8. include(TEMPLATEPATH . '/single_lain.php');
  9. }
  10. ?>

Contoh skrip diatas adalah isi dari single.php yang bisa Anda gunakan untuk membuat desain single post yang berbeda-beda sesuai dengan pengaturan Anda. Perintah in_category akan mengecek kategori dari posting yang ditampilkan dan akan menampilkan template Single sesuai pengaturan Anda. Pada contoh skrip diatas kategori 1 (1 adalah ID dari kategori tersebut) akan menggunakan template dari single1.php dan kategori 2 menggunakan single2.php. Jika posting tidak masuk dalam kategori 1 dan 2 maka template dari single_lain.php akan digunakan.

Template Unik Kategori

Seperti halaman single, halaman arsip kategori juga bisa menggunakan desain yang berbeda-beda. Caranya sangat mudah, buatlah duplikat dari file archive.php lalu rubah isi file tersebut sesuai keinginan Anda. Ganti juga nama filenya, misal menjadi category-4.php. Angka 4 merupakan ID kategori. Jangan lupa untuk selalu menambahkan karakter "-" (minus tanpa tanda kutip) dan ID kategori dibelakangannya dalam nama file. Jadi category-4.php akan digunakan untuk menampilkan categoryID 4, category-5.php akan digunakan untuk menampilkan categoryID 5, dan seterusnya.

Template Unik Halaman

Setelah membuat desain berbeda untuk single dan category maka kini giliran halaman utama blog (page) yang bisa Anda buat berbeda-beda. Dalam sebuah blog bisa saja ada halaman yang perlu dibuat beda desainnya dengan halaman yang lain misalnya halaman portfolio, produk, dan sitemap. Agar lebih mudah mengaturnya WordPress telah membuat fitur Page Template. Jadi Anda perlu mengikuti aturan yang telah dibuat oleh WordPress untuk membuat template halaman.

Berikut adalah contoh dari template halaman gallery.php:

PLAIN TEXT
PHP:
  1. <?php
  2. /*
  3. Template Name: Gallery
  4. */
  5. ?>
  6. <?php get_header(); ?>
  7. //the loop
  8. <?php get_footer(); ?>

Jangan lupa ketika membuat halaman melalui dashboard WordPress, perhatikan panel Page Template lalu pilih nama template sesuai dengan halaman yang tadi Anda buat lalu simpan. Dalam contoh diatas nama template halaman adalah Gallery. Pada WordPress 2.3+ letak dari panel Page Template ada dibagian kanan sedangkan pada WordPress 2.5+ ada dibagian bawah halaman. Contoh penggunaan Template Page pada blog ini ada pada halaman Daftar Isi.

Menampilkan Iklan setelah posting pertama

Trik ini biasa digunakan oleh para pembuat theme WordPress yang membuat theme khusus untuk AdSense, istilah kerennya AdSense ready. Caranya gak susah-susah amat kok, hanya dengan menambahkan variabel $loopcounter dalam The Loop. Pertama-tama siapkan sebuah file bernama iklanadsense.php lalu isi file tersebut dengan kode AdSense Anda. Letakkan file tersebut satu folder dengan theme yang Anda gunakan. Perhatikan contoh skrip dibawah ini:

PLAIN TEXT
PHP:
  1. <?php if (have_posts()) : ?>
  2. <?php while (have_posts()) : the_post(); $loopcounter++; ?>
  3. <?php if ($loopcounter <= 1) {
  4. include (TEMPLATEPATH . '/iklanadsense.php');
  5. } ?>
  6. <?php endwhile; ?>
  7. <?php else : ?>
  8. <?php endif; ?>

Menampilkan Daftar Judul Posting Terbaru

Contoh skrip untuk menampilkan daftar 10 judul posting terbaru:

PLAIN TEXT
PHP:
  1. <?php query_posts('showposts=10'); ?>
  2. <ul>
  3. <?php while (have_posts()) : the_post(); ?>
  4. <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
  5. <?php endwhile;?>
  6. </ul>

Menampilkan Judul Posting dari Kategori Spesifik

Misalkan Anda ingin menampilkan 5 judul artikel terbaru dari sebuah kategori dengan ID nomor 7, gunakan skrip berikut ini:

PLAIN TEXT
PHP:
  1. <?php query_posts('cat=7&showposts=5'); ?>
  2. <ul>
  3. <?php while (have_posts()) : the_post(); ?>
  4. <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
  5. <?php endwhile;?>
  6. </ul>

Menampilkan Posting Hanya dari 1 Kategori

PLAIN TEXT
PHP:
  1. <?php query_posts('cat=-7'); ?>
  2. <?php while (have_posts()) : the_post(); ?>
  3. //the loop
  4. <?php endwhile;?>

Skrip diatas dapat Anda gunakan untuk menampilkan posting dari suatu kategori spesifik yang Anda tentukan. Dalam contoh diatas daftar posting yang ditampikan adalah HANYA dari kategori dengan ID nomor 7. Jangan lupa tambahkan tanda "-" (minus tanpa tanda kutip) sebelum ID kategori.

Menyembunyikan Halaman dan Kategori dalam Daftar

Ketika menampilkan daftar halaman/kategori pada sidebar mungkin ada halaman/kategori yang tidak ingin Anda tampilkan bersama dengan daftar yang lain. Sebagai contoh adalah halaman Sitemap. Berikut ini adalah contoh untuk menyembunyikan halaman sitemap yang memiliki ID nomor 10:

PLAIN TEXT
PHP:
  1. <?php wp_list_pages('exclude=10&title_li=' ); ?>

Cukup dengan menambahkan perintah exclude=nomor ID, maka halaman dengan ID tersebut tidak akan ditampilkan dalam daftar. Untuk kategori, cara penggunaannya tidak jauh berbeda. Berikut adalah contoh skripnya:

PLAIN TEXT
PHP:
  1. <?php wp_list_cats('exclude=19&title_li=' ); ?>

Pada skrip diatas, Category dengan ID nomor 19 tidak akan ditampilkan dalam daftar kategori.

Tempat Belajar WordPress Terbaik

Tidak ada website/blog/forum/buku/workshop sebagai tempat belajar WordPress terbaik, terlengkap, dan uptodate selain dari pada WordPress Codex. Maka jangan ragu untuk sering menjelajah kesana menimba ilmu baru dan jangan lupa kalau sudah bisa bagikan ke yang lain ya!

Artikel untuk seri tutorial desain theme WordPress berikutnya akan membahas cara pembuatan layout sederhana dengan menggunakan CSS.

Seperti biasa saya butuh kritik, saran, komentar dari Anda.. ayuk

Artikel Terkait:






Powered by FeedBlitz
komentar pembaca DHINATACOM
  1. Mario says:
    September 4, 2008 at 7:01 am

    pertamax...

    Reply
  2. DuniaTI - Dunia Seputar Teknologi Informasi & Komunikasi says:
    September 4, 2008 at 4:04 pm

    puyeng ngliat ginian trz...
    tpi emg bangga sih klo pake tema buatan sendiri...hehehe...
    sekalian numpang cari backlink... P

    Reply
  3. Izul Cyber Cafe says:
    September 9, 2008 at 5:08 pm

    Wah mantaff bro.

    kebetulan lagi blajar ginian niy..!!
    love

    Salam kenal..!!!

    Reply
  4. gayuhsasmito.com says:
    September 20, 2008 at 9:51 pm

    ide wow. . . boleh di coba nih , thank's bro . . .

    Reply
  5. yanti says:
    September 21, 2008 at 4:43 pm

    iyahlah...orang tempat cari ilmu kok diiseng aja....

    Reply
  6. dhafay says:
    November 13, 2008 at 2:53 am

    Bang Dinata, artikelnya bagus2, boleh saya masukkan RSS?? biar sering2 baca, kebetulan saya baru seneng buat blog nih, tenkyu sebelumnya bang, salam kenal yah..

    Reply
  7. awank Jivi says:
    November 15, 2008 at 10:07 pm

    halo mas, kalau buat widget yang di right sidebar blog ini, yang halaman utama ada icon-icon itu gmana caranya mas?? tlg jawab,, maksih,,

    Reply
    • Yoki says:
      November 17, 2008 at 10:08 am

      saya bikin secara manual mas.. gak pake widget, apalagi plugin. Rencananya saya juga mau bikin tutornya untuk bikin desain itu, tapi masih nungggu jadwal artikelnya, sabar ya.. :)

      Reply
  8. Aeris says:
    December 14, 2008 at 7:29 am

    tutorial yang bagus banget.. sering2 nulis gini mas.. *saya bookmark dulu.. oh ya mau tanya, gimana sih cara bikin komentar kayak mas ini, yang berjenjang bertingkat kalo mereplay komentar lain ? dan bisa di close dan di tutup.. thx's sebelumnya love

    Reply
  9. heru says:
    December 16, 2008 at 4:03 pm

    tutorialnya bermanfaat sekali mas.
    ada tutorial "bikin halaman dinamis di wordpress"
    makasih

    Reply
  10. dati says:
    January 3, 2009 at 5:47 am

    nice tutorial

    Reply
  11. rifmoko says:
    January 10, 2009 at 9:51 pm

    makasih.. wawasannya... walau sulit coba aku praktekan moga2 bisa ....

    Reply
  12. heru says:
    January 10, 2009 at 10:16 pm

    mas dhinata, punya tutorial bikin halaman dinamis di wordpress g mas?

    Reply
  13. nino says:
    January 19, 2009 at 10:22 pm

    cara instal plugin All in One SEO Pack gimana seh newbie neh... , ama masang status YM di wordpress kok sulit sih huks huks nangis tolongin please

    Reply
  14. heru says:
    January 24, 2009 at 8:26 pm

    maaf ya mas baru tau he he (jadi malu)
    harap maklum ya mas masih belajar jadi g tau.
    makasih ya mas

    Reply
  15. Sobari says:
    January 25, 2009 at 2:40 pm

    mas smiley onion head nya keren, ane jd pengen kira-kira bisa gak ya di bikin tutorial nya?

    Reply
  16. kafein says:
    February 26, 2009 at 3:09 pm

    :ngacir: makasih mas

    Reply
  17. zackline says:
    February 28, 2009 at 4:47 pm

    salam kenal n blajar truzzzz

    Reply
  18. pajolo says:
    March 22, 2009 at 5:07 am

    salut bgt ama tutorialnya mas yoki....thanks nggaya

    Reply
  19. byme says:
    March 25, 2009 at 4:01 pm

    mantap sekali bos
    byme

    Reply
  20. Mengenal File Themes Wordpress : Cara Wordpress says:
    April 5, 2009 at 5:25 am

    [...] Artikel yang ini saya ambil dari Dhinata.com. Oya kalo mau belajar bikin templates WordPress sendiri bisa belajar dari blognya dhinata.com juga disini dan disana lengkap tengan tricknya. [...]

    Reply
  21. dewo says:
    April 17, 2009 at 3:25 pm

    blognya...keren oi...numpang lewat...dan salam kenal... tendang

    Reply
  22. tika says:
    May 2, 2009 at 2:49 am

    mat kenal admin

    Reply
  23. Ali says:
    May 18, 2009 at 12:02 am

    wah,, aku pusing ne ... :ngacir: ayuk

    Reply
  24. arnan says:
    June 7, 2009 at 6:32 am

    Gimana cara tampilkan judul saja di halaman utama, atau di halaman Category seperti Punya Mas..
    klo klik kategory Blogging yang termuat hanya judulnya saja..??

    Thanks mimpi

    Reply
  25. Ngetop Euy... says:
    June 8, 2009 at 10:45 pm

    waduh, lengkap banget tutorialnya.... musik

    Reply
  26. hersu says:
    June 17, 2009 at 9:52 pm

    :ngacir: pakde numpang belajar yah...

    Reply
  27. kang bashir says:
    July 1, 2009 at 12:04 am

    Kalo cara bikin emoticon kaya disini gimana ya? kalo bisa tolong kirim lewat email ya boss malu

    Reply
  28. samsss says:
    August 20, 2009 at 4:37 pm

    Bagus sekali Mas, sampe ga ada yang masuk...
    BTW makasih Mas,....emang baru belajar... mimpi

    Reply
  29. rudi says:
    September 4, 2009 at 6:08 pm

    kreatif sekali, sangat bermutu ayuk

    Reply
  30. Fitri says:
    October 2, 2009 at 9:16 pm

    keep berbagi7berbuad baiQ!

    Reply
  31. arema says:
    January 7, 2010 at 7:54 am

    ini tempat belajar yang saya cari...

    Reply
  32. Toni says:
    February 12, 2010 at 2:10 pm

    Mas, aq pngn bljr PHP, mySQL n JavaScript nih. Ada situs recomendasi g?

    Reply
  33. Dhafsah says:
    February 17, 2010 at 5:46 pm

    Mas mau tanya, knp ya All in One SEO Pack setelah saya install kok ga bisa di pakai sll ke lari ke tempat hosting saya? gmn caranya menggunakannya di wp? ohya salam kenal..ehm..tukeran link dong mas. Makasih

    Reply
  34. Zaiful Anwar says:
    April 27, 2010 at 11:21 am

    Wah mantap dah tutorialnya.
    Jadi pengen belajar disain themes ne..

    Reply
  35. numpang lewat says:
    June 18, 2010 at 7:09 pm

    beuh mantep.. maju terus mas.. bikin tutor bwat newbie

    recseller love

    Reply
  36. anton says:
    June 19, 2010 at 12:41 am

    mantap euy, Mas klo mau buat 5 lates postingan di sebelum daftar tulisan pertama, dimana 5 postingan tersebut ada gambarnya dan yg ditampilkan hanya berupa gambar yg ada di tiap artikel (5 postingan tadi) kemudian otomatis di crop dan resize menjadi kotak2 kecil berbaris rapih dan ada tulisan keterangan (judul) di dalam gambar di bagian bawahnya gimana? bisa ga yah? kemudian gimana sih aturan hak ciptanya bila kita download themes gratis kemudian kita utak atik scriptnya setelah itu kita hilangkan sumber si desainer awalnya?, klo komentar ini dijawab langsung terkirim ke email saya ga yah? takut lupa balik lagi sini (maaf) hehe.. terimakasih ditunggu jawabannya yah Mas... thx

    Reply

Tulis komentar

D . ( . P . diem . piss . kaget . nocomment . malu . mimpi . licik . ide . yess . tipi . tendang . sombong . sinchan . sial . senam . nyerah . ngiler . nggaya . nangis . musik . males . love . konslet . kembar . gatau . damn . bye . ayuk . belajar . tutupkuping . tolong . terharu . strees . serang . sendiri . ngakak . mimisan . mati . mantap . kesel . keren . kartukuning . kartumerah . fiuhhh . cendol . salaman . recseller . cekemail . maho . marah . najis . kiss . bingung . berduka . takut . ngacir2 . janganribut . capedeh .

Petunjuk komentar:
1. Tolong tulis komentar yang berhubungan dengan topik artikel. Jangan mengirim SPAM!
2. Komentar yang tidak berhubungan atau SPAM akan dihapus.
3. Klik gambar emoticon diatas untuk menampilkannya pada komentar Anda.

Catatan: Beberapa emoticon yang ditampilkan merupakan hak cipta dari Kaskus - The Largest Indonesian Community.