Cara Membuat Template WordPress Menggunakan HTML5

desain-responsive

Cara Membuat Template WordPress Menggunakan HTML5 – Template WordPress adalah kombinasi dari beberapa file yang menentukan tampilan sebuah situs web. File ini biasanya berisi HTML, PHP, CSS dan JavaScript / jQuery. Dalam tutorial ini, kita akan membahas cara membuat template WordPress menggunakan HTML5, CSS3 dan desain responsif.

Selain itu, Anda akan mempelajari cara memisahkan beberapa bagian template. Template itu sendiri sama dengan plugin karena terpisah dari kode utama WordPress.

Faktanya, dengan hosting WordPress, Anda dapat menggunakan berbagai macam tema gratis, tetapi jika Anda ingin membuat tema sendiri, maka artikel ini cocok untuk Anda. Dengan menggunakan template, Anda dapat membuat situs web Anda memiliki tata letak yang konsisten di setiap halaman, dan Anda dapat dengan mudah mengubah tampilan situs web Anda.

Apa yang Anda Perlukan ?

Untuk mulai menggunakan langkah-langkah dalam tutorial ini, Anda memerlukan:

  • Editor teks (contoh: Notepad ++)
  • Localhost, Anda bisa menggunakan XAMPP (silahkan ikuti tutorial cara install XAMPP)
  • Penginstalan WordPress aktif di localhost (ikuti tutorial cara menginstal WordPress di localhost)

Apa itu HTML5 dan Kenapa Harus Menggunakannya

HTML5 adalah HTML versi terbaru, dengan fitur terbaru, dan terlihat lebih baik ketika Anda mengunjungi situs web di berbagai perangkat (seperti komputer, laptop, tablet, dan bahkan perangkat seluler).

Adanya elemen HTML baru merupakan bagian dari perubahan HTML5. Misalnya, saat ini menggunakan elemen <footer> </footer> untuk menentukan footer halaman HTML, ini akan memberi tahu browser web apakah konten merupakan bagian dari footer.

Untuk versi HTML sebelumnya, konten footer dibuat menggunakan elemen umum seperti <div> </ div>.

Ini adalah dokumen HTML5 dasar:

<!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 Kalian</h1>
    </header>
    <main>
      <section>
        <header>
          <h2>Artikel Kalian</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 © 2021</p>
    </footer>
  </body>
</html>

Desain Responsive

Desain responsif berarti situs web Anda akan secara otomatis ditampilkan kepada pengunjung dalam format terbaik berdasarkan perangkat layar yang mereka gunakan.

Dengan cara ini, tata letak situs web akan responsif terhadap ruang yang tersedia di layar perangkat yang digunakan oleh pengunjung. Konten akan ditempatkan di lokasi yang benar, sehingga konten apa pun tidak akan terpotong atau melebihi layar, dan situs web akan ditampilkan dengan benar.

Baca Juga : 10 Template Mobile Friendly Gratis 2021

desain-responsive

Berikut Ini Cara Membuat Template WordPress

4 langkah harus diselesaikan untuk membuat template WordPress yang responsif:

  • Pahami di mana file template dan template WordPress disimpan.
  • Buat template dan lembar gaya CSS.
  • Tambahkan beberapa struktur kode template WordPress.
  • Buat tata letak template.

Berikut penjelasan lengkap dari poin-poin di atas.

Langkah 1

Template WordPress Anda akan disimpan di folder wp-content / themes /, jadi Anda perlu membuat nama folder dari template itu. Dalam tutorial ini, kami akan menamainya folder my-templates. Nama folder harus unik, yang berarti tidak boleh sama dengan nama folder template lainnya.

Hanya dua file (yaitu index.php dan style.css) yang dapat digunakan untuk membuat template WordPress, dan WordPress dapat menggunakan template tersebut untuk menampilkan halaman dan postingan di situs Anda.

Selanjutnya, Anda perlu mempublikasikan artikel, halaman, dan bagian lain dari situs web untuk menampilkan tata letak sesuai kebutuhan.

