CSS Rules Untuk Halaman Tertentu di WordPress

Halo sahabat blog juragancipir, maksud dari judul artikel kali ini adalah “Mengatur Tampilan Halaman Tertentu di WordPress”. Artikel ini akan membahas tutorial CSS wordpress secara sederhana dan fokus hanya pada CSS untuk halaman tertentu saja di wordpress.

Umumnya, setiap halaman di wordpress memiliki properti CSS yang sama karena itu semua sudah di atur di file template php untuk halaman. Dengan tutorial kali ini kita bisa mengatur properti CSS untuk halaman-halaman yang kita mau sehingga memungkinkan halaman yang satu dengan yang lain memiliki properti CSS termasuk elemen yang berbeda-beda.

Sebetulnya ini bisa dilakukan oleh sebuah plugin termasuk bagi Anda pengguna plugin “jetpack” namun plugin biasanya terbatas untuk mengatur widget yang tampil di halaman tertentu. Sedangkan dengan cara manual ini Anda bisa mengatur seluruh elemen yang ada dalam sebuah halaman situs.

Contoh :

Permisi mba, saya jadikan blog ini sebagai contoh agar teman-teman yang lain lebih bisa membayangkan.

  1. Misalkan mba indri ingin menyembunyikan widget-widget tertentu dari home page tapi tetap tampil di halaman lain.
  2. Menyembunyikan elemen-elemen tertentu dari halaman tertentu.
  3. Mengatur semua properti CSS untuk halaman tertentu.
  4. Menyembunyikan menu-menu tertentu dari home page atau halaman lain.
  5. Menghilangkan judul di halaman/postingan tertentu.
  6. Menyembunyikan unit iklan baik itu berupa adsense atau banner iklan mandiri yang ditanam pada widget dan menyembunyikannya di halaman-halaman tertentu saja.

Dan masih banyak lagi yang bisa Anda lakukan dengan tutorial kali ini, hampir tidak bisa dijelaskan semuanya disini.

Proses Dari Sebuah Halaman Website Tampil di Browser.

Browser seperti Chrome, Firefox, Safari dll bisa dikatakan adalah mesin “penerjemah” kode bahasa pemrograman meliputi HTML, PHP, CSS dll. Ketika Anda ingin membuka blog juragancpir maka secara teknis Anda sedang membuka/mengakses file blog juragancipir di server. File tersebut tentunya hanya berisi kode-kode saja dan browser akan menerjemahkannya ke dalam bentuk visual yang akhirnya Anda dapat melihat tampilan blog juragancipir secara utuh seperti sekarang ini.

Jenis file yang ada di dalam folder juragancipir di server tentunya bermacam-macam jenis, mulai dari HTML, CSS, PHP, Javascript dll. Tapi yang berkaitan dengan tutorial kali ini hanya melibatkan 2 jenis file saja yaitu HTML dan CSS. HTML adalah file dasar termasuk apa-apa saja yang akan Anda sertakan ke dalam sebuah halaman blog. Elemen apa saja yang akan tampil nantinya di sebuah halaman blog.

Sedangkan file CSS berfungsi sebagai “kontrol” dari elemen-elemen yang ada di dalam file HTML tersebut sehingga antara HTML dan CSS satu sama lain saling berhubungan. CSS akan mengatur seperti apa seharusnya elemen itu tampil di sebuah halaman, apakah si elemen A akan memakai baju hijau dan elemen B akan memakai baju merah atau apakah si elemen A ini tidak ikut serta di halaman tertentu sedangkan si elemen B tetap ikut dan tampil di halaman tersebut.

Prinsip Dasar

Prinsip dasar yang harus Anda pahami adalah setiap elemen di dalam file HTML itu memiliki “id” dan “class”. Dua parameter tersebut bisa dikatakan kasta paling tinggi dalam HTML untuk mengelompokkan elemen ke dalam beberapa kelompok. Misal, antara widget yang satu dengan yang lain memiliki “id” yang berbeda dan itu tujuannya agar Anda bisa mengatur setiap lemen tersebut sesuai kehendak Anda salah satunya meliputi properti CSS dari masing-masing elemen.

Contoh 1

Widget “Penulis Teraktif 7 Hari” di blog ini memiliki id :

<li id="popular_author_list_widget-2"></li>

id nya adalah “popular_author_list_widget-2”.

Menu “My Post” di blog ini memiliki id :

<li id="menu-item-13420"></li>

id nya adalah “menu-item-13420”.

