Info Harga Komputer dan Gadget

Cara membuat Template wordpress dengan dreamweaver Bagian 1

Advertisement
advertisement

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
advertisement

19 comments:

NetterKu said...

Terlalu jauh klw membahas ke sini sob,
saya hnya bisa sedikit editing template aja,,,itupun hnya di Blogger....

AngeLia Tan said...

terimakasih atas panduannya sobat

Edikomputer said...

Oke nanti saya lanjutkan langkah-langkah berikutnya

Monicka Febriani said...

wahhh bolehh nichhh

thank's dachh,,,

Sep Zunot said...

wiss dachhh
keren bgt6 tuh
sukes dachh

Anonymous said...

bagian 2 nya mana gan...?? gak sabar nih...

ikram said...

Mas, tutorial lanjutannya ada nggak ? Aku juga mau bikin nih. Btw Dreamwaver ukurannya berapa ratus MB ?

rheeantz said...

sepertinya cukup sulit tapi perlu dicoba dulu ah.. :)

Mendut Rafting said...

Sangat Menarik dan perlu di coba, thanks :)

mebel jepara said...

terima kasih tutorialnya gan

jasa desain logo murah said...

thanks bro...tapi lanjutannya mana ?

Belajar Search Engine Optimization said...

Wah infonya sangat bermanfaat sekali gan. izin nyimak ya gan dan jangan lupa update terus artikelnya. Oh iya sob, kapan-kapan saya akan mampir lagi jika ada waktu luang. hehehehehe. jangan lupa di update terus ya blognya. salam kenal.
Cara Menerapkan Template Johny Wuss
Thanks.

cara alami menyembuhkan stroke ringan said...

ijin menyimak gan,, thanks buat infonya sngat beermanfaat sekali

Percetakan Online said...

Nice Share,... Ingin mencoba buat template dengan kreasi sendiri, walaupun otodidak, Terima Kasih sudah berbagi Mas Edi.. Sukses Selalu..

Kembud said...

terima kasih gan

Admin Sugek said...

masih bingung mas, he he he maklum newbie banget

tyo promotor said...

Luar biasa ilmunya mas Edi, saya sekarang lagi belajar untuk copy paste dan editing template wordpress dengan dream weaver, mohon share ilmunya lbh lengkap lagi. Mampir ke lapak saya kapan2 ya.
elpis residence
terima kasih, sukses slalu.

rokhim said...

ada kaset tutorial khusus gak kang tentang pembuatan template wordpress. saya mau pesan

Gamis Syari said...

Terima kasih kang ilmunya , saya jadi bisa experimen dengan layout-layout yang menarik

Post a Comment

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