Membuat Theme Wordpress Dengan Framework Responsive

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

Membuat Theme Wordpress dengan Framework Responsive

Contents Apa itu Responsive Design? ............................................................................................................. 2

Membuat Responsive Wordpress Theme dengan Bootstrap ...................................................... 2

1. Memulai ...................................................................................................................................... 2

2. Tambahkan folder wpbootstrap dalam folder theme wordpress ....................... 2

3. Buat File index.php dalam folder wpbootstrap ...................................................... 3

4. Copy source code dari halaman sample hero ........................................................ 3

5. Buat File style.css di dalam folder wpbootstrap ............................................... 3

6. Buat gambar sebagai screenshot theme ....................................................................... 3

7. Cek di wp-admin ..................................................................................................................... 4

8. Mengubah File-file Bootstrap menjadi template Wordpress ............................. 5

10. Mengatur ulang link di file css dan javascript .............................................................................. 7

11. Membuat Homepage Wordpress ............................................................................................... 12

12. Menambahkan Kontent dan Navigasi .............................................................................. 15

NAVIGASI .................................................................................................................................. 15

13. Membuat template untuk Halaman, Post dan daftar Post .................................. 16

a. Membuat template untuk halaman .............................................................................. 16

b. Template Sidebar ............................................................................................................. 17

c. Template Daftar Post (Post Listing) ................................................................... 17

d. Template Single Post .................................................................................................... 19

14. Finishing Theme ................................................................................................................... 20

a. Update Header .................................................................................................................... 20

iv. Menambahkan Widget di Sidebar .............................................................................................. 21


Apa itu Responsive Design? Responsive Design intinya membuat halaman sebuah website fluid dan bias 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

1. 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)

2. Tambahkan folder wpbootstrap dalam folder theme wordpress Tambahkan folder wpbootstrap atau namakan dengan nama apa saja terserah kita. Struktur Wordpress nya akan seperti ini


Folder bootstrap berisi file hasil unzip dari Bootstrap : css img js

3. Buat File index.php dalam folder wpbootstrap

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

5. 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 How to Build a WordPress Theme with Bootstrap. 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 */

6. Buat gambar sebagai screenshot theme Buat gambar dengan ukuran 300 x 225 px dan namakan screenshot.png. Contoh gambarnya seperti di bawah ini :


7. Cek di wp-admin Sekarang Log in ke wp-admin. Dan klik appearance-theme. Theme baru sudah ada di sana. Klik activate dan cek tampilan wordpress baru


Belum ada kode CSS nya.

8. Mengubah File-file Bootstrap menjadi template Wordpress Umumnya template Wordpress akan terdiri dari file-file berikut ini : - index.php - style.css - header.php - footer.php - sidebar.php

Bisa lebih banyak lagi, tetapi kita akan membuat template yang terdiri atas file-file tersebut saja.

Yang akan kita lakukan adalah mengambil isi HTML dan dimasukan ke dalam header setiap halaman dan juga di bagian footer halaman.

Masukkan source code untuk file-file di atas

Header source code

Index source code

Footer source code

Sidebar.php masih kosong.


9. Menyisipkan tag header dan Footer dalam index.php

Tag get_header(), dan get_footer() Dua tag tersebut ada dalam function wordpress dan akan menyisipkan header dan footer di bagian atas dan bawah halaman. Dua tag tersebut akan bekerja karena kita menamai file-file tersebut dengan header.php dan footer.php. Tag tersebut tidak akan bekerja jika kita menamai kedua file tersebut dengan misalnya my_header.php dan my_footer.php Jadi sekarang index.php akan seperti ini : Hello, world! 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. Learn more Heading 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. View details Heading 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. View details


Heading 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. View details

10. Mengatur ulang link di file css dan javascript Buka header.php dan temukan kode link css seperti di bawah ini

body { padding-top: 60px; padding-bottom: 40px; }

Ganti dengan :


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 : Bootstrap, from Twitter


Kemudian kita tambahkan tag wp_footer(). Tambahkan tag tersebut tepat sebelum . Setelah update berarti footer.php anda akan terlihat seperti ini : Company 2012 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 : 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 : 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. Seperti terlihat di bawah ini :


11. Membuat Homepage Wordpress Sampai disini kita telah mempunyai sebuah template static. Kita akan membuat sebuah template yang dinamis dengan membuat sebuah halaman homepage dan menampilkannya dalam halaman Wordpress dan menggantikan halaman HTML yang sekarang kita punyai. Untuk melakukan ini pada halaman admin Wordpress, klik pages, klik new dan buatlah sebuah halaman dengan judul Home dan klik HTML atau text. Copy kode yang terdapat di index.php dan paste kan di halaman Home tadi. Seluruh kode dalam index.php harus dicopy semua termasuk headed an footer include :


Agar isi halaman Homepage yang tadi kita buat dalam halaman admin dapat kembali ke template wordpress secara dinamis kita membutuhkan sebuh function yang paling popular dalam wordpress yaitu Loop. Loop seperti artinya adalah pengulangan, loop wordpress juga akan mengulang dalam seluruh halaman dan post wordpress berbagai informasi seperti judul, isi, tanggal, pengarang dan juga komentar yang berkaitan. Kode loop dasar seperti ini : Halaman index.php yang sudah disisipi loop akan Nampak seperti ini: Dan sekarang kita akan menambahkan judul dan content halaman. Kode untuk judul : the_title() dan kode untuk content the_content(). Tambahkan kode tersebut ke dalam index.php sehingga kode index.php akan kelihatan seperti ini : Sekarang kita test hasilnya, namun sebelumnya ubah dahulu setting Wordpress. Dalam admin area klik Setting Reading Front page displays Ubah dari Your Latest Posts menjadi a static page dan pilih dalam Front page halaman Home.