Setiap bagian dari situs web akan memiliki file terpisah untuk menyimpan kode HTML dan PHP, dan setiap file disebut template.

Jika Anda menggunakan jenis posting kustom, Anda dapat membuat template untuk jenis posting itu saja. Jika Anda ingin postingan dalam kategori tertentu terlihat berbeda, Anda dapat menggunakan pernyataan if … then … di dalam loop.

Setiap file template harus menggunakan nama yang benar yang ditentukan dalam dokumentasi WordPress.

Selain index.php, ada beberapa file template:

  • header.php – yang berisikan kode HTML di bagian atas, diakhiri dengan <! DOCTYPE html> awal kode
  • single.php – digunakan untuk menampilkan satu halaman di blog
  • comments.php-mendefinisikan bagaimana menampilkan komentar dan kolom komentar
  • footer.php-berisi kode HTML yang digunakan untuk menampilkan bagian bawah halaman, termasuk </html>

Langkah 2

1. Buat folder template-saya pada direktori …/themes/wp-content/

buat-folder
Source : niagahoster.co.id

2. 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
membuat-template-wordpress
Source : niagahoster.co.id

Langkah berikutnya yang harus kalian lakukan adalah menambahkan beberapa informasi ke baris atas file style css. WordPress akan membaca informasi tersebut dan menampilkannya di konsol manajemen.

Informasi harus ditulis dalam bentuk komentar style CSS multi-baris, dan setiap header harus dimulai dengan memasukan kata kunci di header dan berada di barisnya sendiri.

Anda dapat menggunakan beberapa kata kunci judul untuk menentukan informasi, seperti penulis (nama Anda), penulis situs web, deskripsi template, nama template, versi template, dll. Untuk daftar kata kunci judul yang lebih lengkap, silahkan cek di file WordPress Codex-title.

Harap tambahkan kode berikut ke file style.css:

* {
  box-sizing: border-box;

}

body {
    background-color: #f9f9f9;
    font-family: Helvetica;
}

[ecko_alert color = “grey”] Catatan: 7 dan 8 baris hanya diperlukan jika Anda ingin mengupload template di WordPress.org. Jika hanya digunakan untuk situs web Anda sendiri, tidak dapat diisi. [/ Ecko_alert]

Pada langkah ini, template Anda akan ditampilkan di halaman template dashboard WordPress. Templatenya ditunjukkan pada gambar di bawah ini.

Langkah selanjutnya adalah menambahkan kode ke file CSS untuk membuat warna latar belakang untuk halaman situs web Anda.

Harap tambahkan baris kosong setelah komentar penutup pada baris 10. Kemudian tambahkan kode di bawah baris 11.

<?php
// Fungsi ini berguna untuk memanggil Normalize.css. Parameter ukuran pertama adalah nama stylesheet, selanjutnya kedua adalah URL.
// File css yang cocok adalah versi online.
functions add_normalize_CSS() {
    wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}

Entri pertama adalah bagian terpenting dari gaya responsif. * Merupakan karakter pengganti, yang akan cocok dengan setiap kelas dalam dokumen HTML.

Entri kedua akan mengubah warna latar belakang, kecuali untuk font default yang digunakan dalam template.

Langkah 3

Sebelum lanjut membuat dan menentukan tata letak untuk template WordPress, kalian jangan lupa juga perlu menambahkan beberapa kode ke file template.

Pertama, harap sertakan file CSS bernama normalize.css. Beberapa browser memiliki pengaturan default yang berbeda untuk margin halaman dan padding.

File normalize.css akan menyetel banyak properti untuk memastikan bahwa situs Anda dapat berjalan normal di semua browser. Ini adalah cara untuk membuat template WordPress responsif.

1. functions.php

Silakan buka file functions.php dan tambahkan kode berikut:

// Daftarkan sebuah sidebar baru yang diberi nama 'sidebar'
function add_widget_Support() {
                register_sidebar( array(
                                'name'          => 'Sidebar',
                                'id'            => 'sidebar',
                                'before_widget' => '<div>',
                                'after_widget'  => '</div>',
                                'before_title'  => '<h2>',
                                'after_title'   => '</h2>',
                ) );
}
// Kaitkan inisiasi widget dan jalankan fungsi
add_action( 'widgets_init', 'add_Widget_Support' );

