Menarget CSS untuk Konten Tertentu dengan WordPress Template Tags

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

Final product image — What You'll Be Creating

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 seperti body_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:

A blog page with blue styling for titles and black for content

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:

Image: https://cms-assets.tutsplus.com/uploads/users/227/posts/32236/image/basics-category-archive.jpg

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 tag body_class().
Kelas category-basics yang ditambahkan ke elemen article oleh tag post_class().

Setelah menambahkan itu, halaman blog terlihat seperti ini:

the blog page with cyan styling added to a post from the basics category

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.

Menarget CSS untuk Konten Tertentu dengan WordPress Template Tags

Menambahkan Tag body_class() ke Tema Kamu

Menambahkan Template Tag post_class dan the_ID ke Tema Kamu

Menggunakan Style yang Dihasilkan di Stylesheet Kamu

WordPress Template Tags Digabungkan dengan CSS Dapat Menjadi Sangat Ampuh

Envato Tuts+ is now part of Envato Elements

One subscription provides unlimited access to:

Menambahkan Tag `body_class()` ke Tema Kamu

Menambahkan Template Tag `post_class` dan `the_ID` ke Tema Kamu