televisionsatsearssale: Cara Membuat Template WordPress Responsive dengan HTML5

Template WordPress merupakan gabungan dari beberapa file yang menentukan tampilan dari website Anda. File ini biasanya terdiri dari HTML, PHP, CSS, dan JavaScript/jQuery. Dalam tutorial kali ini, kami akan membahas mengenai bagaimana cara membuat template WordPress dengan menggunakan HTML5, CSS3, dan desain responsive.

Selain itu, Anda juga akan belajar bagaimana memisahkan beberapa bagian dari template. Template sendiri sama dengan plugin, karena terpisah dari code utama WordPress.

Penasaran bagaimana tutorial lengkapnya? Mari simak pengertian HTML5 terlebih dulu supaya lebih mudah mempelajari tutorial membuat template WordPress berikut ini.

Apa itu HTML5 dan Kenapa Harus Menggunakannya

HTML5 merupakan versi terbaru dari HTML, dilengkapi fitur terbaru dengan tampilan yang lebih baik ketika website diakses pada berbagai perangkat seperti komputer, laptop, tablet bahkan mobile.

Adanya elemen HTML baru merupakan bagian perubahan yang ada pada HTML5. Sebagai contoh, untuk footer dari halaman HTML saat ini didefinisikan dengan elemen <footer></footer>, dan ini memberitahu web browser jika konten tersebut adalah bagian dari footer.

Sedangkan untuk versi HTML sebelumnya, konten dari footer dibuat dengan elemen generik seperti <div></div>.

Berikut merupakan dokumen HTML5 secara basic:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Halaman HTML5</title>
    <meta charset="UTF-8">
    <meta name="viewport" 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>Website Saya</h1>
    </header>
    <main>
      <section>
        <header>
          <h2>Artikel Saya</h2>
        </header>
        <article>
          <header> 
            <h2>Artikel</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>Pengertian Desain Responsive
Desain responsive memiliki pengertian bahwa website Anda akan memiliki tampilan otomatis dengan format terbaik untuk pengunjung sesuai dengan layar perangkat yang mereka gunakan.
Sehingga tata letak dari website akan merespon terhadap ruang yang tersedia di layar perangkat yang digunakan oleh pengunjung. Konten akan berada pada tempat yang pas, sehingga tidak ada konten yang terpotong atau melebihi layar dan website akan tampil dengan baik.
1. Pahami Tempat Penyimpanan Template dan File
Template WordPress akan disimpan dalam folder wp-content/themes/, sehingga Anda perlu membuat nama folder dari template. Pada tutorial ini, kami memberi nama folder template-saya. Nama folder tersebut harus dibuat unik, artinya tidak boleh sama dengan nama folder template lain.
Template WordPress dapat dibuat hanya dengan dua file, yaitu index.php dan style.css dan akan digunakan oleh WordPress untuk menampilkan halaman dan postingan pada website Anda.
Selanjutnya, Anda memerlukan postingan, halaman, dan bagian lain dari website supaya menampilkan tata letak sesuai dengan yang diinginkan.
Setiap bagian dari website akan memiliki file tersendiri untuk menyimpan code HTML dan PHP, setiap file itu disebut template.
Jika Anda menggunakan jenis postingan khusus, Anda dapat membuat template yang hanya digunakan untuk jenis postingan tersebut. Jika Anda menginginkan postingan dari kategori tertentu dengan tampilan berbeda, Anda dapat menggunakan statemen if…then.. di dalam loop.
Setiap file template harus menggunakan nama yang benar sesuai dengan yang didefinisikan oleh dokumentasi WordPress.
Berikut adalah beberapa file template selain index.php:
header.php – berisi code HTML untuk bagian atas halaman, dimulai dengan code <!DOCTYPE html>
single.php – digunakan untuk menampilkan satu halaman dari blog Anda
comments.php – untuk menentukan bagaimana komentar dan kolom komentar ditampilkan
footer.php – berisi code HTML untuk menampilkan bagian bawah dari halaman website, termasuk </html>
Silakan cek link berikut untuk daftar lengkap template terbaru untuk WordPress.
2. Buat File Template dan CSS Stylesheet
Berikut cara membuat File Template dan CSS Stylesheet. Pertama, buat folder template-saya pada direktori …/themes/wp-content/
Pada folder template-saya silakan buat file-file berikut ini:
header.php
index.php
footer.php
functions.php
sidebar.php
single.php
page.php
style.css
Selanjutnya adalah menambahkan beberapa informasi pada baris paling atas dari file style.css, ini akan dibaca oleh WordPress dan ditampilkan di dashboard admin.
Informasi tersebut harus ditulis sebagai komentar CSS multi-line, setiap header ada pada barisnya sendiri, dimulai dengan kata kunci header.
Silakan tambahkan code di bawah ini ke dalam file style.css:
* {
  box-sizing: border-box;

}

body {
    background-color: #f9f9f9;
    font-family: Helvetica;
}
Catatan: Untuk baris ke 7 dan 8 hanya dibutuhkan jika Anda ingin mengupload template di WordPress.org. Jika hanya akan digunakan untuk website sendiri, boleh untuk tidak diisi.
Pada langkah ini, template Anda sudah muncul di halaman template dashboard WordPress. Akan terlihat template seperti gambar di bawah ini.
Langkah selanjutnya adalah menambahkan code pada file CSS untuk membuat warna background dari halaman website Anda.
Silakan tambahkan baris kosong setelah penutup komentar pada baris ke 10. Kemudian tambahkan code di bawah ini pada baris ke 11.
<?php
// Fungsi ini akan memanggil Normalize.css. Parameter pertama adalah nama untuk stylesheet, yang kedua adalah URL.
// File css yang digunakan adalah versi online.
function add_normalize_CSS() {
    wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}
Entry pertama adalah bagian terpenting dari responsive styling. * merupakan wildcard dan akan mencocokan dengan setiap class tunggal yang ada di dalam dokumen HTML.
Entry kedua akan mengubah warna background, selain itu terdapat font default yang digunakan pada template.