Bab 1 - Membuat Style.css untuk Theme Wordpress

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

Download Disini

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

Bab 2 - Membangun Tampilan Theme

Bab 3 - Membangun Header Theme

Bab 4 - Membuat Logo dan Kontak

Bab 5 - Membuat functions Theme Wordpress

Bab 6 - Membangun Header dengan Functions wordpress

Bab 7 - Menyempurnakan Header, Callback Style dan Javascript di functions.php

Bab 8 - Membuat Menu 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 tampil Slideshownya kan???

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

Praktekkan dan Kembangkan, Keberhasilan ditentukan sebagaimana Anda Berusaha

GOOD LUCK