Cara Membuat Tampilan Berbeda di Setiap Page(halaman) wordpress

Maksud dari 'cara membuat tampilan berbeda di setiap halaman(page) wordpress' ialah, kita dapat membuat tampilan yang berbeda-beda di setiap page(halaman), ita asumsikan page ialah; tampilan home, tampilan single post

What a strange narrowness of mind now is that, to think the things we have not known are better than the things we have known. Samuel Johnson

Maksud dari 'cara membuat tampilan berbeda di setiap halaman(page) wordpress' ialah, kita dapat membuat tampilan yang berbeda-beda di setiap page(halaman), ita asumsikan page ialah; tampilan home, tampilan single post

Last Modif at July 8th, 2011

maksud dari ‘cara membuat tampilan berbeda di setiap halaman(page) wordpress’ ialah, kita dapat membuat tampilan yang berbeda-beda di setiap page(halaman), kita asumsikan page ialah;

  • tampilan home
  • tampilan single post
  • tampilan tag
  • tampilan kategory
  • tampilan search
  • tampilan archive
  • tampilan about, sitemap, contack us
  • tampilan author
  • serta tampilan lainya

untuk contohnya, silakan buka home page indaam.net terus buka juga halaman-halaman lain, misal about, archive, tag, kategori dan lain-lain, beda kan tampilanya?

bagaimana cara membuatnya?

yang paling pertama, sobat harus paham ini

  • web statis
  • eksternal css
  • html
  • css
  • sedikit php
  • sedikit logika

basa-basi dulu ya :), pada intinya untuk merubah tampilan website atau blog, yang harus kita lakukan adalah menambahkan cascading style sheet(css). yah css, fungsi sederhana dari css ialah merubah tampilan tag-tag html.

agar ini(cara membuat tampilan berbeda di setiap halaman(page) wordpress) berfungsi, sobat harus paham penggunaan eksternal file pada css(ada di postingan terdahulu), setelah paham ekternal css. kita akan menggunakan fungsi wordpress yaitu

  • if home
  • if single
  • if tag
  • if categories
  • dll(lengkapnya ada di codex.wordpress.org)

logikanya, dengan fungsi tadi ‘kita akan memanggil style css yang berbeda di setiap page(halaman). nah, jika cssnya berbeda-beda, otomatis tampilanya juga beda bukan? yah, kita membuat beberapa style css, misal untuk home, single, tag dan lain-lain. apakah semua style di request di setiap page(halaman)? tidak, kita hanya merequest style css tadi sesuai dengan pagenya, bingung?

seperti ini

  • jika home kita akan me-request misal home.css(style lainya tidak iku di request)
  • jika single kita akan me-request misal single.css(style lainya tidak ikut di request)
  • jika tag kita akan me-request misal tag.css(style lainya tidak ikut di requeas)
  • dan lain-lain

yah, setiap page(misal home) hanya merequest 1(satu) style css.

weweweweweweh, basa-basinya kepanjangan ya, ini scriptnya, anggap contoh

