Cara Membuat Template WordPress

jika kita belum menemukan template wordpress yang cocok dengan tema blog maka mungkin cara terbaik adalah membuat template itu sendiri. Dan tulisan mengenai cara membuat template wordpress ini adalah jawaban dari rasa ingin tahu bagaimana template wordpress tersebut dibuat sedemikian bagusnya.

Untuk memulai membuat template wordpress maka hal yang perlu kita persiapkan terlebih dahulu adalah membuat sebuah sub-folder, misalkan diberi nama semangat_pagi, di dalam direktori wp-content/theme yang berada dalam folder file wordpress. Nama folder template disarankan mempunyai hubungan nama dengan tema template wordpress yang akan diterapkan. Untuk membuat folder tersebut kita bisa menggunakan bantuan FTF client, file manager yang ada di dalam cpanel (jika online langsung menggunakan hosting) dan localhost (jika offline sekaligus melakukan pengujian terlebih dahulu).

Sebelum membuat sebuah template wordpress maka kita perlu memikirkan terlebih dahulu desain atau layout template tersebut, apakah hanya terdiri dari bagian header, main area, sidebar dan footer seperti terlihat oleh gambar di bawah ini.
wordpress theme Cara Membuat Template Wordpress
Layout tema semangat_pagi

Cara Membuat Template WordPress

Untuk membuat tema template dengan layout seperti diatas maka kita perlu membuat beberapa file php kedalam folder wp-content/theme/semangat_pagi seperti:
  • header.php – bagian yang berisi kode header template
  • index.php – bagian yang berisi file utama template dan sekaligus sebagai tempat file yang lain akan dimasukkan
  • sidebar.php – bagian yang akan berisi informasi mengenai sidebar seperti recent post, recent comment dll
  • footer.php – bagian yang akan mengatur bagian footer
  • style.css – bagian yang akan mengatur semua tampilan template
Untuk lebih jelasnya mari kita simak penjelasan mengenai beberapa file php tersebut diatas dalam mendukung cara membuat template wordpress,
file header.php
<html>
<head>
<title>Semangat Pagi</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER BLOG</h1>
</div>
Di dalam file header.php akan kita temui kode dasar HTML yang berisi fungsi internal dasar wordpress. Di dalam file ini kita dapat menjabarkan beberapa tag title, meta description dan keyword blog.
Setelah baris tag title kita menambahkan kode <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”> yang bertugas menjelaskan kepada platform WordPress untuk menjalankan file style.css yang akan bertugas mengatur seluruh tampilan blog. Dan kode <?php bloginfo(‘stylesheet_url’); ?> adalah fungsi internal wordpress yang secara nyata mengeksekusi file stylesheet.
Selanjutnya, kita menambahkan sebuah “div” dengan nama class wrapper yang akan berisi content blog. Dan kita telah mengatur tampilannya di dalam file style.css
Setelah itu kita menambahkan sebuah label header di dalam “div” dengan nama class “header” yang akan kita atur selanjutnya tampilannya di dalam file stylesheet.
file index.php
<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter"></div>
<?php get_footer(); ?>
File index.php dimulai dengan penulisan kode <?php get_header(); ?> yang berfungsi memanggil file header.php dan memasukkannya kedalam halaman utama. get_header() adalah sebuah fungsi internal wordpress yang akan kami jelaskan pada kesempatan selanjutnya. Kemudian dilanjutkan dengan penulisan teks Main Area yang menunjukkan sebagai tempat content blog.
Baris selanjutnya adalah kode php dan fungsi standar wordpress yang bertugas mengecek apakah kita mempunyai sebuah posting yang ditulis menggunakan admin wordpress dan menampilkannya di dalam blog.
Kemudian kita mengikutkan file sidebar.php dengan menggunakan fungsi wordpress <?php get_sidebar(); ?>. File ini bertugas menampilkan kategori posting, archieves, recent post dan sebagainya. Setelah baris kode ini kita memasukkan div kosong yang bertugas memisahkan main area dan sidebar dengan footer.
Dan di baris terkahir kita tambahkan sebuah fungsi internal wordpress <?php get_footer(); ?> yang bertugas memasukkan file footer.php kedalam halaman blog.
 file sidebar.php
<div id="sidebar">
<h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
di dalam file sidebar.php kita akan menggunakan fungsi internal wordpress <?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0′); ?> untuk menampilkan kategori, <?php wp_get_archives(‘type=monthly’); ?> untuk menampilkan archieve.
file footer.php
<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
File footer.php diisi dengan label footer dapat diisi mengenai informasi blog, link artikel, copyright dan lain sebagainya.
file style.css
body {
text-align: center;
}

#wrapper {
display: block;
border: 1px #a2a2a2 solid;
width:90%;
margin:0px auto;
}

#header {
border: 2px #a2a2a2 solid;
}

#content {
width: 75%;
border: 2px #a2a2a2 solid;
float: left;
}

#sidebar {
width: 23%;
border: 2px #a2a2a2 solid;
float: right;
}

#delimiter {
clear: both;
}

#footer {
border: 2px #a2a2a2 solid;
}

.title {
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}
Nah untuk file style.css bertugas mengatur seluruh tampilan header, sidebar, footer dan tentunya content blog. Dan jika kita ingin tampilan blog bisa seperti tampilan template premium lainnya maka kita bisa menggunakan file style.css untuk membuat template wordpress menjadi lebih ciamik icon smile Cara Membuat Template Wordpress .
Ketika kita akan membuat template wordpress maka file-file php tersebut diatas tidak boleh lupa untuk selalu digunakan karena kelima file tersebut adalah file utama ketika kita akan membuat template wordpress. Sekian tutorial cara membuat template wordpress yang dapat kami sampaikan jika masih ada pertanyaan seputar bagaimana cara membuat template wordpress maka kami persilahkan untuk dapat menyampaikannya melalui form komentar. Oh iya hampir lupa, sebagai tambahan informasi dalam cara membuat template wordpress kita memerlukan teks editor seperti notepad untuk membuat file-file php tersebut diatas.





source http://modjopahit.com/cara-membuat-template-wordpress/




ROCK RUNNER - REBEL WEAR

NOIA! Store

Please Share it! :)
Categories: , , Share

Leave a Reply