Judul : Bagian 8 : Membuat Theme Wordpress dengan Framework Responsive
link : Bagian 8 : Membuat Theme Wordpress dengan Framework Responsive
Bagian 8 : Membuat Theme Wordpress dengan Framework Responsive
Mengatur ulang link di file css dan javascript
Buka header.php dan temukan kode link css seperti di bawah ini<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
Ganti dengan :
<!-- Le styles -->
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
Dalam file style.css tambahkan kode berikut ini :
@import url('bootstrap/css/bootstrap.css');
@import url('bootstrap/css/bootstrap-responsive.css');
body {
padding-top: 60px;
padding-bottom: 40px;
}
@import url('bootstrap/css/bootstrap-responsive.css');
body {
padding-top: 60px;
padding-bottom: 40px;
}
Yang baru saja kita lakukan adalah menggunakan tag khusus Wordpress untuk me-link-an secara otomatis ke CSS Bootstrap ke setiap halaman. Kita akan melihat function bloginfo() dalam tutorial ini beberapa kali digunakan.
Tampilan blog wordpress kita akan terlihat seperti ini :
Sudah jauh lebih bagus bukan?
Dan sebelum kita melangkah ke file footer.php ada sebuah tag lagi yang harus kita ketahui. Function wp_head() adalah hook penting yang memungkinkan para developer plugin bias menambahkan css atau javascript ke dalam theme kita.
Jika kita tidak menyisipkan tag tersebut maka kemungkinan beberapa plugin tidak akan berfungsi dengan baik.
Kita juga akan membersihkan beberapa tags yang tidak berguna di header.php sehingga kodenya akan terlihat seperti ini :
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le styles -->
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a>
<div class="nav-collapse collapse">
<ul class="nav">
<?php wp_list_pages(array('title_li' => '', 'exclude' => 4)); ?>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le styles -->
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a>
<div class="nav-collapse collapse">
<ul class="nav">
<?php wp_list_pages(array('title_li' => '', 'exclude' => 4)); ?>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
Kemudian di footer.php. dalam file sample yang kita download ada banyak banyak javascript yang mubazir, kita bersihkan dan tampilannya akan seperti ini :
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
<footer>
<p>© Company 2012</p>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
Kemudian kita tambahkan tag wp_footer(). Tambahkan tag tersebut tepat sebelum </body>.
Setelah update berarti footer.php anda akan terlihat seperti ini :
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div> <!-- /container -->
<?php wp_footer(); ?>
</body>
</html>
<footer>
<p>© Company 2012</p>
</footer>
</div> <!-- /container -->
<?php wp_footer(); ?>
</body>
</html>
Kemudian tambahkanJavascript sehingga Wordpress akan me-loading Javascript. Yaitu dengan menambahkan function wp_enqueue_script().
Pertama kita akan menggunakannya agar Wordpress meload JQuery pada wp
_head(). Buka file header.php dan tambahkan function diatas sehingga akan terlihat seperti ini :
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<?php wp_head(); ?>
Ingat!! Function wp_head() adalah function yang akan digunakan oleh plugin dan theme gunakan untuk menambahkan CSS dan Javascript pada header.php.
Untuk melakukan ini kita harus membuat sebuah file functions.php dan meload Javascript dari sana.
Buat file function functions.php di folder yang sama dengan header.php
Dan tambahkan kode berikut ini :
<?php
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
?>
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
?>
Untuk menguji apakah ini bekerja atau tidak, buka website dan minimize sehingga mirip dengan tampilan dalam HP atau android kemudian menu akan berubah menjadi sebuah ikon yang bias diklik menjadi dropdown menu.
Demikianlah Artikel Bagian 8 : Membuat Theme Wordpress dengan Framework Responsive
Sekianlah artikel Bagian 8 : Membuat Theme Wordpress dengan Framework Responsive kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Bagian 8 : Membuat Theme Wordpress dengan Framework Responsive dengan alamat link https://infoasikindo.blogspot.com/2013/10/bagian-8-membuat-theme-wordpress-dengan.html
0 Response to "Bagian 8 : Membuat Theme Wordpress dengan Framework Responsive"
Post a Comment