WordPress : Cara Membuat Tampilan Berbeda di setiap Pages

Sharing kali ini, kita akan membahas cara membuat tampilan bebeda-beda di setiap post type pages pada wordpress

Seorang teman sejati akan membuat anda hangat dengan kehadirannya, mempercayai akan rahasianya dan mengingat anda dalam doa-doanya.

Sharing kali ini, kita akan membahas cara membuat tampilan bebeda-beda di setiap post type pages pada wordpress

Last Modif at July 10th, 2011

CMS WordPress menyediakan dua jenis post yang dapat kita buat, yang pertama adalah post biasa dan yang kedua adalah post type pages. Nah ‘tahukah sobat?’ Post type pages ini bisa kita ubah tampilanya sehingga berbeda dengan pages lainya, sebagai contoh coba buka beberapa pages indaam.net

  • http://www.indaam.net/about/
  • http://www.indaam.net/wpthemes/
  • http://www.indaam.net/wpthemes/simpleindo/
  • http://www.indaam.net/wpthemes/css3sederhana/
  • http://www.indaam.net/wpthemes/sederhanaajah/
  • http://www.indaam.net/wpthemes/sayasukacss3/
  • http://www.indaam.net/daftarisi/
  • http://www.indaam.net/sitemap/

Nah, yang diatas itu adalah pages yang ada di indaam.net, “pasti tampilanya beda-beda kan?” Ini-lah yang akan kita bahas nantinya, ya itu jika sobat mau merubah tampilan pages blog sobat
Ok, berikut step by stepnya

Step 1 : Buat page baru

