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.
Baca Juga: Ingin Kinerja WordPress Semakin Optimal? Lakukan Tips ini!
Memahami tempat penyimpanan template dan file
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.
Jenis file template
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.
Baca Juga: Gutenberg: Editor Drag-and-Drop dari WordPress
Membuat tata letak untuk template WordPress
Berikutnya kami akan menjelaskan cara membuat tata letak 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
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
Baca Juga: 20 Plugin Social Media WordPress Terbaik
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!
