Ads

Sitemap Wordpress Dengan Plugin A-Z Listing

Sitemap dibuat dengan tujuan utamanya adalah untuk para pengunjung website, bukan untuk mesin pencari dan umumnya akan berisi tentang daftar semua halaman website kita.

Kali ini saya akan bagikan cara membuat Sitemap atau Daftar Isi untuk Wordpress dengan Plugin A-Z Listing. Ditambah bonus CSS dengan tampilan seperti Website Download Anime Meownime.

Plugin A-Z Listing
Dagruel

A-Z Listing

Menampilkan postingan, halaman, dan kategori dalam daftar abjad atau dengan Plugin A-Z Listing.

Plugin ini berisi "Short-Code" untuk daftar dan widget, sehingga anda bisa menempatkan nya di mana saja dari situs anda. Jika situs anda tidak mempunyai halaman apapun, maka tidak akan menampilkan apapun.

Bisa menampilkan daftar postingan bestingan berdasarkan Post-Type ataupun Halaman. Juga didukung pada posting seperti produk WooCommerce atau, dengan kategori ataupun tag.

Cara Membuat Sitemap Atau Daftar Isi dengan Plugin

Buka Dashboard Wordpress lalu pilih "Plugin > Add New > cari dengan nama A-Z Listing" Kemudian Install > Activate.

Sampai sini sudah selesai. untuk membuat sitemap nya gunakan "Short Code" dibawah dan tempelka kedalam Page atau Halaman yang baru dibuat.

[a-z-listing display="posts" post-type="post"]
Code diatas menampilkan semua daftar Postingan dengan "post-type" Post.
[a-z-listing display="posts" post-type="post" taxonomy="category" terms="my-term-slug"]
Code diatas menampilkan semua daftar Postingan dengan kategori tertentu. Ganti text yang ditandai dengan slug kategori.

Untuk "Short-Code" lainnya bisa cek di halaman ini.

Bonus CSS seperti Anime List Meownime

Bisa dipasang melalui "Appereance > Theme Editor > style.css" atau "Appereance > Customize > Additional CSS"

#az-tabs {font-size: 14px;font-weight: 400;}
#az-tabs a {color: #666;text-decoration: none;transition: all .3s ease;white-space: nowrap;overflow: hidden;}
#az-tabs a:hover {color: #DA4453;}
#az-tabs .letter-section {margin-bottom: 20px;}
#az-tabs .letter-section h2.letter-title {background-color: #36688a;color: #fff;margin: 0;padding: 10px 15px;border: none;font-size: 110%;font-weight: 600;text-transform: uppercase;position: relative;}
#az-tabs .letter-section:nth-of-type(even) h2.letter-title {background-color: #b53428;}
#az-tabs ul, #az-tabs ul li {list-style-type: none;}
#az-tabs .letter-section ul {margin: 0;padding: 0px;border-top: 0px;overflow: hidden;max-width: 100%;}
#az-tabs .letter-section ul li {color: #666;list-style-type: none;margin: 0px;padding: 10px;line-height: 1.5em;display: flex;width: 47%;float: left;}
#az-tabs .letter-section ul li:before {content: '';width: 20px;height: 20px;min-width: 20px;min-height: 20px;margin: 0;vertical-align: -5px;background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%234b4f56'/%3E%3C/svg%3E") center no-repeat;transition: .4s all ease;-webkit-transition: .4s all ease;-moz-transition: .4s all ease;-ms-transition: .4s all ease;-o-transition: .4s all ease;}
#az-tabs .letter-section ul li:hover:before {
transform: rotate(-36deg);-webkit-transform: rotate(-36deg);-moz-transform: rotate(-36deg);-ms-transform: rotate(-36deg);-o-transform: rotate(-36deg);}
@media screen and (max-width:680px) {
#az-tabs .letter-section ul li {width: 100%;float: none;}}
@media screen and (max-width:480px) {
#az-tabs {font-size: 13px;}
#az-tabs .letter-section h2.letter-title {padding: 7px 15px;}}
@media screen and (max-width:360px) {
#az-tabs {font-size: 12px;}
#az-tabs .letter-section h2.letter-title {padding: 7px 12px;}
#az-tabs .letter-section ul li {padding: 7px 12px;}}

Sekian Postingan saya kali ini semoga bermanfaat, dan jika ada yang ingin di tanyakan silahkan berkomentar dibawah. Sampai jumpa dipostingan selanjutnya Terima Kasih.

https://a-z-listing.com/
https://meownime.com

Comments

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!