id tersebut nantinya akan kita gunakan di file CSS untuk mengatur elemen yang kita maksud, id digunakan sebagai pengidentifikasi sebuah elemen dalam HTML. Selain “id” ada juga yang namanya “class”, fungsi nya hampir sama namun penggunaannya berbeda.

Untuk “id” maka penulisan CSS dimulai dengan tanda pagar (#) sedangkan untuk “class” penulisan CSS nya dimulai dengan tanda titik (.) dan untuk contoh penulisan lengkapnya nanti saya bahas di akhir.

Cara Melihat “id” dan “class” Setiap Elemen

Caranya mudah, Anda tidak perlu membuka file HTML aslinya. Anda hanya perlu memanfaatkan kemampuan browser yang Anda gunakan. Browser seperti Firefox dan Chrome dapat melihat struktur kode dari sebuah halaman website. Untuk firefox misalnya Anda hanya perlu klik kanan mouse pada elemen yang dimaksud (misalnya widget) kemudian pilih “inspect element”.

Apa Saja Yang Diperlukan

Apa saja yang diperlukan dalam tutorial kal ini? Yang Anda perlukan adalah :

  1. “id” atau “class” dari masing-masing elemen yang akan Anda gunakan.
  2. Page id atau post id dari halaman yang akan Anda gunakan.
  3. Property CSS yang terdiri dari banyak parameter meliputi warna, ukuran huruf, jenis huruf dan masih banyak lagi. Sebagai referensi bisa coba Anda lihat disini http://www.w3schools.com/cssref/

Untuk Page id dan post id bisa Anda lihat di dashboard dan buka halaman atau postingan yang Anda maksud setelah itu klik “get shortlink”. Jika Anda menggunakan permalink default dari wordpress maka page id dan post id sudah bisa terlihat di url postingan/halaman.

Page id berupa angka, dalam contoh di atas page id nya berarti “2479”. Penulisan CSS untuk page id adalah :

page-id-2479

Untuk post id adalah :

postid-2479

Praktek

Oke, saat nya kita praktek dan saya ambil contoh menggunakan page id di atas yang anggap saja itu adalah page id untuk “Home Page”. Skenarionya adalah :

  1. Saya ingin merubah warna background untuk Home Page saja dengan warna abu2.
  2. Saya ingin menyembunyikan “widget 1” dari Home Page
  3. Saya ingin menyembunyikan “menu 1” dari Home
  4. Saya ingin menyembunyikan “footer” dari Home Page

Diketahui :

  • Page id untuk Home Page adalah (2479)
  • id untuk “widget 1” adalah (widget-nomor-satu)
  • id untuk “menu 1” adalah (menu-nomor-satu)
  • class untuk “footer” adalah (footer)

Sebelum masuk ke contoh penulisan di file CSS, kita perlu tahu struktur penulisannya biar gak salah. Lihat gambar berikut :

Secara umum struktur kode CSS itu terdiri dari selector, kurung pembuka, property, value, declaration, semicolons berupa titik koma dan kurung penutup.

Buka file style.css dan kode yang harus kita tulis berdasarkan skenario di atas adalah:

Merubah warna background menjadi abu2

body.page-id-2479 {
 background-color: #F1F1F1;
}

Menyembunyikan widget 1

.page-id-2479 #widget-nomor-satu {
 display : none;
}

Menyembunyikan menu 1

.page-id-2479 #menu-nomor-satu {
 display : none;
}

Menyembunyikan footer

.page-id-2479 .footer {
 display : none;
}

Ingat bahwa penulisan “id” diawali dengan simbol pagar (#) sedangkan untuk “class” diawali dengan simbol titik (.) dan sebetulnya rule nomor 2 hingga 4 itu bisa kita sederhanakan penulisannya (disatukan) menjadi seperti ini.

.page-id-2479 #widget-nomor-satu,
.page-id-2479 #menu-nomor-satu,
.page-id-2479 .footer {
 display : none;
}

Penggabungan rule yang terdiri dari beberapa elemen bisa kita lakukan jika property CSS nya sama sehingga dalam hal ini kita tetap harus memisahkan rule untuk merubah warna background dengan rule no 2 hingga no 4.

Contoh diatas adalah untuk sebuah halaman dalam hal ini “Home Page” tapi kalau mau menerapkannya untuk postingan tertentu maka penulisan “page-id” tinggal diganti dengan “postid”, selebihnya sama. Sekian dan semoga bermanfaat.

Jangan lupa simak juga Cara Mengasyikan Belajar Bahasa Pemrograman.

Bagikan:
6 Comments

Add a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.