Indonesian (Bahasa Indonesia) translation by Hisman Saputra (you can also view the original English article)

Mempelajari pengembangan WordPress tidak hanya tentang belajar kode PHP.
Kamu juga akan memerlukan beberapa keterampilan HTML dan CSS jika situs, tema dan/atau plugin yang kamu buat ingin bekerja dengan baik.
Di tutorial ini, saya akan memperlihatkan kepadamu sebuah fitur yang sangat berguna dari WordPress yang menggabungkan PHP dengan beberapa CSS sederhana. Ini mudah digunakan tetapi teknik yang kuat yang akan memberikan Kamu kontrol lebih terhadap bagaimana kontenmu ditampilkan.
Fitur yang saya bicarakan adalah template tags body_class()
, the_ID()
, dan post_class()
. Jika Kamu menambahkan mereka ke file template tema Kamu (atau ke file loop Kamu) di tempat yang benar, mereka akan menghasilkan kelas CSS yang dapat Kamu gunakan untuk menambahkan style ke kontenmu dengan lebih akurat.
Di tutorial ini, saya akan menunjukkan kepadamu bagaimana dan di mana untuk menambahkan itu ke tema Kamu, dan bagaimana untuk kemudian menulis CSS styling yang menarget kelas dan ID yang dihasilkan.
Menambahkan Tag body_class()
ke Tema Kamu
Tag pertama adalah body_class()
. Seperti yang Kamu mungkin duga, ini berlaku untuk elemen body
.
Di dalam file header.php pada tema Kamu, cari baris yang membuka elemen body Kamu:
<body>
Untuk menambahkan template tag, ubah itu menjadi seperti ini:
<body <?php body_class(); ?>>
Simpan filenya dan tutup. Sekarang buka situs yang menggunakan tema Kamu dan lihat kode dari halaman-halamanmu.
Ini adalah beberapa contoh dari kode yang dihasilkan di situs demo saya.
Pertama, halaman home:
<body class="home page-template page-template-page-full-width page-template-page-full-width-php page page-id-7">
Itu memberi tahu kita beberapa hal tentang halaman tersebut:
- Itu adalah halaman home.
- Itu menggunakan sebuah page template.
- Itu adalah halaman yang full-width.
- Itu adalah sebuah page (bukan merupakan sebuah post atau custom post type).
- ID-nya adalah 7.
Itu cukup banyak yang kita tahu sekarang tentang sebuah halaman. Sekarang mari lihat ke arsip kategori:
<body class="archive category category-basics category-154">
Ini memberitahukan kepada kita bahwa kita berada di sebuah arsip, yang merupakan sebuah kategori, dan lebih spesifiknya itu adalah arsip kategori untuk kategori 'basics' dengan ID 154.
Kamu mungkin bertanya-tanya kenapa semua kelas tersebut dibutuhkan: mengapa memiliki kelas arsip dan juga kelas kategori, contohnya? Alasannya adalah agar Kamu dapat mengatur CSS styling Kamu untuk ditargetkan sesuai kebutuhanmu. Jadi jika Kamu mau menambahkan style ke semua halaman arsip, Kamu akan menarget kelas archive
. Jika Kamu mau menarget semua arsip kategori, Kamu akan menarget kelas category
, dan jika Kamu mau menarget kategori ini secara khusus, Kamu bisa menggunakan slug atau ID-nya.
Terakhir, mari lihat ke single blog post:
<body class="post-template-default single single-post postid-3522 single-format-standard">
Sekarang kita mendapatkan informasi yang lebih banyak:
- Itu menggunakan default post template.
- Itu adalah sebuah single post dari post type post.
- ID-nya adalah 3522.
- Itu menggunakan format template standar.
Sekali lagi, Kamu dapat menggunakan semua itu untuk menarget ke level apapun yang Kamu suka: single post dari semua post type (termasuk page dan custom post type), single post dari post post type, post yang menggunakan format tertentu, atau bahkan spesifik post ini.
Nantinya di tutorial ini, saya akan mendemonstrasikan bagaimana menambahkan styling ke kelas-kelas target tersebut. Namun pertama, mari lihat bagaimana Kamu dapat menambahkan template tag lainnya yang bisa digunakan untuk styling.
Menambahkan Template Tag post_class
dan the_ID
ke Tema Kamu
Seperti halnya menambahkan kelas ke seluruh halaman, Kamu juga dapat menambahkan kelas ke setiap post di dalam sebuah halaman. Pada single post atau page, ini akan hanya menambah satu set kelas, tetapi di halaman arsip, Kamu akan menghasilkan kelas yang berbeda-beda untuk setiap post di dalam arsip tersebut.
Kamu tambahkan kode ini di dalam loop, saat membuka elemen article
untuk setiap post.
Kode tanpa template tag adalah sebagai berikut:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article> <!-- contents of loop --> </article> <?php endwhile; endif; ?>
Tetapi ketika Kamu tambahkan template tag, dia menjadi seperti ini:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <!-- contents of loop --> </article> <?php endwhile; endif; ?>
Ada dua template tag di sini:
- Tag
the_ID()
menambahkan ID post sebagai CSS ID, artinya dia akan unik. - Tag
post_class()
menambahkan beberapa kelas tergantung dari properti dari post tersebut, mirip sepertibody_class()
.
Mari lihat kode yang mereka hasilkan.
Pertama, di halaman home:
<article id="post-7" class="post-7 page type-page status-publish has-post-thumbnail hentry">
Ini memberikan kita:
- Sebuah ID
post-7
, menggunakan post ID. - Kelas yang sama
post-7
. - Kelas
page
, memberi tahu kita ini adalah sebuah page (bukan sebuah post). -
type-page
memberi tahu kita ini adalah post type 'page'. -
status-publish
memberi tahu kita page ini sudah di-publish. -
has-post-thumbnail
memberi tahu kita page ini memiliki thumbnail (atau featured image)—Kamu dapat menggunakan ini untuk menambahkan style berbeda ke post yang memilikinya atau tidak sehingga featured image dapat cocok ke layout. -
hentry
adalah kelas yang didesain untuk membantu styling di RSS feed.
Itu adalah banyak kelas yang bisa Kamu target!
Sekarang mari lihat ke sebuah post di halaman arsip sebelumnya:
<article id="post-3522" class="post-3522 post type-post status-publish format-standard has-post-thumbnail hentry category-basics category-featured category-roundups tag-admin tag-content-management tag-hosting tag-installing-wordpress tag-performance tag-plugins tag-security tag-seo tag-site-management tag-themes tag-wordpress-com">
Whoah! Ada banyak yang bisa diambil di sini.
Saya tidak akan membahas semuanya secara detail, tetapi untuk ringkasnya, Kamu mendapatkan kelas-kelas yang berhubungan dengan post ID, post type, statusnya, kategori, post thumbnail, kategori-kategori yang dia masuk di dalamnya, dan tag-tag yang telah diberikan.
Terakhir, single post:
<article id="post-3522" class="post-3522 post type-post status-publish format-standard has-post-thumbnail hentry category-basics category-featured category-roundups tag-admin tag-content-management tag-hosting tag-installing-wordpress tag-performance tag-plugins tag-security tag-seo tag-site-management tag-themes tag-wordpress-com">
Ini sangat mirip dengan post di halaman arsip, artinya jika Kamu mau menarget single post, Kamu jangan gunakan kelas-kelas ini, tetapi gunakan kelas single
yang dihasilkan oleh body_class
.
Menggunakan Style yang Dihasilkan di Stylesheet Kamu
Ketika Kamu mengetahui apa kelas-kelas dan style yang dihasilkan, Kamu dapat mulai menggunakan mereka untuk menambahkan style ke kontenmu.
Contoh umum adalah menambahkan style berbeda untuk post-post dari kategori yang berbeda.
Ini adalah halaman blog di situs demo saya:

