Sabtu, 20 Desember 2014

Cara Membuat Template Wordpress Dengan Dreamweaver CC Bagian 1

Ok untuk pertama kalinya penulis akan memposting tutorial bukan membahas delphi tetapi membahas desain website, tepatnya penulis akan menjelaskan cara membuat template sendiri di wordpress maka penulis akan share step by step cara pembuatannya.

Disini penulis menggunakan adobe dreamweaver CC untuk mengolah desain dan kode template yang akan kita buat, kalo nggak punya versi ini bisa juga menggunakan versi di bawahnya karena caranya tidak beda jauh.

Sebelum kita membahas langkah-langkahnya, terlebih dulu kita akan mempelajari struktur dari template wordpress dulu. yaitu :

Berkas Utama Theme
Didalam pembuatan tema wordpress ada 2 file penting yang harus dimiliki, yaitu:
– style.css
– index.php

Dengan dua file ini, kita sudah bisa membangun sebuah tema wordpress. Akan tetapi untuk menampilkan hasil yang lebih fantastis, kita membutuhkan beberapa file lain untuk mendukung tema kita.

Berkas Tambahan
Inilah berkas-berkas yang bisa dipakai sekalian dengan fungsi-fungsinya:
– home.php : digunakan untuk menampilkan halaman depan blog
– header.php : Digunakan untuk menampilkan bagian header blog
– sidebar.php : digunakan untuk menampilkan bagian sidebar blog
– footer.php : digunakan untuk menampilkan bagian footer blog
– single.php : digunakan untuk menampilkan artikel.
– page.php : digunakan untuk menampilkan page.
– search.php : digunakan untuk menampilkan hasil pencarian.
– archive.php : digunakan untuk menampilkan arsip blog (arsip tanggal, bulan, dll).
– functions.php : digunakan untuk mengatur fungsi-fungsi yang berlaku di blog.
– 404.php : digunakan untuk menampilkan halaman error 404

Ok sebelum kita membuat proyek membuat template wordpress, kita buat terlebih dahulu folder tempat penyimpanan template kita, kita buat folder di direktori tempat dimana wordpress di install di localhost yaitu tepatnya di C:\xampp\htdocs\wordpress\wp-content\themes\ beri nama folder sesuai keinginan folder tersebut yang nantinya akan menjadi nama templatenya, di sini penulis akan memberi nama folder tersebut "Thema BagusCakepz". Bagi yang belum mempunyai installer wordpress silahkan download disini.

Langkah 1 :
Sekarang buka adobe dreamweaver cc kemudian buat dokumen baru degan format php.

Langkah 2 :
Setelah itu save dokumen php ini dengan nama index.php di folder template yang baru kita tadi
lalu buat lagi dokumen baru dengan format CSS caranya klik menu file > New > pada kotak dialog pilih CSS. Simpan dengan nama Style.css.

Langkah 3 :
Selanjutnya kita akan membuat link untuk menghubungkan dokumen php dengan css yang telah kita buat di langkah 1 dan langkah 2 diatas. Sekarang buka file index.php. 

Langkah 4 :
kemudian lihat kode </head> masukan kode ini di atasnya :
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo ('stylesheet_url'); ?>" />

Langkah 5 :
Jika sudah save file, Sehingga keseluruhan kode menjadi seperti ini :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo ('stylesheet_url'); ?>" />
</head>
<body>
</body>
</html>

Langkah 6 :
Oke sekarang buka file CSS kita, kemudian kita tambahkan info template yang kita buat tadi copy paste kode berikut ini :
/*
Theme Name: Thema BagusCakepz
Theme URI: http://baguscakepz.blogspot.com/
Description: tema buat latihan membuat tema wordpress
Author: Bagus Wahyudi, S. Kom.
Author URI: http://baguscakepz.blogspot.com/
Version: 1.0.1.1
*/

Langkah 7 :
Tulisan dilangkah 6 adalah kode Informasi template yang akan kita buat dan bisa cek di wordpress localhost kita akan muncul template baru dengan nama sesuai dengan nama folder yang tadi di buat.

Langkah 8 :
Klik tulisan Active pada template yang baru kita buat maka blog wordpress kita sudah menggunakan template hasil desain kita. Tetapi templatenya masih blank alias kosong karena kita belum membuat isi atau desainnya kita baru melakukan konfigurasi awal.

Langkah 9 :
Selamat mencoba :D


1 komentar:

Copyright@2014. Bagus Cakepz. All Right Reserved. Powered by QMPC Tutorial