Blog Business Review Gadget Games General Highlight Humour Internet Mailbox Opinion Tips&Tricks Tutorial

Membuat Halaman Single Berwarna-Warni



Author: DHINATACOM
Posted: 06.10.2008 at 10:26.
Last Updated: 06.10.2008 at 08:10.
14 Komentar.

Sedikit curhat.. beberapa minggu yang lalu saya kembali memperbarui beberapa bug pada theme WordPress yang saya gunakan sekarang. Terutama pada penulisan CSS yang tidak valid. Setelah saya lihat-lihat dan perhatikan lagi.. sepertinya ada beberapa bagian yang kurang sesuai dengan tema yang saya pakai sekarang yaitu tampilan ala Majalah TI.

Biasanya majalah manapun akan membuat corak desain halaman yang berbeda untuk masing-masing rubrik. Paling tidak, warna tulisan dan latar halaman yang muncul pada rubrik yang satu akan berbeda dengan rubrik yang lainnya. Sedikit putar otak akhirnya saya temukan juga solusi untuk membuat halaman permalink yang dapat berubah warna sesuai dengan kategori yang telah ditentukan.

Cukup dengan memanfaatkan perintah If pada PHP dan in_category milik WordPress, kita dapat menyuruh WordPress untuk memeriksa kategori dari permalink yang dibuka oleh pengunjung kemudian menampilkan warna yang telah kita definisikan terlebih dahulu pada CSS. Agar tidak bingung silahkan download terlebih dahulu mini theme WordPress buatan saya :). Theme tersebut hanya contoh, jadi jangan gunakan pada blog Anda karena sama sekali gak ada bagus-bagusnya :).

Screenshot tampilan permalink dari berbagai kategori yang berbeda bisa Anda lihat dibawah ini (mudah-mudahan ImageCows.net gak down lagi) :

Definisi warna telah diatur oleh file Style.Css. Pada file Single.php, kunci dari pengatur warnanya adalah skrip ini:

  1. < ?php
  2. if ( in_category('1') ) {
  3. echo "<div id='head1'>";
  4. } elseif ( in_category('2') ) {
  5. echo "<div id='head2'>";
  6. } elseif ( in_category('3') ) {
  7. echo "<div id='head3'>";
  8. } elseif ( in_category('4') ) {
  9. echo "<div id='head4'>";
  10. } else {
  11. echo "<div id='head5'>";
  12. }
  13. ?>
  14. <h3>< ?php the_category(","); ?></h3></div>

Angka 1 pada in_category('1')merupakan ID dari kategori tersebut. Pada saat permalink diakses pengunjung, skrip akan memeriksa apakah artikel tersebut berada pada kategori dengan ID 1, jika benar maka style dengan ID “Head1″ akan digunakan, jika tidak maka skrip akan
kembali memeriksa apakah artikel berada pada kategori dengan ID 2, jika benar maka maka style dengan ID “Head2″ akan digunakan, begitu seterusnya.

Jika artikel bukan berasal dari kategori dengan ID 1, 2, 3, dan 4 maka style yang digunakan adalah “Head5″. Itulah sebabnya kenapa warna latar kategori 4 dan 5 sama-sama warna hijau karena warna untuk kategori 5 tidak didefinisikan. Begitu juga untuk kategori 6, 7, dan 8 akan secara otomatis menggunakan style dengan ID Head5.

Agar tidak bingung contoh nyatanya bisa Anda lihat langsung pada bagian atas halaman artikel diblog ini.

Selamat mencoba…



komentar pembaca DHINATACOM

  1. Cah Kontes says:

    yok, gimana caranya passing parameter category ID supaya kalo kita pny banyak kategori, kita ga perlu tulis satu2?

    ada yg nyaranin saya pake single_cat_title, tapi kok ga kluar category IDnya yah? nyerah

    ada masukan?

    • Yoki says:

      saya belum pernah coba passing parameter category ID mas… masih pake manual :) mungkin kita coba googling dulu deh cari2 infonya :)

  2. fenny says:

    intinya memang ada di css…asal ngerti css, teranglah semua permasalahan D

  3. zuckh says:

    malu aku kok masih binggung yah….?

  4. benazio says:

    wahaha nice nice nice boleh jugaa .. sekarang gue lagi belajar java script, ama coding flash nih, kampus belajar C++, pengen bisa PHP, ama coding2 Database nih katanya perlu buat kerjaan ato apalah hehe ..

  5. makasih ya tipsnya ayuk

  6. Rony Sam says:

    Mas aku katrox banget.
    Saya coba bikin blog wordpress.
    Di mana melihat index.html/php nya?? Supaya bisa mengedit tulisan-tulisan asli bawaan pada wordpress atau pada theme nya??
    Oh ya kalo bisa via menu browse pada wordpress??

  7. hanafi says:

    thanks ya

  8. ibenix says:

    ijin praktek mas….ke tkp dolo ah….. ngacir

  9. ricky says:

    aduh ternyata membingungkan ya…q ga bs smua mua mua nya takut

  10. chemo says:

    thank’s info nya ya ^_^

    senam senam

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 . maho . marah . najis . kiss . bingung . berduka . takut . ngacir . 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.

(required)

home DHINATACOM


Home Article Index Contact Disclaimer F.A.Q


langganan majalah DHINATACOM
Artikel Terbaru

Membersihkan Jamur di Dinding Apartemen

3 Hal Penting Yang Menentukan Kecantikan Pada Rumah Minimalis

Disclaimer . Contact Info . Privacy Policy . F A Q . Servis Komputer Tangerang
DHINATA.COM © 2008-2017 oleh Yoki DHINATA. Theme: D-Magz 3.1
Desain Tema oleh Yoki DHINATA. My Copyright Is Not Your Right To Copy.
Powered by WordPress. Hak Cipta Dilindungi.
home DHINATACOM