Belajar Membuat Tema WordPress dari Awal
Assalamualaikum, kita jumpa lagi di artikel ke-2 Seri Belajar WordPress. Kali ini kita akan Belajar Membuat Tema WordPress dari Awal. Tema WordPress yang akan kita buat adalah tema blog standar, tidak ada fitur-fitur kompleks yang menyulitkan bagi pemula.
Agar tampilan tema “lumayan” rapi dan cantik, kita akan menggunakan Framework CSS Bootstrap. Kalau anda belum familiar dengan bootstrap, bisa belajar di website W3C School: https://www.w3schools.com/.
Table of Contents
Persiapan Sebelum Meng-Koding
Sebelum mulai mengetik kode-kode, kita persiapkan dulu alat-alat tempur yang harus dimiliki seorang WordPress Developer.
- Code (Teks) Editor
Terserah mau pakai notepad++, VSCode, SublimeText atau yang lain. - Browser dengan plugin web developer terinstall/aktif.
Saya menggunakan Firefox. Favorit saya sejak zaman baheula. - Instalasi WordPress
Jika belum, silahkan menyelesaikan Bagian 1 Seri Belajar WordPress. Pengenalan dan Instalasi WordPress. - Kode sumber Bootstrap.
Download di https://getbootstrap.com. Pada artikel ini saya menggunakan versi 4 yang terakhir.
Struktur Tema WordPress
Tema WordPress terdiri dari minimal 2 (dua) file utama, style.css dan index.php. Kedua file itu diletakkan ke dalam folder sesuai dengan nama tema.
Karena kita menggunakan bootstrap, kita akan membuat 2 folder tambahan (opsional) di dalam folder tema, folder css untuk file bootstrap.min.css dan js untuk file bootstrap.min.js. Folder inc gunanya untuk meletakkan library tambahan (wordpress-bootstrap-4-pagination.php), misalnya di tema ini kita menggunakan library pagination dari github, misalnya: https://github.com/renzramos/wordpress-bootstrap-4-pagination.
File-file lainnya dibuat sesuai kebutuhan anda menurut hirarki tema WordPress (https://developer.wordpress.org/themes/basics/template-hierarchy/).
Membuat Halaman Depan
Halaman depan akan menampilkan ringkasan blog post dengan menampilkan judul blog post, potongan isi (excerpt), informasi (meta) tulisan seperti: penulis, tanggal penulisan dan kategori tulisan.
Membuat File style.css
File style.css penting adanya, tanpa ada file tersebut, tema anda tidak akan dikenali oleh WordPress dan dinyatakan “broken”. File style.css juga digunakan untuk menulis kode CSS untuk mempercantik tema anda.
File style.css mengandung informasi tema, contohnya:
/* Theme Name: Belajar WP Theme URI: https://lombokmedia.web.id/ Description: Belajar membuat tema WordPress Author: Amrin Zulkarnain Author URI: http://amrinz.wordpress.com Version: 1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: lombokmedia */
Selain lisensi dan text domain, informasi lain sudah jelas sesuai namanya. Lisensi tema tidak bisa dirubah, karena ini keharusan dari pihak WordPress. Bagian text domain untuk keperluan terjemahan, jika tema anda mendukung.
Membuat File functions.php
Untuk pagination, kita menambahkan kode berikut di dalam file functions.php
<?php
include_once(‘inc/wordpress-bootstrap-4-pagination.php’);
dan menambahkan fitur tema (theme supports)
add_theme_support( 'title-tag' );
Untuk menampilkan judul halaman secara otomatis tanpa menambahkannya secara manual di <head>.
Kita juga akan menggunakan kode berikut untuk me-load file css dan js yang sudah kita siapkan secara otomatis, tanpa manual menuliskannya di file index.php
//Load some scripts and styles
function lmd_scripts_styles() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery-3.5.1.min.js');
wp_enqueue_script( 'jquery' );
wp_enqueue_script('bt_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '4.5.2', true );
//CSS
wp_enqueue_style('bt_css', get_template_directory_uri() . '/css/bootstrap.min.css', false ,'4.5.2');
wp_enqueue_style('style_css', get_stylesheet_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'lmd_scripts_styles');
Selanjutnya kita menggunakan kode berikut untuk mengaktifkan fitur widget
if ( function_exists('register_sidebar') )
{
register_sidebar(array(
'name' => __( 'Sidebar', 'lombokmedia' ),
'id' => 'sidebar',
'before_widget' => '<div class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title h4"><span>',
'after_title' => '</span></h2>',
));
}
Membuat File index.php
Dalam hirarki tema WordPress, file index.php menjadi fallback (pengganti) jika tema diatasnya tidak ada. Misalnya ketika anda meminta halaman (page), tetapi file template (page.php) tidak ada, maka WordPress akan menampilkan halaman menggunakan file template index.php.
Secara tradisional, visual layout tema terdiri dari beberapa bagian, header, utama, sidebar dan footer. Seperti gambar dibawah.
Membuat Header
Buat file baru dengan nama header.php, isi dengan kode berikut:
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta <?php bloginfo( 'charset' ); ?>>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<link rel="icon" type="image/x-icon" href="<?php echo get_template_directory_uri().'/favicon.ico'; ?>" />
<!--[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 <?php body_class(); ?> id="lmd-body">
<div class="header">
<div class="container">
<h1><a href="<?php echo home_url(); ?>"><?php echo get_bloginfo('name'); ?></a></h1>
<p><?php echo get_bloginfo('description'); ?></p>
<hr>
</div>
</div>
Di dalam file index.php, kita akan memanggilnya dengan menulis get_header().
Di kode diatas kita menggunakan beberapa tag kode yang hanya dipakai WordPress, penjelasannya sebagai berikut:
- get_template_directory_uri()
Menghasilkan alamat direktori tema dalam bentuk yang dikenali browser, misalnya: http://localhost/wp-content/themes/belajarwp/ - wp_head()
Menghasilkan informasi diantara tag HTML <head> dan </head> seperti <title>, <link> css, <meta>, dll. - body_class()
Menghasilkan class CSS yang bisa digunakan untuk mengatur style spesifik per-halaman. - home_url()
Menghasilkan alamat utama website, dalam hal ini http://localhost - get_bloginfo(‘name’) dan get_bloginfo(‘description’)
Menghasilkan nama dan deskripsi website sesuai di Dashboard > Settings > General Options
Membuat Bagian Utama Excerpt (Ringkasan) Blog
<section class="lmd-main">
<div class="container">
<section class="row">
<main class="col-lg-8 lmd-content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> role="article">
<h2 class="post-title"><a href="<?php the_permalink(); ?>" title="Continue reading <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<ul class="list-inline post-meta">
<li class="list-inline-item post-author">By <?php the_author_posts_link(); ?></li>
<li class="list-inline-item post-date"><?php the_time( get_option( 'date_format' ) ); ?></li>
<li class="list-inline-item post-category"><?php the_category(' '); ?></li>
</ul>
<section class="post-body">
<?php the_excerpt(); ?>
</section>
</article>
<?php endwhile;
wp_boostrap_4_pagination();
else:
echo 'belum ada artikel';
endif; ?>
</main>
<?php get_sidebar(); ?>
</section><!--/row-->
</div><!--/container-->
</section><!--/lmd main-->
Disini kita menggunakan WordPress Loop, gunanya untuk menampilkan blog post dari database. Untuk lebih jelasnya, silahkan membaca https://developer.wordpress.org/themes/basics/the-loop/
Tag WordPress yang kita gunakan di snippet kode diatas adalah
- the_permalink()
untuk menampilkan link detail blog post - the_title()
menampilkan judul blog post - the_time( get_option( ‘date_format’ ) )
menampilkan tanggal tulisan dalam format yang diatur di settings - the_author_posts_link()
menampilkan nama penulis - the_category(‘ ‘)
menampilkan kategori blog post - the_excerpt()
menampilkan paragrap ringkasan tulisan (excerpt) - get_sidebar()
memanggil file sidebar.php
Membuat Sidebar
Buat file baru dengan nama sidebar.php, isi dengan kode:
<aside class="col-lg-4 lmd-sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar') ) : ?>
<p><a href="<?php echo home_url(); ?>/wp-admin/widgets.php">Add New Widget</a></p>
<?php endif; ?>
</aside>
fungsinya adalah untuk menampilkan widget. Dengan widget kita bisa menampilkan halaman, kategori, post terbaru dan lain-lain
Membuat Footer
File footer di artikel ini hanya menampilkan hak cipta dan tahun, sangat sederhana, di dalam file index.php, kita akan memanggilnya dengan menulis get_footer().
<footer class="lmd-footer">
<div class="container">
<hr>
<p class="copyright">Copyright © <?php echo date('Y'); ?> . <?php bloginfo('name'); ?> . All rights reserved</p>
</div><!--/container-->
</footer><!--/section-->
<?php wp_footer(); ?>
</body>
</html>
Kode File index.php Selengkapnya
Selengkapnya, isi file index.php
<?php get_header(); ?>
<section class=”lmd-main”>
<div class=”container”>
<section class=”row”>
<main class=”col-lg-8 lmd-content”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?> role=”article”>
<h2 class=”post-title”><a href=”<?php the_permalink(); ?>” title=”Continue reading <?php the_title(); ?>”><?php the_title(); ?></a></h2>
<ul class=”list-inline post-meta”>
<li class=”list-inline-item post-author”>By <?php the_author_posts_link(); ?></li>
<li class=”list-inline-item post-date”><?php the_time( get_option( ‘date_format’ ) ); ?></li>
<li class=”list-inline-item post-category”><?php the_category(‘ ‘); ?></li>
</ul>
<section class=”post-body”>
<?php the_excerpt(); ?>
</section>
</article>
<?php endwhile;
wp_boostrap_4_pagination();
else:
echo ‘belum ada artikel’;
endif; ?>
</main>
<?php get_sidebar(); ?>
</section><!–/row–>
</div><!–/container–>
</section><!–/lmd main–>
<?php get_footer(); ?>
Setelah ini, tema sudah siap diaktifkan. Arahkan browser anda ke http://localhost/wp-admin/themes.php.
Kode sumber file artikel kali ini bisa di download di https://github.com/amrinz/Seri-Belajar-WordPress – https://github.com/amrinz/Seri-Belajar-WordPress/blob/main/belajarwp-v1.zip
Selanjutnya, kita akan membuat halaman untuk membaca blog post secara detil. Baca artikel selanjutnya di Membuat Halaman Blog Post *.
*) Belum siap …
