Cara Membuat Tema WordPress Responsive Menggunakan HTML5
Pengenalan
Tema WordPress merupakan seperangkat file yang menyusun layout website Anda. Sebuah tema memiliki HTML, PHP, dan CSS, dan terkadang juga menggunakan JavaScript/jQuery.
Di tutorial WordPress ini, Anda akan mempelajari cara membuat tema WordPress menggunakan HTML5, CSS3, dan dasar desain yang responsif. Anda juga akan mempelajari cara menjeniskan berbagai bagian dari tema Anda ke dalam ‘templates’.
Tema, seperti plugin, terpisah dari kode inti WordPress. Tema memperbolehkan website Anda memiliki layout yang konsisten untuk setiap halaman dan post, dan dengan cepat dapat dimodifikasi guna mengubah seluruh tampilan website Anda. Untuk menampilkan informasi dari WordPress atau isi post, Anda harus menggunakan template tag yang disediakan oleh WordPress. Langkah ini selanjutnya akan dijelaskan dalam tutorial ini.
Setelah menyelesaikan setiap langkah di tutorial ini dan membuat tema baru WordPress, jangan lupa juga untuk membaca tutorial cara membuat child theme WordPress unuk mengembangkan apa yang telah Anda pelajari di tutorial ini. Tema yang Anda buat dengan mengikuti tutorial ini dapat menjadi dasar untuk Anda selanjutnya membuat child theme WordPress. Jika sudah memiliki pilihan tema dan hanya ingin menginstalnya, silakan baca cara upload tema WordPress.
Yang Anda Butuhkan
Untuk menyelesaikan langkah-langkah di tutorial membuat tema WordPress ini, Anda membutuhkan text editor, seperti Notepad++ atau NetBeans. Anda juga membutuhkan akses FTP ke akun hosting Anda dan WordPress yang sudah terinstall.
Kami juga menyarankan Anda untuk mengunduh CSS cheat sheat karena Anda akan menggunakannya untuk mengedit file WordPress style.css.
Apa Itu HTML5 dan Mengapa Anda Harus Menggunakannya?
HTML5 merupakan versi terbaru dari bahasa markup web HTML yang menawarkan seperangkat fitur modern yang memudahkan pada saat Anda hendak menampilkan konten secara konsisten di komputer, laptop, tablet, atau telepon genggam.
Perubahan signifkan pada versi terbaru ini adalah adanya seperangkat elemen HTML semantik yang baru. Sebagai contoh, footer dari halaman HTML mana pun kini dapat dibuat menggunakan elemen <footer></footer>. Web browser kemudian mengetahui bahwa konten yang termuat di dalamnya merupakan bagian dari footer. Pada versi HTML yang lama, konten footer dapat dibuat menggunakan elemen generik, seperti <div></div>.
Dokumen dasar HTML5 akan terlihat seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML5 Page</title>
<meta charset="UTF-8">
<meta name=view port" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href=css/main.css">
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
<section>
<header>
<h2>My Articles</h2>
</header>
<article>
<header>
<h2>An Article</h2>
</header>
<p class="inline-text-box">Left</p><p class="inline-text-box">Right</p>
</article>
</section>
</main>
<footer>
<p>Copyright © 2017</p>
</footer>
</body>
</html>
Apa Itu Desain Responsif?
Desain responsif menunjukkan bahwa website Anda secara otomatis ditampilkan dalam format terbaik berdasarkan ukuran layar monitor para pengunjung. Secara harafiah, layout halaman ‘merespons’ space atau ruang yang tersedia di layar monitor pengunjung. Konten ditempatkan dengan sempurna sehingga tidak ada yang terputus, tidak ada yang melebihi ukuran layar, dan tampilan website Anda jernih.
Asumsikan layout website Anda sebagai seperangkat grid sehingga Anda perlu memberikan persentasi lebar grid pada konten. Sebagai contoh, div mengambil 50% dari ruang yang tersedia, dan bukannya lebar 800px. Div dengan lebar halaman penuh mengambil 100% dari ruang yang tersedia, sehingga jika Anda ingin meletakkan keempat div di dalam baris, maka setiap div mengambil 25% dari ruang.
Untuk gambar, Anda dapat mengaturnya agar memiliki lebar maksimum 100% dari ukuran sebenarnya dan atur panjang ke auto. Pada saat container gambar berada di ukuran minimal, panjang dan lebar gambar akan secara otomatis berkurang.
Apabila Anda memilih width: 100% alih-alih max-width: 100% untuk gambar, maka gambar akan mengambil 100% dari ruang yang tersedia. Ukuran gambar tidak akan berhenti pada lebar sebenarnya dalam format piksel. Jika lebar gambar 200px tetapi berada di dalam div yang mengambil ruang layar 100%, maka max-width mengindikasikan bahwa ukuran gambar tidak lebih lebar dari 200px.
/* GOOD WIDTH */
.inline-text-box {
width: 50%;
}
/* BAD WIDTH */
.inline-text-box {
width: 800px;
}
/* GOOD IMAGE */
img {
max-width: 100%;
height: auto
}
/* BAD IMAGE */
img {
width: 100%;
height: auto;
}
Agar tema WordPress responsif sepenuhnya, Anda juga dapat menggunakan fitur CSS3, yaitu media queries. Di dalam media queries, buat media type untuk memengaruhi (layar, print, dll) setidaknya satu media feature (max-width, orientation, dll). Media feature bisa dikaitkan dengan satu sama lain menggunakan kata kunci and.
/* Media Type and Media Feature and Media Feature*/
@media only screen and (min-width: 400px) and (max-width: 800px) {
.inline-text-box {
width: 100%;
display: block;
}
}
/* Media Feature Only */
@media (max-width: 1200px) {
.inline-text-box {
width: 50%;
}
}
- Di contoh pertama, CSS akan diterapkan di layar mana pun (layar monitor, layar telepon genggam, dll) yang memiliki lebar (area di dalam browser, bukan keseluruhan layar) antara 400px dan 800px.
- Pada contoh kedua, CSS akan diterapkan di jenis media yang membacanya.
- Jenis media lainnya adalah ‘print’, yang berarti CSS hanya diterapkan jika pengguna mencari print-preview halaman Anda.
Daftar lengkap tentang jenis media dan media feature dapat dilihat di website Mozilla Developer Network.
Di CSS stylesheet, Anda membuat rule yang memberi perintah kapan konten diubah, konten apa yang diubah, dan cara konten diubah. Anda dapat mengubah atribut CSS menurut lebar text box atau warna latar belakang div. Beberapa contoh rule media feature yang memberi perintah pada saat rule diterapkan:
- max-width – lebar maksimum dari area browser yang dapat dilihat, jika lebih lebar dari ini, maka rule tidak dapat diberlakukan.
- min-width – lebar minimum untuk area yang dapat dilihat, jika lebih kecil dari ini, maka rule tidak dapat diberlakukan.
- orientation – layar dalam mode portrait atau landscape.
Kita lihat contoh paling umum ketika Anda memiliki dua text box berdampingan dan keduanya mengambil 50% dari ukuran layar. Jika jendela browser mengecil, maka box akan secara otomatis menyesuaikan sehingga masih bisa mengambil 50% dari ukuran jendela alih-alih menghilang dari layar. Jika ukuran jendela browser menjadi sangat kecil untuk menampilkan semua teks dalam box tersebut, maka Anda bisa memberi perintah agar box mengambil 100% dari ukuran jendela dan menampilkannya di atas yang lain. Anda juga dapat menyembunyikan konten sepenuhnya jika dianggap tidak layak.
Langkah 1 – Menyimpan Tema dan Filenya
Bahkan perubahan kecil sekalipun pada tema dapat mengakibatkan website Anda tidak bisa digunakan. Umumnya, setelah membuat perubahan pada kode, Anda mencoba untuk meload website. Apa yang terjadi? Anda akan melihat layar putih sebagai pertanda the white screen of death (website blank putih). Mencari debug error yang menyebabkan layar putih tidak semudah membalikkan telapak tangan.
Agar tidak terjadi masalah pada website Anda, maka sangat penting untuk mengetes semua perubahan offline. Setelah perubahan dilakukan, Anda dapat mengupload versi online dari website Anda. Pelajari juga cara membuat server lokal untuk mengembangkan WordPress di Windows.
Tema WordPress di simpan di folder di dalam folder wp-content/themes/.
Di folder wp-content/themes/, buat folder baru dan beri nama my-theme. Folder yang Anda buat tersebut haruslah memiliki nama yang unik, deskriptif, dan singkat sehingga memudahkan pencarian.
Catatan: Nama folder tema tidak boleh memuat angka atau spasi. Nama folder untuk tema Anda tidak boleh sama dengan nama folder untuk tema lainnya. Jika ingin membagikan tema, pastikan tema lain dengan nama yang sama belum diupload ke WordPress.org Theme Directory.
Tema WordPress dapat dibuat hanya dengan dua file – index.php da style.css – dan Wordress akan menggunakan kedua file ini untuk menampilkan setiap halaman dan post di situs Anda.
Biasanya Anda ingin membuat layout untuk masing-masing post, halaman, dan bagian lainnya dari website Anda. Ada file sendiri yang diberikan pada tiap bagian dari website Anda yang berfungsi untuk menyimpan HTML dan PHP yang hanya berlaku untuk bagian tersebut – tiap file disebut ‘template’.
Jika Anda menggunakan jenis custom post, maka Anda dapat membuat template yang berlaku hanya untuk post dari jenis tersebut. Apabila Anda ingin post dari kategori yang spesifik diubah dengan gaya berbeda, Anda dapat melakukannya menggunakan statement if…then… di dalam loop.
Tiap file template harus menggunakan nama yang benar sebagaimana telah ditetapkan oleh WordPress.
Beberapa file template di luar index.php:
- header.php – memuat HTML apa pun yang ada di atas halaman Anda, mulai dari <!DOCTYPE html>b
- single.php – digunakan untuk menampilkan satu Post dari blog Anda
- page.php – digunakan untuk menampilkan satu Page dari blog Anda
- commens.php – untuk menampikan komentar dan text box komentar
- footer.php – memuat HTML apa pun yang ada di bawah halaman Anda, termasuk </html>
Jika ingin melihat daftar lengkap template, kunjungi handbook WordPress Theme Development.
Setelah membuat folder untuk menyimpan tema, Anda perlu membuat file template dasar.
Langkah 2 – Membuat File Template dan CSS Stylesheet
Di folder my-theme, buat file PHP di bawah ini:
- header.php
- index.php
- footer.php
- functions.php
- sidebar.php
- single.php
- page.php
Selain file PHP, buat file CSS baru dan beri nama style.css (nama untuk stylesheet utama haruslah style.css).
Langkah pertama setelah semua file tersebut dibuat adalah menambahkan beberapa informasi ke style.css yang akan dibaca dan ditampilkan WordPress di control panel admin.
Informasi tersebut harus ditulis sebagai multi-line CSS comment, masing-masing header di barisnya sendiri, dimulai dengan header keyword.
Ada banyak header keyword yang tersedia untuk Anda guna membuat informasi, seperti author (nama Anda), author website, deskripsi tema, nama tema, versi tema, dan lain-lain. Kunjungi halaman WordPress Codex – File Header untuk mendapatkan daftar header keyword lengkap.
Format penulisan header adalah Keyword: Information
/* Theme Name: My Theme Author: Hostinger Author URI: http://www.hostinger.com/tutorials Description: My first responsive HTML5 theme version: 1.0 License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html */
CATATAN: Baris ketujuh dan kedelapan hanya dibutuhkan jika Anda ingin membagikan tema di WordPress.org. Jika Anda hendak menggunakan tema di website sendiri, maka lewati dua baris tersebut dan tutup bagian comment.
Saat ini, tema Anda sudah dapat dilihat di control panel admin untuk bagian tema. Anda akan melihat gambar kotak berwarna putih dan abu yang harus diberi tanda centang. Di gambar kotak ini ada My Theme yang tertulis di bawahnya. Setelah tema Anda selesai dibuat, lakukan screenshot untuk ditampilkan di sini.
Apabila Anda mengatifkan temanya sekarang, maka Anda akan melihat homepage yang kosong sebagaiama index.php Anda kosong dan tidak termuat template.
Tambahkan baris kosong setelah penutupan comment */ di baris 10.
Pada baris berikutnya, di bawah baris kosong yang baru (baris 11 dari file tersebut), tulislah:
* {
box-sizing: border-box;
}
body {
background-color: #f9f9f9;
font-family: Helvetica;
}
Entry pertama merupakan bagian penting dari responsive styling. * adalah wildcard dan sesuai dengan setiap single class yang ditemukan di dokumen HTML. Tanda bintang tersebut menyatakan bahawa lebar dan tinggi akhir dari tiap item di halaman tersebut harus menyertakan konten, padding, dan border. Jika Anda tidak mengatur ini dan memiliki dua box dengan lebar 50% yang letaknya berdampingan dengan padding atau border apa pun, maka kedua box tersebut nantinya tidak akan bersisian karena ukuran sebenarnya lebih dari 100%. Box lebar 100% dengan padding 1% sebenarnya memiliki ukuran lebar 102%, sebagaimana padding 1% ditambahkan ke sisi kiri dan kanan. Rule ini secara efektif menambahkan padding ke dalam box alih-alih di luar.
Entry kedua hanya mengubah warna putih yang menjadi warna latar belakang sehingga kami bisa dengan cepat mengetahui apakah stylestheet sedang digunakan. Kami juga mengatur default font yang akan digunakan di tema kami.
Langkah 3 – Sebelum Mulai Membuat Tema WordPress
Sebelum mulai membuat layout tema WordPress, tambahkan beberapa kode ke berbagai file sebagai titik awalnya. Langkah-langkah di bawah ini tidak diwajibkan tetapi sangat disarankan.
Langkah-langkah di bawah ini pun memuat penjelasan singkat sehingga Anda kemudian bisa membuat layout tema WordPress yang sesungguhnya.
Pertama-tama, kami akan memasukkan file CSS yang diberi nama normalize.css. Setiap browser memiliki pengaturan yang berbeda untuk hal-hal seperti margin halaman dan padding. Normalize.css secara eksplisit mengatur sejumlah atribut guna memastikan bahwa semua browser menampilkan halaman Anda yang sama persis. Jika Anda tidak menggunakan stylesheet untuk mengatur default, masalah yang paling umum terjadi ketika Anda mencoba membuat main header mulai dari bagian paling kiri di halaman Anda adalah adanya blank space di atas header.
functions.php
Buka functions.php dan tambahkan kode di bawah ini.
<?php
// This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we
// use an online version of the css file.
function add_normalize_CSS() {
wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}
Kemudian, aktifkan widget sidebar. Jika Anda tidak memasukkan kode ini, maka tautan menu widget tidak akan muncul di control panel admin dan alhasil Anda tidak bisa menambahkan widget apa pun. Di functions.php, di bawah fungsi sebelumnya, tambahkan kode di bawah ini:
// Register a new sidebar simply named 'sidebar'
function add_widget_Support() {
register_sidebar( array(
'name' => 'Sidebar',
'id' => 'sidebar',
'after_widget' => '<div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
}
// Hook the widget initation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );
Kita perlu mendaftarkan custom menu navigasi agar dapat menggunakan fitur Appearance -> Menu di panel admin. Di bawah kode sebelumnya tambahkan:
// Register a new navigation menu
function add_Main_Nav() {
register_nav_menu('header-menu',__( 'Header Menu' ));
}
// Hook to the init action hook, run our navigation menu function
add_action( 'init', 'add_Main_Nav' );
Simpan functions.php dan upload ke direktori tema Anda.
sidebar.php
Buka file sidebar.php dan juga kode di bawah ini. Ketika get_sidebar() diaktifkan, sidebar dan widget akan muncul di tema Anda.
<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
<aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar' ); ?>
</aside>
<?php endif; ?>
Baris pertama menginformasikan WordPress bahwa tidak ada widget yang diaktifkan, sidebar HTML pun tidak ditampilkan. Baris kedua mengelola atribut dari elemen yang memuat widget tersebut. HTML5 menyediakan elemen ‘aside’ untuk sidebar. Baris ketiga adalah fungsi WordPress yang menampilkan widget. Baris terakhir menutup awal statement if.
Simpan dan upload sidebar.php ke direktori tema Anda.
Agar navigasi antara post dan halaman lebih mudah dijalankan, buka control panel admin dan tambahkan widget Pages dan Recent Posts ke sidebar.
Langkah 4 – Membuat Layout dengan Template
header.php
header.php akan membuat bagian awal dari dokumen Anda, yang dimulai dari deklarasi DOCTYPE.
Semua dokumen HTML harus diawali dengan deklarasi DOCTYPE, yang akan menginformasikan web browser Anda cara menerjemahkan dokumen tersebut. Doctype HTML5 hanyalah html. Tag pembuka <html> mengharuskan atribut bahasa, dan WordPress menyediakan fungsi untuk memasukkan kode bahasa yang benar untuk bahasa yang Anda pilih selama proses instalasi berlangsung – language_attribute().
Di kolom judul, gunakan baris kode yang menampilkan nama situs Anda, diikuti dengan statement shorthand if…then… untuk menampilkan tagline website Anda ATAU judul dari halaman atau post terkini yang sedang Anda lihat.
Karakter ? adalah operator kondisional PHP yang diberi nama ternary operator. Pada baris kode ini, is_front_page() merupakan fungsi WordPress yang mengembalikan TRUE jika melihat halaman depan, atau FALSE jika melihat post atau halaman mana pun. Fungsi sebelum tanda titik dua digunakan jika TRUE dikembalikan, dan fungsi setelah tanda titik digunakan jika FALSE dikembalikan.
Seperti yang akan Anda lihat di bawah ini, fungsi bloginfo() digunakan berkali-kali dengan parameter yang berbeda untuk memperoleh informasi yang berbeda pula dari database WordPress. Sebelum tag <head> ditutup dengan </head>, masukkan action hook wp_head() untuk memastikan fungsi yang terlampir sudah berjalan.
Fungsi body_class() menawarkan classes CSS standar ke body sebagaimana telah diatur oleh WordPress. Baris terakhir memperbolehkan menu navigasi untuk ditampilkan jika satu CSS class telah dibuat di control panel admin. header.php akhir akan terlihat seperti ini:
<!DOCTYPE html>
<html <?php languag_attributes(); ?>
<head>
<title><?php bloginfo('name'); ?> » <?php is_front_page() blogingo('description') : wp_title(
); ?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylsheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class=my-logo">
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1>
</header>
<?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>
Jika Anda ingin menggunakan logo sebagai header, maka ganti <?php bloginfo(‘name’); ?> dengan kode gambar di dalam tag <header>.
Simpan header.php dan upload ke folder tema Anda.
index.php
index.php membuat beranda (homepage), dan akan digunakan sebagai layout default jika template yang spesifik (misalnya, single.php, page.php) tidak ditemukan.
Loop WordPress akan menampilkan daftar post dan excerpt dengan template tag yang lebih banyak. Kami juga akan menggunakan elemen semantik HTML 5 <section>, <main>, <header>, dan <article>. Beberapa elemen kami memiliki class, dan class tersebut akan ditulis ketika kami mendapatkan file style.css.
<?php get_header(); ?> <main class="wrap"> <section class="content-area content-thin"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="article-loop"> <header> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> By: <?php the_author(); ?> </header> <?php the_excerpt(); ?> </article> <?php endwhile; else : ?> <article> <p>Sorry, no posts were found!</p> </article> <?php endif; ?> </section><?php get_sidebar(); ?> </main> <?php get_footer(); ?>
Loop diawali dengan <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> dan berakhir pada <?php endif; ?>. Di dalam loop, template tag berikut ini digunakan:
- <?php the_permalink(); ?> – output URL yang benar dari post sesungguhnya.
- <?php the_title_attribute(); ?> – output judul post dalam format yang aman untuk atribute judul dari link.
- <?php the_title(); ?> – output judul post.
- <?php the_author(); ?> – output nama author.
- <?php the_excerpt(); ?> – output excerpt post, yang secara otomatis dibuat jika Anda tidak menulis excerpt Anda sendiri.
Tag <header></header> dapat digunakan berkali-kali di halaman mana pun dan tidak secara spesifik mengarah ke header halaman. “Bagian” dan “artikel” harus memiliki elemen header di aman teks di dalam <h1>,<h2>, dan lain-lain digunakan. Jika “bagian” dan “artikel” tidak memiliki teks header, maka tinggalkan saja.
Simpan index.php dan upload ke direktori tema Anda. Jika saat ini Anda sedang membuka situs Anda, maka akan muncul halaman yang tampilannya biasa saja.
Di tab judul, Anda akan melihat nama website dan tagline. Di atas halaman terdapat judul website (atau logo jika Anda menggunakannya). Pada post apa pun akan muncul judul, author, dan excerpt. Meskipun tampilan halaman tersebut terlihat baik-baik saja, Anda masih harus menutup tag pembuka <body> dan <html> di foother.php.
foother.php
footer.php membuat footer setiap halaman dan menutup tag HTML man saja yang terbuka di file template. Dalam hal ini, <body> dan <html> masih terbuka dari header.php.
Action hook wp_footer() juga harus diikutsertakan untuk memastikan kode akhir WordPress dan JavaScript ditambahkan ke halaman tersebut. Jika Anda masuk (login) sebagai admin saat membuka beranda utama (homepage), post, atau halaman, maka Anda akan lihat kalau bar admin tidak ada. Kode yang menampilkan bar admin terhubung (hook up) ke action hook wp_footer().
Kami juga menambahkan elemen semantik HTML5 <footer></footer> untuk secara spesifik membuat footer.
<footer> <p>Copyright © 2017</p> </footer> <?php wp_footer(); ?> </body> </html>
Simpan footer.php dan upload ke direktori tema Anda.
single.php
single.php membuat layout pada saat melihat single post di website Anda. single.php sangat berbeda dari index.php.
Dalam kasus ini, kami tidak akan menambahkan sidebar ke post hanya untuk meng-highlight perbedaaan pada layout.
Konten utama mengambil lebar halaman sepenuhnya karena kita memberikan class content-full-width dari stylesheet. Tautan telah dihapus dari judul karena tidak diperlukan. Fungsi untuk menampilkan post penuh adalah the_content():
<?php get_header(); ?> <main class="wrap"> <section class="content-area content-full-width"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="article-full"> <header> <h2><?php the_title(); ?></h2> By: <?php the_author(); ?> </header> <?php the_content(); ?> </article> <?php endwhile; else : ?> <article> <p>Sorry, no post was found!</p> </article> <?php endif; ?> </section> </main> <?php get_footer(); ?>
page.php
page.php membuat cara untuk menampilkan halaman dan berbeda dari index dan layout post.
Perlu diingat bahwa jika template tidak ada, maka template index.php yang akan digunakan. Jika Anda tidak membuat page.php, maka layout yang digunakan tidak sama dengan layout untuk posts.php.
Agar perbedaan makin jelas terlihat, sekali lagi kami akan menambahkan sidebar ke layout, dan atur agar konten halaman berukuran 70% dari lebar halaman.
<?php get_header(); ?> <main class="wrap"> <section class="content-area content-thin"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="article-full"> <header> <h2><?php the_title(); ?></h2> By: <?php the_author(); ?> </header> <?php the_content(); ?> </article> <?php endwhile; else : ?> <article> <p>Sorry, no page was found!</p> </article> <?php endif; ? </section><?php get_sidebar(); ?> </main> <?php get_footer(); ?>
Simpan page.php dan upload ke direktori tema Anda.
style.css
Tambahkan kode berikut ini ke bagian bawah stylesheet. Anda akan melihat perubahan pada berbagai box yang nantinya memiliki latar belakang putih dan border biru, sehingga Anda dapat membayangkan berapa banyak ruang yang sebenarnya dipakai oleh setiap box.
/* Theme Name: My Theme1 Author: Your Name Author URI: http://www.yourwebsite.com Description: My first responsive HTML5 theme Version: 1.0 License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html */ * { box-sizing: border-box; } body { background-color: #f9f9f9; font-family: Helvetica; } .my-logo, footer { width: 100%; padding-left: 1%; margin-bottom: 8px; background-color: #78baff; border: 1px solid #78baff; } body > header > h1 > a { color: #ffffff; font-weight: 400; } article > header { } footer { margin-top: 4px; } a { text-decoration: none; } /* 'Margin: 0 auto' centers block content on the page */ .wrap { width: 99%; margin: 0 auto; } .content-area { display: inline-block; } .content-thin { width: 70%; } .content-area, .primary-sidebar { display: inline-block; } .primary-sidebar { width: 25%; padding: 1%; vertical-align: top; background-color: #ececec; } .article-loop { width: 45%; text-align: left; margin: 5px; padding: 10px; } .article-full { width: 99%; padding: 1%; } .article-loop, .article-full { display: inline-block; vertical-align: top; background-color: #FFF; border-radius: 4px; margin-bottom: 4px; }
Simpan style.cs dan uppload ke direktori tema Anda.
Setelah membuat template dasar dan stylesheet, Anda dapat dengan mudah melakukan navigasi melalui post dan halaman. Tema yang baru saja dibuat akan terlihat seperti ini.
Menggunakan Media Query
Karena layout dasar kami memiliki 2 inline box di halaman depan, maka kami dapat dengan mudah mengubah cara inline box tersebut bekerja saat jendela browser berukuran sangat kecil untuk menampilkan teks.
Pada tutorial cara membuat tema WordPress ini, kami akan mengubah lebar post di dalam daftar post ketika ukuran jendela broswer di bawah 800px. Alih-alih memiliki 2 post yang saling bersisian, tiap post akan memiliki barisnya sendiri. Untuk itu, kami harus menambahkan media query. Jika Anda membutuhkan refresher di media query, silakan baca kembali bagian Apa Itu Desain Responsif? di tutorial ini sebelum lanjut ke langkah berikutnya.
Saat menulis (write) media query, Anda dapat menuliskannya di mana pun di stylesheet. Semua media query dapat diposisikan di bagian bawah stylesheet, atau menuliskan media query yang spesifik untuk item yang spesifik pula tepat di bawah definisi asli. Ini hanya masalah pilihan yang Anda anggap paling masuk akal untuk diikuti.
Pertama-tama, kami akan menuliskan media query yang memengaruhi class .article-loop. Class ini memiliki lebar 49% secara standar. Kami akan menuliskan media query tepat di bawah definisi asli. Media query tersebut menyatakan bahwa jika lebar jendela window kurang dari 800px, maka class .article-loop sebaiknya menggunakan 99% ruang yang tersedia.
Kemudian kami juga akan menuliskan media query yang menyatakan bahwa apabila lebar jendela browser kurang dari 600px, maka geser sidebar yang ada di bawah konten utama dan lebarkan baik konten utama maupun sidebar hingga 100%. Layout inilah yang layak untuk digunakan di perangkat mobile yang memiliki keterbatasan ruang (space).
Masih di style.css, cari .article-loop di baris 73. Di bawah class .article-loop, tulislah kode berikut ini:
@media screen and (max-width: 800px) {
.article-loop {
width: 99%;
}
}
Baris pertama menginformasikan bahwa media query hanya boleh memberi perubahan pada layar (tidak dalam mode pratinjau cetak) dan juga jendela browser yang lebarnya 800px atau kurang dari 800px. Simpan dan uppload style.css ke direktori tema Anda. Buka halaman beranda utama (homepage) website Anda. Ubah ukuran jendela browser Anda. Karena lebar jendela browser melebihi 800px, maka Anda akan melihat box untuk setiap post yang lebarnya diubah. Lalu, drop satu box ke bawah box lainnya.
Jika Anda mengurangi lebar jendela browser hingga sekecil mungkin, maka semua teks akan menjadi sulit dibaca karena jarak dan spasinya terlampau sempit. Namun, teks tersebut tidak akan hilang begitu saja dari layar. Apabila lebar telah diatur ke dalam ukuran piksel dan bukannya persentase, maka segera setelah ukuran window mengecil, sidebar akan hilang dan membutuhkan adanya scroll horizontal.
Media query berikutnya yang akan ditambahkan serupa dengan media query di atas. Media query ini mengatur baik konten utama maupun sidebar agar mengambil 100% dari ruang yang tersedia, dan sidebar tersebut akan ada di bawah konten utama.
CATATAN: Karena media query ini memengaruhi berbagai class yang lokasinya berbeda di dalam stylesheet, maka sebaiknya diletakkan di bawah stylesheet.
@media screen and (max-width: 400px) {
.content-area,
.primary-sidebar {
width: 100%;
}
}
Simpan style.css dan upload ke direktori tema Anda. Kembali ke halaman beranda utama (homepage) dan atur ulang uuran jendela browser hingga lebar konten mencapai 100% dan sidebar berada di bawah konten utama.
Dengan menggunakan sidebar, klik halaman yang ada dan Anda akan lihat bahwa sidebar juga ada di bawah konten halamannya, dan semuanya berfungsi dengan baik.
Memahami Template Tag WordPress dan Action Hook
Agar Anda dapat sepenuhnya mengintegrasikan tema dengan WordPress, gunakan template tags dan action hooks. Namun, ada baiknya untuk memahami perbedaan template tags dan action hooks terlebih dulu.
Template Tags
Template tags merupakan fungsi PHP yang disediakan oleh WordPress agar mudah memasukkan file template (seperti header.php) yang berasal dari tema ke dalam file lain atau untuk menampilkan informasi dari database.
Sebagai contoh, untuk menampilkan footer di halaman beranda dan bukan di halaman lain, tambahkan get_footer() di bawah of index.php dan bukan di dalam page.php.
Dua daftar berikut ini memuat informasi mengenai template tag yang penting sehingga kamu bisa mengetahui tag mana saja yang tersedia.
Template tags untuk memasukkan file template:
- get_header() – memasukkan template header.php.
- get_sidebar() – memasukkan template sidebar.php.
- get_footer() – memasukkan template footer.php.
- get_search_form() – memasukkan template searchform.php.
Template tags untuk menampilkan informasi dari database
CATATAN: Beberapa template tag harus digunakan dalam loop. Loop akan dijelaskan kemudian di tutorial ini, dan hanya berupa kode yang menerima post yang diminta.
- bloginfo() – menampilkan informasi yang diminta sebagai parameter, yaitu bloginfo(“name”) menunjukkan nama website Anda seperti yang telah dibuat di Control Panel Admin (lihat daftar parameter).
- single_post_title() – menampilkan judul post yang baru saja dilihat, digunakan dalam single.php.
- the_auther() – menampilkan author dari post yang baru saja dilihat.
- the_content() – menampilkan teks utama dari post atau halaman.
- the_excerpt() – excerpt dari post atau halaman.
Daftar lengkap mengenai template tags WordPress dapat dibaca di sini.
Action hooks
Action hooks merupakan fungsi PHP yang disediakan oleh WordPress. Biasanya ada fungsi lain yang juga melekat pada action hooks. Beberapa hook tidak memiliki fungsi yang melekat secara standar dan tersedia untuk digunakan oleh plugin. Action hook memperbolehkan plugin untuk melekatkan atau melampirkan fungsinya sendiri dan menjalankan fungsi tersebut di beberapa titik pada saat sebuah halaman sedang loading.
Pada template header tema Anda, action hook wp_head() diaktifkan untuk memasukkan HTML header WordPress standar ke dalam tag <head></head>. Action hook tersebut memiliki fungsi inti WordPress yang dapat digunakan untuk menambahkan HTML ke halaman dan memungkinkan setiap fungsi mana pun yang dilampirkan atau disertakan oleh plugin untuk dijalankan.
Di bagian footer tema, action hook wp_footer() diaktifkan untuk memasukkan HTML default dan JavaScript, dan menjalankan fungsi apa pun yang terlampir oleh plugin.
Jika Anda tidak menggunakan action hook saat membuat tema WordPRess, maka kode inti yang penting akan hilang dan plugin tidak dapat menjalankan fungsinya dengan baik.
Sebagai contoh, tidak diaktifkkannya wp_footer() di template footer.php akan membuat top admin bar tidak muncul saat Anda log in sebagai admin. Kode inti WordPress yang mengakibatkan admin bar muncul terlampir di action hook wp_footer(), dan fungsi yang terlampir tersebut tidak bisa berfungsi jika action hook tidak ada.
Untuk penjelasan lebih lengkap mengenai action hook, silakan baca Actions dan Action Hooks yang termuat di tutorial cara membuat plugin WordPress.
Loop WordPress
Loop digunakan untuk menampilkan post. Loop dapat digunakan untuk menampilkan single post atau semua post Anda yang telah diterbitkan di single page. HTML yang Anda tulis di dalam loop akan digunakan untuk menampilkan setiap post yang diminta oleh loop. Kode akan terus looping hingga tiba di post terakhir.
Apabila ingin menampilkan satu post, gunakan tag template the_content() di dalam loop untuk mempertunjukkan konten post tersebut. Bilamana ingin menampilkan daftar semua post yang telah diterbitkan, gunakan the_excerpt() di dalam loop sehingga bukan keseluruhan isi post yang ditampilkan.
Loop merupakan statement if…then… yang multi-line shorthand dan terdiri atas empat baris kode. Baris pertamam mengindikasikan bahwa jika post ditemukan, selagi tersedia, maka gunakan kode di bawah ini untuk menampilkan post. Jika post yang sesuai tidak ditemukan, maka Anda dapat membuat teks pengganti. WordPress default akan terlihat seperti ini, dan baris yang diberi komentar adalah tempat di mana Anda menuliskan HTML dan template tags.
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> // HTML and template tags here to define the layout, and what is shown from the post <?php endwhile; else : ?> <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p> <?php endif; ?>
Kesimpulan
Sekarang Anda sudah tahu cara membuat tema WordPress responsive menggunakan HTML5!
Setelah memahami betul tentang template dan template tags, lihatlah daftar WordPress codex yang memuat template dan template tags, dan coba tambahkan bagian baru ke layout. Cobalah juga mengubah CSS style dan lebar dan lihat bagaimana browser Anda merespons berbagai situasi. Ubah rule untuk media query dan lihatlah apakah ada rule yang lebih baik yang bisa dibuat.
Silakan baca juga tutorial kami yang lain, cara membuat Child Theme WordPress.
Ariata suka sekali menulis dan menerjemahkan, dan sekarang ini bekerja sebagai translator di Hostinger Indonesia. Lewat artikel dan tutorial yang diterbitkan di blog Hostinger, Ariata ingin membagikan pengetahuan tentang website, WordPress, dan hal terkait hosting lainnya kepada para pembaca.
