Saya hanya merasa sedikit ingin tau dengan blog Darcy Clarke yang mempunyai warna artikel berbeda-beda menurut label posting. Pada awalnya Saya mencoba untuk melihat isinya, alasannya yaitu Saya pikir ada semacam script ajaib untuk melaksanakan 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 menyerupai ini biasa disebut sebagai Custom Post. Hal ini sanggup dilakukan dengan cara menginstal plugin Art Direction. Tapi setahu Saya plugin ini hanya berfungsi untuk menerapkan CSS pemanis tersebut pada ketika kita memasuki halaman artikel tunggal, dan bukan menerapkan CSS pada setiap posting menyerupai gambar di atas.
Meskipun, jikalau kita sanggup mengetahui masing-masing kelas posting (misalnya .post-#postid), kita sanggup saja menerapkan instruksi 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 sanggup kita kendalikan. Dan lagipula, Blogger tidak mempunyai akomodasi menyerupai ini. Di sini kita tidak membicarakan mengenai tampilan posting yang berbeda-beda menurut urutan acak melainkan membicarakan ihwal tampilan posting yang berbeda-berbeda menurut label, sehingga semuanya harus sanggup kita kendalikan dengan baik.
Saat itu Saya cuma memikirkan ihwal nama label yang tercantum pada setiap posting. Seandainya Saya sanggup mengakses nama label tersebut dan membuat kodisi, maka Saya sanggup menuliskan instruksi CSS khusus untuk setiap posting yang mengandung label dengan kata tertentu. Pikiran Saya berhenti pada selektor :contains(). Saya harap Saya sanggup menemukan label berisi teks tertentu di dalam setiap posting, dan dengan cara itulah Saya akan membuat kondisi.
Yang terpenting yaitu kita temukan terlebih dahulu elemen yang biasanya membungkus daftar label pada catatan kaki posting. Dalam blog ini Saya mendapati elemen ini:
Kita gunakan elemen itu untuk dijadikan sebagai induk dari daftar label posting. Dan kita sanggup membuat kondisi dengan cara melihat semua artikel yang ada, lalu 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 lalu 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 gres 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! jikalau semua posting berlabel tertentu sudah mendapat kelasnya masing-masing, kita sanggup mendefinisikan tampilannya di dalam CSS menyerupai ini:
.post.red {background-color:red; } .post.green {background-color:green; } .post.blue {background-color:blue; } .post.yellow {background-color:yellow;}Saya tidak mempunyai blog demo untuk tutorial ini, tapi Saya sudah membuat ilustrasinya. Katakanlah semua elemen <article> pada gambaran ini yaitu posting-posting yang ada di dalam blog Anda:
Manipulasi ini setidaknya akan berjalan lancar pada posting yang hanya mengandung satu label saja dari semua nama label yang tercantum dalam kondisi. Jika tidak, kesannya akan tidak terduga. Misalnya, jikalau kita telah membuat kondisi untuk posting dengan label Menyenangkan, Jelek, Bosan dan Mamamia, maka jikalau terdapat satu posting dengan label Menyenangkan dan Mamamia secara bersamaan, posting ini akan mengatakan 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 sanggup bekerja tanpa JavaScript:
Terkait: Tampilan Posting Berbeda-Beda Berdasarkan Label Tanpa javaScript
Sumber https://www.dte.web.id/