Kali ini saya mau berbagi sedikit pengetahuan saya mengenai flexslider, dan membuat widget slider sederhana dengan flexslider ini, mariii…. 🙂
Okeh, mari kita membuat widget slider flexslider sendiri!
1. Download source dari Flexslider disini
Setelah source Flexslider berhasil didownload, ekstrak kedalam folder sesuai keinginan. Kalau saya menaruhnya di folder ‘js’, jadi kurang lebih seperti ini ‘public_html/js’
2. Struktur dasar dari Flexslider
Deklarasi Javascript dan CSS flexslider dilakukan dalam tag ‘‘
[html]
jQuery ( document).ready(function($){
$ ( ‘.flexslider’).flexslider({
slideshowSpeed: 36000, //silahkan diganti
animationDuration: 36000 //silahkan diganti
});
});
[/html]
Deklarasi HTML yang akan menjadi slider dengan flexslider, letakkan di bagian mana kamu mau slidernya muncul
[html]
[/html]
Secara HTML flexslider ini sudah berfungsi dengan baik. Tapi karena post ini judulnya adalah membuat widget slider flexslider sederhana, maka belum lengkap kalau belum kita buat widgetnya yah 🙂 Maka langsung saja kita ke langkah selanjutnya!
3. Pembuatan widget slider flexslider
Deklarasi dasar pembuatan sebuah widget dalam wordpress adalah seperti berikut:
[html]
class My_Widget extends WP_Widget {
public function __construct () {
// widget actual processes
// definisi variable2 utama dari widget yang akan kita buat
}
public function widget( $args, $instance ) {
// outputs the content of the widget
// HTML widget yang akan tampil
}
public function form ( $instance ) {
// outputs the options form on admin
// tampilan form widget di WP-admin
}
public function update ( $new_instance, $old_instance ) {
// processes widget options to be saved
// apabila form widget kamu di edit, valuenya akan ter-update
}
}
//Daftarin dan eksekusi widget kamu
add_action ( ‘widgets_init’, function (){
register_widget ( ‘My_Widget’ );
});
[/html]
Berikut adalah sample widget yang sudah jadi, harap maklum masih sederhana, silahkan bermain-main lebih lanjut 🙂
[html]
class Widget_Ku extends WP_Widget {
function __construct () {
$widget_ops = array ( ‘classname’ = > ‘widget_ku’, ‘description’ = > __(‘Widget Flexslider Sederhana’, ‘Widget_Ku’) );
$control_ops = array ( ‘width’ = > 300, ‘id_base’ = > ‘widget_ku’ );
parent::__construct (
‘widget_ku’, // Base ID
‘Widget Flexslider Sederhana’, // Name
$widget_ops,
$control_ops
);
}
function form ( $instance ) {
$defaults = array (
‘image_id1’ = > ”,
‘image_id2’ = > ”,
‘image_id3’ = > ”,
);
$instance = wp_parse_args ( (array) $instance, $defaults );
?>
Image url 1
get_field_id( ‘image_id1’ ); ?>” name=”get_field_name( ‘image_id1’ ); ?>” value=”” />
Image url 2
get_field_id( ‘image_id2’ ); ?>” name=”get_field_name( ‘image_id2’ ); ?>” value=”” />
get_field_id( ‘image_id3’ ); ?>” name=”get_field_name( ‘image_id3’ ); ?>” value=”” />
“>