Tutorial Wordpress, Belajar Wordpress, Cara jitu dan mahir membuat themes wordpress

Monday, December 18, 2017

BAB 9 - Membangun Slideshow

Membuat Slideshow Theme Wordpress Bagus, Elegant, Baik Dan Responsive

Selamat berjumpa kembali Kawan-kawan pada kesempatan kali ini saya ingin membagikan tutorial kelanjutan dari tutorial yakni membuat Slideshow Theme Wordpress, Tutorial kemaren - kemarennya sempat stop, dikarenakan kesibukan di dunia nyata, namun pada kesempatan kali ini saya sudah dapat melanjutkan tutorial ini, sehingga theme ini rampung dan utuh dapat dipakai di website para sahabat sekalian.

Pada tutorial sebelumnya pada BAB 8 - Membuat Menu Theme Wordpress
dan tutorial untuk membuat menu sudah saya selesaikan beserta dengan css dan fungctionnya,

Namun perlu diperhatikan temen2 bahwa tutorial yg saya bagikan didukung dengan Framework Bootstrap dan Fontawesome


jadi jika ingin tampilannya sama dengan yg ada discreenshoot ini silahkan temen2 download bootstrap versi 3.7 (bukan yang 4) dan fontawesome dan silahkan tempatkan di dalam folder theme kalian masing.

Dan Pembahasan ini sudah saya sampaikan pada BAB 7
jika temen2 tiba2 nyasar ke link ini, silahkan pelajari tutorial ini dari depan dulu, agar mengerti dengan alur dan konsep theme yg kita bangun. berikut linknya :

Bab 1 - Membuat Style.css untuk Theme Wordpress




Nah sekarang silahkan temen2 aktifkan localhost masing2, dan ikuti intruksi saya :
1. Buat Folder "inc" dalam folder theme masing2
2. Buat file "slideshow.php" dalam folder INC
3. Copy dan Pastekan kode berikut :

<div class="container bg-white"> <div class="smoothslides hidden-xs" id="myslideshow"> <?php for ($i=0; $i < 3; $i++) { echo '<img src="https://www.desainprofesional.com/wp-content/uploads/2017/02/Slideshow-1-Desain-Profesional.jpg" alt="Desain Profesional"/>'; } ?> </div> </div>
setelah di pastekan ke file slideshow.php silahkan anda simpan,



4. buka file style.css dan Copy Pastekan kode dibawah ini

/******** SLIDESHOW *******/
#myslideshow {
    margin: 15px auto;
    border: 1px solid #e3e3e3;
    background-color: #ECECEC;
    padding: 5px;
}

Silahlkan simpan dan kita lihat di tampilan depan website kita, apakah sudah berhasil?? pastinya blank donk, tak ada apa2.. hehehe

oke kita lanjutkan pada tahap berikutnya.


5. buka file index.php dan taruh kode ini setelah tag <?php get_header ?>

<?php get_template_part('inc/slideshow'); ?>

Jadi Kode Lengkapnya adalah sebagai berikut :

<?php get_header(); ?>
<?php get_template_part('inc/slideshow'); ?>
<?php get_footer(); ?>

Sekarang Coba reload Tampilan depan website anda (Home Page).. Traaaa sudah tmpil Slideshownya kan???

Kalau ada yg mengalami Bug atau Error silahkan Langung Komentar oke ??


Praktekkan dan Kembangkan, Keberhasilan ditentukan sebagaimana Anda Berusaha
GOOD LUCK

Silahkan Komentar Boss!!

 

Promo

DISKON 50% + DOMAIN DAN SSL GRATIS SELAMANYA

Atas