Tampilan Posting Berbeda-Beda Berdasarkan Label

Saya hanya merasa sedikit penasaran dengan blog Darcy Clarke yang memiliki warna artikel berbeda-beda berdasarkan label posting. Pada awalnya Saya mencoba untuk melihat isinya, karena Saya pikir ada semacam script ajaib untuk melakukan sihir itu. Sayangnya Saya tidak menemukan apapun. Yang Saya temukan hanya tag <style> berisi CSS pendek untuk menyatakan warna latar posting tunggal:

<style>
    body
     { background: #DB8B23; }
    body h1 small
     { color: #DB8B23; }
    body #body
     { color: #000; }
</style>

Dalam Wordpress, ciri kecil seperti ini biasa disebut sebagai Custom Post. Hal ini bisa dilakukan dengan cara menginstal plugin Art Direction. Tapi setahu Saya plugin ini hanya berfungsi untuk menerapkan CSS tambahan tersebut pada saat kita memasuki halaman artikel tunggal, dan bukan menerapkan CSS pada setiap posting seperti gambar di atas.

Plugin Art Direction Wordpress

Meskipun, jika kita bisa mengetahui masing-masing kelas posting (misalnya .post-#postid), kita bisa saja menerapkan kode CSS pada masing-masing kelas tersebut:

.post-2444 {
  background-color:red;
}
.post-2445 {
  background-color:green;
}
.post-2446 {
  background-color:blue;
}

Tapi kelas posting tidak bisa kita kendalikan. Dan lagipula, Blogger tidak memiliki fasilitas seperti ini. Di sini kita tidak membicarakan mengenai tampilan posting yang berbeda-beda berdasarkan urutan acak melainkan membicarakan tentang tampilan posting yang berbeda-berbeda berdasarkan label, sehingga semuanya harus bisa kita kendalikan dengan baik.

Saat itu Saya cuma memikirkan tentang nama label yang tercantum pada setiap posting. Seandainya Saya bisa mengakses nama label tersebut dan menciptakan kodisi, maka Saya bisa menuliskan kode CSS khusus untuk setiap posting yang mengandung label dengan kata tertentu. Pikiran Saya berhenti pada selektor :contains(). Saya harap Saya bisa menemukan label berisi teks tertentu di dalam setiap posting, dan dengan cara itulah Saya akan menciptakan kondisi.

Yang terpenting adalah kita temukan terlebih dahulu elemen yang biasanya membungkus daftar label pada catatan kaki posting. Dalam blog ini Saya mendapati elemen ini:

Catatan kaki posting

Kita gunakan elemen itu untuk dijadikan sebagai induk dari daftar label posting. Dan kita bisa menciptakan kondisi dengan cara melihat semua artikel yang ada, kemudian kita cek apakah sebuah label berisi teks tertentu ada atau tidak di dalamnya. Jika ada, lakukan sesuatu pada posting tersebut!

// Lihat semua posting yang ada kemudian cek masing-masing tautan di dalam span.post-labels
// Cek apakah di dalamnya terdapat kata tertentu atau tidak (misalnya: Menyenangkan)
// Jika ada, tambahkan satu kelas spesifik baru pada posting tersebut
$('.post').each(function() {
    if ($(this).find('.post-labels a:contains(Menyenangkan)').length) {
        $(this).addClass('red');
    } else if ($(this).find('.post-labels a:contains(Jelek)').length) {
        $(this).addClass('green');
    } else if ($(this).find('.post-labels a:contains(Bosan)').length) {
        $(this).addClass('blue');
    } else if ($(this).find('.post-labels a:contains(Mamamia)').length) {
        $(this).addClass('yellow');
    }
});

Nah! jika semua posting berlabel tertentu sudah mendapatkan kelasnya masing-masing, kita bisa mendefinisikan tampilannya di dalam CSS seperti ini:

.post.red    {background-color:red;   }
.post.green  {background-color:green; }
.post.blue   {background-color:blue;  }
.post.yellow {background-color:yellow;}

Saya tidak memiliki blog demo untuk tutorial ini, tapi Saya sudah membuat ilustrasinya. Katakanlah semua elemen <article> pada ilustrasi ini adalah posting-posting yang ada di dalam blog Anda:

Lihat Demo

Manipulasi ini setidaknya akan berjalan lancar pada posting yang hanya mengandung satu label saja dari semua nama label yang tercantum dalam kondisi. Jika tidak, hasilnya akan tidak terduga. Misalnya, jika kita telah menciptakan kondisi untuk posting dengan label Menyenangkan, Jelek, Bosan dan Mamamia, maka jika terdapat satu posting dengan label Menyenangkan dan Mamamia secara bersamaan, posting ini akan menunjukkan penanpilan yang tidak terduga tampilan posting akan mengikuti deklarasi warna pada kelas yang dituliskan terakhir (peraturan CSS: Yang bawah mengalahkan yang atas).

Saya juga sudah menerapkan teknik ini di sini, namun tampak tidak begitu mencolok. Saya hanya memanfaatkannya untuk menandai setiap label Tingkatan Pembelajaran Saat ini Saya sudah menggantinya dengan hack <b:loop> label posting yang tidak valid, dan hanya berlaku pada halaman tunggal, namun tetap bisa bekerja tanpa JavaScript:

---

Terkait: Tampilan Posting Berbeda-Beda Berdasarkan Label Tanpa javaScript