Belajar Membuat Template WordPress Dengan Framework Bootstrap Versi 4.0.0
Finising template (screenshot dan favicon)
Tutorial terakhir ini adalah finishing, lebih bagus dilakukan. Akan tetapi klo ketinggalan juga gak apa-apa tidak akan mempengaruhi performa template.
1. Pembuatan screenshot
Fungsinya mempermudah melihat tampilan saat di halaman admin pemilihan tema. Istilahnya adalah gambaran singkatnya lah. Ukuran yang di rekomendasikan wordpress adalah 880 x 660 pixel. Untuk formatnya bisa .png atau .jpg dengan nama file harus “screenshot.jpg” atau “screenshot.png”. Filenya letakkan di folder project (btpm) bersama dengan file index.php, single.php, dkk.
2. favicon
Favicon adalah logo kecil di yang berada di atas di samping title website. Klo di webnya google adalah icon berbentuk huruf “G” di sampingnya title google. Silakan buat sebuah gambar dengan ukuran yang kecil saja jangan terlalu besar. Mungkin ukuran 32 x 32 pixel saja. Nama dan formatnya harus “favicon.ico”. Filenya bisa di letakkan bersamaan dengan “screenshot.jpg” atau “screenshot.png”. Atau bisa diletakkan di folder “images”. Kemudian tambahkan baris kode berikut di file header.php di dalam tag <head>.
|
1 |
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" /> |
Jika file diletakkan di folder “images” silakan di sesuaikan kodenya setelah kode php template directory.
Dengan mengetahui dasar pembuatan template ini, temen-temen di harapkan akan lebih mudah dalam memodifikasinya sesuai keinginan. Untuk pembahasan mendalam setiap bagian-bagian dari template, InsyaAllah akan di bahas pada postingan tersendiri, jika memang dibutuhkan atau ada permintaan dari temen-temen.
Silakan kunjungi website Bootstrap untuk customisasi tampilan, karena template ini hampir 100% tanpa menulis kode CSS dan JavaScript. Seluruh CSS dan JavaScript memanfaatkan Framework Bootstrap.
Untuk bahan perbandingan dan koreksi temen-temen bisa mendownload Full Source Kode saya. Silakan untuk di pakai latihan. Anda bebas memakai dan memodifikasi asal mohon tetap mencantumkan kredit footer saya. Silakan download di Project template BTPM.
Semoga ilmu yang saya bagi ini bermanfaat. Karena ilmu yang dibagi tidak akan pernah berkurang, tetapi akan bertambah.
Jika temen-temen ada pertanyaan, mari berdiskusi di komentar.
- Bagikan
-
-
-
-
-
-
Tulisan Terkait
Masyhuri Jamil
Tidak memiliki kompetensi di bidang coding. Tapi selalu semangat terus belajar html, css, php, mysql, java script (jquery). Suka oprek-oprek android juga dan yang pasti suka jalan-jalan (treveling).
Maaf Gan. File2 yang di template Download di https://controlc.com/d54d6c17
Gak bisa saya Download Semua.
Ada alternatif Link????
url download file dari virtualdata.me nya 403 Forbiden,
apakah ada pengantinya untuk func Img Attach , dan Bp Pagination , Misalnya pakek plugin ?
link download ny mati semua bang
kang, itu link download file untuk looping gk bisa di akses, jadi saya kurang bisa
Warning: Declaration of btpm_walker_comment::start_el(&$output, $comment, $depth, $args, $id = 0) should be compatible with Walker_Comment::start_el(&$output, $comment, $depth = 0, $args = Array, $id = 0) in C:\xampp\htdocs\wordpress\wp-content\themes\btpm\inc\wp_comment_walker.php on line 91
eror disini gan
Itu xampp yang agan gunakan apa menggunakan php versi 7? Jika iya, source code sy kemaren memang dibuat menggunakan php versi 5 jadi kemungkinan ada beberapa koding yg eror. Tapi sudah saya perbaiki. Silakan update file btpm-comment-template. Download ulang dari link yang ada di halaman https://www.30menit.com/belajar-membuat-template-wordpress-dengan-framework-bootstrap-versi-400.html/6. Timpa saja file yg agan gunakan sekarang dengan file update dr sy. Semoga tidak eror lagi. File zip yang baru saya namai “btpm-comment-template(solved).zip”
happy coding gan..
Iya gan pake PHP 7,oke makasih entar ane ubah
gan, cara membuat tulisan terkait dengan efek hover seperti blog agan ini gimana ya?
Pake efek css transition. Browser harus suport css 3. Pada contoh di atas kan judulnya yg ada efek hovernya. Jadi judulnya sebagai contoh saya kasih class=”moving-box”. Pada dokumen css silakan buat atribut class sebagai berikut :
.moving-box { position:absolute; bottom:-80px; left:0; right:0; -webkit-transition:0.25s ease-in-out; -moz-transition:0.25s ease-in-out; -ms-transition:0.25s ease-in-out; -o-transition:0.25s ease-in-out; transition: 0.25s ease-in-out; }
.moving-box:hover { bottom:0; }
yang paling penting adalah parent dari class=”moving-box” harus
position:relative;. Konsepnya sebenernya simple. Jadi class.moving-boxini disembunyikan dulu dengan atributbottom:-80px;. Kemudian saat di hover atributnya menjadibottom:0;.makasih gan, sukses