Belajar Membuat Template WordPress Sendiri dari Nol

Template WordPress merupakan bagian dari WordPress yang keberadaannya tidak kalah penting dari plugin maupun domain. Selama ini banyak template WordPress gratis. Tetapi template yang berkualitas tidak gratis dan kamu harus membelinya. Sebelum membeli sebaiknya kamu memilih template WordPress yang tepat untuk website yang kamu kelola. File template WordPress biasanya terdiri dari HTML, PJP, CSS dan JavaScript.

Ada beberapa kebutuhan yang harus kamu siapkan yaitu yang pertama kamu memerlukan text editor, kamu bisa menggunakan text editor Notepad++. Kemudian kamu harus mempersiapkan localhost, kamu bisa menginstal localhost seperti XAMPP. Setelah localhost aktif selanjutnya install WordPress di localhost. Dalam membuat template WordPress ini kamu menggunakan HTML 5. HTML 5 ini merupakan versi terbaru dari HTML. HTML 5 ini dilengkapi dengan beberapa fitur terbaru dan memiliki tampilan yang cukup baik.

Memahami tempat penyimpanan template dan file

Template-wordpress
[Foto: Stackoverflow.com]
Template WordPress yang kamu buat akan tersimpan dalam folder wp-content/themes/, kamu bebas memberi nama folder tersebut dengan nama apa saja. Meskipun bebas, kamu harus memberi nama yang unik dan menarik agar tidak sama dengan nama folder template lainnya. Satu lagi, nama yang kamu berikan harus benar sesuai dengan yang didefinisikan oleh dokumen WordPress. Template WordPress hanya bisa dibuat dengan dua file yaitu index.php dan style.css. Kedua file tersebut akan digunakan untuk menampilkan postingan dan halaman pada website kamu.

Untuk menampilkan tata letak seperti apa yang kamu inginkan, kamu membutuhkan postingan dan halaman dalam website kamu. Apabila kamu menggunakan jenis postingan khusus kamu bisa membuat template yang hanya dibuat untuk jenis postingan tersebut. Jika ingin memposting postingan jenis yang berbeda maka kamu tinggal menggunakan statemen if.. then.. didalam loop.

Berikut macam-macam file template selain index.php

  • Header.php, file template ini berisi code HTML. Digunakan untuk menampilkan dibagian atas halaman.
  • Single.php, file template ini digunakan untuk menampilkan halaman yang berasal dari blog kamu.
  • Coments.php, file template ini untuk mengatur kolom komentar ditampilkan.
  • Footer.php, file template ini berisi code HTML. Digunakan untuk menampilkan bagian bawah halaman.

Membuat tata letak untuk template WordPress

Header.php

Dimulai dengan deklarasi DOCTYPE, file header.php akan mendefinisikan bagian paling atas dari sebuah dokumen. Semua dokumen HTML diharuskan diawali dengan deklarasi DOCTYPE. DOCTYPE ini akan memberitahu web browser untuk mengenali dokumen tersebut.

Doctype HTM 5 berupa html. Untuk tag <html> pembuka memerlukan atribut language selanjutnya WordPress menyediakan function untuk memasukkan code bahasa yang benar selama waktu instalasi.

Pada bagian tittle digunakan baris code untuk menampilkan nama kamu pada website. Dilanjutkan dengan statemen if..then.. untuk menampilkan judul dari halaman yang kamu akses.

Sebelum tag <head> ditutup dengan tag </head>, selanjutnya kamu harus memasukkan action hook wp_head() untuk memastikan function lain yang dijalankan. Function body_class() memberikan body sebuah class CSS default yang telah ditetapkan oleh WordPress. Pada baris yang terakhir menu navigasi ditampilkan apabila sudah dibuat didashboard admin. Selanjutnya masukkan code pada file header.php

Silakan masukkan code berikut pada 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.

Index.php

Template-wordpress
[Foto: Joomlaworks.net]
Index.php berfungsi untuk mendefinisikan homepage dan digunakan untuk tampilan default apabila tidak ditemukan template WordPress yang spesifik seperti single.php, page.php

Kemudian gunakan template tags untuk memastikan code header (get_header), sidebar (get_sidebar) dan footer(get-footer) yang berada dihomepage.

Loop dari WordPress akan menampilkan daftar dari postingan. Selain itu akan menggunakan elmen HTML 5 semantik <section>, <main>, <header> dan <article>. 

Beberapa elemen mempunyai class, dimana akan dibuat pada file style.css.

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

Loop dimulai pada ,?php if (have_posyts()): while (have_posts()) : the_post();/> dan berakhir di <?php endif;?>. didalam loop menggunakan tag template WordPress berikut:

  • <?php the_permalink(); ?>- output URL yang benar dari postingan yang diakses.
  • <?php the_title_attribute();?>- output judul dari postingan.
  • <?php the_author();?>- output dari nama author
  • <?php the_excerpt();?>- output dari postingan

Yang terakhir silahkan simpan perubahan pada file index.php.

Baca Juga : 10 Template WordPress Untuk Fashion Blog

Footer.php

Footer.php berfungsi untuk mendefinisikan setiap halaman dan penutup dari tag HTML file template lain. Pada <body> dan <html> masih terbuka dari header,php. Maka dari itu harus melakukan include action hook wp-footer() untuk mengecek code akhir WordPress dan JavaScript, selanjutnya ditambahkan pada halaman. Lalu tambahkan code dalam file footer.php tersebut.

Silakan tambahkan code berikut ke dalam 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(); ?>

Single.php

Single.php untuk mendefinisikan tata letak ketika mengakses halaman tertentu pada website. Hal ini berbeda dengan index.php. Silahkan tambahkan code pada single.php. setelah selesai menambahkan code kemudian simpan dengan ctrl+S. Apabila ingin melihat hasilnya kamu akses salah satu postingan kamu.

Silakan tambahkan code berikut ke dalam 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 code ditambahkan, silakan simpan dengan menekan tombol ctrl + S.

Page.php

File page.php untuk mendefnisikan halaman yang ditampilan ketika diakses. Halaman yang ditampilkan berbeda dengan halaman index maupun postingan. Selanjutnya masukkan code.

Silakan tambahkan code berikut ini:

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

Style.css

Template-wordpress
[Foto: Medium.com]
Berikutnya adalah menambahkan code css kedalam file style.css yang sebelumnya sudah dibuat.selanjutnya masukkan code dibawah dari code css yang sudah ada.

Menggunakan Media Querie

Saat ini tampilan depan memang masih belum responsive, ini akan terlihat ketika website diakses melalui perangkat seluler.

Untuk mengatasinya, silakan tambahkan code berikut pada file style.php di bagian bawah class .article-loop. Ini akan membuat bagian konten responsive.

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

Kesimpulan

Setelah menyelesaikan tutorial ini, kami berharap kamu dapat memahami bagaimana cara membuat template WordPress responsive. Template yang dibuat pada tutorial ini masih sederhana, kamu dapat bereksperimen dengan mengubah tampilan atau warna melalui file css.

Itulah beberapa hal yang harus kamu ketahui sebagai bahan acuan belajar membuat template WordPress sendiri dari nol. Semoga bermanfaat!

Cloud Hosting Terbaik di Indonesia