Alphabet Categories Pada Theme Musicii

Setelah bonus tutorial tentang menampilkan single post pada theme musicii, tutorial kali ini adalah tentang bagaimana cara menampilkan alphabet categories pada theme musicii.

Tutorial ini tidak hanya untuk theme musicii ya, tapi kebetulan yang digunakan sebagai contoh adalah theme tersebut. Tutorial ini bisa di aplikasikan di semua theme.

Cara Menampilkan Alphabet Categories Pada Theme Musicii

Sebelumnya, buat yang masih bingung seputar alphabet categories, bisa dilihat di images berikut:

 

Contoh Alphabet Categories
Contoh Alphabet Categories

 Isi Page Adalah Keywords Yang Sudah Kita Simpan di Database

Dengan kata lain ini tidak jauh berbeda dengan shortcode [spp_random_terms] hanya saja ini tidak random, tapi urut dan terbagi sesuai alphabet yang sedang di akses.

 

Contoh Lain Untuk Alphabet Categories
Contoh Lain Untuk Alphabet Categories

Pada akhir tutorial bonus ini yang dicari adalah

  • Tahu apa saja yang dibutuhkan untuk menampilkan alphabet categories.
  • Berhasil mengaplikasikan alphabet categories ini pada theme musicii masing – masing.
  • Berhasil mengaplikasikan alphabet categories ini pada theme lainnya.

Cara yang akan digunakan

Ini murni berdasarkan ilmu tambal sulam ya sob, sebutan alphabet categories pun itu karangan gw aja biar gampang nyebutnya. Jadi sekali lagi tolong dimaklumi kalau tutorial ini masih setengah matang, sampai sejauh ini sudah gw terapkan dan berfungsi dengan baik, tapi gw yakin pasti ada yang lebih rapi lagi dalam sistemasi struktur coding nya.

Disini gw menggunakan javascript sebagai alphabet handler nya, lalu di oper ke php untuk bagian queries nya(karena itu hasilnya menggunakan parameter). Ini bisa juga di optimized menjadi Ajax Request, tapi jelek dari segi SEO nya, selain itu bisa juga di tingkatkan ke POST method untuk bagian queries nya.

Okeh ga pake lama – lama lagi, langsung aja kita buka dashboard, pilih appearance -> editor.

Pada theme musicii, pilih edit bagian theme header.

Baca juga:   Buy Solo Ads

 

Alphabet Categories Step 1 - Edit Header
Alphabet Categories Step 1 – Edit Header

 

Bisa dilihat disitu, penggunaan style pada page yah, ga embed.

Sekarang tambahkan kode javascript ini:


<head>

<!-- mulai copas dari baris berikut, pastikan paste sebelum penutup header </head> -->

<script>

var btns = "";
var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var letterArray = letters.split("");
for(var i = 0; i < 26; i++){
var letter = letterArray.shift();
btns += '<button class="alphaNav" onclick="alphabetSearch(\''+letter+'\');">'+letter+'</button>';
}
function alphabetSearch(let){
window.location.href = "view?index="+let;
}

</script>

<!-- copas sampai baris sebelumnya -->

<!-- other codes -->

</head>

Fungsi kode tersebut adalah menampilkan buttons mulai dari A ~ Z.

Selanjutnya, tambahkan kode berikut, letakkan sesuai screenshot:

 

Alphabet Categories Step 2 - Add new nav
Alphabet Categories Step 2 – Add new nav

Perhatikan ada 2 nav di image tersebut, yang 1 adalah nav untuk menu, dan yang lainnya untuk alphabet categories yang sedang kita kerjakan.

Berikut kode nav yang baru, bisa di copas sesuai dengan posisi image di atas.


<nav id="buttons" role="navigation">
<script> document.write(btns); </script>
</nav>

Dan berikut kode css style yang digunakan pada website contoh tutorial ini.


<style>
#buttons {
display:inline;
text-align:center;
}
button.alphaNav {
max-width: 32px;
width: 100%;
max-height: 32px;
height: 100%;
padding:2px;
margin:5px 2px 5px 2px;
border:1px solid blue;
background-color: rgba(2,0,1,0.8);
color:#FEFEFE;
}
button.alphaNav:hover {
background-color: rgba(2,0,1,0.2);
color:#000201;
}
button.alphaNav:active {
background-color: rgba(2,0,1,0.3);
color:#000201;
}
</style>