Saran * Untuk percobaan lebih baik di localhost ajah dulu, wong di localhost dan versi online-nya sama aja kok, yang beda adalah pada versi online–semua orang bisa akses, jadi kalo error ya ketahuan jua hehehe, lain hal kalo di localhost–yang tahu hanya sobat dan tetangga –kalo ada–

  • > Aktifkan Wampserver, appserve, Xampp > sejenisnya
  • > Login > Dashbord > pages > Add New(http://localhost/nama_folder_wp/wp-admin/post-new.php?post_type=page)

Untuk Judulnya *wajib* diisi dengan “pageku“(tanpa tanda kutip!), ingat yah harus pageku!.
kenapa harus pageku? sebenarnya bebas mau kasih judul apa. Anggaplah ini untuk contoh, jadi ikut aja yah. Beberapa baris lagi, sobat juga akan tahu kenapa harus dikasih judul ‘pageku‘.

Setelah itu klik publish, ia publish trus > klik view page
Tampilnya sama sengan page-page lain, hanya saja contentnya ngga ada, lanjut

Step 2 : Buat File untuk custom page

  • masuk ke >
  • > Dashbord > appreance > themes > CATAT NAMA THEME YANG ACTIVE! harus!
  • setelah di catat, masuk ke > …wp-content > themes > NAMA FOLDER THEME YANG ACTIVE
  • setelah masuk ke NAMA FOLDER THEME YANG ACTIVE, klik kanan di area kosong pilh > new > text document > rename menjadi > "page-pageku.php" *ekstensinya harus [dot]php > bukan [dot]txt!*
  • *Sejujurnya saya ragu, apakah file page-pageku.php yang sobat buat ber-ekstensi [dot]php atau [dot]txt, bagaimana kalo kita buktikan dulu? Apakah itu file php atau txt, caranya > klik kanan pada page-pageku.php > pilih > edit pilih notepad atau text-editor, setelah itu klik file(kanan atas) > pilih > save as(CTRL + ALT + S) > perhatikan pada save as type > pilih > all files > dan pada file name ketik > page-pageku.php >
  • klik save > selesai.

sekarang coba masuk ke …wp-content > themes > NAMA FOLDER THEME YANG ACTIVE, disitu ada berapa file yang memiliki nama page-pageku.php? kalo ada dua, hapus yang berekstensi [dot]txt

Next, coba buka browser trus reload pada page pageku yang dibuat tadi. Kalo putih polos, berarti ngga ada yang salah dan jika tampilanya tetap sama, silakan baca ulang. Ok, kita asumsikan semua sudah benar.
Sekarang, coba masuk ke …wp-content > themes > NAMA FOLDER THEME YANG ACTIVE > lalu > renama page-pageku.php menjadi page-ajah.php > save > lanjut, reload page pageku tadi, kalo ngga ada yang salah maka tampilanya akan berubah seperti page-pege yang lain.
Sekarang, rename kembali page-ajah.php menjadi page-pageku.php

Cara kerjanya

seperti ini : Jika pages blog wordpress di load, maka CSM wordpress secara otomatis akan mencari file di folder theme-active yang sesuai dengan nama page-slug-nya dan jika ngga ada, maka page.php yang dijalankan dan jika lagi page.php ngga ada maka index.php yang dijalankan dan jika lagi lagi index.php ngga ada maka, musatahil themenya bisa diaktifkan.

Nah, sekarang udah tahukan kenapa title page-nya harus ‘pageku‘?
Ini berlaku jika sobat ingin membuat sebuah page lagi yang berbeda dengan page-page yang lainya, misal sobat ingin merubah secara total halaman about, buat saja file baru dengan nama page-about.php *penting yang harus disesuikan adalah (slug)permalinknya, bukan titlenya. Lebih lengkap baca ini http://codex.wordpress.org/Pages

Mudah dan simplekan?
Sekarang silakan ubah tampilan pages di blog sobat *kalo mau*.
Untuk contohnya, copy semua code yang ada di page.php lalu paste ke page-pageku.php, setelah itu edit page-pageku.php, sesuaikan dah dengan keiginan sobat… {bisa juga diisi dengan HTML statis}
Yah pada intinya jika ingin membuat tampilan yang berbeda-beda di setiap pages adalah perhatikan ini

  1. 1. File : page-{nama_page}.php
  2. 2. nama Permalink/pages yang sobat buat di dashbord tadi.

Well, Sekiaan tulisan kali ini–semoga bermanfaat

Kalo ada waktu nantinya saja juga akan coba membahas, cara membuat tampilan berbeda di setiap

  • Halaman category
  • Halaman tag
  • Halaman author
  • Halaman archives
  • browser
  • IP
  • tahun
  • bulan
  • hari
  • jam

Mungkin sobat juga ingin membaca ini

  • http://www.indaam.net/2011/01/cara-membuat-tampilan-berbeda-di-setiap-postingan-wordpress/
  • http://www.indaam.net/2011/01/cara-membuat-tampilan-berbeda-di-setiap-page-halaman-wordpress/

NOTE :
Perlu dipahami, jika sobat menerapkan tutorial ini, tampilan pages yang sobat buat ‘itu tergantung kretifitas sobat sendiri’ sobat bisa membuatnya 100% berbeda dengan post lain, bisa juga diisi dengan flash, xml, svg atau apalah ‘intinya ada di kreatifitas sobat’. Oia, dengan tips ini, sobat juga bisa membuat blog bertype Blogazine ‘dengan catatan pada front-page blog sobat ‘juga menampilkan post pages terbaru’
Semoga bermanfaat.

Indam

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

23 thoughts on “WordPress : Cara Membuat Tampilan Berbeda di setiap Pages”

  1. ganda says:

    Cool! I need this. :D Ilmu-mu semakin baik. You are gonna surpassed my skill on WordPress someday. :D Arigato, saya butuh tutorial ini untuk sesuatu. Hihihihi.. #bookmarked!

  2. Indam says:

    Bro Ganda,
    Wow, terima kasih pujianya, tapi saya pikir ilmu wordpress saya masih minim. Jadi masih harus terus belajar :)
    Btw, gimana dengan app blackbarry dan iphone-nya, lanjar kah?

    1. ganda says:

      Keep it up then. :D Sejauh ini masih menyenangkan. :D

  3. Djawa says:

    apa cara ini bisa berfungsi di semua thema gan.,?

  4. ghofur says:

    mas indam,,,tanya,,,klo untuk melihat pengunjung di blog kita gimana mas,,,, makasih sebelum,,,, semoga ini menjadi amal jariyah,,,,,

  5. Abeng says:

    Makasih Bro, Atas infonya! Blog ya Kren (Kreatif), unik, boleh Copas Ilmunya Ya, untuk di Terapkan di TKP, Salam Sukse Buat Indaam.

  6. rimaru says:

    luar biasa.. sudah lama artikel yang ini saya cari2. akhirnya ketemu juga. terima kasih

  7. abdul majid says:

    q suka bentuk dan cara yang anda gunakan. apakah ada cra lain yang lbh mudah

    1. indam says:

      selalu ada cara lain… coba gooling lg….

  8. Gusde says:

    gan di wordpress saya masuk ke wp content nya dimana nya itu wp content gan ? plis jawab yah gan

    makasih

    1. indam says:

      Maaf baru balas, wp-content itu folder yang ada didalam paket wordpress. Biasanya folder ini digunakan untuk simpan themes, plugind dan file upload.

  9. decky says:

    gan ane mau tanya,tema academica dah dirubah backgroundnya kok tetep g bs yah gan???mohon pencerahannya gan…

  10. mantap blog wordpressnya gan, ajarin saya dong…. hehehehehehe

  11. Ansyar says:

    Siang friend,,,
    Mohon petunjuk,,,
    Sy udah punya web dgn wordpress (selfhosting) yg smntara udah jalan,,,
    Sy mau ngoprek web sy ini di local, gmn caranya ya,,,???
    Mulai darimana gtu,,,???

    1. indam says:

      Coba telususi archives blog saya, sepertinya ada tuh… Baca cara install wordpress di localhost

  12. Ahmad saroni says:

    terimakasih. sangat membantu

    1. indam says:

      Yoi.. sama-sama…

  13. wadiblog says:

    saya ingin membuat tampilan khusus untuk home. tampilan simple seperti misalnya hanya slide show photo tanpa tampilan apa pun disampingnya sepeerti link, atau widget. karena saya tidak tahu caranya mendisain theme (selama ini otomatis dan sama seluruh halaman), apa yang harus saya lakukan selanjutnya. terima kasih

  14. Terima kasih atas informasinya

  15. Miftah says:

    Terimakasih Infonya Bos , santgat membantuku

  16. ridlo says:

    Dengan Cara Demikian saya sangat suka gan tenks ya ?

  17. Ismail says:

    postingan yang bagus gan, ngebantu ane
    thank yau

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

+
-