Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Theme Development
Code

Menambahkan Slider jQuery Responsif ke Tema WordPress Anda

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Hari ini saya akan membawa Anda melalui mengintegrasikan slider jQuery responsif ke dalam tema atau situs WordPress Anda. Ini bukanlah tutorial inovatif tapi ini salah satu yang jarang dilakukan dengan benar, jadi saya ingin mencoba dan memperbaikinya. Dalam tutorial ini kita akan membahas setiap langkah dari membuat tipe posting kustom untuk menyimpan slide kita, untuk benar-benar menggunakan slider di dalam situs kita.

Kita akan menggunakan FlexSlider 2 oleh WooThemes karena ini adalah slider responsif yang dikodekan dengan sangat bagus yang dilisensikan di bawah Lisensi GPLv2. Jika Anda tertarik, Anda dapat melihat kode FlexSlider di Repositori GitHub.

Sebelum kita melakukan apapun, kita akan mundur selangkah dan memikirkannya:

  • File apa yang slider butuhkan
  • File apa yang kita dibutuhkan

Hal pertama yang akan kita lakukan adalah men-download FlexSlider.

Setelah Anda selesai melakukannya, langsung unzip.

Ada beberapa file yang kami tertarik dengannya, terutama:

  • flexslider.css
  • images/bg_direction_nav.png
  • jquery.flexslider-min.js

Mereka semua adalah yang sangat kita butuhkan dari download FlexSlider.

Langkah 1 Menyiapkan File

Mari kita memindahkan ketiga file tersebut di atas ke dalam direktori tema kita sekarang. Tergantung pada tema atau pengaturan Anda, Anda dapat menempatkan file di manapun Anda mau, cukup perhatikan di mana file-file tersebut bersumber/direferensikan dan sesuaikan kode agar cocok dengan lokasi baru mereka.

Demi tutorial ini, kita akan menggunakan tema default Twenty Eleven. Di direktori inc/, buatlah folder baru yang disebut slider. Di sana, mari kita membuat beberapa folder:

  • css
  • images
  • js

Mari menempatkan flexslider.css di folder css, bg_direction_nav.png di folder images dan jquery.flexslider-min.js di folder, Anda bisa menebaknya, js.

Catatan: Biasanya saya akan menempatkan ini di folder css/images/js di seluruh direktori tema dengan file lainnya namun agar tutorial ini 'universal', kami mengorganisir file kami dengan cara ini. Jika Anda berpengalaman dengan pengembangan tema WordPress Anda mungkin ingin mengatur file secara manual.

Sekarang kita akan membuat 2 file lagi di folder slider:

  • slider.php - membuat template slider dan memuat file slider
  • slider_post_type.php - membuat jenis posting slider

Anda seharusnya memiliki folder slider yang terlihat seperti ini:

Sebelum kita melanjutkan, buka file functions.php Anda dan tambahkan dua baris berikut, yang akan memuat dua file .php yang baru saja kita buat:

Sekarang ... mari kita mulai mengkode!

Langkah 2 Jenis Posting Slider

Hal pertama yang akan kita lakukan adalah membuat jenis posting kustom yang akan menampung semua slide kita. Jenis Posting Kustom diperkenalkan di WordPress 3.0 dan mungkin hal paling keren yang pernah terjadi pada dunia ini (terlalu jauh? Saya hanya mencintai mereka).

Buka slider_post_type.php dan tambahkan kode berikut untuk membuat jenis posting kustom slide:

Jenis Posting Kustom ditambahkan! Di bawahnya, kita akan menambahkan metabox dimana ada field untuk URL yang seharusnya ditautkan ke slide. Kita sekarang akan menyalin kode kode berikut ini:

Fiuh. Sudah berakhir. Buka Dashboard dan Anda akan melihat Jenis Posting Kustom 'Slides' yang baru.

Langkah 3 Memuat File Slider

