engas99: Cara Membuat Tema WordPress Responsive Menggunakan HTML5

Untung99 menawarkan beragam permainan yang menarik, termasuk slot online, poker, roulette, blackjack, dan taruhan olahraga langsung. Dengan koleksi permainan yang lengkap dan terus diperbarui, pemain memiliki banyak pilihan untuk menjaga kegembiraan mereka. Selain itu, Untung99 juga menyediakan bonus dan promosi menarik yang meningkatkan peluang kemenangan dan memberikan nilai tambah kepada pemain.

Berikut adalah artikel atau berita tentang Harian engas dengan judul engas99: Cara Membuat Tema WordPress Responsive Menggunakan HTML5 yang telah tayang di engas terimakasih telah menyimak. Bila ada masukan atau komplain mengenai artikel berikut silahkan hubungi email kami di koresponden@engas99.com, Terimakasih.

Setelah membuat folder untuk menyimpan tema, Anda perlu membuat file template dasar.

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.

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:

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.

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.

Buka functions.php dan tambahkan kode di bawah ini.

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' => '
',
                                'before_title' => '
',
                                'after_title'  => '
',
                ) );
}
// 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.
Buka file sidebar.php dan juga kode di bawah ini. Ketika get_sidebar() diaktifkan, sidebar dan widget akan muncul di tema Anda.
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 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  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 ditutup dengan , 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:
>
  



 'header-menu' ) ); ?>
Jika Anda ingin menggunakan logo sebagai header, maka ganti  dengan kode gambar di dalam tag 

.


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 

, 
, 


, dan 

. 
Beberapa elemen kami memiliki class, dan class tersebut akan ditulis ketika kami mendapatkan file style.css.

 get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
 if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-loop">
        <header>
          <h2><a href=" the_permalink(); ?>" title=" the_title_attribute(); ?>"> the_title(); ?>a>h2>
          By:  the_author(); ?>
        header>
         the_excerpt(); ?>
      article>
 endwhile; else : ?>
      <article>
        <p>Sorry, no posts were found!p>
      article>
 endif; ?>
   section> get_sidebar(); ?>
main>
 get_footer(); ?>

Loop diawali dengan  dan berakhir pada . Di dalam loop, template tag berikut ini digunakan:

 – output URL yang benar dari post sesungguhnya.
 – output judul post dalam format yang aman untuk atribute judul dari link.
 – output judul post.
 – output nama author.
 – output excerpt post, yang secara otomatis dibuat jika Anda tidak menulis excerpt Anda sendiri.


Tag 
 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  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  dan > di foother.php.
footer.php membuat footer setiap halaman dan menutup tag HTML man saja yang terbuka di file template. Dalam hal ini,  dan  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  untuk secara spesifik membuat footer.
<footer>
     <p>Copyright © 2017p>
    footer>
     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():
 get_header(); ?>
<main class="wrap">
  <section class="content-area content-full-width">
 if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2> the_title(); ?>h2>
          By:  the_author(); ?>
        header>
        the_content(); ?>
      article>
 endwhile; else : ?>
      <article>
       <p>Sorry, no post was found!p>
      article>
 endif; ?>
  section>
main>
 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.
 get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
 if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
       <header>
         <h2> the_title(); ?>h2>
         By:  the_author(); ?>
       header>
        the_content(); ?>
      article>
 endwhile; else : ?>
      <article>
        <p>Sorry, no page was found!p>
      article>
 endif; ?
  section> get_sidebar(); ?>
main>
 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.



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 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 . 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.
// HTML and template tags here to define the layout, and what is shown from the post

  



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.