Berikut ada pembahasan tentang cara membuat template wordpress dengan bootstrap yang paling mudah dan dapat diterapkan oleh siapa saja. Sebagai informasi, dalam membuat suatu website, bootstrap adalah suatu framework yang begitu populer di dunia framework. Bukan tanpa sebab, berkat keberadaan bootstrap tersebut, maka tampilan website milik Bizzie pun lebih responsive.
Menariknya lagi, perkembangan Bootstrap semakin meningkat dan memunculkan versi baru di setiap waktunya. Dengan begitu, Bizzie tidak perlu lagi mengkhawatirkan tampilan website. Bukan hanya itu, fakta tersebut membuktikan bahwa Bootstrap dipercaya serta diterima banyak pengembang. Karena itulah, Bizzie perlu belajar cara untuk membuat template wordpress menggunakan bootstrap sekarang juga.
Bagaimana Cara Membuat Template WordPress dengan Bootstrap yang Benar?
Sebelum masuk pembahasan cara membuat template wordpress dengan bootstrap, ada baiknya Bizzie mengenal bootstrap itu sendiri. Seperti yang sudah dibahas sebelumnya, bootstrap merupakan front end framework ataupun framework css yang dibangun untuk memudahkan para pendesain web saat membuat website maupun dalam pembuatan template website.
Sebelum membuat template wordpress dengan bootstrap, Bizzie perlu memenuhi beberapa hal seperti:
· Web browser
· Web server localhost
· Text editor atau notepad bawaan
Apabila ketiganya sudah Bizzie penuhi, maka sudah bisa membuat template wordpress dengan bootstrap. Sebagai informasi, terdapat dua file yang harus ada di dalam template wordpress yakni style.css dan index.php. Dua file tersebut harus ada, sebab saat memakai css framework bootstrap, maka file bootstrap harus ditambahkan ke dalam folder project yang di dalamnya terdapat file style.css, index.php, dan framework bootstrap.
Berikut ini ada step-step lengkap dalam cara membuat template wordpress dengan bootstrap yang bisa Bizzie terapkan sekarang juga:
1. Tambahkan Informasi Tag HTML PHP Dasar dan Template
Pertama-tama Bizzie perlu mempunyai web server localhost. Silahkan aktifkan web server localhost dengan masuk ke dalam folder tema wordpress di file ‘H:\UniServer\www\test\wp-content\themes’. Mungkin ada beberapa huruf file yang berbeda dalam perangkat Bizzie , misalnya H dan Test.
Kemudian ekstrak folder project yang telah diunduh ke dalam folder tema bertuliskan H:\UniServer\www\tes\wp content\themes. Nantinya terdapat sebuah folder berupa btpm yang di dalamnya ada dua folder yakni js dan css. Selain itu ada juga dua file berupa style.css dan index.php. Di dalam dua folder itu merupakan file-file bootstrap. Sementara itu, style.css dan index.php adalah file yang setidaknya harus ada di dalam template yang Bizzie bangun.
Cara membuat template wordpress dengan bootstrap yaitu buka kedua file itu menggunakan text editor favorit Bizzie . Pertama-tama Bizzie bisa fokus ke dalam style.css dan tuliskan kode:
| /*Theme Name: BTPMTheme URI: https://www.20menit.com/Author: OtiingAuthor URI: https://www.20menit.com/Description: Mencoba membuat template BTPM.Version: 1.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: Responsive, Ringan, Bootstrap*/ |
Bizzie bisa mengedit atau menyesuaikan pada bagian Theme Name dan URL, Author dan URL, Description, Version, dan Tags. Sementara itu, untuk bagian Licence dan URL bisa dibiarkan secara default. Kemudian pindah ke opsi file index.php lalu tuliskan kode:
| <!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> <h1>HELLOO.. WORLD..!!!</h1> <!– 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> |
Jika sudah, tambahkan tag link supaya style.css dan css bootstrap terhubung ke file index.php. Lalu Bizzie bisa load javascript, sebaiknya load paling akhir tepatnya sesudah seluruh dokumen html sudah selesai di load. Kalau template di atas Bizzie aktifkan dan panggil URL bertuliskan http://localhost/test, nantinya muncul tulisan yang berbunyi Hello World.
Sesudah kerangka dasar template Bizzie buat, cara membuat template wordpress dengan bootstrap berikutnya yaitu membuat layout tampilan. Umumnya layout tersebut terdiri dari body, header, dan footer. Biasanya di dalam body terdiri dari dua bagian yakni sidebar dan content. Di dalam bagian header terdiri dari logo serta menu navigasi. Di dalam footer berisi kredit serta informasi web.
Untuk pembuatan header:
· Buka lagi file index,php serta style.css, silahkan hapus bagian bertuliskan Hello World. Bizzie bisa menggantinya dengan tag di bawah ini supaya tampilannya menjadi full width dan mengikuti lebar dari screen device.
| <div class=”container-fluid”> Tampilan disini</div> |
· Kemudian buat header yang berisi logo serta navigasi dengan jumbotron bootstrap. Sebagai contoh, template yang dibuat tampil dengan background biru dan text berwarna putih. Bizzie bisa menuliskan kodenya dengan kode ini:
| <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> |
· Berikutnya buat navigasi baru dengan plugin tambahan berupa wp bootstrap nav walker untuk memudahkan dalam memanajemen menu dari halaman admin. Supaya bisa diintegrasikan ke dalam template, Bizzie bisa membuat folder bernama inc dan file php dengan nama ‘function.php’. Salin file wp_bootstrap_navwalker.php ke folder inc. Lalu tuliskan kode di bawah ini dalam function.php.
| <?phprequire (‘inc/wp_bootstrap_navwalker.php’);// Register for navigation menuregister_nav_menus( array( ‘primary’ =>__(‘Primary Menu’, ‘btpm’), ) ); |
· Berikutnya dalam cara membuat template wordpress dengan bootstrap yaitu mengecek halaman admin yang seharusnya muncul tambahan menu tepat di bagian tampilannya. Menu itu bisa di manajemen dari laman tersebut. Kini fokus ke index.php dan buat struktur navigasinya.
Untuk customize tampilan, Bizzie bisa mengunjungi documentation of navbar bootstrap. Sebagai contoh, Bizzie dapat membuat light dengan latar belakang abu-abu kebiruan dan sticky not. Dalam navbar, Bizzie juga bisa memasukkan kolom pencarian. Caranya yaitu dengan menuliskan kode berikut ini di dalam tag div.
| <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> |
Sementara itu, footer nantinya berisi kredit yang berasal dari laman web Bizzie. Tak hanya itu, isinya juga bisa berupa info penting seperti fanspage, peraturan, subscribe, dan masih banyak lagi. Sebagai contoh, Bizzie bisa membuat kredit terlebih dahulu dengan menuliskan kode berikut ini tepat di bawah body:
| <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> |
Kalau sudah semua, silahkan load laman WP dan tampilannya pun berubah menjadi tampilan dasar template WordPress.
Itulah pembahasan tentang cara membuat template wordpress dengan bootstrap yang bisa Bizzie lakukan sekarang juga. Kini Bizzie sudah bisa membuat template wordpress sendiri dan silahkan belajar lebih lanjut untuk menemukan cara menghiasnya.
