Membuat Template Wp Dengan Bootstrap V4.0

Belajar Membuat Template WordPress Dengan Framework Bootstrap Versi 4.0.0

Masyhuri Jamil 31/10/2017 38435x 10

Membuat tampilan body (content dan sidebar)

Sebelum lanjut ke bagian body, setelah diperhatikan secara seksama hasil dari container-fluid yang membungkus seluruh elemen yang tampil di blowser akan memberikan jarak (padiing) dari tepi. Ini klo di perhatikan kurang enak di lihat. Jadi saya putuskan untuk menghilangkan jaraknya. Silakan fokus ke bagian

<div class="container-fluid">

1	<div class="container-fluid">

tambahkan class “p-0” sehingga akan menjadi seperti

<div class="container-fluid p-0">

1	<div class="container-fluid p-0">

Setelah itu mari kita buat bagian body. Mari kita pisahkan antara content dan sidebar. Kita menggunakan system grid bootstrap. Fokus pada bagian berikut dan hilangkan

<div class="container">
	<h1>Ini bagian body. Coming soon..</h1>
</div>

<h1>Ini bagian body. Coming soon..</h1>

</div>

Ganti dengan ini

<div class="row m-0">
	<article class="col-md-9 bg-success">
		<h3>ini bagian content</h3>
	</article>
	<aside class="col-md-3 bg-warning">
		<h3>ini bagian sidebar</h3>
	</aside>
</div>

<h3>ini bagian content</h3>

</article>

<h3>ini bagian sidebar</h3>

</aside>

</div>

System grid bootstrap ada yang otomatis ada yang manual. Yang otomatis tinggal menambahkan class “col” di dalam tag dengan class “row”. Sedangkan yang manual harus menyertakan angka pada class “col” dan total semua angkanya adalah 12. Seperti pada code saya di atas, didalam class=”row” saya menggunakan class=”col-md-9″ dan class=”col-md-3″ yang jika ditotal adalah 12. Silakan baca documentation bootstrap untuk system grid. Silakan di muat ulang halaman blognya nanti akan tampil seperti berikut :

Terlihat pada gambar bagian dari masing-masing sudah jelas ya antara content dan sidebar. Apa yang ada dalam tag article adalah content dan yang ada dalam tag aside adalah sidebar. Untuk background nantinya akan di hilangkan, itu hanya agar kita mudah melihat wilayah dari masing-masing content dan sidebar. Mari kita bagun dulu bagian content.

CONTENT <article>

Jika kita melihat pada umumnya pada file index.php yang di tampilkan pada bagian content adalah looping wordpress untuk postingan-postingan terbaru. Di dalam setiap hasil looping biasanya akan di tampilkan juga thumbnail dari postingan yang bersangkutan. Agar thumbnail tersebut dapat ditampilkan kita memerlukan function yang harus di tambahkan ke file functions.php Thumbnail function sudah saya siapkan ke dalam file tersendiri, sehingga tinggal mengintegrasikan ke dalam file functions.php Silakan download file di WP BTPM Img Attachment. File tersebut ekstrak dari zip dan masukkan ke dalam folder inc seperti saat kita buat nav menu seperti sebelumnya. Buka file functions.php dan tuliskan code berikut di bawah register nav menu agar terintegrasi dengan template yang kita bangun

// Function image for thumbnail
require ('inc/wp_btpm_img_attac.php');

1 2	// Function image for thumbnail require ('inc/wp_btpm_img_attac.php');

Selain thumbnail function kita juga memerlukan page navigation function untuk menggeneralisasi page navigasi, agar mudah untuk berpindah ke halaman berikutnya atau bahkan ke halaman terakhir. Silakan download filenya di WP Bootstrap Pagination for Bootstrap 4.0, ekstrak dari file zip dan masukkan ke folder inc. Kemudian tambahkan code berikut di bawah function image thumnail pada file functions.php

// Function page Navigation
require ('inc/wp_bootstrap_pagination.php');

1 2	// Function page Navigation require ('inc/wp_bootstrap_pagination.php');

Sekarang fokus pada tag <article>. Kita desain hasil looping wordpress dengan tampilan Cards Bootstrap. Silakan kunjungi documentation bootstrap untuk cards jika menginginkan customize. Seluruh tag <article> modifikasi seperti code di bawah :

<article class="col-md-9">
	<div class="row">
	<?php while(have_posts()) : the_post(); ?>
		<div class="col-md-4 mt-3">
			<div class="card border-primary">
				<a href="<?php the_permalink(); ?>"><img class="card-img-top" src="<?php btpm_get_thumb($post->ID, 'medium') ?>" alt="<?php the_title(); ?>" /></a>
				<div class="card-body">
					<a href="<?php the_permalink(); ?>" class="text-primary"><p class="card-text"><?php the_title(); ?></p></a>
				</div>
			</div>
		</div>
	<?php endwhile; wp_reset_query(); ?>
	</div>
	<?php wp_bootstrap_pagination(); ?>
