Berawal dari chatt di FB, ada seorang blogger kesulitan memasang Nivo Slider di WordPress.org maka saya membuat tutorial ini. Semoga banyak teman-teman lain yang ikut tercerahkan setelah membaca tulisan tentang bagaimana memasang plugin Nivo Slider di WordPress ini.

Nivo Slider

Nivo slider adalah Jquery slide image yang di buat oleh dev7 studios suatu perusahaan web design dan web development. Nivo slider adalah Jquery slide image yang paling banyak di gunakan di dunia, mudah di gunakan dan mudah di customize. Selain itu Nivo Slider banyak mendukung CMS terkenal dunia seperti WordPress dan Drupal. Untuk tahu lebih banyak tentang Nivo Slider silahkan kunjungi websitenya di sini.

Instalasi Plugin WP Nivo Slider

Buka Dashboard WordPress anda kemudian klik Plugins–>Add New untuk menambahkan Plugin WP Nivo Slider. Masukan nama Plugin wp nivo slider kemudian cari.

Akan muncul beberapa nama plugin serupa, pastikan kamu memilih WP Nivo Slider karya Rafael Cirolini

Selanjutnya klik Install untuk install plugin WP Nivo Slider.

Aktifkan Plugin WP Nivo Slider versi 2.0, proses install WP Nivo Slider sudah selesai anda akan mendapatkan Settings plugin ini di Settings–>WP Nivo Slider.

Setting WP Nivo Slider

Plugin sudah aktif sekarang bagaimana caranya agar bekerja sesuai keinginan dan enak di lihat di template wordpress yang sudah exist.

Masuk ke Posts–>Categories buat kategori baru misalkan slider, kategori ini nantinya akan menampung semua post yang akan anda tampilkan sebagai slide image.

 

Buat 2 postingan baru di bawah Kategori slider dan setting juga featured images seperti di bawah ini, lakukan juga pada post lain yang anda inginkan di tampilkan dalam slider image.

Langkah selanjutnya masuk ke Settings–>WP Nivo Slider, setting WP Nivo slider seperti gambar berikut.

Category –> Pilih Kategori sesuai dengan 2 post yang sudah anda buat tadi yaitu di bawah kategori slider.

Number Of Slices –> saya membiarkan dalam posisi default yaitu 5 slices

Type of Animation –> Pilih efek animasi yang anda inginkan ada random, slide down, slice up, fold, fade dll. Dalam tutorial ini saya menggunakan efek fade.

Ukuran Gambar –> Buat ukuran gambar sesuai dengan template anda, dalam contoh ini saya membuat ukuran 400×200.

Edit file index.php template wordpress yang aktif

Edit file index.php dari template wordpress yang aktif, dalam contoh ini saya menggunakan template bawaan dari WordPress yaitu twentyeleven struktur direktorinya ada di wp-content–>themes–>twentyeleven–>index.php.

Tambahkan snippets code berikut di index.php anda

<?php if ( function_exists('show_nivo_slider') ) { show_nivo_slider(); } ?>

Kemudian save index.php yang sudah anda edit.

Tampilan WP Nivo Slider

Sekarang saatnya untuk melihat hasil kerja anda, buka front end wordpress anda. berikut tampilan di wordpress saya

Anda bisa edit ukuran gambar dan css sesuai yang anda inginkan agar mendapatkan tampilan yang lebih memuaskan. Silahkan explore Nivo dan WordPress