Pada tutorial sebelumnya, kita sudah membuat master data untuk membuat slide.
Saatnya kita membuat sebuah plugin untuk add on di elementor kita.
Pertama-tama buat dulu folder di web_folder > wp-content > plugins, pada contoh ini saya akan membuat folder dengan nama jamalapr-slider-bootstrap, kemudian dalam folder tersebut buat lagi satu buah file dengan nama jamalapr-slider-bootstrap.php dan buat juga sebuah folder dengan nama widgets, untuk stuktur file dan folder akan seperti ini
Kita akan fokus dulu pada file jamalapr-slider-bootstrap.php, buka file tersebut kemudian tambahkan code seperti berikut.
<?php
/**
* Plugin Name: Jamalapriadi Slider Bootstrap
* Description: Twitter Bootstrap Slider for Elementor
* Version: 1.0.0
* Author URI: https://jamalapriadi.com
* Text Domain: jamalapr-slider-bootstrap
*/setelah disave, kita bisa langsung cek pada menu plugins, seharusnya akan muncul tampilan seperti berikut:
Pada gambar diatas, artinya kita sudah berhasil mendeklerasikan plugin kita, selanjutnya kita akan membuat sebuah file pada folder widgets dengan nama bootstrap-carousel-widget.php, untuk stuktur file dan folder kurang lebih seperti ini:
pada file bootstrap-carousel-widget.php kita akan isi dengan kode seperti berikut:
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
class Carousel_Widget extends \Elementor\Widget_Base{
public function get_name(){
}
public function get_title(){
}
public function get_icon(){
}
public function get_script_depends(): array {
}
public function get_style_depends() {
}
public function get_keywords(): array{
}
protected function register_controls(){
}
protected function render(){
}
}Widget Elementor perlu memiliki ID unik yang digunakan dalam kode, dan informasi dasar tambahan yang digunakan dalam editor Elementor. untuk itu pada bagian get_name kita isikan seperti berikut:
public function get_name(){
return 'jamalapr_bootstrap_carousel';
}Kemudian kita perlu men-setting Judul Widget, Judul Wiget ini akan digunakan dalam editor Elementor, Kita akan melihat judul ini ketika berinteraksi dengan panel elementor, untuk itu bagian get_title kita tambahkan menjadi seperti berikut:
public function get_title(){
return esc_html__( 'Bootstrap Carousel', 'textdomain' );
}Setiap widget tidak hanya memiliki label tetapi juga ikon. Ikon-ikon ini ditampilkan di lokasi yang berbeda di Editor, seperti panel elemen dan panel navigator. Ini bukan bidang yang wajib diisi, tetapi sangat direkomendasikan.
Untuk icon kita bisa menggunakan Elementor Icon atau FontAwesome Icon, pada bagian get_icon kita ubah menjadi seperti berikut:
public function get_icon(){
return 'eicon-slider-3d';
}Untuk memudahkan pencarian widget kita, kita perlu men-setting keyword dari widget kita, pada bagian get_keywords akan kita masukan data array untuk kata kunci pencarian keyword kita.
public function get_keywords(): array{
return ['carousel','bootstrap'];
}Supaya widget bisa menampilkan hasil kita perlu menambahkan data pada function render, untuk sementara function render kita buat dulu seperti ini ( nanti akan kita ubah pada step selanjutnya )
protected function render(){
echo "Ini adalah widget carousel";
}selanjutnya kita akan mencoba me registarsikan control, supaya data yang ditampilkan bisa lebih dinamis. tapi sebelum itu kita ingin memastikan terlebih dahulu bahwa widget kita sudah berfungsi pada editor elementornya. untuk itu kita perlu memanggil file bootstrap-carousel-widget.php yang telah kita buat sebelumnya ke dalam file jamalapr-slider-bootstrap.php, tambahkan kode nya seperti berikut
<?php
/**
* Plugin Name: Jamalapriadi Slider Bootstrap
* Description: Twitter Bootstrap Slider for Elementor
* Version: 1.0.0
* Author URI: https://jamalapriadi.com
* Text Domain: jamalapr-slider-bootstrap
*/
function register_jamalapr_elementor_addon_widget( $widgets_manager ){
require_once( __DIR__ . '/widgets/bootstrap-carousel-widget.php' );
$widgets_manager->register( new \Jamalapri_Carousel_Widget() );
}
add_action( 'elementor/widgets/register', 'register_jamalapr_elementor_addon_widget' );sampai tahap ini, jika kita sudah mengaktifkan plugin kita, kita bisa cek pada halaman elementor. pastikan anda sudah menginstall plugin elementor dan mengaktifkan plugin yang kita buat tadi
pada gambar diatas kita sudah bisa mencari widget kita dengn nama Bootstrap Carousel.
lanjut, kita akan membuat sebuah control, dengan fungsi register_controls(),
protected function register_controls(){
$this->start_controls_section(
'section_content',
[
'label' => esc_html__( 'Content', 'textdomain' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'continent_1',
[
'label' => esc_html__( 'Continent 1', 'textdomain' ),
'type' => 'continents-control',
]
);
$this->end_controls_section();
}untuk membuat sebuah controls pada widget elementor setidaknya dibutuhkan beberapa fungsi yaitu $this->start_controls_section(), $this->add_control(), dan $this->end_controls_section()
Sekarang kita akan define kebutuhan controls untuk slider kita.
- Slider akan terdiri dari beberapa type yaitu : slider basic, slider with indicator, slider with caption, full slider carousel. untuk type ini sendiri saya ambil berdasarkan type di https://getbootstrap.com/docs/5.3/components/carousel/#how-it-works
- Data Slider pada widget ini akan diambil dari post type slider yang pada sesi satu telah kita buat sebelumnya.
- Control untuk mengatur jumlah slider yang akan kita tampilkan, jadi misal data yang kita input di slider ada 10 data atau lebih, tetapi kita hanya ingin menampilkan datanya hanya 3 atau 5 data saja.
- Styling control untuk mengatur Title, Subtitle, Image dan Link Button.
Register Control untuk memilih Type Slider:
$this->add_control(
'type_carousel',
[
'type' => \Elementor\Controls_Manager::CHOOSE,
'label' => esc_html__( 'Type Carousel', 'textdomain' ),
'options' => [
'basic' => [
'title' => esc_html__( 'Basic', 'textdomain' ),
'icon' => 'eicon-carousel-loop',
],
'indicators' => [
'title' => esc_html__( 'Indicators', 'textdomain' ),
'icon' => 'eicon-navigation-horizontal',
],
'caption' => [
'title' => esc_html__( 'Caption', 'textdomain' ),
'icon' => 'eicon-image-box',
],
'full' => [
'title' => esc_html__( 'Full', 'textdomain' ),
'icon' => 'eicon-nested-carousel',
],
],
'default' => 'basic',
]
);Register control untuk memilih Post Type yang akan digunakan untuk menampilkan data sliders.
$this->add_control(
'post_type',
[
'label'=> __('Post Type','text-domain'),
'type'=>\Elementor\Controls_Manager::SELECT,
'options' => $this->get_post_types(),
]
);pada bagian options kita akan mengambil data post type, untukt fungsi get_post_types kita buat seperti ini:
private function get_post_types(){
$post_types = get_post_types( [ 'public' => true ], 'objects' );
$options = [];
foreach ( $post_types as $post_type ) {
$options[ $post_type->name ] = $post_type->label;
}
return $options;
}Control untuk mengatur jumlah sliders, kita buat dengan kode seperti berikut:
$this->add_control(
'post_count',
[
'label'=> __('Carousel Count','text-domain'),
'type'=> \Elementor\Controls_Manager::NUMBER,
'default'=> 5
]
);sampai sejauh ini jika kita lihat baris kode register_controls, kurang lebih akan jadi seperti berikut:
protected function register_controls(){
$this->start_controls_section(
'conten_section',
[
'label'=> __('Carousel','text-domain'),
'tab'=>\Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'type_carousel',
[
'type' => \Elementor\Controls_Manager::CHOOSE,
'label' => esc_html__( 'Type Carousel', 'textdomain' ),
'options' => [
'basic' => [
'title' => esc_html__( 'Basic', 'textdomain' ),
'icon' => 'eicon-carousel-loop',
],
'indicators' => [
'title' => esc_html__( 'Indicators', 'textdomain' ),
'icon' => 'eicon-navigation-horizontal',
],
'caption' => [
'title' => esc_html__( 'Caption', 'textdomain' ),
'icon' => 'eicon-image-box',
],
'full' => [
'title' => esc_html__( 'Full', 'textdomain' ),
'icon' => 'eicon-nested-carousel',
],
],
'default' => 'basic',
]
);
$this->add_control(
'post_type',
[
'label'=> __('Post Type','text-domain'),
'type'=>\Elementor\Controls_Manager::SELECT,
'options' => $this->get_post_types(),
]
);
$this->add_control(
'post_count',
[
'label'=> __('Carousel Count','text-domain'),
'type'=> \Elementor\Controls_Manager::NUMBER,
'default'=> 5
]
);
$this->end_controls_section();
}
private function get_post_types(){
$post_types = get_post_types( [ 'public' => true ], 'objects' );
$options = [];
foreach ( $post_types as $post_type ) {
$options[ $post_type->name ] = $post_type->label;
}
return $options;
}dan jika kita lihat hasilnya di elementor akan menjadi seperti berikut:
Pada gambar diatas kita baru membuat sebuah controlsnya saja, kita ingin menampilkan hasilnya seperti apa.
untuk membuat tampilan, kita akan memanfaatkan fungsi renders, untuk kode nya seperti berikut:
update baris function renders menjadi seperti berikut
protected function render(){
$settings = $this->get_settings_for_display();
$args = [
'post_type' => $settings['post_type'],
'post_per_page' => $settings['post_count'],
];
$query = new WP_Query( $args );
if($query->have_posts()){
echo '<div id="carouselExample" class="carousel slide">';
if('indicators' == $settings['type_carousel'] || 'full' == $settings['type_carousel']){
$no = 0;
echo '<div class="carousel-indicators">';
while($query->have_posts()){
$query->the_post();
if(0 == $no){
echo '<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="'.$no.'" class="active" aria-current="true" aria-label="Slide '.$no.'"></button>';
}else{
echo '<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="'.$no.'" aria-label="Slide '.$no.'"></button>';
}
$no++;
}
echo '</div>';
}
echo '<div class="carousel-inner">';
$no=0;
while($query->have_posts()){
$query->the_post();
if ( has_post_thumbnail() ){
$class = 'carousel-item';
if($no == 0){
$class = 'carousel-item active';
}
echo '<div class="'.$class.'">';
echo get_the_post_thumbnail( get_the_ID(), $settings['image_size'], [
'class'=>'custom-image-style'
] );
if('caption' == $settings['type_carousel'] || 'full' == $settings['type_carousel']){
$subtitle = get_field('subtitle');
$button_text = get_field('button_text');
$button_url = '#';
if(get_field('button_url')){
$button_url = get_field('button_url');
}
echo '<div class="carousel-caption d-none d-md-block">';
echo '<a href="'.$button_url.'"><h5 class="custom-title">'.esc_html(get_the_title()).'</h5></a>';
if($subtitle){
echo '<p class="description-slider custom-subtitle">'.$subtitle.'</p>';
}
if($button_text){
echo '<a href="'.$button_url.'" target="_blank" class="button-padding-class custom-link-text">'.$button_text.'</a>';
}
echo '</div>';
}
echo '</div>';
}
$no++;
}
echo '</div>';
if( 'full' == $settings['type_carousel'] || 'basic' == $settings['type_carousel']){
echo '<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>';
echo '<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>';
}
echo '</div>';
}else{
}
wp_reset_postdata();
}Jika kita cek, tampilan akan seperti berikut
Untuk Full Source code bisa diakses di: http://git@github.com:jamalapriadi/elementor-add-on-carousel-slider-bootstrap.git
Terima Kasih.