Berikut ini ada pembahasan tentang cara membuat tema wordpress dengan bootstrap paling mudah yang bisa Bizzie terapkan sekarang juga. Adapun cara membuat tema WordPress satu ini merupakan solusi bagi developer yang merasa lelah dengan theme atau page builder berbayar. Bagaimana tidak, layanan tersebut mengharuskan pengembang membayar tagihan bulanan untuk lisensi.
Apalagi jika developer sudah membayar tema dengan lisensi yang cukup mahal, tetapi agar bisa mengatur tata letak web diharuskan memahami tentang page builder tersebut. Selain itu, developer juga membutuhkan waktu yang tidak sebentar untuk melakukan trial dan error. Tak sampai di situ, pengembang juga perlu memasang plugin yang terkadang membuat loading web menjadi lebih lambat.
Bagaimana Cara Membuat Tema WordPress dengan Bootstrap yang Benar?
Dengan menerapkan cara membuat tema wordpress dengan bootstrap sendiri, Bizzie bisa menentukan layout atau tata letak secara bebas. Selain itu, pengguna juga dapat menambah kode CSS serta Javascript yang dibutuhkan saja dan membuat web menjadi lebih ringan. Keuntungan lainnya yaitu tidak perlu membayar lisensi bulanan lagi, dan kalau tema buatan Bizzie bagus bisa dijual kembali.
Untuk tutorial pembuatan tema wordpress dengan bootstrap selengkapnya, Bizzie bisa simak informasinya di bawah ini:
1. Membuat Starter Theme
Pertama dalam cara membuat tema wordpress dengan bootstrap yaitu membuat starter theme dengan mengunjungi laman https://underscores.me. Untuk men generate starter theme, Bizzie hanya membutuhkan struktur dasar tema WordPress. Nantinya untuk style dan tata letak, bisa Bizzie hias memakai Bootstrap 5.
Di laman utama underscores.me, silahkan buat nama theme. Adapun isi yang bisa Bizzie tuliskan yaitu:
· Theme Slug: ‘idnetterid’
· Theme name: ‘idnetterid’
· Author: ‘idnetter.id’
· Author URL: ‘https://idnetter.id’
· Description: fast WP theme
Lanjutkan dengan tekan Generate. Nantinya theme secara otomatis terdownload dengan nama idnetterid.zip.
2. Menginstal WordPress dan Theme
Selanjutnya dalam cara membuat tema wordpress dengan bootstrap yaitu dengan menginstal WordPress dan Theme. Sebaiknya Bizzie menginstal WordPress terbaru supaya tahu theme yang dibuat support dengan WordPressnya. Sesudah instal WordPress berhasil, silahkan pasang juga theme yang dibuat sebelumnya.
Kemudian instal Bootstrap di theme buatan Bizzie sendiri agar tampilannya menjadi responsive dan mempunyai gaya tersendiri. Bizzie bisa menyebut starter theme buatan sendiri dengan idnetterid agar memudahkan saat membedakannya dengan theme lain.
3. Unduh Bootstrap 5
Lanjutkan dengan mengunduh Bootstrap 5 dan tekan download source. Ekstrak file tersebut dan instal Bootstrap 5. Cara menginstalnya yakni:
· Pertama silahkan buat folder CSS dalam theme bertuliskan idnetterid
· Setelah itu copas file bertuliskan ‘dist/css/bootstrap.min.css ke folder theme bernama idnetterid/css
· Lalu copas file dengan tulisan ‘dist/js/bootstrap.bundle.min.js ke folder theme yang bernama idnetterid/js
Jika sudah, tambahkan antrian style CSS beserta script JS Bootstrap. Pertama-tama Bizzie bisa buka functions.php. Kemudian di barus 143, silahkan tambahkan code atau baris berikut ini:
| // Bootstrap 5 csswp_enqueue_style( ‘bootstrap-css’, get_template_directory_uri() . ‘/css/bootstrap.min.css’, array(), _S_VERSION );//bootstrap 5 JSwp_enqueue_script( ‘bootstrap-js’, get_template_directory_uri() . ‘/js/bootstrap.bundle.min.js’, array(), _S_VERSION, true ); |
Terakhir tekan simpan
4. Mengimplementasi Bootstrap Grid Layout
Untuk cara membuat tema wordpress dengan bootstrap berikutnya yaitu membuat kerangka layout grid supaya tampilannya responsive. Sebagai awalan, Bizzie bisa membuat theme sederhana dengan dua kolom yakni kanan untuk sidebar, sedangkan kiri untuk konten artikel.
a. Header
Sebagai awalan, Bizzie bisa membuat header dengan cara membuka file bertuliskan header.php, lalu tambahkan kode:
| <div class=”container”> <div class=”row”> <div class=”col-12″> |
Sesudah baris <div id=”page”.
Kemudian tambahkan kode
| </div><!– .col-12 –> </div><!– .row –></div><!– .container → |
Setelah baris </header><!- -.
b. Content
Kemudian buka file bertuliskan index.php, tambahkan kode di bawah ini sebelum baris <main
| <div class=”container”> <div class=”row”> <div class=”col-12 col-md-8″> |
Sesudah baris </main> silahkan tambah kode
| </div><!– .col-12 .col-md-8 –> <div class=”col-12 col-md-4″> <?php get_sidebar(); ?> </div><!– .col-12 .col-md-4 –> </div><!– .row –></div><!– .container → |
Lalu hapus tulisan get_sidebar ( ) dan menyisakan sidebar bertuliskan col-md-4 saja. Silahkan lakukan hal serupa dengan file 404.php, single.php, archive.php, search.php, dan page.php.
Lanjutkan cara membuat tema wordpress dengan bootstrap dengan membuat footer. Caranya yaitu buka file bertuliskan footer.php. Tambahkan kode di bawah ini sebelum <footer
| <div class=”container”> <div class=”row”> <div class=”col-12″> |
Jika sudah, tambahkan kode yang berupa penutup div tepatnya setelah </footer> berikut ini dan tekan simpan.
| </div><!– .col-12 –> </div><!– .row –> </div><!– .container → |
Sampai sini, Bizzie sudah memiliki kerangka yang cukup responsive. Hal ini mengartikan tampilan website nantinya menyesuaikan lebar screen di gawai pengunjung dan sesuai berdasarkan kondisinya. Kalau layar komputer atau desktop nantinya tampil dua kolom berupa col-md-8 serta col-md-4. Sementara itu, jika menggunakan layar ponsel atau mobile, nantinya tampil satu kolom penuh dengan kode col-12.
Berikutnya dalam cara membuat tema wordpress dengan bootstrap yaitu pembuatan navigasi menu pada bagian header yang responsive juga. Bizzie bisa membuat file baru dan berikan nama berupa class-wp-bootstrap.php dalam folder tema idnetterid/inc. Sesudah itu, silahkan isi dengan kode berupa class WP nav walker Bootstrap 5 di bawah ini.
| <?php// bootstrap 5 wp_nav_menu walkerclass bootstrap_5_wp_nav_menu_walker extends Walker_Nav_menu{ private $current_item; private $dropdown_menu_alignment_values = [ ‘dropdown-menu-start’, ‘dropdown-menu-end’, ‘dropdown-menu-sm-start’, ‘dropdown-menu-sm-end’, ‘dropdown-menu-md-start’, ‘dropdown-menu-md-end’, ‘dropdown-menu-lg-start’, ‘dropdown-menu-lg-end’, ‘dropdown-menu-xl-start’, ‘dropdown-menu-xl-end’, ‘dropdown-menu-xxl-start’, ‘dropdown-menu-xxl-end’ ]; function start_lvl(&$output, $depth = 0, $args = array()) { $dropdown_menu_class[] = ”; foreach($this->current_item->classes as $class) { if(in_array($class, $this->dropdown_menu_alignment_values)) { $dropdown_menu_class[] = $class; } } $indent = str_repeat(“\t”, $depth); $submenu = ($depth > 0) ? ‘ sub-menu’ : ”; $output .= “\n$indent<ul class=\”dropdown-menu$submenu ” . esc_attr(implode(” “,$dropdown_menu_class)) . ” depth_$depth\”>\n”; } function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { $this->current_item = $item; $indent = ($depth) ? str_repeat(“\t”, $depth) : ”; $li_attributes = ”; $class_names = $value = ”; $classes = empty($item->classes) ? array() : (array) $item->classes; $classes[] = ($args->walker->has_children) ? ‘dropdown’ : ”; $classes[] = ‘nav-item’; $classes[] = ‘nav-item-‘ . $item->ID; if ($depth && $args->walker->has_children) { $classes[] = ‘dropdown-menu dropdown-menu-end’; } $class_names = join(‘ ‘, apply_filters(‘nav_menu_css_class’, array_filter($classes), $item, $args)); $class_names = ‘ class=”‘ . esc_attr($class_names) . ‘”‘; $id = apply_filters(‘nav_menu_item_id’, ‘menu-item-‘ . $item->ID, $item, $args); $id = strlen($id) ? ‘ id=”‘ . esc_attr($id) . ‘”‘ : ”; $output .= $indent . ‘<li ‘ . $id . $value . $class_names . $li_attributes . ‘>’; $attributes = !empty($item->attr_title) ? ‘ title=”‘ . esc_attr($item->attr_title) . ‘”‘ : ”; $attributes .= !empty($item->target) ? ‘ target=”‘ . esc_attr($item->target) . ‘”‘ : ”; $attributes .= !empty($item->xfn) ? ‘ rel=”‘ . esc_attr($item->xfn) . ‘”‘ : ”; $attributes .= !empty($item->url) ? ‘ href=”‘ . esc_attr($item->url) . ‘”‘ : ”;$active_class = ($item->current || $item->current_item_ancestor) ? ‘active’ : ”; $nav_link_class = ( $depth > 0 ) ? ‘dropdown-item ‘ : ‘nav-link ‘; $attributes .= ( $args->walker->has_children ) ? ‘ class=”‘. $nav_link_class . $active_class . ‘ dropdown-toggle” data-bs-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”‘ : ‘ class=”‘. $nav_link_class . $active_class . ‘”‘; $item_output = $args->before; $item_output .= ‘<a’ . $attributes . ‘>’; $item_output .= $args->link_before . apply_filters(‘the_title’, $item->title, $item->ID) . $args->link_after; $item_output .= ‘</a>’; $item_output .= $args->after; $output .= apply_filters(‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args); }} |
Lanjutkan dengan buka file header.php, lalu ganti baris <nav id= “site navigation” menjadi:
| <nav id=”site-navigation” class=”navbar navbar-expand-md navbar-light bg-light”> <button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#main-menu” aria-controls=”main-menu” aria-expanded=”false” aria-label=”Toggle navigation”> <span class=”navbar-toggler-icon”></span> </button> <div class=”collapse navbar-collapse” id=”main-menu”><?php// bootstrap 5 wp_nav_menu walkerclass bootstrap_5_wp_nav_menu_walker extends Walker_Nav_menu{ private $current_item; private $dropdown_menu_alignment_values = [ ‘dropdown-menu-start’, ‘dropdown-menu-end’, ‘dropdown-menu-sm-start’, ‘dropdown-menu-sm-end’, ‘dropdown-menu-md-start’, ‘dropdown-menu-md-end’, ‘dropdown-menu-lg-start’, ‘dropdown-menu-lg-end’, ‘dropdown-menu-xl-start’, ‘dropdown-menu-xl-end’, ‘dropdown-menu-xxl-start’, ‘dropdown-menu-xxl-end’ ]; function start_lvl(&$output, $depth = 0, $args = array()) { $dropdown_menu_class[] = ”; foreach($this->current_item->classes as $class) { if(in_array($class, $this->dropdown_menu_alignment_values)) { $dropdown_menu_class[] = $class; } } $indent = str_repeat(“\t”, $depth); $submenu = ($depth > 0) ? ‘ sub-menu’ : ”; $output .= “\n$indent<ul class=\”dropdown-menu$submenu ” . esc_attr(implode(” “,$dropdown_menu_class)) . ” depth_$depth\”>\n”; } function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { $this->current_item = $item; $indent = ($depth) ? str_repeat(“\t”, $depth) : ”; $li_attributes = ”; $class_names = $value = ”; $classes = empty($item->classes) ? array() : (array) $item->classes; $classes[] = ($args->walker->has_children) ? ‘dropdown’ : ”; $classes[] = ‘nav-item’; $classes[] = ‘nav-item-‘ . $item->ID; if ($depth && $args->walker->has_children) { $classes[] = ‘dropdown-menu dropdown-menu-end’; } $class_names = join(‘ ‘, apply_filters(‘nav_menu_css_class’, array_filter($classes), $item, $args)); $class_names = ‘ class=”‘ . esc_attr($class_names) . ‘”‘; $id = apply_filters(‘nav_menu_item_id’, ‘menu-item-‘ . $item->ID, $item, $args); $id = strlen($id) ? ‘ id=”‘ . esc_attr($id) . ‘”‘ : ”; $output .= $indent . ‘<li ‘ . $id . $value . $class_names . $li_attributes . ‘>’; $attributes = !empty($item->attr_title) ? ‘ title=”‘ . esc_attr($item->attr_title) . ‘”‘ : ”; $attributes .= !empty($item->target) ? ‘ target=”‘ . esc_attr($item->target) . ‘”‘ : ”; $attributes .= !empty($item->xfn) ? ‘ rel=”‘ . esc_attr($item->xfn) . ‘”‘ : ”; $attributes .= !empty($item->url) ? ‘ href=”‘ . esc_attr($item->url) . ‘”‘ : ”; <nav id=”site-navigation” class=”navbar navbar-expand-md navbar-light bg-light”> <button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#main-menu” aria-controls=”main-menu” aria-expanded=”false” aria-label=”Toggle navigation”> <span class=”navbar-toggler-icon”></span> </button> <div class=”collapse navbar-collapse” id=”main-menu”> <?php wp_nav_menu(array( ‘theme_location’ => ‘menu-1’, ‘menu_id’ => ‘primary-menu’, ‘container’ => false, ‘menu_class’ => ‘navbar-nav me-auto mb-2 mb-md-0’, ‘fallback_cb’ => ‘__return_false’, ‘depth’ => 2, ‘walker’ => new bootstrap_5_wp_nav_menu_walker() )); ?> </div></nav><!– #site-navigation → |
Setelah itu, buka function.php dan tambahkan kode di bawah ini ke baris yang paling bawah:
| /** * Load class-wp-bootstrap-navwalker */require get_template_directory() . ‘/inc/class-wp-bootstrap-navwalker.php’; |
Silahkan simpan dan cek untuk memastikan tak ada yang error.
Kemudian buka menu utama lewat Dashboard admin WordPress dengan tekan Appearance lalu tekan Menus. Harap refresh browser Bizzie dan pastikan semuanya tidak ada error sama sekali setelah pembuatan.
Itulah pembahasan tentang cara membuat tema wordpress dengan bootstrap dan mengimplementasikan fitur layout grid responsive serta navigasi menu dari aplikasi Bootstrap 5. Lebih lanjut, Bizzie juga bisa mengubah tampilan tersebut secara satu persatu agar membuatnya tampak lebih rapi dan enak dipandang.
