Cara menggunakan bootstrap pada wordpress, pada tutorial wordpress yang lalu kita sudah membahas tentang bagaimana cara membuat theme wordpress dengan bootstrap di sana kita telah melewati step step penting yang mungkin kalian tidak mengetahui maksud dan tujuan dari step step tersebut, paling tidak akan muncul pemikiran asal jadi aja theme wordpressnya. namun kali kita akan mencoba membahasnya satu persatu jadi diharapkan kalian bisa menggunakan bootstrap pada pembuatan theme wordpress dengan benar.
Apa itu bootstrap ?
Suatu hal yang percuma ketika kalian berhasil membuat theme wordpress dengan mengikuti tutorial wordpress ini tanpa mengetahui tools apa yang kalian gunakan ya setidaknya kalianlah apa itu bootstrap dan apa kegunaanya. bootstrap adalah sebuah framework css dengan dilengkapi oleh berbagai komponen seperti nav, pagination, coursel sehingga mempermudah kita dalam pembuatan UI (User Interface) atau Template Web. untuk tau lebih detail kalian bisa mengunjungi situsnya di getbootstrap.com.
Untuk menggunakan bootstrap ini pada wordpress kita perlu mengunduh file bootstrap di getbootstrap.com dan CMS wordpress yang sudah terinstall pada komputer kita. baca cara install wordpress offline.
Jika kalian sudah memiliki file bootstrap, maka langkah selanjutnya kita akan menuju pada direktori themes di wp-content -> themes. di direktori tersebut silahkan buatlah folder bernama “theme-bootstrap” kemudian buatlah beberapa file dan folder didalamnya seperti contoh berikut :
dan ekstrakkan file bootstrap disana hingga membentuk struktur direktori seperti berikut :
|
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 |
theme-bootstrap |--assets | |--css | | |--bootstrap.css | | |--bootstrap.min.css | | |--bootstrap-theme.css | | |--bootstrap-theme.min.css | | | |--fonts | | |--glyphicons-halflings-regular.eof | | |--glyphicons-halflings-regular.svg | | |--glyphicons-halflings-regular.ttf | | |--glyphicons-halflings-regular.woff | | |--glyphicons-halflings-regular.woff2 | | | |--images | | | |--js | | |--bootstrap.js | | |--bootstrap.min.js | | |--jquery.min.js | | |--npm.js | |--functions.php |--index.php |--style.css |
untuk jquery kalian bisa mengunduhnya dari jquery.com.
Jika sudah kita mulai step yang pertama, kita buka file style.css dan mengisi data detail tentang theme kita agar dikenali oleh wordpress dan bisa kita jadikan theme default. isi style.css dengan teks komen berikut:
|
1 2 3 4 5 6 7 8 9 |
/* Theme Name: Theme Bootstrap Author: Onphpid Author URI : https://facebook.com/bocahapi Theme URI : http://www.onphpid.com/ Description: Theme ini dibuat untuk praktik tutorial cara menggunakan bootstrap pada wordpress Version: 1.5 Text Domain: theme-bootstrap */ |
Simpan dan buka halaman wp-admin kalian dan menuju Appearance > Themes. nah apakah kalian melihat “Theme Bootstrap” jika kalian melihatnya silahkan sorot dan klik “active” untuk menjadikan Theme Bootstrap.
Selanjutnya kita menuju halaman situs wordpress kita. pastikan halaman situs wordpress kita ini masih blank alias putih bersih. kita tinggalkan sejenak dan bukalah file functions.php.
Memasang Bootstrap pada wordpress
Kunci utama cara menggunakan bootstrap pada wordpress adalah disini. kita akan memasang bootstrap pada wordpress dengan fungsi wp_enqueue_style(), wp_enqueue_script() dan get_template_directory_uri() yang kurang lebih seperti ini.
|
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 |
<?php function onphpid_scripts() { wp_enqueue_style( 'onphpid-bootstrap', get_template_directory_uri() .'/assets/css/bootstrap.min.css' ); wp_enqueue_style('onphpid-style', get_stylesheet_uri()); wp_enqueue_script( 'jquery-cdn', get_template_directory_uri() . '/assets/js/jquery.min.js', array(), '', true ); wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array(), '', true ); } add_action('wp_enqueue_scripts', 'onphpid_scripts'); |
Penjelasan:
wp_enqueue_style() adalah cara aman atau cara yang benar untuk menambahkan file css ke dalam wordpress dalam hal ini adalah bootstrap.min.css.
|
1 |
wp_enqueue_style( $handle, $src, $deps, $ver, $media ) |
$handle adalah penamanaan seperti “onphpid-bootstrap, onphpid-style atau jquery-cdn” dan harus unik. kalau tidak salah satu akan terhapus.
$src adalah alamat uri dari file css.
$deps adalah pengatuaran kapan file css akan diload sebelum atau sesudah file css tertentu. tapi kita kosongkan saja.
$ver adalah versi dari file css kita dan ini juga bisa kita abaikan.
$media adalah tempat css ini akan kita gunakan misalkan di ‘all’, screen’, ‘handheld’, atau ‘print’ kita abaikan saja.
begitu juga dengan wp_enqueue_script(), adalah cara yang aman atau cara yang benar untuk menambahkan file javascript seperti bootstrap.min.js dan jquery.min.js.
|
1 |
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ) |
Secara keseluruhan isian didalam fungsi wp_enqueue_script() mirip dengan wp_enqueue_style() hanya saja dibagian akhir wp_enqueue_script() adalah $in_footer bukan $media, $in_footer menyatakan bahwa apakah file javascript akan diletakkan di footer ? jika diberi nilai true maka iya dan jika false maka tidak atau akan diletakkan di area <head> … </head>.
lain halnya dengan get_template_directory_uri() dan get_stylesheet_uri().
get_template_directory_uri() adalah url letak dimana file itu berada, get_template_directory_uri() akan menghasilkan http://namadomain.com/wp-content/themes/nama-themes.
sedang get_stylesheet_uri() akan merujuk pada http://namadomain.com/wp-content/themes/nama-themes/style.css.
Setelah selesai melakukan pemasangan bootstrap pada wordpress maka selanjutnya kita akan membuat file index.php untuk mencoba komponen-komponen dari bootstrap. sebagai salah satu contoh kita akan menggunakan glyphicons. ketikan kode berikut pada file index.php.
|
1 2 3 |
<?php wp_head();?> <h1 class="text-center">i <em class="glyphicon glyphicon-heart"></em> WordPress</h1> <?php wp_footer();?> |
jika sudah tampak sebagai berikut maka kita sudah berhasil menggunakan bootstrap pada wordpress dengan cara yang benar. untuk file lengkapnya bisa kalian check di sini. setelah itu kalian bisa menggunakan komponen bootstrap lainya.
demikian tutorial cara menggunakan bootstrap pada wordpress. gimana mudah bukan? pada tutorial berikutnya kita akan membuat menu wordpress dengan bootrtap. jangan Lupa LIKE FP Onphpid untuk mengikuti tutorial wordpress dan tutorial bootstrap terbaru.
Selamat belajar.
