Belajar Membuat Template WordPress Dengan Framework Bootstrap Versi 4.0.0
Memisahkan pengkodean ke dalam file-file berdasarkan kegunaannya
Di dalam wordpress mengenal pemisahan pengkodean ke dalam file-file tersendiri berdasarkan fungsi file tersebut. Berikut daftar pemisahan file-file tersebut :
- header.php kode di dalam file ini adalah kode bagian header meliputi judul blog sampai navigasi menu (navbar)
- index.php ini adalah file yang kita bagun mulai awal. Nantinya kode di dalam file ini akan disederhanakan dan disisakan bagian content saja atau tag <article>
- sidebar.php file ini beri kode untuk bagian sidebar.
- footer.php file ini berisi pengkodean bagian tag <footer> ke bawah.
- 404.php file ini sama dengan index.php tapi dengan fungsi untuk menampilkan halaman eror pada blog kita.
- archive.php file ini juga sama dengan index.php tapi fungsinya adalah looping wordpress berdasarkan kategori, tags, arsip tanggal, arsip bulan, dan arsip tahun.
- search.php file ini untuk looping berdasarkan hasil pencarian.
- single.php file ini berfungsi untuk menampilkan postingan secara utuh lengkap dengan komentar pada postingan tersebut.
- page.php file ini berfungsi sama dengan single.php tapi khusus untuk postingan dengan type halaman.
- comments.php file ini sebagai pelengkap single.php yang khusus menangani tampilan komentar.
Untuk pembahasan pemisahan pengkodean kali ini hanya akan membahas pemisahan mulai no 1 – 7. Untuk single.php page.php dan comment.php akan di bahas pada halaman berikutnya. Mari kita mulai.
Pertama buat sebuah file kosong dengan nama header.php, sidebar.php, dan footer.php Kemudian ketiga file tersebut buka dengan text editor sekalian dengan index.php. File index.php ini sebagian kodenya akan kita pisahkan ke dalam ketiga file tersebut.
» Ambil kode berikut dari file index.php dan letakkan pada file header.php.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html> <head> <title> <?php if ( is_home() ) { bloginfo('name'); echo ' - '; bloginfo('description'); } elseif ( is_category() ) { single_cat_title(); echo ' - '; bloginfo('name'); } elseif ( is_single() ) { single_post_title(); echo ' - '; bloginfo('name'); } elseif ( is_page() ) { single_post_title(); echo ' - '; bloginfo('name'); } else { wp_title('', true); } ?> </title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Load Css File's --> <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" /> <link href="<?php bloginfo('template_directory'); ?>/css/bootstrap.min.css" rel="stylesheet" /> <link href="<?php bloginfo('template_directory'); ?>/css/bootstrap-grid.min.css" rel="stylesheet" /> <link href="<?php bloginfo('template_directory'); ?>/css/bootstrap-reboot.min.css" rel="stylesheet" /> <?php wp_head(); ?> </head> <body> <div class="container-fluid p-0"> <header class="jumbotron jumbotron-fluid bg-primary text-white mb-0 pt-3 pb-3"> <div class="container ml-0"> <h1 class="display-4"><a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>" class="text-white" ><?php bloginfo('name'); ?></a></h1> <p class="lead mb-0"><?php bloginfo('description');?></p> </div> </header> <nav class="navbar navbar-expand-lg navbar-light sticky-top" style="background-color: #e3f2fd;"> <a class="navbar-brand" href="<?php echo home_url(); ?>">BTPM</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarBTPM" aria-controls="navbarBTPM" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div id="navbarBTPM" class="collapse navbar-collapse"> <?php wp_nav_menu( array( 'menu' => 'primary', 'theme_location' => 'primary', 'depth' => 2, 'container' => '', 'container_class' => '', 'container_id' => '', 'menu_class' => 'navbar-nav mr-auto mt-2 mt-lg-0', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker() ) ); ?> <form class="form-inline my-2 my-lg-0" method="get" action="<?php bloginfo('home'); ?>/"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" onclick="this.value='';" name="s"> <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> |
kode yang di ambil adalah mulai dari <!DOCTYPE html> sampai tag penutup nav </nav> dan ganti kode yang diambil tersebut dengan
|
1 |
<?php get_header(); ?> |
» Selanjutnya ambil kode berikut dari file index.php dan letakkan pada file sidebar.php.
|
1 2 3 |
<aside class="col-md-3"> <?php dynamic_sidebar('sidebar-widget'); ?> </aside> |
kode yang diambil adalah seluruh tag <aside> kemudian ganti dengan
|
1 |
<?php get_sidebar(); ?> |
» Terakhir ambil kode berikut dari file index.php dan letakkan pada file footer.php.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<footer class="border border-primary border-right-0 border-bottom-0 border-left-0 mt-4" style="background-color: #e3f2fd;"> <div class="container pt-2 pb-3 text-center"> © <?php echo date("Y"); ?> <a href="<?php echo home_url(); ?>" class="text-primary"><span class="font-weight-bold"><?php bloginfo('name'); ?></span></a> - Theme By Masyhuri Jamil <br /> <span class="text-dark">Powered by <a href="http//wwww.wordpress.org" target="_blank" class="text-dark">Wordpress</a></span> </div> </footer> </div> <!-- Load Bootstrap Javascript --> <script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.2.1.slim.min.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/popper-1.11.0.min.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script> <?php wp_footer(); ?> </body> </html> |
Kode yang di ambil adalah tag <footer> sampai tag penutup html </html> kemudian ganti dengan
|
1 |
<?php get_footer(); ?> |
Sehingga sisa kode yang ada di index.php adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php get_header(); ?> <div class="row m-0"> <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 get_sidebar(); ?> </div> <?php get_footer(); ?> |
Setelah file index.php ringkas, silakan duplikat file index.php sebanyak 3x. Ketiga duplikat file index.php tersebut masing-masing silkan rename ke 404.php archive.php dan search.php. Jadi akan ada 4 file dengan isi kode yang sama yaitu index.php, 404.php, archive.php, serta search.php Sekarang mari kita modifikasi ke tiga file baru tersebut.
» Modifikasi file 404.php. Silakan modifikasi isi file sama dengan kode di bawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php get_header(); ?> <div class="row m-0"> <article class="col-md-9"> <div class="alert alert-danger mt-3" role="alert"> <strong>Opps... Sory Bro... !</strong><br/> Halaman yang dicari <strong>Tidak Ada / Telah Dihapus.</strong> </div> <strong>Mungkin tertarik tulisan-tulisan berikut :</strong> <div class="row"> <?php // the query order by random $the_query = new WP_Query( array( 'posts_per_page' => 3, 'orderby' => 'rand', ) ); while ($the_query->have_posts()) : $the_query->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; ?> </div> <?php wp_bootstrap_pagination(); ?> </article> <?php get_sidebar(); ?> </div> <?php get_footer(); ?> |
Jika halaman eror kita load hasilnya akan seperti berikut :
» Modifikasi file archive.php. Silakan modifikasi isi file sama dengan kode di bawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?php get_header(); ?> <div class="row m-0"> <article class="col-md-9"> <div class="alert alert-info mt-3" role="alert"> <?php if (is_category()) { ?>Kumpulan Tulisan Dalam Kategori <strong><?php single_cat_title(); ?></strong> <?php } elseif (is_tag()) { ?>Kumpulan Tulisan Menggunakan Tag <strong><?php single_tag_title(); ?></strong> <?php } elseif (is_day()) { ?>Kumpulan Tulisan Pada Tanggal <strong><?php the_time('F jS, Y'); ?></strong> <?php } elseif (is_month()) { ?>Kumpulan Tulisan Pada Bulan <strong><?php the_time('F, Y'); ?></strong> <?php } elseif (is_year()) { ?>Kumpulan Tulisan Pada Tahun <strong><?php the_time('Y'); ?></strong> <?php } ?> </div> <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 get_sidebar(); ?> </div> <?php get_footer(); ?> |
Jika halaman kategori atau tags atau arsip kita load hasilnya akan seperti berikut :
» Modifikasi file search.php. Silakan modifikasi isi file sama dengan kode di bawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?php get_header(); ?> <div class="row m-0"> <article class="col-md-9"> <div class="alert alert-success mt-3" role="alert"> <strong>Selamat Bro..!</strong> Tulisan dengan kata kunci <strong><?php the_search_query(); ?></strong> berhasil ditemukan. </div> <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(); $the_query = new WP_Query( array( 'posts_per_page' => 2, 'orderby' => 'rand', ) ); // the query order by random while ($the_query->have_posts()) : $the_query->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; ?> </div> <?php wp_bootstrap_pagination(); ?> </article> <?php get_sidebar(); ?> </div> <?php get_footer(); ?> |
Jika dilakukan pencarian dengan kata kunci tertentu hasilnya akan seperti berikut :
Biar lebih paham cek video berikut:
Lanjut ke – Building post tunggal (single.php dan page.php serta comment.php)
- Bagikan
-
-
-
-
-
-
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
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