Membuat Theme WordPress dengan Framework Responsive

Apa itu Responsive Design?

Responsive Design intinya membuat halaman sebuah website “fluid” dan bisa menyesuaikan dengan browser bahkan dengan media yang digunakan, misalnya HP, android dan sebagainya. (entah nanti ada apa lagi)

Membuat Responsive WordPress Theme dengan Bootstrap

Bootstrap adalah framework Responsive untuk membuat Website dan aplikasi. Kita akan memanfaatkannya untuk membuat Theme WordPress.
Dengan Bootstrap kita tidak usah membuat Theme WordPress dari Nol.
Tutorial kali ini akan mengambil contoh dari halaman Theme Hero dari Bootstrap
Kita akan membuat sebuah theme dengan halaman-halaman sebagai berikut :

  • Homepage dengan desain custom
  • Halaman About
  • Halaman Contact
  • Sebuah section dengan komentar
  • Sidebar yang bias diisi dengan widget wordpress

Memulai
Sebelum kita mulai, beberapa hal ini harus dilakukan :

  • Install WordPress
  • Download dan Unzip Bootstrap
  • Install Plugin WP Test Drive (install plugin ini jika kita tidak ingin pengunjung melihat Theme WordPress saat sedang kita buat)

Tambahkan folder wpbootstrap  dalam folder theme wordpress

Tambahkan folder wpbootstrap atau namakan dengan nama apa saja terserah kita.
Struktur WordPress nya akan seperti ini

Membuat Theme WordPress dengan Framework Responsive

Folder bootstrap berisi file hasil unzip dari Bootstrap :

css
img
js

Buat File index.php dalam folder wpbootstrap

Copy source code dari halaman sample “hero”

Copy source code dari halaman sample hero dan paste ke dalam file index.php

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>

      <!-- Example row of columns -->
      <div class="row">
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
       </div>
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
      </div>

Buat File style.css di dalam folder wpbootstrap

WordPress membutuhkan file css dengan nama style.css jadi jangan namakan dengan nama lain. Dalam file style.css tersebut masukkan komentar berikut ini :

/*
 Theme Name: WP Bootstrap
 Theme URI: http://teamtreehouse.com/wordpress-bootstrap-theme-tutorial
 Description: A demo theme built to accompany the Treehouse blog post <a href="http://teamtreehouse.com/wordpress-bootstrap-theme-tutorial">How to Build a WordPress Theme with Bootstrap</a>.
 Author: Zac Gordon
 Author URI: http://teamtreehouse.com/
 Version: 1.0
 Tags: responsive, white, bootstrap
 License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
 License URI: http://creativecommons.org/licenses/by-sa/3.0/
 This simple theme was built using the example Bootstrap theme "Basic marketing site" found on the Bootstrap web site http://twitter.github.com/bootstrap/examples/hero.html
 */

Buat gambar sebagai screenshot theme
Buat gambar dengan ukuran 300 x 225 px dan namakan screenshot.png. Contoh gambarnya seperti di bawah ini :
Membuat Theme WordPress dengan Framework Responsive

Cek di wp-admin

Sekarang Log in ke wp-admin. Dan klik appearance-theme. Theme baru sudah ada di sana.

Membuat Theme WordPress dengan Framework Responsive

Klik “activate” dan cek tampilan wordpress baru

Belum ada kode CSS nya.

Posted on 30 October 2014, in Uncategorized. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: