Sulhi.id

Catatan Kecil Seputar Blogging dan Koding

Membuat Theme WordPress dengan Bootstrap Bagian 1 : Template, Header dan Footer

Wednesday, February 22nd, 2017     WordPress

Ingin belajar cara membuat Theme WordPress ? Tidak puas dengan Theme yang gratisan dengan segala keterbatasan? Sementara yang premium (berbayar) rasanya sayang mengeluarkan biaya hanya untuk sebuah theme (template), bukan?

Baiklah, posting kali ini saya ingin mencoba menjelaskan sedetail mungkin, sehingga mudah diikuti. Mengingat luasnya .pembahasan serta agar tidak lelah mempelajarinya, tulisan ini dibuat secara berseri (Bertahap). Pada Bagian ke-1, akan dijelaskan  bagaimana mengintegrasikan Theme Bootstrap ke dalam WordPress, serta bagaimana membuat Header dan Footer.

Meskipun pada setiap bagian akan dijelaskan tahap demi tahap, di akhir tulisan Anda dapat mendownload source code dengan harapan jika ada bagian yang kurang jelas Anda dapat membandingkan dengan source code tersebut.

Menggunakan Bootstrap Framework

Kita akan menggunakan Bootstrap sebagai dasar layout. Bootstrap merupakan web framework yang sangat populer digunakan saat ini oleh setiap web developer. Selain mudah dipelajari, Bootstrap juga fully responsive di mana dapat digunakan baik untuk versi dekstop maupun gadget (Handphone dan tablet). Sebagai bahan untuk latihan silakan download bootstrap melalui Official Website Bootstrap atau bisa didownload langsung lewat blog ini.

Membuat Folder Theme

Silakan buat folder dengan nama wpbootstrap pada wp-contents/themes. wpbootstrap adalah nama theme yang akan kita buat. Setidaknya ada dua file yang harus dibuat, yiatu index.php dan style.css. Kedua file tersebut diletakkan dalam folder wpbootsrtap.

Isi file index.php sementara di copy paste dari index.html  Bootstrap yang sudah kita download sebelumnya.Sementara style.css diisi dengan kode berikut:

