Cara menata tag di WordPress

WordPress memungkinkan Anda untuk mengatur konten Anda ke dalam taksonomi. Secara default, ia datang dengan kategori dan label. Sementara kategori dapat digunakan untuk mengatur konten Anda ke dalam bagian yang berbeda, tag dapat digunakan untuk mengatur konten berdasarkan topik yang lebih spesifik. Anda dapat menampilkan tag yang digunakan di situs Anda dalam tag cloud atau dalam format daftar. Pada artikel ini, kami akan menunjukkan cara mendesain tag WordPress.

Tampilkan semua tag dengan jumlah posting WordPress

Beberapa situs web populer menampilkan tag paling populer sebagai tema di halaman file atau di area footer. Berikut adalah bagaimana Anda dapat menampilkan semua tag posting Anda, dengan jumlah posting dan tanpa menggunakan tag cloud.

Hal pertama yang harus dilakukan adalah menyalin dan menempelkan kode ini ke file .php tema atau plugin khusus situs Anda.

function wpb_tags() { 
$wpbtags =  get_tags();
foreach ($wpbtags as $tag) { 
$string .= 'term_id) .'">'. $tag->name . ''. $tag->count .'' . "n"   ;
} 
return $string;
} 
add_shortcode('wpbtags' , 'wpb_tags' );

Kode ini hanya menampilkan semua tag Anda dengan nomor posting Anda di sebelahnya. Namun, untuk menampilkannya di halaman file atau widget Anda, Anda perlu menggunakan kode pendek ini:

[wpbtags]

Menggunakan kode ini hanya akan menampilkan tautan tag dan nomor pos di sebelahnya. Itu tidak akan membuatnya terlihat cantik. Mari tambahkan beberapa CSS untuk membuatnya cantik. Salin dan tempel CSS ini ke lembar gaya tema Anda.

.tagbox { 
background-color:#eee;
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;

}
.taglink  { 
padding:2px;
}

.tagbox a, .tagbox a:visited, .tagbox a:active { 
text-decoration:none;
}

.tagcount { 
background-color:green;
color:white;
position: relative;
padding:2px;
}

Jangan ragu untuk memodifikasi CSS sesuai dengan kebutuhan Anda. Ini adalah tampilannya di situs demo kami:

Tag gaya dalam informasi meta pos

Beberapa tema WordPress menunjukkan tag di bawah informasi metadata posting dengan sangat baik dengan tanggal posting, penulis, dan metallink lainnya. Namun, beberapa tema mungkin tidak mendesainnya, atau Anda mungkin ingin mendesainnya secara berbeda.

Mari kita lihat bagaimana kita dapat mendesain tautan tag di bawah posting WordPress.

Pertama, Anda harus mengetahui kelas CSS yang digunakan oleh tema WordPress Anda untuk menampilkan tag. Untuk melakukannya, klik kanan pada label dan pilih periksa item dari menu browser.

Ini akan membagi layar browser untuk menampilkan kotak alat pengembang di bawah halaman web. Di kotak alat pengembang, Anda dapat melihat kelas CSS yang digunakan oleh tema WordPress Anda untuk menampilkan tag.

Temukan kelas css yang digunakan oleh tema untuk tag

Pada tangkapan layar di atas Anda dapat melihat tema menggunakan istilah untuk kelas CSS. Sekarang kita akan menggunakan kelas ini di tema kita atau di lembar gaya tema anak untuk mengganti tema CSS default.

.terms a, .terms a:visited, .terms a:active { 
background:#eee;
border:1px solid #ccc;
border-radius:5px;
text-decoration:none;
padding:3px;
margin:3px;
text-transform:uppercase;
}

.terms a:hover { 
background:#a8281a;
color:#FFF;
}

Jangan ragu untuk memodifikasi CSS agar sesuai dengan warna tema Anda. Seperti inilah tampilan label di situs demo kami:

Mengubah gaya CSS untuk tag di postingan WordPress

Anda mungkin telah memperhatikan perbedaan antara dua tangkapan layar selain dari perubahan CSS, kami juga mengubah tag menjadi Tagged dan menghapus koma di antara tag. Bagaimana kita melakukan ini?

Kami memodifikasi the_tags(); tag template di file single.php kami seperti ini:

Jika Anda ingin membatasi jumlah total label yang ditampilkan untuk mengatakan 5 Atau yang lainnya, lihat artikel ini tentang cara menampilkan jumlah tag terbatas setelah memposting

Kami harap artikel ini membantu Anda mendesain tag WordPress. Percobaan dengan CSS sampai Anda mendapatkan hasil yang Anda inginkan.

Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk lebih banyak tutorial video WordPress. Anda juga dapat menemukan kami di Google+ dan Twitter.

Pos terkait

Back to top button