Membuat Halaman “Theme Options” Untuk Kostumisasi Setting Tema – Desain WP Theme Lanjutan #wp_advance
30menit.com – Apa sih theme options dan mengapa kita harus membuat halaman theme options? #wp_advance
Secara default theme options tidak ada pada menu wordpress. Bahkan di tema bawaan wp juga tidak ada. Lalu buat apa kita harus membuatnya? Sebenernya tidak harus ada jika tema yang anda buat hanya tema sederhana. Tapi jika anda adalah seorang theme creator yang membuat tema khusus seperti tema online shop, tema forum, tema profil perusahaan, dsb umumnya akan membutuhkan theme options ini untuk menampung setingan-setingan khusus untuk tema yang anda buat. Coba baca tutorial saya Membuat Custom WP_Query. Di tutorial tersebut ID Category dan Tag nya harus di tambahkan manual pada deretan source kodenya. Jika pengguna tema anda adalah orang yang kurang dalam hal coding ini akan menyulitkan pengguna untuk mengganti ID tersebut. Di sinilah fungsi theme options dibutuhkan. Istilahnya theme options ini adalah tampilan GUI untuk menangani settingan Custom WP_Query yang anda buat.
Sebagai tahapan belajar, kita akan modifikasi Custom WP_Query untuk di setting melalui theme options. Untuk selanjutnya anda dapat mengembangkan theme options ini untuk mengatur fungsi khusus apa saja yang akan anda buat. Untuk tampilan theme options ini kita manfaatkan style default wp. Selanjutnya bisa anda modifikasi sendiri. Agar lebih jelas silakan buka juga tutorial Custom WP_Query.
Silakan buka file functions.php pada tema anda. Belum pernah membuat tema wordpress? Silakan baca Tutorial Membuat Tema WP dengan bootstrap 4. Silakan tambahkan kode berikut sebagai kerangka theme options.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
// Theme Options $themename = 'BTPM'; $shortname = str_replace(' ', '_', strtolower($themename)); $options = array(); // tempat meletakkan pengaturan settingnya nanti function get_theme_option($option){ global $shortname; return stripcslashes(get_option($shortname . '_' . $option)); } function get_theme_settings($option){ return stripcslashes(get_option($option)); } function mytheme_add_init(){ $file_dir = get_bloginfo('template_directory'); wp_enqueue_style('functions', $file_dir . '/function.css', false, '1.0', 'all'); } function mytheme_admin(){ global $themename, $shortname, $options; echo '<h1>BTPM Theme Options</h1>'; echo '<p>By <a href="https://www.30menit.com" target="_blank">Masyhuri Jamil</a></p>'; if ( $_REQUEST['save'] ) echo '<div id="message" class="updated fade" style="margin-bottom:10px;"><p><strong>' . $themename . ' settings saved.</strong></p></div>'; if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade" style="margin-bottom:10px;"><p><strong>' . $themename . ' settings reset.</strong></p></div>'; echo '<div id=\"function\">'; // Tempat meletakkan form } function mytheme_add_admin(){ global $themename, $shortname, $options; if ( $_GET['page'] == basename(__FILE__) ){ if ( 'save' == $_REQUEST['action'] ){ foreach ($options as $value) { update_option( $value['id'], $_REQUEST[ $value['id'] ] ); } foreach ($options as $value) { if ( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ] ); } else { delete_option( $value['id'] ); } } header('Location: themes.php?page=functions.php&save=true'); die; } else if( 'reset' == $_REQUEST['action'] ) { foreach ($options as $value) { delete_option( $value['id'] ); } header('Location: themes.php?page=functions.php&reset=true'); die; } } add_theme_page($themename . 'Options', '' . $themename . ' Options', 'edit_themes', basename(__FILE__), 'mytheme_admin'); } add_action('admin_init', 'mytheme_add_init'); add_action('admin_menu', 'mytheme_add_admin'); |
Dari kode kerangka di atas, silakan lebih fokus ke variable $options dan function my_theme_admin, karena kedua bagian ini yang paling penting. Jika kedepannya anda ingin melakukan perubahan setting, cukup melakukan perubahan pada kedua bagian tersebut. Variable $options adalah variable yang menampung data settingan yang ingin kita gunakan. Di dalamnya juga terdapat id options yang tersimpan dalam data base. Sedangakn function my_theme_admin adalah fungsi yang mengatur tampilan halaman theme options. Di fungsi inilah kode-kode html tampilan beserta style css nya di generalisasi. Sebenernya function mytheme_add_admin juga sangat penting, karena fungsi ini bertugas memproses data input form untuk di simpan dalam data base berdasarkan data-data yang ada di variable $options. Akan tetapi tetap fokus saja ke variable $options dan function my_theme_admin saja, karena proses pengembangan lanjutan cukup melakukan edit keduanya. Sampai di kode kerangka di atas sebenernya menu dan halaman theme options sudah terbentuk. Tetapi belum memiliki setingan sama sekali. Mari kita isi settingan yang ingin kita gunakan. Edit variable $options seperti di bawah
|
1 2 3 4 5 6 7 8 9 10 |
$options = array( // Option for Query Cartegory array( 'name' => 'Query Category', 'type' => 'heading', ), array( 'name' => 'Category ID', 'type' => 'text', 'id' => $shortname . '_cat_id', 'std' => '', ), array( 'name' => '</div></div>', 'type' => 'close', ), // Option for Query Tag array( 'name' => 'Query Tag', 'type' => 'heading', ), array( 'name' => 'Tag ID', 'type' => 'text', 'id' => $shortname . '_tag_id', 'std' => '', ), array( 'name' => '</div></div>', 'type' => 'close', ), ); |
Variable $options tidak akan berguna jika tidak ada yang mewadahi atau yang menampilkan. Jadi function my_theme_admin akan bertugas menampilkan data-data dari variable tersebut. Dalam function my_theme_admin kita cukup membuat satu untuk satu jenis form saja. Maksudnya jika dalam halaman tersebut terdapat input text, kita cukup membuat satu saja yang nantinya dapat digunakan berkali-kali sesuai kebutuhan atau sesuai data variable $options. Kita gunakan fungsi switch dalam php untuk melakukan hal tersebut. Baik silakan modifikasi function my_theme_admin menjadi seperti berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
function mytheme_admin(){ global $themename, $shortname, $options; echo '<h1>BTPM Theme Options</h1>'; echo '<p>By <a href="https://www.30menit.com" target="_blank">Masyhuri Jamil</a></p>'; if ( $_REQUEST['save'] ) echo '<div id="message" class="updated fade" style="margin-bottom:10px;"><p><strong>' . $themename . ' settings saved.</strong></p></div>'; if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade" style="margin-bottom:10px;"><p><strong>' . $themename . ' settings reset.</strong></p></div>'; echo '<div id=\"function\">'; echo '<style type="text/css">.text-option {width: 100%;}.heading-option {padding-left: 10px;}.sparator-option {border-bottom: 1px solid #9c9c9c;margin: -5px 10px 0 10px;}</style>'; echo '<form action="" method="post">'; foreach ($options as $value) { switch ( $value['type'] ) { case 'heading': echo '<div class="stuffbox" style="margin-right: 2%;">'; echo '<h2 class="heading-option">' . $value['name'] . '</h2><div class="sparator-option"></div>'; echo '<div class="option-save"><div class="inside"><table class="form-table"><tbody>'; break; case 'text': echo '<tr><th scope="row"><label for="' . $value['id'] . '">' . $value['name'] . '</label></th>'; echo '<td><input name="' . $value['id'] . '" class="myfield text-option" id="' . $value['id'] . '" type="' . $value['type'] .'" value="'; if (get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } echo '" /></td></tr>'; break; case 'close': echo '</tbody></table></div></div>'; echo '</div>'; break; default; } } echo '<p class="save-p save-option"><input name="save" type="submit" class="sbutton button-primary" value="Save Options" /><input type="hidden" name="action" value="save" /></p>'; echo '</form>'; echo '<form method="post"><p class="save-p save-option"><input name="reset" type="submit" class="sbutton button-secondary" value="Reset Options" /><input type="hidden" name="action" value="reset" /></p></form>'; } |
Sampai disini proses pembuatan halaman theme options sebenernya sudah selesai. Akan tetapi data dalam databse yang dihasilkan dari theme option masih belum berguna karena belum diterapkan pada titik yang ingin di setting. Dalam hal ini adalah Custom WP_Query pada index.php. Titik yang di setting tidak selalu ada pada index.php, bisa dimana saja namun dalam contoh ini adalah Custom WP_Query. Untuk mengambil data hasil theme options dari data base gunakan perintah php get_theme_option(id_setting); id_setting disini maksudnya adalah id dari settingan yang ada di variable $options. Biar tidak bingung langsung ke penerapan saja. Jika dalam index.php ada sederetan kode berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class="row"> <div class="col-md-6"> <div class="card border-primary"> <?php $cat_id = 77; $the_query_cat = new WP_Query( array( 'cat' => $cat_id, 'posts_per_page' => 5, 'orderby' => 'rand', )); ?> <div class="card-header text-primary">Post dalam kategori <?php echo get_the_category_by_id($cat_id); ?></div> <div class="card-body text-primary"> <ul> <?php while ($the_query_cat->have_posts()) : $the_query_cat->the_post(); ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul> </div> </div> </div> <div class="col-md-6"> <div class="card border-primary"> <?php $tag_id = 87; $the_query_tag = new WP_Query( array( 'tag_id' => $tag_id, 'posts_per_page' => 5, 'orderby' => 'rand', )); ?> <div class="card-header text-primary">Post menggunakan tag <?php echo get_tag($tag_id)->name; ?></div> <div class="card-body text-primary"> <ul> <?php while ($the_query_tag->have_posts()) : $the_query_tag->the_post(); ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul> </div> </div> </div> </div> |
Modifikasi manjadi berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<div class="row"> <?php if (get_theme_option('cat_id') !== "") { ?> <div class="col-md-6"> <div class="card border-primary"> <?php $cat_id = get_theme_option('cat_id'); $the_query_cat = new WP_Query( array( 'cat' => $cat_id, 'posts_per_page' => 5, 'orderby' => 'rand', )); ?> <div class="card-header text-primary">Post dalam kategori <?php echo get_the_category_by_id($cat_id); ?></div> <div class="card-body text-primary"> <ul> <?php while ($the_query_cat->have_posts()) : $the_query_cat->the_post(); ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul> </div> </div> </div> <?php } if (get_theme_option('tag_id') !== "") { ?> <div class="col-md-6"> <div class="card border-primary"> <?php $tag_id = get_theme_option('tag_id'); $the_query_tag = new WP_Query( array( 'tag_id' => $tag_id, 'posts_per_page' => 5, 'orderby' => 'rand', )); ?> <div class="card-header text-primary">Post menggunakan tag <?php echo get_tag($tag_id)->name; ?></div> <div class="card-body text-primary"> <ul> <?php while ($the_query_tag->have_posts()) : $the_query_tag->the_post(); ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul> </div> </div> </div> <?php } ?> </div> |
Hasilnya sekarang ID Category dan ID Tag pada Custom WP_Query dapat di setting dari halaman theme options. Agar lebih mudah dalam memahami silakan simak video berikut :
Tulisan Terkait
Masyhuri Jamil
Tidak memiliki kompetensi di bidang coding. Tapi selalu semangat terus belajar html, css, php, mysql, java script (jquery). Suka oprek-oprek android juga dan yang pasti suka jalan-jalan (treveling).