/*
Theme Name: wpbootstrap
Theme URI: https://sulhi.id
Author: Ahmad Sulhi
Author URI: https://sulhi.id/
Description: WordPress theme built with bootstrap
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: bootstrap
Text Domain: wpbootstrap
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Selanjutnya silakan buka file blog.css dan copy seluruh isinya, kemudian paste pada file style.css di bawah code di atas.

Agar tampilan Theme wpbootsrap di dashboard wordpress ada gambarnya, silakan buat file screenshot.png dengan foto sesuka Anda dengan ukuran 1200 x 900 pixel dan diletakkan sejajar dengan file index.php dan style.css dalam folder wpbootstrap. Terakhir, lihat kembali file Bootstrap yang sudah didownload,  silakan copy folder css dan js ke folder wpbootstrap.  Untuk melihat tampilan Theme yang sudah dibuat tadi, silakan aktifkan Theme wpbootstrap di Dashboard WordPess. Selamat ! Anda berhasil membuat theme yang sederhana.

Konversi Kode HTML ke PHP

File index.php masih berisi kode html semuanya yang di-paste dari index.html Bootstrap. Mari kita sesuaikan agar konten tidak static dan terlihat berantakan. Buka file index.php dan cari kode :

<link href="blog.css" rel="stylesheet">

Ganti dengan kode :

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">

Kode di atas merubah link css dari blog.css ke style.css. Lakukan dengan cara di atas untuk kode-kode berikut :

<html lang="en">
<meta charset="utf-8">
<meta name="description" content="">
<title>Blog Template for Bootstrap</title>
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
<script src="../../dist/js/bootstrap.min.js"></script>

Ganti dengan kode berikut:

<html <?php language_attributes(); ?>>
<meta charset="<?php bloginfo('charset' ); ?>"> 
<meta name="description" content="<?php bloginfo('description') ?>">	
<title><?php bloginfo('name'); ?> | <?php is_front_page() ? bloginfo('description') : wp_title(); ?> <?php wp_title(); ?></title>
<link href="<?php bloginfo('template_url'); ?>/css/bootstrap.min.css" rel="stylesheet">
<h1 class="blog-title"><?php bloginfo('name'); ?></h1>
<p class="lead blog-description"><?php bloginfo('description') ?></p>
<script src="js/bootstrap.min.js"></script>

Membuat File Header dan Footer

Sekarang saatnya memisahkan atau membagi file index.php menjadi header.php dan footer.php. Buat file header.php dan footer.php, kemudian letakan kedua file tersebut dalam folder wpbootstrap. Selanjutnya buka file index.php dengan Editor kesukaan Anda. Perhatikan kode bagian header.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
	<meta charset="<?php bloginfo('charset' ); ?>"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	<meta name="description" content="<?php bloginfo('description') ?>">	
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

	<title><?php bloginfo('name'); ?> | <?php is_front_page() ? bloginfo('description') : wp_title(); ?> <?php wp_title(); ?></title>
	
    <!-- Bootstrap core CSS -->
	<link href="<?php bloginfo('template_url'); ?>/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
	<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="#">Home</a>
          <a class="blog-nav-item" href="#">New features</a>
          <a class="blog-nav-item" href="#">Press</a>
          <a class="blog-nav-item" href="#">New hires</a>
          <a class="blog-nav-item" href="#">About</a>
        </nav>
      </div>
    </div>

Silakan sorot, kemudian pindahkan kode tersebut dengan cara cut (ctrl+x) dan paste (ctrl+v) ke file header.php. Selanjutnya kembali ke file index.php, pada bagian kode yang dipindahkan tersebut isi dengan kode berikut:

<?php get_header(); ?>

Ada kode penting pada file header.php yang harus ditambahkan pada bagian head section, silakan tambahkan kode berikut, tepat sebelum tag penutup header (</head>).

<?php wp_head(); ?>

Kode ini sangat berguna, karena ketika menggunakan Plugins atau Widget, kode inilah sebagai penghubung antara Head Section dengan Plugins atau Widget.

Adapun untuk isi file footer.php, silakan pindahkan kode berikut seperti halnya di header.php.

    <footer class="blog-footer">
	<p>&copy; <?php echo Date('Y'); ?> - <?php bloginfo('name'); ?></p>
        <a href="#">Back to top</a>
      </p>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Jangan lupa, pada kode yang dipindahkan dari bagian footer pada index.php ke footer.php, ganti dengan kode berikut:

<?php get_footer(); ?>

Begitu pula, pada footer.php tambahkan kode berikut tepat setelah tag penutup footer (</footer>).

<?php wp_footer(); ?>

Keseluruhan kode header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
	<meta charset="<?php bloginfo('charset' ); ?>"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	<meta name="description" content="<?php bloginfo('description') ?>">	
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

	<title><?php bloginfo('name'); ?> | <?php is_front_page() ? bloginfo('description') : wp_title(); ?> <?php wp_title(); ?></title>
	
    <!-- Bootstrap core CSS -->
	<link href="<?php bloginfo('template_url'); ?>/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
	<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

	<?php wp_head(); ?>
	
  </head>

  <body>

    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="#">Home</a>
          <a class="blog-nav-item" href="#">New features</a>
          <a class="blog-nav-item" href="#">Press</a>
          <a class="blog-nav-item" href="#">New hires</a>
          <a class="blog-nav-item" href="#">About</a>
        </nav>
      </div>
    </div>

Keseluruhan kode footer.php

    <footer class="blog-footer">
	<p>&copy; <?php echo Date('Y'); ?> - <?php bloginfo('name'); ?></p>
        <a href="#">Back to top</a>
      </p>
    </footer>

	<?php wp_footer(); ?>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Keseluruhan kode index.php

<?php get_header(); ?>
	<div class="container">
		<div class="blog-header">
			<h1 class="blog-title"><?php bloginfo('name'); ?></h1>
			<p class="lead blog-description"><?php bloginfo('description') ?></p>
		</div>
      <div class="row">
        <div class="col-sm-8 blog-main">

....

        </div><!-- /.blog-sidebar -->
      </div><!-- /.row -->
    </div><!-- /.container -->
<?php get_footer(); ?>