{"id":12762,"date":"2017-12-13T16:46:34","date_gmt":"2017-12-13T09:46:34","guid":{"rendered":"https:\/\/www.pugam.com\/?p=12762"},"modified":"2020-08-05T23:20:52","modified_gmt":"2020-08-05T16:20:52","slug":"cara-menambahkan-class-category-ke-tag-body-di-wordpress","status":"publish","type":"post","link":"https:\/\/www.pugam.com\/12762\/cara-menambahkan-class-category-ke-tag-body-di-wordpress\/","title":{"rendered":"Cara Menambahkan Class Category ke Tag Body di WordPress"},"content":{"rendered":"
<\/p>\n
WordPress secara default<\/em> akan menyertakan lebih dari satu class ke tag body pada masing-masing jenis halaman. Misal, untuk halaman home atau front page maka biasanya akan ada class tambahan bernama “home” di tag body.<\/p>\n <\/p>\n Untuk halaman lain pun akan ada class khusus atau katakanlah unik yang ditambahkan ke tag body. Misal, untuk halaman single post atau halaman yang biasa digunakan untuk artikel\/postingan biasanya akan memuat class “single” dan atau “single-post”, sedangkan untuk page biasanya akan memuat class “page”.<\/p>\n Fungsi dari class tersebut tentu untuk keperluan styling<\/em>, sehingga Anda dapat menerapkan style CSS yang berbeda di masing-masing jenis halaman. Lalu bagaimana jika kita ingin menerapkan style CSS khusus untuk kategori tertentu?<\/p>\n Nah, ini yang menjadi masalah karena memang WordPress secara\u00a0default<\/em> tidak akan menyertakan category slug<\/strong> sebagai class di tag body. Anda perlu menambahkannnya sendiri. Caranya, tambahkan kode di bawah ini ke file functions.php<\/strong> di direktori tema WordPress Anda.<\/p>\n Dengan begitu, akan ada class baru yang diambil dari nama kategori sehingga Anda akan dengan mudah menerapkan style CSS yang berebda untuk masing-masing kategori.<\/p>\n Gambar di bawah ini adalah ketika saya menerapkan fungsi di atas, maka untuk artikel dengan kategori “iOS” akan muncul class baru bernama “iOS” di tag body.<\/p>\n <\/p>\n Dalam hal ini saya ingin agar artikel dengan kategori “iOS” memiliki warna latar belakang yang berbeda dengan kategori lainnya atau halaman-halaman lainnya. Berarti saya tinggal membuat rule CSS khusus untuk kategori iOS.<\/p>\n Atau misal saya ingin agar judul artikel dengan kategori “iOS” memiliki warna yang berbeda dengan judul artikel di kategori lainnya.<\/p>\n\/\/ Add Category Class to Body\r\nadd_filter('body_class','add_category_to_single');\r\nfunction add_category_to_single($classes) {\r\n if (is_single() ) {\r\n global $post;\r\n foreach((get_the_category($post->ID)) as $category) {\r\n \/\/ add category slug to the $classes array\r\n $classes[] = $category->category_nicename;\r\n }\r\n }\r\n \/\/ return the $classes array\r\n return $classes;\r\n}<\/pre>\n
Contoh Penggunaan<\/h2>\n
body.ios { \r\n background-color: #F1F1F1; \r\n}<\/pre>\n
body.ios h1.single-entry-title {\r\n\u00a0\u00a0\u00a0 color: royalblue;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"WordPress secara default akan menyertakan lebih dari satu class ke tag body pada masing-masing jenis halaman. Misal, untuk halaman home \n ...<\/a>","protected":false},"author":3,"featured_media":12816,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","two_page_speed":[]},"categories":[2092],"yoast_head":"\n