Postingan lainnya
Wordpress to Bootstrap
Bagaimana Gabung WP dengan Bootstrap.
0
2 Jawaban:
Ini gan sama aja pas di video tutorial sekolah koding kelas wordpress yang judulnya menambah, header, footer, dan css, bedanya kalo di video cuma nambah css nya aja pake wp_enqueue_style , jadi kalo mw nambah bootstrap perlu atau include file .js perlu pake wp_enqueue_script. nih ane kasih contoh lengkapnya
script kode ini taruh di file index.php
<?php
get_header();?>
<!-- Coba ganti grid nya pasti work -->
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6 tes">
satu
</div>
<div class="col-md-4 col-sm-4 col-xs-6 tes">
dua
</div>
<div class="col-md-4 col-sm-4 col-xs-6 tes">
tiga
</div>
</div>
</div>
<?php
//looping postingan
if ( have_posts() ) :
while ( have_posts() ) :
the_post(); ?>
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
<?php
endwhile;
else:
echo 'tidak ada post';
endif;
//end looping postingan
?>
<?php
get_footer();
?>
ini buat style.css
.tes{
border: 2px solid black;
}
contoh save file ini di header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body>
<header>
<h1><a href="<?php echo home_url(); ?>"> <?php bloginfo('name'); ?></a></h1>
<h2> <?php bloginfo('description'); ?> </h2>
</header>
footer.php
<footer>
© <?php bloginfo('name'); echo " - " . date('Y'); ?>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Nah ini gan caranya wp_enqueue_style itu untuk include file css, klo wp_enqueue_script untuk file .js
<?php
//load script
function theme_wp_scripts(){
// bootstrap
wp_enqueue_style('bootstrap-style', get_template_directory_uri() . '/css/bootstrap.min.css');
// style.css
wp_enqueue_style('style', get_stylesheet_uri());
// javascript
// jquery plugin
wp_enqueue_script('jquery-script', get_template_directory_uri() . '/js/1.8.2.jquery.min', array(), '', true);
wp_enqueue_script('bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '', true);
}
add_action('wp_enqueue_scripts', 'theme_wp_scripts');
?>
baca-baca disini gan, https://codex.wordpress.org/Theme_Development#JavaScript wordpress udah ngasih panduannya tinggal kitanya aja bisa mahamin atau g
0
