Cara memasang atau menggunakan bootstrap 4 di website wordpress untuk mempercantik tampilan. Bootstrap merupakan sebuah kerangka kerja CSS yang sumber terbuka yang bebas digunakan atau open source untuk merancang sebuah situs web maupun aplikasi berbasis web.
Kerangka kerja Bootstrap ini terdapat templat desain yang berbasis HTML dan CSS untuk tipografi, formulir, navigasi, tombol, dan komponen antarmuka lainnya, serta juga ekstensi JavaScript.
Bootstrap adalah salah satu framework yang paling paling populer di dunia. Bootstrap berfungsi untuk mengembangkan sebuah website dengan desain yang responsive dan juga mobile-first. Sebagian besar website yang tersebar di internet memanfaatkan Bootstrap sebagai komponennya.
Kebanyakan tema wordpress juga memanfaatkan Bootstrap sebagai framework guna mengatur tampilan agar lebih menarik.
Hal tersebut memperlihatkan bahwa Bootstrap diterima , dipercayadan digunakan oleh banyak pengembang. Inilah salah satu sebab sebaiknya mempelajari Bootstrap .
Media sosial twitter yang dibuat oleh Jack Dorsey yang mempunyai tampilan sederhana namun modern adalah cikal bakal perkembangan Bootstrap.
Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi.
Cara Memasang Bootstrap 4 Di WordPress
Di kesempatan kali ini kami akan berbagi memasang Bootstrap di website yang menggunakan CMS wordpress agar bisa digunakan. Selain itu website ini juga kami tambahkan Bootstrap dan tutorial yang share disini pun sebagian besar memanfaatkan Bootstrap . Jadi apabila rekan-rekan mendapati hasil berbeda maka kemungkinan belum terinstal boostrap.
Dalam hal ini kami akan menjelaskan cara memasangnya dan kami menggunakan CDN agar lebih mudah dan tidak terlalu repot-repot untuk mengupload ke hosting.
Untuk CDN adalah dibawah ini yang kami copas dari getbootstrap.com
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>1. Cara Memasang Di header.php
Silakan copas CDN diatas di header.php diletakkan diantara tag <head> …. </head>
Misalnya dibawah ini
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>2. Cara Memasang Di footer.php
Silakan copas CDN diatas di footer.php diletakkan sebelum </body>
Contohnya dibawah ini
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>3. Cara Memasang Di functions.php
Ada 3 cara memasangnya di functions.php
pertama
function child_enqueue_styles() {
wp_enqueue_style( 'bootstrap-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css', array('yurovi-theme-css'), 'CHILD_THEME_YUROVI_THEME_VERSION', 'all' );
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js', array('yurovi-theme-js'), 'CHILD_THEME_YUROVI_THEME_VERSION', 'all' );
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );Kedua
function child_theme_head_script() { ?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<?php }
add_action( 'wp_head', 'child_theme_head_script' );Ketiga
function child_theme_footer_script() { ?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<?php }
add_action( 'wp_footer', 'child_theme_footer_script' );Itulah beberapa cara memasang bootstrap 4 di website yang kami ketahui menggunakan CDN.
NB: metode diatas terkadang tidak semua bisa diaplikasikan ke dalam sebuah website. Kadang metode 1 bisa sedangkan metode 2 tidak bisa, dan seterusnya.
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar