Membuat header wordpress menjadi slideshow/slider

OLEH:
AMI ARIEF GUNAWAN PUTRA

HeadSlide1

Pada percobaan kali ini, saya mencoba menjabarkan tutorial yang saaaaaaaaangat biasa. Cara mengubah header CMS wordpress yang biasanya statis menjadi dinamis atau slideshow.

Saya asumsikan kita sudah menginstal CMS wordpress. Jadi hanya perlu menginstal plugin dan melakukan sedikit konfigurasi pada CMS.

Untuk melakukan percobaan ini, saya menggunakan:
1. WordPress-V.3.9.1. (menggunakan theme twenty fourteen)
2. Plugin Responsive Header Image Slider-V.1.1.

Langkah-langkah:
1. Download dan install plugin responsive header image slider.
2. Copy kode program berikut pada file wp-content -> themes -> twentyfourteen -> header.php:

<div class="headerslider"> <?php echo do_shortcode('[sp_responsiveslider limit="-1"]'); ?></div>

HeadSlide2

3. Jika anda ingin memasukkan slideshow/slider ke dalam sebuah page atau posting, maka anda cukup meletakkan short-code ini pada saat mengisi page atau postingan anda:

[sp_responsiveslider limit="-1"]

4. Menambahkan gambar dapat melalui dashboard -> Responsive Image Slider. Tapi kalau boleh jujur percobaan menggunakan user interface ini hasilnya cacat. Namun jangan khawatir, #keepReading.

5. Menambahkan gambar secara manual (tampilan slider menggunakan cara ini tidak cacat):

  • Masuk ke folder wp-content -> plugins -> responsive-header-image-slider -> img.
  • Copy beberapa calon foto slider anda ke dalam folder tersebut. Usahakan ukurannya 1260 x 240.
  • Sekarang buka wp-content -> plugins -> responsive-header-image-slider -> responsive-headerimageslider.php.
  • Pada file itu, search: 1.png.
  • nanti ketemu: 1.png, 2.png, 3.png.  Ganti dengan nama calon foto slider yang sudah di-copy tadi.

6. Sekarang masuk ke Setting -> Responsive Slider Setting. Lakukan sedikit konfigurasi sembari memejamkan mata.

HeadSlide3

7. Buka url web yang baru saja anda setting. Pelan-pelan ya jangan buru-buru. Tadaaaaaa ! Elegan ya.. ini theme gratisan wordpress yang paling saya suka. Twenty Fourteen. Serasa theme premium. Menghadirkan nuansa user experience yang baru #udik. Sekali lagi, Twenty Fourteen. Last.. Twenty Fourteen.
Ξ\(´▽`)/ξ

 

Notes:

Bagi yang tidak berhasil, periksa dan pastikan sepasti-pastinya bahwa langkah no.2 anda tidak keliru. Kalau tidak keliru, periksa langkah 3 anda. Tidak keliru juga? periksa langkah no.5 anda.

Kalau sampai tidak salah juga, saya sarankan, anda mengingat-ingat kesalahan anda dalam waktu dekat ini, siapa tau anda menyakiti perasaan orang lain, melalaikan kewajiban, membunuh serangga, memberi harapan palsu, dan mempersulit orang lain. 😀

Sekian dari saya. Kalau ada masukkan, mohon langsung menuju kolom komentar di bawah yah. Mohon maaf, sekian, terima kasih.

 

Iklan

24 thoughts on “Membuat header wordpress menjadi slideshow/slider

  1. tks gan, ilmunya sangat bermanfaat. saya mau tanyak ni. keterangan di atas kan buat 1 slider, kalau buat 2 slider kanan kiri di header bisa gak gan…? tks

  2. ribet juga ya gan, kalo gak biasa sama bahasa program, baru lihat yang beginian udah kliengan gan. tapi bagus juga nih harus di coba.

  3. di wordpress saya gambar slideshow nya ga muncul, cuma tampilan putih aja, padahal udah diikuti tata cara nya. kenapa ya?
    btw, sy pake tema WEN corporate, atau emang tema saya pakai itu ga compatible sama pluginnya ya? kalau iya apa ada solusi lain?

    1. Bisaaa, asal instal CMS wordpress di localhost. kalau maksud kisanak ‘gratis’ di sini berupa blog dengan url (contoh) “namabloganda.wordpress.com” ya jelas tidak bisa. Jadi, kalau pengen bisa, anda googling terlebih dahulu dengan kata kunci “cara menginstall CMS wordpress offline”.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s