Cara membuat Template wordpress dengan dreamweaver Bagian 1


Cara membuat Template wordpress dengan dreamweaver Bagian 1
Kalo kemarin edikomputer sudah membagikan teemplate wordpress secara gratis, rasanya kurang lengkap kalo tidak saya share cara pembuatannya, Oke agar sobat edikomputer semua bisa bisa membuat template sendiri maka saya akan share step by step cara pembuatannya.

Disini saya menggunakan adobe dreamweaver CS6 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 kok.

"tapi mas edi saya nggak punya hosting buat bikin blog pake wordrpress... ?" kan ada server lokal jadi kita akan buat secara offline

"Memanggnya bisa mas? " Baca deh artikel yang dari sini http://www.edikomputer.com/2013/01/video-tutorial-install-server-lokal-di.html Trus Lanjut Baca yang ini http://www.edikomputer.com/2012/08/cara-mengunstal-wordpress-di-server.html nah kalo udah baca dan paham yuk kita lanjutkan.

Oke sebelum kita membuat proyek membuat template kecil-kecilan kita buat terlebih dahulu folder tempat penyimpanan template kita buat folder di direktory tempat dimana wordpress di install di lokalhost yaitu tepatnya di C:\Wamp\www\folder worpress sobat...\wp-content\themes\...
beri nama folder sesuai keinginan folder tersebut yang nantinya akan menjadi nama templatenya di sini saya memberi nama folder tersebut "theme edikomputer"

sekarang buka adobe dreamweaver kemudian buat dokumen baru degan format php
Cara membuat Template wordpress dengan dreamweaver Bagian 1
kemudian save dokumen php ini dengan nama index.php di folder template kita tadi
lalu buat lagi dokumen baru dengan format CSS caranya klik menu file > New > pada kotak dialog pilih CSS 
Cara membuat Template wordpress dengan dreamweaver Bagian 1

Selanjutnya kita akan membuat link untuk menghubungkan dokumen php dengan css
sekarang buka file index.php

kemudian lihat kode </head> masukan kode ini di atasnya
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo ('stylesheet_url'); ?>" />
Jika sudah save file, Sehingga keseluruhan kode menjadi seperti ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo ('stylesheet_url'); ?>" />
</head>
<body>
</body>
</html>

Oke sekarang buka file CSS kita akan tambahkan info template yang kita buat tadi copy paste kode ini

/*
Theme Name:Theme Edikomputer
Theme URL:http://www.edikomputer.com
Author:Edi Prasetiyo
Author URL:http://www.edikomputer.com
Version:1.0
Description:Ini adalah template sebagai media belajar di www.edikomputer.com

*/
Tulisan di atas merupakan kode Informasi template yang akan kita buat sekarang cek di wordpress localhost maka akan muncul template baru dengan nama sesuai dengan nama folder yang tadi di buat tampilannya seperti dibawah ini
Cara membuat Template wordpress dengan dreamweaver Bagian 1
Klik tulisan Active pada template yang baru kita buat maka blog wordpress kita sudah menggunakan template hasil desain kita,... tapi,, templatenya masih blank alias kosong karna kita belum membuat isi atau desainnya kita baru mengkonfigurasikan dulu

Oke sampai di sini dulu nanti kita lanjut ke episode kedua yaitu membuat layout style template
Index Tutorial membuat Template wordpress dengan dreamweaver
  1. Cara membuat Template wordpress dengan dreamweaver Bagian 1
  2. Cara membuat Template wordpress dengan Dreamweaver Bagian 2 Mengatur Body

Related Posts

No comments:

Post a Comment

Blog Ini Dofollow Ya bro tapi jangan nyepam komentar secara bijak dan sesuai dengan postingan