Sampai disini, begitu masuk ke homepage, seharusnya sudah ada deretan buttons mulai dari A sampai Z, rapi tersusun, bila belum silahkan kembali di teliti apa ada detail yang terlewat.

Selanjutnya, kita membutuhkan file .php untuk meng-handle queries yang di execute oleh javascript yang kita copy tadi. Silahkan create new text file atau langsung via FTP, bebas.

Copy paste kode berikut ini, ke dalam file yang baru dibuat, lalu save dan beri nama view.php (Penting, jangan sampai beda namanya!).


<?php
require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-config.php' );
require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-includes/wp-db.php' );
if (!$wpdb) {
$wpdb = new wpdb( 'DB_USER', 'DB_PASSWORD', 'DB_NAME', 'DB_HOST');
} else {
global $wpdb;
}
$wpdb->show_errors();
$results = "";
$letter = "";
if(isset($_GET['index']) && strlen($_GET['index']) == 1){
$letter = preg_replace('#[^a-z]#i', '', $_GET['index']);
if(strlen($letter) != 1){
echo "ERROR: Hack Attempt, after filtration the variable is empty.";
exit();
}
$terms = $wpdb->get_col('SELECT term FROM '.$wpdb->prefix.'spp_terms WHERE term LIKE "'.$letter.'%" ORDER BY TERM ASC LIMIT 30');
}
?>
<?php
/*
* Template Name: View
*/

get_header();
?>
<div id="content" class="clearfix">

<div id="main" class="clearfix" role="main">

<?php
function perma($s){
$s = $output = trim(preg_replace(array("`'`", "`[^a-z0-9]+`", "`video`", "`nagaswara`", "`radio`", "`edit`", "`music`", "`official`", "`lirik`", "`clip`", "`klip`"), array("", "-"), strtolower($s)), "-");
return $s;
}
$no = '1';
if (empty($terms)) {
echo "Nothing Found !!";
}
if (isset($terms)) {
foreach ($terms as $results) {
echo '<div class="boxdepan"><div class="album-art-small"><h3>'.$no++.'</h3></div><span class="mp3-title"><h3><a href="/lagu/'.perma($results).'.html" title="'.$results.'">'.$results.'</a></h3></span></li></div>';
$results++;
}

}
?>

</div> <!-- end #main -->

</div> <!-- end #content -->

<?php get_footer(); ?>

Tolong diperhatikan! Terdapat 4 opsi yang harus diganti, agar sesuai dengan data masing – masing! 4 Opsi tersebut adalah:

  • DB_USER = Silahkan ganti dengan username database blog masing – masing.
  • DB_PASSWORD = Silahkan ganti dengan password database blog masing – masing.
  • DB_NAME = Silahkan ganti dengan nama database blog masing – masing.
  • DB_HOST = Silahkan ganti dengan host database blog masing – masing.
Baca juga:   Best Combo! AGC Dojo Plus WP Automatic

Setelah menemukan ke-empat opsi tersebut dan sudah diganti dengan data server masing – masing, upload file view.php tersebut, ke dalam folder theme musicii di server masing – masing.

UPDATE 15 Februari 2016 – Add New Page

Maaf sob, ini step penting malah lupa gw cantumin di bonus tutorial nya.. di lanjut ya sob 🙂

Setelah file view.php sudah di upload kedalam folder theme website kita, sekarang kita wajib membuat page baru dengan title: View, cek image dibawah untuk lebih jelas nya:

 

Add New Page Dengan Title View

Lalu publish page tersebut.

Selamat, Alphabet Categories Sudah Berhasil di Tambahkan!

Gampang kan? Kalau mau di aplikasikan ke theme lain, ya tinggal di adaptasikan aja, mau ditampilkan di posisi mana, atau warna apa.

Jangan lupa kalau sudah bisa aplikasi ke theme lain, boleh donk screenshot nya dikirim, biar dipajang disini sebagai contoh & motivasi.. hehe.

Sekian tutorial bonus kali ini, semoga berguna dan bermanfaat. Sampai ketemu di tutorial selanjutnya 🙂

One comment

  • Hello, guest