Klik Save Changes dan kemudian coba refresh halaman Wordpress kita. Kita juga bias membuat file front-page.php sebagai Home page. Save as index.php dan beri nama front-page.php. Hapus the_title() karena kita tidak ingin judul Home Nampak disana. Kode dalam front-page.php seperti ini: Edit content dalam halaman Home Hapus button yang berada di bawah heading Sekarang coba buka website wordpress kita. Tampilannya sekarang harusnya seperti di bawah ini :


12. Menambahkan Kontent dan Navigasi Tambahkan halaman About, Contact, News melalui admin area. Isi dengan apa saja.

NAVIGASI Kita akan mengubah navigasi (menu) static menjadi menu dinamis yang akan secara otomatis menampilkan halaman yang kita tampilkan melalui admin area. Dalam header.php cari unordered list(ul) dengan class na dan hapus list itemnya. Kemudian ganti dengan kode list page Wordpress wp_list_pages() Buka kembali website Wordpress, dan kita akan melihat halaman-halaman yang kita buat Nampak di menu navigasi Wordpress. Kita telah punya menu navigasi yang telah bekerja dengan baik. Tetapi Karen markup navigasi dari Wordpress sedikit berbeda dengan Bootstrap, maka kita akan mengubah sedikit dari class untuk menu yang sedang aktif. Dalam folder theme Bootstrap buka bootstrap > css dan buka file bootstrap.css, carilah kode di bawah ini:


.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus, Dan tambahkan di bawahnya kode di bawah ini : .navbar-inverse .nav .current-page_item a, .navbar-inverse .nav .current-page_item a:hover, .navbar-inverse .nav .current-page_item a:focus, .navbar-inverse .nav .current-page_parent a, .navbar-inverse .nav .current-page_parent a:hover, .navbar-inverse .nav .current-page_parent a:focus,

13. Membuat template untuk Halaman, Post dan daftar Post

a. Membuat template untuk halaman Buka file index.php dan save as dengan nama page.php. File ini akan menjadi template untuk setiap halaman yang kita buat.

Yang pertama harus diubah adalah kata Sorry, no posts matched your criteria. Dengan misalnya Sorry, halaman yang anda tuju tidak ada.

Kemudian kita akan membuat halaman menjadi 2 kolom dengan menggunakan markup dari bootstrap. Tambahkan div dengan class row, span8 dan span4 dari bootstrap. Span8 akan kita gunakan untuk content halaman, dan span4 untuk sidebar.

Isi kode keseluruhan dari page.php menjadi seperti di bawah ini :


Karena kita juga akan menampilkan sidebar di beberapa template lainnya maka kita akan mempergunakan tag Wordpress get_sidebar() yang cara kerjanya sama dengan get_header maupun get_footer.

Untuk membuat sidebar, buatlah sebuah file bernama sidebar.php dan tulis kode berikut ini :

sidebar

b. Template Sidebar Kita akan memodifikasi template sidebar nanti.

Sekarang buka dulu page.php dan tambahkan tag ger_sidebar() di dalam div span4.

c. Template Daftar Post (Post Listing) Template daftar post agak sedikit berbeda dan juga sedikit rumit. Karena template tersebut nantinya bukan hanya menampilkan judul da nisi dari post, tetapi menampilkan judul, permalink, tanggal dan lain-lain.

Untuk membuat template tersebut buka page.php dan save as sebagai home.php. Dalam wordpress home.php diperuntukan untuk daftar post. Kita akan mempergunakan home.php ini sebagai halaman News.

Tambahkan tag h1 untuk kata News di bagian paling atas dari content. Tag ini harus berada di atas loop.


Loop yang kita gunakan disini akan berulang untuk setiap post. Kita gunakan tag h2 untuk judul dari post.

Kita juga harus menambahkan tag _the_permalink() yang akan menjadi link untuk setiap post.

Markup dari kode link seperti di bawah ini :


Untuk melihat hasilnya ubah dulu setting dari admin area

Setting > Reading

Dalam drop down Posts Page pilih Home

Refresh website dan lihat hasilnya.

d. Template Single Post - Buka page.php dan save as dengan nama single.php - Tambahkan tanggal dengan kode berikut ini :

- Tambahkan tag untuk komentar yaitu dengan tag comments_template() - Kode final dari single.php :


14. Finishing Theme

a. Update Header i. Kita ingin menampilkan judul post beriringan dengan nama website.

Caranya: - Buka header.php - Ganti tag agar menjadi dinamis dengan tag

wp_title(|, 1, right);

- Tag ini akan menampilkan nama website. Kita kombinasikan untuk menampilkan judul post juga dengan kode berikut ini :

ii. Membuat Judul Website Dinamis

Judul website akan kita atur berada di sebelah kiri atas dan juga menjadi link ke halaan homepage kita.

Tetapi kita sudah melakukannya dengan kode :


Menjadi

id_home diganti dengan no id dari halaman home kita.

iv. Menambahkan Widget di Sidebar Buka file functions.php dan tambahkan kode berikut ini sebelum tag penutup phpnya: if (function_exists('register_sidebar')) register_sidebar(array( 'before_widget'=>'', 'after_widget'=>'', 'before_title'=>'', 'after_title'=>'', ));

dan sidebar.php diubah menjadi dinamis dengan kode berikut ini :

Membuat Theme Wordpress Dengan Framework Responsive

Documents

Transcript of Membuat Theme Wordpress Dengan Framework Responsive