</article>

<?php while(have_posts()) : the_post(); ?>

<a href="<?php the_permalink(); ?>"><img class="card-img-top" src="<?php btpm_get_thumb($post->ID, 'medium') ?>" alt="<?php the_title(); ?>" /></a>

<a href="<?php the_permalink(); ?>" class="text-primary"><p class="card-text"><?php the_title(); ?></p></a>

</div>

<?php endwhile; wp_reset_query(); ?>

</div>

<?php wp_bootstrap_pagination(); ?>

</article>

Mari kita lihat perubahannya. Silakan di muat ulang halaman blognya nanti akan tampil seperti berikut :

SIDEBAR <aside>

Sekarang kita bangun bagian sidebarnya atau bagian tag <aside>. Tapi sebelumnya kita harus meregistrasikan sidebar kita. Silakan ke functions.php dan ketikkan kode berikut :

//Register Sidebar
if (function_exists('register_sidebar')) {
	register_sidebar( array(
		'id'			=>	'sidebar-widget',
		'name'			=>	'Sidebar Utama',
		'description'	=>	'Sidebar Samping',
		'before_widget'	=>	'<div class="card border-primary mt-3">',
		'after_widget'	=>	'</div></div>',
		'before_title'	=>	'<div class="card-header text-primary">',
		'after_title'	=>	'</div><div class="card-body text-primary">',
	));
}

//Register Sidebar

if (function_exists('register_sidebar')) {

register_sidebar( array(

'id' => 'sidebar-widget',

'name' => 'Sidebar Utama',

'description' => 'Sidebar Samping',

'before_widget' => '<div class="card border-primary mt-3">',

'after_widget' => '</div></div>',

'before_title' => '<div class="card-header text-primary">',

'after_title' => '</div><div class="card-body text-primary">',

));

}

Untuk nilai dari setiap array silakan di sesuaikan. Khusus untuk before_widget, after_widget, before_title, dan after_title silakan di sesuaikan. Keempat array tersebut yang akan menentukan tag-tag beserta class pada sidebar nantinya. Di pengaturan di atas saya menggunakan desain cards bootstrap untuk tampilan sidebar. Sekarang pindah ke file index.php dan kita edit bagian tag <aside>. Modifikasi tag <aside> menjadi seperti berikut :

<aside class="col-md-3">
	<?php dynamic_sidebar('sidebar-widget'); ?>
</aside>

<?php dynamic_sidebar('sidebar-widget'); ?>

</aside>

Setelah kita registrasikan sidebar kita maka akan muncul menu dengan label widget pada bagian tampilan di admin menu. Lalu buat sebuah widget sidebar di pengaturan menu tersebut tersebut. Sebagai contoh saya buat widget sidebar “daftar komentar terbaru”. Maka tampilan akhirnya akan seperti berikut :

Biar lebih jelas coba lihat video berikut :

Lanjut ke – Memisahkan pengkodean ke dalam file-file berdasarkan kegunaannya

Lanjut lembar ke
1
2
3
4
5
6
7

Tulisan Terkait

Belajar Membuat Template WordPress Dengan Framework Bootstrap Versi 4.0.0 oleh :

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).

Memiliki 149 tulisan

Ajang Rahmat Privacy Policy Accepted

18/03/2020 pada 22.15

Maaf Gan. File2 yang di template Download di https://controlc.com/d54d6c17
Gak bisa saya Download Semua.
Ada alternatif Link????

Balas
alex Privacy Policy Accepted

12/03/2020 pada 01.14

url download file dari virtualdata.me nya 403 Forbiden,
apakah ada pengantinya untuk func Img Attach , dan Bp Pagination , Misalnya pakek plugin ?

Balas
dedy Privacy Policy Accepted

09/03/2020 pada 14.29

link download ny mati semua bang

Balas
saeful Privacy Policy Accepted

26/02/2020 pada 09.19

kang, itu link download file untuk looping gk bisa di akses, jadi saya kurang bisa

Balas
Anonim Privacy Policy Accepted

28/08/2018 pada 21.18

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

Balas
- Masyhuri Jamil
  
  29/08/2018 pada 09.49
  
  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..
  
  Balas
  - Anonim Privacy Policy Accepted
    
    17/09/2018 pada 13.13
    
    Iya gan pake PHP 7,oke makasih entar ane ubah
    
    Balas
aris Privacy Policy Accepted

06/07/2018 pada 13.25

gan, cara membuat tulisan terkait dengan efek hover seperti blog agan ini gimana ya?

Balas
- Masyhuri Jamil
  
  09/07/2018 pada 09.27
  
  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-box ini disembunyikan dulu dengan atribut bottom:-80px;. Kemudian saat di hover atributnya menjadi bottom:0;.
  
  Balas
  - aris budi Privacy Policy Accepted
    
    07/08/2018 pada 01.06
    
    makasih gan, sukses
    
    Balas