Kamu mungkin melihat dari menu navigasi di atas bahwa saya menggunakan warna berbeda untuk setiap kategori utama. Di setiap halaman kategori arsip, Saya memperoleh ini dengan menarget arsip kategori yang relevan menggunakan kelas-kelas yang dihasilkan oleh template tag body_class()
.
Ini adalah CSS untuk kategori basics:
.category-basics #content h1.page-title, .category-basics #content h2.entry-title a:link, .category-basics #content h2.entry-title a:visited { color: #48C9C8; } .category-basics #content article { border-bottom: 1px solid #48C9C8; }
Ini membuat heading dan border berwarna biru di halaman arsip kategori:

Saya juga menambahkan styling ke deskripsi kategori, memberikan warna biru sebagai background dan putih untuk teks:
.archive-meta { background: #21759B; color: #fff; padding: 0.2em 0.5em; font-weight: 400; font-size: 1.1em; overflow: auto; } .category-basics .archive-meta { background: #48C9C8; }
Alasan saya sudah menggunakan styling pada kelas .archive-meta
untuk teks dan layout adalah saya mau semua arsip kategori memiliki styling yang sama. Hanya untuk .category-basics .archive-meta
saja yang saya tambahkan warna background.
Perhatikan bahwa pada kedua kasus tersebut, saya menargetkan kelas-kelas yang dihasilkan oleh tag body_class()
, karena saya mau menambahkan style ke semua post di arsip kategori.
Tetapi bagaimana jika saya mau menambahkan style ke post di blog utama berdasarkan kategori? Saya akan melakukan ini dengan menarget kelas-kelas yang dihasilkan oleh tag post_class()
.
Jadi untuk menambahkan styling biru ke post di halaman utama blog dari kategori basics, saya menambahkan styling ini:
.blog #content .category-basics h2.entry-title a:link, .blog #content .category-basics h2.entry-title a:visited { color: #48C9C8; } .blog #content article.category-basics { border-bottom: 1px solid #48C9C8; }
Ini menarget dua kelas yang dihasilkan oleh template tag kita:
- Kelas
blog
yang ditambahkan ke elemen body oleh tagbody_class()
. - Kelas
category-basics
yang ditambahkan ke elemen article oleh tagpost_class()
.
Setelah menambahkan itu, halaman blog terlihat seperti ini:

Saya dapat pergi lebih jauh dan menambahkan styling berdasarkan kategori ke semua post di blog. Dalam kasus ini, saya tidak akan melakukannya karena banyak post yang berada di banyak kategori sekaligus. Tetapi jika situs Kamu memiliki post di kategori yang tergambar dengan jelas, menarget kelas kategori seperti ini dapat membantu memberikan setiap kategori di situsmu style yang berbeda.
WordPress Template Tags Digabungkan dengan CSS Dapat Menjadi Sangat Ampuh
Sekarang Kamu mengetahui bagaimana menambahkan template tag body_class()
, post_class()
dan the_ID()
ke tema Kamu, untuk menghasilkan kelas dan ID di halaman, arsip dan post Kamu.
Kamu bisa menggunakan ini dalam banyak hal untuk menarget styling di spesifik post type, kategori, format, atau bahkan post secara individu.
Coba pikirkan cara-cara Kamu dapat menggunakan ini untuk menambah ekstra dimensi ke desain dari situsmu.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post