Buka slider.php. Sekarang kita akan menambahkan jQuery, skrip jQuery FlexSlider dan stylesheet FlexSlider. Atau Anda bisa menyalin kode dari flexslider.css ke file style.css Anda jika diinginkan.

Sementara kita melakukan ini, ada sesuatu yang perlu Anda lakukan. Karena struktur file kita, flexslider.css memerlukan beberapa pengeditan sehingga tahu di mana menemukan gambar panah. Buka dan lakukan pencarian dan ganti untuk:

  • images dengan ../images

Langkah 4 Inisialisasi Slider

Sekarang kita perlu menambahkan beberapa jQuery ke <head> kita agar menginisialisasi slider. Mari tambahkan baris berikut ke slider.php di bawah kode yang baru saja kita tambahkan!

Salah satu alasan saya memilih untuk menggunakan FlexSlider adalah karena fleksibilitasnya. Ada beberapa parameter yang bisa Anda mainkan, tapi saya menyertakan empat hal penting di atas. Cobalah mengubah slide menjadi fade, atau horizontal menjadi vertical. Anda bisa melihat semua parameternya di sini.

Catatan: Ingatlah bahwa cara lain untuk melakukan di atas adalah dengan menggunakan fungsi wp_localize_script (lihat di Codex) tapi ini sedikit berada di tingkat lanjutan untuk tutorial ini. Namun, Pippin Williamson (penulis Wptuts+ lainnya) baru saja menulis tutorial bagus pada subjek ini jika Anda tertarik.

Langkah 5 Buat Slider

Sekarang kita akan benar-benar membuat template untuk slider. Pertama, kita akan melakukan WP_Query untuk menarik 'posting' dari Jenis Posting Kustom Slide. Selanjutnya, kita akan memeriksa slide dan jika begitu, memulai slider-nya. Kita kemudian akan memulai loop-nya. Setiap 'slide' akan memeriksa apakah URL slide telah ditetapkan dan jika ya, membuat link untuknya. Gambar slide kemudian akan ditampilkan dan loop akan ditutup.

Langkah 6 Menggunakan Slider

Nah, akhirnya kita membuat slider! Sekarang saatnya untuk benar-benar menggunakannya. Anda dapat membuka file template apapun, seperti index.php, dan echo fungsi wptuts_slider_template untuk menampilkan slider.

Jadi jika kita ingin menunjukkan slider di Twenty Eleven tepat setelah header di halaman home, kita akan membuka index.php dan di bawah get_header(); ?>, tambahkan yang berikut ini:

Tapi bagaimana jika Anda membuat ini untuk klien atau seseorang yang hanya tidak ingin menyentuh file template dan PHP? Kita mungkin harus membuat shortcode untuk mereka, jadi mereka bisa menggunakan slider dengan shortcode [slider].

Tambahkan ini di bagian bawah slider.php:

Slider sekarang dapat digunakan dalam posting, halaman atau tempat lain yang menerima shortcode!

Download

Jika mau, Anda dapat mendownload folder slider, yang berisi semua yang kita lalui dalam tutorial ini. Anda hanya perlu memasukkannya ke folder inc tema Anda (atau di tempat lain itu baik-baik saja, tapi pastikan untuk menyesuaikan kode di bawah ini) dan tambahkan yang berikut ke functions.php Anda:

Catatan: Demi tutorial ini, namespace/domain teks wptuts telah digunakan. Anda harus melakukan pencarian dan mengganti semua kode jika Anda hanya menyalin/menempelkannya dan mengganti:

  • wptuts_ dengan namaanda_
  • 'wptuts' dengan 'namaanda'

Jika Anda menyukai tutorial ini, beri tahu saya dan saya akan melanjutkan tutorial tentang cara menyesuaikan slider kita! Selanjutnya, kita akan melihat menggunakan thumbnail untuk navigasi, mengintegrasikan slide video dan menambahkan teks.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.