Membuat Tema WordPress Sederhana

Transkripsi

1 Membuat Tema WordPress Sederhana posted by Yusuf Syaifudin on November 10, 2014 Ok, jadi sepertinya saya masih punya hutang sama teman saya tentang janji mau nulis gimana caranya bikin tema WordPress.. Berawal dari pembicaraan mas, ini ada blablablabla, tapi masalahnya minta ada section berita, terus saya jawab ya udah pakai WordPress aja! Kenapa WordPress? Alasan yang paling umum (dan akan saya gunakan disini) ialah karena: gratis komunitasnya aktif dan banyak (jadi kalo mau development tinggal googling nemu deh) dipakai oleh banyak website baik company atau individu de-el-el (yang intinya saya males googling dan silahkan googling sendiri why wordpress ) Ok then, udah cukup basa-basinya, sekarang saya mau melunasi hutang saya. Jadi, kali ini kita mau belajar membuat WordPress Theme using Twitter Bootstrap. Mau nanya lagi kenapa bootstrap? duh, googling aja deh, intinya biar mainstream gampang gitu sih :/ Pertama, Install WordPress dan siapkan assets <p>your browser does not support iframes.</p> langkah pertama banget yang perlu dilakukan ialah menginstall WordPress di local server kita, mau pakai Xampp yang udah mainstream monggo, mau pakai nginx juga boleh.. Untuk langkah installasinya cukup mudah, download wordpress -> ekstrak ke folder dimana local server membaca file kamu (kalau xampp biasanya htdocs) lalu jalankan localhost/wordpress. Masukkan konfigurasi nama database, username database, password database. Kemudian atur nama situs, username dan password. Selesai langkah selanjutnya yang perlu kita lakukan ialah mendownload twitter bootstrap dari sini: dan html5boilerplate dari sini Kedua, Inisialisasi Tema Coba kita mulai development tema kita. Note:

2 lokasi situs diasumsikan di localhost/wordpress sehingga asumsikan juga bahwa wordpress kamu install di <dir>/xampp/htdocs/wordpress Sekarang coba masuk ke direktori wordpress/wp_content/themes, setelah itu coba buat sebuah folder dengan nama mytheme. Folder mytheme ini merupakan area kerja kita dimana semua file untuk keperluan tema ditempatkan. Sebenarnya penamaannya bebas, karena wordpress pada dasarnya akan men-scan semua folder yang ada di themes. Sekarang masuk ke folder mythemes yang sudah dibuat tadi. Ekstrak file.zip dari html5boiler plate ke folder ini, kemudian ekstrak juga bootstrap di folder ini. Setelah itu, kita akan mendapatkan struktur sebagai berikut: - css - doc - fonts - img - js html - index.html Ubah file 404.html dan index.html menjadi 404.php dan index.php Setelah itu, buatlah file style.css dan tulis komentar berikut diatasnya: / Theme Name: WordPress Theme Boilerplate Theme URI: Author: Yusuf Syaifudin Author URI: Description: WordPress Theme Boilerplate is just a boilerplate for later development, using Bootstrap Framework Version: 1.0 License: GNU General Public License v2 or later License URI: Tags: wp boilerplate Ketiga, aktifkan tema

3 Sekarang, coba masuk ke halaman admin wordpress, kemudian masuk ke Appereance -> Themes, maka tema baru akan muncul. Karena di style.css tadi Theme Name-nya ialah WordPress Theme Boilerplate maka nama tema yang akan muncul adalah WordPress Theme Boilerplate. Kemudian silahkan klik Activate. Tema baru terdeteksi di halaman admin WordPress Sekarang coba kunjungi halaman wordpress Anda, misal disini localhost/wordpress, maka akan muncul halaman default HTML5Boilerplate. Sampai disini kita sudah berhasil membuat tema, tapi blank theme :p karena semua css, js atau image bahkan bawaan default html5boilerplate pun belum terdeteksi (karena link yang digunakan secara default ialah relative sedangkan path relative-nya salah jika mengikuti base url). Untuk itu kita perlu meng-load semua file css dan js baik dari html5boilerplate ataupun bootstrap (dan jangan lupa style.css yang kita buat tadi). Keempat, mulai coding tema Untuk membuat tema yang kita buat benar-benar me-load semua aset css atau js, wordpress memiliki cara tersendiri. Sebenarnya kita dapat saja menuliskan kode berikut: <link rel="stylesheet" href="<?php echo get_template_directory_uri();? >/css/normalize.css"> atau <script src="<?php echo get_template_directory_uri();? >/js/vendor/modernizr min.js"></script>

