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 :
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>code-box
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;
}code-box
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 :
4. buka file style.css dan Copy Pastekan kode dibawah ini
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'); ?>code-box
oke kita lanjutkan pada tahap berikutnya.
5. buka file index.php dan taruh kode ini setelah tag <?php get_header ?>
Jadi Kode Lengkapnya adalah sebagai berikut :
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 ??
Kalau ada yg mengalami Bug atau Error silahkan Langung Komentar oke ??
Praktekkan dan Kembangkan, Keberhasilan ditentukan sebagaimana Anda Berusaha
GOOD LUCK
Post a Comment
Silahkan Komentar Boss!!