Cara membuat template wordpress versi linkDesain (Part1)

Apakah anda ingin membuat template wordpress sendiri? ternyata membuat template wordpress tidaklah sulit seperti yang anda bayangkan, untuk membuat template wordpress sendiri anda hanya membutuhkan keahlian sebagai berikut :

Skill Wajib : HTML + CSS ,
Skill Optional : +Photoshop/ CorelDraw , kemampuan  Slicing (bila diperlukan)
Skill Expert : +Bootstrap (Responsive), CSS3, Jquery, Javascript

Secara Hierarchy wordpress memiliki file  khusus dalam membuat sebuah template, berikut ini adalah file-file khusus tersebut :

style.css -> mengatur tampilan templatemu dengan CSS
index.php -> File utama yang harus ada / bisa disebut file induknya
header.php -> untuk bagian script header
sidebar.php -> untuk mengatur bagian script sidebar
comments.php -> untuk mengatur tampilan komentar
single.php -> untuk bagian single post/isi artikel
page.php -> untuk bagian halaman yang berdiri sendiri
404.php -> untuk mengatur tampilan saat halaman error
Archive.php -> untuk bagian halaman arsip berdasarkan tanggal/bulan/tahun
category.php -> untuk bagian halaman kategori
footer.php -> bagian footer template
search.php -> file halaman untuk menampilkan hasil searching artikel
functions.php -> bagian fungsi-fungsi scriptnya

Untuk membuat sebuah template wordpress paling  sederhana sebenarnya anda tidak perlu menggunakan semua file tsb, cukup index.php dan style.css saja anda sudah dapat membuat template wordpress , tapi standarnya anda perlu menggunkan file header.php, sidebar.php, footer.php,   page.php, dan single.php untuk membuat sebuah template Wordpress paling sederhana.

1. Membuat template dalam bentuk HTML + CSS


Sebelum membuat template kedalam bentuk theme wordpress yang perlu anda lakukan pertama kali adalah membuat template html beserta css nya terlebih dahulu. Jika anda malas membuatnya anda dapat mendownload template html  yang sudah jadi di google (bisa yang berbayar atau gratisan) dimana setelah mendapatkan template hasil hunting di google tsb anda bisa mengikut langkah berikut, yakni mengubah template html ke dalam bentuk Wordpress.

Untuk mebuat sebuah template wordpress Anda harus menambah keterngan berikut di bagian style.css nya :


/*

Theme Name: nama template
Theme URI: url template kamu
Description:  deskripsi  template yang kamu buat
Author:  Nama_pembuat temlate
Author URI:  alamat web kamu
Version: 0.1 (versi template yang kamu buat)
Tags: tag label template

*/


Letakan komentar tsb dibagian paling atas cssnya (style.css), ini berfungsi untuk menambahkan keterangan saat template/theme diinstall di wordpress.

Sebagai contoh disini kita membuat file html dan css sederhana untuk membuat templatenya, sebut saja file index.html dan style.css (nama sebenarnya)

template.html dengan isi sbb:

 <!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled Document</title>
<link  rel="stylesheet" type="text/css" media="all" href="style.css">
</head>

<body>
<div class="wraper">
<div class="header"> ini bagian header</div>
<div class="content"> bagian artikel</div>
<div class="sidebar"> bagian sidebar</div>
<div class="footer"> bagian footer</div>
</div>
</body>
</html>

dan style.css seperti berikut:

/*
Theme Name: LinkDesain Wordpress Themes
Theme URI: http://www,linkdesain.com
Description: Template Wordpress sederhana
Author: unnamed
Author URI: http://www,linkdesain.com
Version: 1.0
*/

.wraper{
    width: 800px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    }

.header {
    width: 800px;
    background-color: #09C;
    height: 200px;
    font-size: 50px;
   }

.content {
    float:left;
    width: 500px;
    background-color: #3F3;
    height: 500px;
    font-size: 50px;
   }

.sidebar {
    float:left;
    width: 300px;
    background-color: #F00;
    height: 500px;
    font-size: 50px;
   }

.footer {
    float:left;
    width: 800px;
    background-color: #666;
    height: 50px;
    font-size: 50px;
   } 


Hasilnya akan terlihat seperti ini di browser





baca selanjutnya :

Cara membuat template wordpress versi linkDesain (Part2)



 

Share this

Related Posts

Previous
Next Post »

Komentar disini ..