4 tapi ini bukanlah cara yang diajarkan WordPress kepada kita. Untuk me-load script, wordpress memiliki fungsi bernama wp_enqueue_script(). Untuk itu, buatlah file bernama functions.php (ingat s ). Kemudian isi tuliskan kode PHP berikut: / Add header script in tag <head> written by Yusuf Syaifudin <yusuf.syaifudin@gmail.com> function header_scripts() { wp_register_style('normalize', get_template_directory_uri(). '/css/normalize.css', '', '1.1.3'); wp_register_style('main', get_template_directory_uri(). '/css/main.css', '', '4.3.0'); wp_register_style('bootstrap', get_template_directory_uri(). '/css/bootstrap.min.css', '', '3.3.0'); wp_register_style('bootstrap-theme', get_template_directory_uri(). '/css/bootstrap-theme.min.css', '', '3.3.0'); wp_register_style('style', get_template_directory_uri(). '/style.css', '', '1.0.0'); 'style')); wp_enqueue_style(array('normalize', 'main', 'bootstrap', 'bootstrap-theme', // modernizr wp_register_script('modernizr', get_template_directory_uri(). '/js/vendor/modernizr min.js'); wp_enqueue_script(array('modernizr')); add_action( 'wp_enqueue_scripts', 'header_scripts' ); / Add footer script before </body> written by Yusuf Syaifudin <yusuf.syaifudin@gmail.com> function footer_scripts() { // true in 5th parameter is to force script print in bottom wp_register_script('jquery-cdn', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', '', '1.10.2', true); wp_register_script('bootstrap-script', get_template_directory_uri(). '/js/bootstrap.min.js', '', '3.3.0', true); wp_register_script('plugins-script', get_template_directory_uri(). '/js/plugins.js', '', '0', true); wp_register_script('main-script', get_template_directory_uri(). '/js/main.js', '', '0', true); wp_enqueue_script(array('jquery-cdn', 'bootstrap-script', 'plugins-script', 'mainscript')); add_action( 'wp_enqueue_scripts', 'footer_scripts' ); Lalu hapus tag <link> dan <script> yang ada di antara <head> menjadi <?php wp_header();?>

5 dan semua <script> atau <style> (jika ada) sebelum tag penutup </body> menjadi <?php wp_footer();?> Kelima, templating Anda sudah me-load segala aset, Anda bisa saja mulai menulis kode HTML dan mulai mendesain blog Anda, tapi saya yakin ini akan memusingkan Anda kedepannya. Maka, saya akan mengajarkan kepada Anda bagaimana membuat template berjalan lebih rapi. Sekarang buatlah file header.php dan pindahkan kode dari <!doctype html> hingga <body> ke file ini <?php / The Header template for our theme Displays all of the <head> section and everything up till WordPress?> <!DOCTYPE html>     <html class="no-js">  <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1">  <?php wp_head();?> </head> <body>  dan pindahkan dari </body> sampai </html> ke footer.php: <?php / The template for displaying the footer Contains footer content and all scripts in WordPress

6 wp_footer();?>  <script> (function(b,o,i,l,e,r){b.googleanalyticsobject=l;b[l] (b[l]= function(){(b[l].q=b[l].q []).push(arguments));b[l].l=+new Date; e=o.createelement(i);r=o.getelementsbytagname(i)[0]; e.src='// r.parentnode.insertbefore(e,r)(window,document,'script','ga')); ga('create','ua-xxxxx-x');ga('send','pageview'); </script> </body> </html> Maka, di file index.php hanya tinggal kode berikut:  <p>hello world! This is HTML5 Boilerplate.</p> Hapus saja kode itu, lalu ganti dengan memanggil kode berikut: <?php get_header();?>  <?php get_footer();?> Yap, sekarang kita benar-benar bisa mendesain halaman blog/web kita. Keenam, membuat navigasi Sekarang mulai dengan membuat navigasi. Lagi-lagi agar kita lebih terstruktur, maka saya menyarankan Anda membuat file navigation.php yang berisi navigasi Anda, lalu panggil fungsi berikut diantara get_header() dan get_footer(). <?php get_template_part( 'navigation' );?> Dan berikut ialah isi dari navigation.php: <?php / The navigation template WordPress?> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid">

7  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" datatoggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="<?php echo site_url();? >"><?php echo bloginfo('name');?></a>  <div class="collapse navbar-collapse" id="bs-example-navbarcollapse-1"> <ul class="nav navbar-nav"> <?php foreach (getmenu() as $menu) :?> <li><a href="<?php echo $menu['url'];? >" class="item"><?php echo $menu['title'];?></a></li> <?php endforeach;?> </ul>   </nav> Disini saya memanggil fungsi yang tidak standar dari wordpress, saya menambahkan fungsi sendiri, untuk itu tambahkan kode berikut di file functions.php: / Add custom menu feature function register_menu() { register_nav_menu( 'primary', 'Primary Menu' ); add_action('init', 'register_menu'); / Get List page using $wpdb Written by Yusuf Syaifudin <yusuf.syaifudin@gmail.com> Written at Saturday, November 8, :25AM function getpages($post_type = 'page' ) { global $wpdb; $where = get_posts_by_author_sql( $post_type, true ); $pages = $wpdb->get_results( "SELECT ID, post_title FROM $wpdb->posts $where" ); foreach ($pages as $p) { $response[] = array( 'id' => $p->id, 'title' => $p->post_title, 'url' => get_site_url(). '?page_id='. $p->id ); return $response;

8 / Get all menu object as array fallback to getpages() Written by Yusuf Syaifudin Written at Saturday, November 8, :05PM usage: <?php foreach (getmenu() as $menu) :?> <a href="<?php echo $menu['url'];?>" class="item"><?php echo $menu['title'];? ></a> <?php endforeach;?> function getmenu() { $menu_name = 'primary'; if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) { $menu = wp_get_nav_menu_object( $locations[ $menu_name ] ); $menu_items = wp_get_nav_menu_items($menu->term_id); if ($menu_items == false) { return getpages(); foreach ( (array) $menu_items as $key => $menu_item ) { $menu_list[] = array( 'id' => $menu_item->id, 'title' => $menu_item->title, 'url' => $menu_item->url ); else { $menu_list = getpages(); // $menu_list now ready to output return $menu_list; Ketujuh, membuat pesan selamat datang Kita akan membuat jumbotron bawaan bootstrap 3 yang akan muncul hanya pada halaman awal saja, namun ketika sedang membaca tulisan pesan tersebut hilang dan hanya full page article. Untuk itu pada index.php tambahkan kode berikut: <?php get_template_part( 'greetings' );?> lalu buatlah file greetings.php berisi: if ( is_front_page() && is_home() ):?>

9 <?php endif;?> <div class="jumbotron"> <div class="container"> <h1>hello, world!</h1> <p>this is my great Website</p> Kedelapan, membuat daftar post Sekarang, kita akan menampilkan seluruh post yang ada di database wordpress. Caranya di file index.php kita akan me-looping content dari database. Berikut ialah isi file index.php secara lengkap: <?php / The main template WordPress get_header();?>  <?php get_template_part( 'navigation' );?> <?php get_template_part( 'greetings' );?> <div class="container"> <?php if ( have_posts() ) :?> <?php while ( have_posts() ) : the_post();?> <div class="span12"> <h3><?php echo the_title();?></h3> <?php echo the_excerpt();?> <br> <a href="<?php echo the_permalink();?>" class="btn btn-primary">baca selengkapnya</a> <hr> <?php endwhile;?> <?php else :?> <div class="span12"> Sorry, no posts were found <?php endif;?>

10 <?php get_footer();?> disitu terdapat perulangan (looping) dimana selama wordpress memiliki post untuk ditampilkan, ia akan menampilkannya untuk kita. Kesembilan, membuat halaman baca Kita sudah berhasil menampilkan seluruh tulisan, namun ketika kita klik baca selengkapnya, tulisanpun hanya akan menjadi satu dan textnya tetap terpotong (karena kita hanya memanggil potongan tulisan saja dengan fungsi the_excerpt();). Untuk itu buatlah halaman baca dengan membuat file single.php dan page.php yang isinya ialah kode sebagai berikut: <?php / The Template for displaying all single WordPress get_header();?> <?php get_template_part( 'navigation' );?> <?php if ( have_posts() ) :?> <div class="container"> <?php endif;?> <?php while ( have_posts() ) : the_post();?> <div class="row"> <h3><?php echo the_title();?></h3> <small><?php echo the_date();?></small> <hr> <?php echo the_content();?> <?php endwhile;?> <?php get_footer();?> Kesepuluh, pelajari lebih jauh Kita sudah memiliki halaman blog yang sangat-sangat sederhana. Kini kita perlu meningkatkan skill membuat tema wordpress kita. Link referensi untuk mengetahui fungsifungsi wordpress ialah

11 Final Words Tutorial ini hanyalah contoh membuat tema wordpress dengan cara yang sangat sederhana. Tentu, jika Anda ingin membuatnya untuk web Anda, Anda perlu lebih mendalami wordpress dan bagaimana mendevelop tema dengan lebih baik, Repositori Hasil tutorial ini dapat di download di repo Github saya. Kalau ada yang bisa memberi saran bagaimana seharusnya boilerplate wordpress ini dikembangkan, saya akan sangat senang.