Selanjutnya silahkan aktifkan widget sidebar. Jika Anda tidak memasukkan kode, link menu widget tidak akan muncul di halaman dashboard WordPress, dan Anda tidak dapat menambahkan widget.

Masih pada file functions.php silahkan tambahkan kode berikut pada baris di bawah kode sebelumnya.

// Daftarkan menu navigasi baru
function add_Main_Nav() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
// Hook to the init action hook, run our navigation menu function
// Kaitkan ke init action hook, jalankan function menu navigasi.
add_action( 'init', 'add_Main_Nav' );

Selanjutnya, Anda perlu mendaftarkan menu navigasi khusus untuk mengaktifkan fungsi Appearance> Menu di dasbor manajemen. Harap tambahkan kode berikut pada baris sebelumnya dan baris berikutnya dari kode di bawah ini.

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
  <aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar' ); ?>
  </aside>
<?php endif; ?>

Setelah itu silahkan simpan file functions.php nya.

2. sidebar.php

Selanjutnya silahkan buka file sidebar.php dan tambahkan kode berikut. Saat get_sidebar () dipanggil, ini akan membuat sidebar dan widget muncul di template.

<!DOCTYPE html>
<html <?php language_attributes(); ?>
 <head>
   <title><?php bloginfo('name'); ?> » <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" 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' ) ); ?>

Baris pertama akan memberi tahu WordPress bahwa jika tidak ada widget yang diaktifkan, sidebar HTML tidak boleh ditampilkan. Baris kedua menentukan atribut elemen yang berisi widget.

HTML5 menyediakan elemen <aside> untuk sidebar. Baris ketiga adalah fungsi WordPress yang menampilkan widget, dan baris terakhir menutup pernyataan ‘if’.

Silakan simpan file sidebar.php.

Langkah 4

1. header.php

File header.php akan menentukan bagian atas dokumen mulai dari deklarasi DOCTYPE.

Semua dokumen HTML harus dimulai dengan deklarasi DOCTYPE, yang memberi tahu browser web untuk mengenali dokumen tersebut.

Jenis dokumen HTML5 hanya html. Tag <html> di awal membutuhkan atribut bahasa, dan WordPress menyediakan fungsi memasukkan kode bahasa yang benar selama proses instalasi.

Di bagian judul, gunakan sebaris kode untuk menampilkan nama situs web Anda, lalu gunakan pernyataan if … then … untuk menampilkan slogan situs web Anda atau judul halaman atau posting yang Anda kunjungi.

Untuk perannya? Ini adalah operator bersyarat PHP yang disebut operator terner. Di baris kode, is_front_page () adalah fungsi WordPress. Jika Anda mengunjungi beranda, ini mengembalikan TRUE; jika Anda mengunjungi posting atau halaman lain, itu mengembalikan FALSE.

Jika mengembalikan TRUE, fungsi sebelum titik dua digunakan; jika mengembalikan FALSE, fungsi setelah titik dua digunakan.

Fungsi bloginfo () digunakan untuk menggilir parameter yang berbeda untuk mendapatkan bagian lain dari informasi database WordPress.

Sebelum tag <head> dan tag </ head> ditutup, hook operasi wp_head () harus dimasukkan untuk memastikan bahwa fungsi tambahan lainnya dilakukan.

Fungsi body_class () akan memberi tubuh kelas CSS default yang ditentukan oleh WordPress. Jika menu navigasi telah dibuat di konsol manajemen, menu navigasi akan ditampilkan di baris terakhir.

Silakan masukkan kode berikut di file header.php:

