Cara Membuat Image Slider tanpa Plugin

Photo by Icons8 Team on Unsplash

Pada tutorial ini Mangcoding akan sharing kepada Anda mengenai bagaimana membuat slider gambar WordPress Anda sendiri dengan mudah tanpa membebani situs web Anda dengan banyak plugin.

Jika Anda menggunakan editor Gutenberg atau Pengeditan Situs Lengkap di WordPress, mungkin cara yang lebih baik untuk membuat slider gambar adalah membuat blok. Namun dalam tutorial ini kita hanya akan menggunakan JavaScript Library carousel eksternal.

Opsi Penggeser

Pertanyaan utama yang harus Anda tanyakan pada diri Anda adalah berapa banyak slider yang akan ada di situs web Anda? Jika hanya satu-satunya gambar yang bisa digeser pada beranda, Anda dapat menggunakan opsi situs untuk pengaturan penggeser, jika Anda akan menampilkan beberapa gambar untuk digeser dihalaman beranda, ada beberapa bidang khusus yang harus anda kerjakan.

Mangcoding merekomendasikan bekerja dengan opsi karena didalamnya terdapat Gutenberg dan mungkin untuk halaman lebih baik menggunakan semacam blok penggeser (pagnation).

Untuk membuat halaman opsi yang rapi, Anda dapat menggunakan dua cara yang mangcoding akan bagikan yaitu dengan cara halaman opsi dan cara bidang galeri itu sendiri.

Langkah yang pertama kita mulai dengan memasukkan kode sederhana ini ke dalam functions.php

add_filter('simple_register_option_pages', function($option_pages) {
    $option_pages[] = array(
        'id' => 'slider_settings',
        'title' => 'Slider Settings',
        'menu_name' => 'Slider',
        'fields' => array(
            array(
                'id' => 'my_slider',
                'label' => 'Slider Images',
                'type' => 'gallery',
            )
        ),
    );
    return $option_pages;
});

Dan sebagai hasilnya kita memiliki halaman pengaturan seperti dibawah dimana kita tidak hanya dapat menambahkan gambar tetapi juga mengubah urutannya.

Ukuran Gambar

Apakah Anda sudah mengunggah gambar? Ada ukuran gambar slider yang harus ditentukan supaya terlihat bagus serta menarik. Gambar slide ini berukuran 940×198, jadi kita akan memasukkan baris kode berikut ke dalam file functions.php :

add_image_size( 'mishaslidersize', 940, 198, true );

Sekarang Anda dapat mengunggah gambar. Jika Anda sudah mengunggahnya dan tidak dapat mengunggahnya kembali karena alasan tertentu, saya sarankan untuk menggunakan plugin AJAX Thumbnail Rebuild untuk mengedit ulang ukurannya.

Tambahkan Slider ke Halaman Situs

Setelah Anda mengkonfigurasi pengaturan slider, silahkan Anda dapat menambahkannya di halaman situs web Anda. Sebelum melakukan apapun, Anda harus memutuskan jenis JavaScript apa yang akan Anda gunakan. Ada banyak yang digunakan dan beberapa di antaranya menggunakan jQuery. Di bawah ini adalah daftar slider/carousel yang kami gunakan dan Mangcoding Rekomendasikan :

• Swiper
• Slick (jQuery)
• OwnCarousel (jQuery)

Semuanya sangat luar biasa dan tentu saja responsif.

Sekarang kita akan menggunakan jQuery, karena ada satu momen yang perlu diingat yang akan kami tunjukkan kepada Anda.

Enqueueing aset JavaScript dan CSS

Mari kita mulai dengan kode ini.

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'slickstyle',
        '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css',
        false,
        null
    );


    wp_enqueue_script(
        'slickscript',
        '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js',
        array('jquery'),
        null,
        true
    );
});

Hal paling utama yang perlu dipertimbangkan di sini adalah jika Anda menggunakan penggeser (pagnation) berbasis jQuery, Anda harus menambahkan jquery pustaka dalam wp_enqueue_script() fungsi dependensi. Maka tidak masalah apakah tema WordPress Anda sudah menggunakan jQuery atau belum.

Anda juga dapat menambahkan satu lagi file JS khusus ditempat Anda akan menginisialisasi penggeser (pagnation), tetapi ini tidak perlu, Anda masih dapat melakukannya di footer situs web dengan wp_footer pengait.

Menampilkan Slider

Sebenarnya ada salah satu tema default WordPress yaitu Dua Puluh Sepuluh yang memiliki gambar header bagus. Jadi kita akan membuat dan memanfaatkan slidernya.

Kita akan menambahkan kode di bawah ini ke dalam tema header.php. Untuk lebih spesifik kami mengganti kode asli yang diperlukan untuk menampilkan gambar header.

$image_ids = get_option('my_slider');


if ($image_ids) {
    echo '<div id="misha_slider">';


    foreach ($image_ids as $image_id) {
        echo wp_get_attachment_image($image_id, 'mishaslidersize');
    }


    echo '</div>';
}

Dan kita juga membutuhkan inisialisasi slider. Seperti yang kami sebutkan sebelumnya, Anda dapat melakukannya dengan wp_footer action hook.

jQuery( function( $ ) { $('#misha_slider').slick({ autoplay: true, autoplaySpeed: 1000, arrows: false }); } );

Dan ini adalah hasilnya

Referensi : Rudrastyh