Belajar Membuat Template WordPress Dengan Framework Bootstrap Versi 4.0.0
30menit.com – Membuat template atau tema wordpress menggunakan framework bootstrap beta 4.0.0
Buat temen-temen yang sedang bergelut dengan website lebih khusus menggunakan wordpress selfhosting dan lebih detail lagi yang ingin belajar membuat template atau tema sendiri mari belajar bersama saya. Disini saya hanya bertujuan sharing / berbagi ilmu tentang utak-utik tema wordpress yang saya pelajari secara otodidak, try and error.
Untuk memudahkan dalam proses membuat template dan bisa di lihat hasilnya secara langsung, kita kerjakan smuanya secara offline localhost di komputer pribadi. Untuk itu hal pertama yang harus di lakukan adalah memenuhi apa saja yang dibutuhkan. Diantaranya :
- Web Browser seperti Mozila, Chrome, Safari. Klo untuk Internet explorer tidak terlalu saya rekomendasikan karena kurang populer. Untuk itu silakan instal salah satu browser di atas. Dalam tutorial saya akan menggunakan google chrome.
- Text editor. Sebenernya Notepad bawaan windows sudah cukup untuk digunakan, akan tetapi di notepad tidak ada pembeda dari syntax-syntax yang ada dalam kode pemrograman. Untuk itu saya sarankan gunakan Sublime Text. Dapatkan secara gratis di sini. Dengan sublime text syntax-syntax tiap kode akan dibedakan berdasar warna.
- Web server localhost beserta instalasi wordpress didalamnya. Untuk lebih mudahnya silakan lihat tutorial berikut Membuat Web Server WordPress Localhost Portable.
Jika ke tiganya sudah dipenuhi, yuk kita mulai belajar kita. Sedikit awalan, bahwa ada dua file yang wajib ada pada sebuah template wordpress yaitu index.php dan style.css Kedua file ini harus ada atau setidaknya pada sebuah template wp minimal ada kedua file tersebut. Karena kita menggunakan css framework bootstrap, maka file bootstrap juga hars di tambahan ke forder project kita. Untuk kemudahan berikut saya buatkan folder project yang didalamnya sudah ada file index.php dan style.css serta framework bootstrap. Monggo yang berminat langsung download btpm-bsV4.0.0. Tapi jika temen-temen ingin buat sendiri dan memasukkan framework bootstrapnya sendiri, monggo kunjungi web bootstrapnya di getbootstrap.com dan pilih yang versi 4.0.0
List belajar membuat template wordpress :
- Belajar pertama – Menambahkan informasi template dan tag html php dasar
- Belajar kedua – Menentukan layout serta membuat header dan footer
- Belajar ketiga – Membuat tampilan body (content dan sidebar)
- Belajar keempat – Memisahkan pengkodean ke dalam file-file berdasarkan kegunaannya
- Belajar kelima – Building post tunggal (single.php dan page.php serta comment.php)
- Belajar keenam – Finising template (screenshot dan favicon)
Lanjut ke – Menambahkan informasi template dan tag html php dasar
- 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