<!-- start css -->
<?php if ( is_home() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.net/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory'); /* kode ini hanya dijalanan pada home.php atau index.php jika home.php tidak ada */?>/home.css" type="text/css" media="screen" />
<!-- // home.css -->
<!-- // End home.css -->
<?php elseif ( is_single() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.net/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory'); /* kode ini hanya dijalanan pada single.php atau index.php jika single.php tidak ada */ ?>/single.css" type="text/css" media="screen" />
<!-- // single.css -->
<!-- // End single.css -->
<?php elseif ( is_search() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.net/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory');
/* kode ini hanya dijalanan pada search.php atau index.php jika search.php tidak ada*/ ?>/search.css" type="text/css" media="screen" />
<!-- // search.css -->
<!-- // End search.css -->
<?php elseif ( is_404() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.net/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory');
/* kode ini hanya dijalanan pada 404.php atau index.php jika 404.php tidak ada */?>/404.css" type="text/css" media="screen" />
<!-- // 404.css -->
<!-- // End 404.css -->
<?php elseif ( is_tag() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.net/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory');
/* kode ini hanya dijalanan pada tag.php atau index.php jika teg.php tidak ada*/ ?>/tag.css" type="text/css" media="screen" />
<!-- // tag.css -->
<!-- // End tag.css -->
<?php elseif ( is_category() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.net/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory');
/* kode ini hanya dijalanan pada category.php atau archive.php jika category.php tidak ada dan index.php akan dijalankan jika category.php dan archive.php tidak ada */ ?>/category.css" type="text/css" media="screen" />
<!-- // category.css-->
<!-- // End category.css-->
<?php elseif ( is_archive() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.net/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory');
/* kode ini hanya dijalanan pada archive.php dan index.php akan dijalankan jika archive.php tidak ada*/ ?>/archive.css" type="text/css" media="screen" />
<!-- // archive.css -->
<!-- // End archive.css -->
<?php elseif ( is_page() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.net/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory');
/* kode ini hanya dijalanan pada page.php dan index.php akan dijalankan jika page.php tidak ada*/ ?>/page.css" type="text/css" media="screen" />
<!-- // page.css -->
<!-- // End page.css -->
<?php endif; ?>
<!-- salam www.indaam.net -->

tambahkan script diatas tepat di atas

</head> buka header.php

fungsi script diatas ialah me-request eksternal css yang berbeda-beda di setiap page,

misal home page maka jadinya seperti ini

<!-- start css -->
<link rel="stylesheet" href="http://url-blog-sobat/wp-content/themes/nama-folder-themes/home.css" type="text/css" media="screen" />
<!-- // home.css -->

sedangkan pada single paga(halaman postingan) jadinya seperti ini

<!-- start css -->
<link rel="stylesheet" href="http://url-blog-sobat/wp-content/themes/nama-folder-themes/single.css" type="text/css" media="screen" />
<!-- // single.css -->

begitu juga untuk page, tag, search, category, archive dan lain-lain ‘akan merequest file ekternal css yang berbeda-beda.
setelah paham fungsi script dan eksternel cssnya, langkah selanjutnya ialah masuk ke directory themes sobat …wp-content/themes/nama-folder-themes/ lalu buat file 8 file css dengan rincian seperti ini

  • home.css
  • single.css
  • search.css
  • 404.css
  • tag.css
  • category.css
  • archive.css
  • page.css

dan yang tidak kalah penting ialah(untuk mempermudah proses) di dalam folder themes sobat harus ada list file berikut

  • home.php //-> ini untuk home page contoh //-> http://www.indaam.net
  • single.php //-> ini untuk single post(halaman postingan) contoh //-> http://indaam.net/cara-membuat-tampilan-berbeda-di-setiap-pagehalaman-wordpress
  • search.php //-> ini untuk halaman search contoh //-> http://www.indaam.net/?s=css
  • 404.php //-> ini untuk halaman not found contoh //-> http://www.indaam.net/nnnn
  • tag.php //-> ini untuk halaman tag contoh //-> http://www.indaam.net/tag/cascading-style-sheet/
  • category.php //-> ini untuk halaman category contoh //-> http://www.indaam.net/category/css/
  • archive.php ini untuk halaman archive contoh //-> http://www.indaam.net/2010/07/
  • page.php ini untuk page misal contoh //-> http://www.indaam.net/about

oklah, sekian sharing kali ini, untuk contoh proses pengeditan, misal mau ubah tampilan home page, silakan edit home.php dan home.css, sesuaikan css dan tag-tag htmlnya.

sekedar tambahan, masih ada halaman-halaman lain yang masih bisa dirubah bentuk serta tampilanya, seiring berjalanya waktu, sobat akan memahami itu.

note
jika themes sobat tidak memiliki home.php, anggap saja index.php adalah home.php, seperti komentar yang saya tambahkan diatas, jika home.php tidak ada maka index.php-lah yang dijalankan.

jika sobat sudah sangat mahir dengan css, silakan kosongkan property serta value cssnya lalu ngodinglah dari awal. merancang itu lebih mudah ketimbang ngedit.

sebenarnya sih, kalau mau buat themes wordpress dua file dan satu folder saja sudah cukup, file apa itu? index.php dan style.css etc

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

44 thoughts on “Cara Membuat Tampilan Berbeda di Setiap Page(halaman) wordpress”

  1. anak betawi says:

    Kalu punya saya gimana ya, saya juga berbeda beda bahkan single post juga berbeda beda. Tapi saya tidak memanggil CSS eksternal.

    1. indam says:

      eksternal css jauh lebih baik, ketimbang yang lain :)

      1. aryan says:

        Makasih banyak mas :) sangat membantu sekali..

        1. David says:

          ummmmmmmm cantik yea blogx

  2. mizan says:

    kalau buat banyak header bisa setiap halaman bisa gak. jadi setiap satu halaman satu gambar header? salam kenal

    1. indam says:

      yah tentu saja bisa, jika ada waktu akan saya bahas.

  3. Srulz says:

    benar benar ilmu tingkat tinggi…. .-”
    itu pakai software ngga mas ya?

  4. fhilo says:

    Maaf bang mo nanya..saya baru di dunia blog, klo mau buat list download mp3 kaya misshacker, stafaband di postingan ato halaman gimana? Maaf klo pertanyaannya ga nymbung sama artikelnya

  5. WAKIDI says:

    Mat malam mas, mau tnya nih seputar wordpress, masalahnya gaptek nih!!
    Bagaimana caranya membuat halaman dalam sub page ya? contoh Dalam menu/page PROPINSI ada beberapa link kabupaten.

  6. hera says:

    ga sengaja saya buka http://www.ehow.com saya tidak tahu itu blog atau website. yang saya tanyakan setiap buka home di pojok kanan atas menuju ke halaman yang beda dengan ketika saya buka family. themesnya sama tapi warnanya beda. Saya liat di home dan di family memiliki kategori yang berbeda. apakah di wordpress bisa dibikin kayak alamat diatas???

    thx

  7. hera says:

    saya mau tanya, apakah wordpress bisa dibuat :
    1. setiap kategori memiliki themes yang beda atau themes sama tapi warna beda, misal warna header beda ( jadi dihomepage misal ada 5 kategori memiliki 5 themes yang beda )??
    2. Jika saya klik kategori akan menuju halaman kategori yang memiliki kategori dan sub kategori.
    misal di homepage saya klik kategori food, trus menuju halaman food yang memiliki kategori lagi berupa resep cepat, resep sehat dll. Dimana kategori resep cepat juga memiliki sub kategori lagi.

    thx

  8. indam says:

    hera,
    Udah saya reply di emailnya

  9. TONO says:

    sobat saya lagi mau coba belajar buat web,tapi untuk merubah homenya gimana caranya?juga tolong dilihat web saya yang masih berantakan maklum gaptek. makasih….

  10. Putra Eka says:

    Kalo saya cuma ingin berganti image disetiap headernya gimana mas? Btw theme di homenya keren.

  11. Stay Healthy says:

    klo perbedaan halaman yang ada .html dan tidak ada .html apa bro? thanx sebelumnya.

  12. egi says:

    wah masih bingung nih ,
    terus pas udh buat file home.css itu mau di isi apa ?

    maklum pemula …

  13. pattah12 says:

    mantafpp…gan….kw buat blogger gmna gan….

  14. irfan says:

    kalau untuk blogspot gimana ya?

  15. reza says:

    jadi misalnya ane mau buat contoh file halaman :

    page-alamat.php

    ane kudu buat cssnya dengan nama

    page-alamat.css

    dimana logikanya koding php page-alamat memanggil css page-alamat.

    bener ga gan ? CMIIW

  16. ane pikir nih trik buat blogspot,….
    :p

  17. Cah Tambank says:

    Salam kenal..
    bahasan tingkat tinggi gue hnya sedikit paham .html jdi g’ bisa nyambung.. tapi tolongin gue… please… cara buat kolom pada home(halaman pertama web) atau untuk buat daftar isi web…
    tolongin gue …mas idam.. please biar gak kesasar

  18. Herbal says:

    Makasih infonya gan! Sukses ane cobain.

  19. Wah sayangnya ane pke blogspot mas -_^

  20. mustofane says:

    Tutorialnya sangat mendukung salam persaudaraan dan sukses buat mas indaam.net

  21. Ardhi says:

    gan ane mau tanya, caranya bikin paging tapi berdasarkan kategori. jadi dalam 1 tabel ada beberapa kategori, dan pada pemanggilannya berdasarkan kategorinya, nah yang ane bingungin pembuatan pagingnya, soalnya berdasarkan kategori, kalo ane panggil 1 tabel,malah keluar semua, ga berdasarkan kategori.
    mohon pencerahannya gan.
    :D
    kalo dibales,ane berterima kasih banget gan, soalnya buat Tugas Akhir ane gan.

    thanks sebelumnya
    :D

  22. iwariot says:

    gan saya mau tanya kalau hilangin header gimana ya, tetapi tetap di baca search engin, dan sya mau buat singel page.. mohon bantuannya ga trimakasih

  23. Lirik Lagu says:

    makasih banyak mas tutorialnya sangat bermanfaat :D

  24. belajar says:

    wah ternyata ini script php untuk wp ya..ane kira untuk bs sob…

  25. wawan says:

    bacanya aja pusing nih kepala…

  26. Zymbianer Naru says:

    Mantap gan….ane suka tuh….tpi ane lgi pake css yg dua kolom…..ijin nyimak……hehehe…

  27. Ansyar says:

    Salam Kenal Broth,,,
    Masih bingung,,,!!!
    Saya disini baru memulai yang namanya Blog/Website atau apalah namanya, apalagi yang namanya php,css,dll,,,
    Tapi saya sudah menambahkan Link situs broth di situsku, sudikah broth juga memasang link situsku,,,??
    Kalo bisa ajarin saya lebih detail dong tentang membuat tampilan halaman berbeda beda,,,
    Saya bener bener bingung dengan penjelasan di atas broth,,,
    Butuh Tuntunan detail,,,
    Terimakasih.

  28. Harry Irawan says:

    tampilan web saya udah 80% jadi mas, tapi saya ingin halaman “kategory” di sidebar waktu di klik munculnya gambar”tabel gitu :D
    gimana ya tuh caranya???

  29. Terimakasih mas informasinya hehehe, walaupun saya masih bingung soal coding php…
    saya senang bisa belajar disini, semoga ilmu ya mas share menjadi nilai ibadah.
    Salam kenal, semoga makin sukses ya mas :)

    1. indam says:

      Amin-amin, thanks yoooo

  30. ewin says:

    mas, saya mau tanya dikit nih, klu utk merubah link url diatas dengan contoh misalnya saya mau ke tujuan 1, tetapi tampilan link url diatas tidak menunjukkan tujuan1.html gimana tu mas ??

  31. arsyad says:

    mas tolong lah, aq hidup sendiri, gak tau mw blajar ma capa,
    ajarin buat webcit laaaaaah mas…
    aq tungguin ya di email ku,,,

  32. Bang karni says:

    trimas jasa edit wordpress ga mas, edit tampilan dan percantik blog aja, maklum, saya buta css skrip dan html

  33. vera says:

    terima kasih kak,, sangat membantu saya

  34. vera says:

    tenks mas,, sangat membantu saya,, good job

  35. kalau nampilin deskripsi pada archieve gmana gan kodenya

  36. bola368 says:

    makasih mass infonya..
    info seputar bola, prediksi bola ter-update..
    berita bola TERBARU DAN TERPERCAYA hanya ada di http://www.bola368.net
    Kunjungi juga http://www.bola368.org, Anda puas Kami pun senang.!

  37. lutfiana says:

    kok bisa kyk gitu ya kak.,,
    ajarin dong,, heheeee :P

  38. nadi says:

    keren nih bisa numpang belajar coding wordpress aaach.. thanks bro

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-