<?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>
          Oleh: <?php the_author(); ?>
        </header>
        <?php the_excerpt(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Maaf, tidak ada posting yang ditemukan!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

Simpan perubahan pada file header.php.

2. index.php

File index.php akan menentukan home page, dan jika template tertentu tidak ditemukan (misalnya single.php, page.php), itu juga akan dapat digunakan sebagai tampilan default.

Kemudian, kita akan menggunakan tag template untuk memastikan bahwa kode header (get_header), sidebar (get_sidebar) dan footer (get_footer) ada di beranda.

Loop WordPress akan menampilkan daftar posting. Ini juga menggunakan elemen HTML5 sistem semantik <section>, <main>, <header> dan <article>.

Beberapa elemen lain akan memiliki kelas, yang akan dibuat di file style.css.

<footer>
      <p>Copyright © 2017</p>
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>

Memutar dari <? Php dimulai, jika (have_posts ()): while (have_posts ()): the_post () ;? > Dan akhiri dengan <? php endif; akhir. ? >. Di dalam loop, tag template berikut digunakan:

  • <? php the_permalink () ;? > -Masukkan URL yang benar dari posting yang dikunjungi
  • <? php the_title_attribute () ;? > – keluaran judul posting
  • <? php the_author () ;? > -Output dari nama penulis
  • <? php the_excerpt () ;? > -Output kutipan dari posting, jika Anda tidak menulisnya, itu akan dibuat secara otomatis.

Terakhir, simpan perubahan ke file index.php. Jika Anda mengaksesnya, maka akan terlihat seperti gambar di bawah ini.

File footer.php mendefinisikan setiap halaman dan merupakan penutup dari tag HTML dari file template lainnya. Dalam contoh ini, <body> dan <html> masih dibuka dari header.php.

Baca Juga : Pelajari Dasar HTML Untuk Pemula Dalam 15 Menit

Oleh karena itu, Anda harus menyertakan action hook wp_footer () untuk memastikan bahwa kode WordPress terakhir dan JavaScript telah ditambahkan ke halaman. Jika Anda masuk sebagai administrator saat mengunjungi beranda, posting, atau halaman, bilah manajemen akan muncul.

Silakan tambahkan kode berikut ke file footer.php:

<?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>
          Oleh: <?php the_author(); ?>
        </header>
       <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Maaf, postingan tidak ditemukan!</p>
      </article>
<?php endif; ?>
  </section>
</main>
<?php get_footer(); ?>

4. single.php

Saat mengunjungi halaman tertentu di situs web, file single.php akan menentukan tata letaknya. Ini berbeda dengan index.php.

Silakan tambahkan kode berikut ke file single.php

<?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>
          Oleh: <?php the_author(); ?>
        </header>
        <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Maaf, halaman tidak ditemukan!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

Setelah menambahkan kode, tekan ctrl + S untuk menyimpannya.

5. page.php

File page.php mendefinisikan halaman yang ditampilkan saat diakses, yang berbeda dari indeks atau posting.

Harap tambahkan kode berikut:

@media screen and (max-width: 800px) {
  .article-loop {
    width: 99%;
  }
}

6. style.css

Langkah selanjutnya adalah menambahkan kode CSS ke file style.css yang dibuat sebelumnya. Silakan tambahkan kode berikut di bagian bawah kode CSS yang ada.

7. Menggunakan Media Querie

Saat ini, tampilan depan tidak merespons, yang akan terlihat saat mengunjungi situs web melalui perangkat seluler.

Untuk mengatasi masalah ini, tambahkan kode berikut ke file style.php di bagian bawah kelas .article-loop. Ini akan membuat bagian konten menjadi responsif.

@media screen and (max-width: 400px) {
  .content-area,
  .primary-sidebar {
    width: 100%;
  }
}

Jika Anda mengunjungi situs web Anda melalui tampilan seluler, bilah sisi masih tidak responsif, sehingga bilah sisi akan pindah ke bagian bawah konten, tambahkan kode berikut.

Kesimpulan

Setelah menyelesaikan tutorial ini, kami harap Anda mengerti cara membuat template WordPress yang responsif. Template yang dibuat pada tutorial ini masih sangat sederhana, anda bisa mencoba merubah tampilan atau warnanya melalui file css.

Tags: