- Beranda
- Website, Webmaster, Webdeveloper
[BAHAS BARENG] PSD to WP
...
TS
ragilhadianto
[BAHAS BARENG] PSD to WP
Assalamualaikum,
hallo Agan2 kaskuser semua, khususnya para WP developer.
PSD to WP, yaitu convert design file photoshop jadi bentuk cms Wordpress.
Nah bagaimana prosesnya ?
bagi yang belum tahu, sebenernya banyak cara dan banyak tools. Disini ane share dengan versi ane ya.
Singkatnya : design-> slice -> coding
gampang sih emang ngomong ya,
ya emang prosesnya cuma itu, hhe
Pertama, yang pasti kita design dulu di photoshop full web yg kita mau buat gmn nanti view jadinya, semua page sampe bner detail viewnya.
ukurannya juga sesuain buat web kita. Kalo mau RWD sekalian jg buat ukuran di tiap device. minimal desktop dan mobile.
atau pun, kita terima file jadi dari designer file PSD yg siap kita jadiin WP.
Nah PSD sudah final.
Kedua,kita slice atau istilahnya potong2/crop2 bagian2 yg nantinya kita butuhin dalam bentuk html.
misal ada logo, background-image, atau image lainnya. yang sifatnya bisa dibuat di html dengan CSS gak usah dibawa.
cukup itu.
Ketiga,nah kita langsung main ke koding, siapin kopinya dulu gan, hhe
udah tau kan daleman struktur file2 diWP kayak gmn,
adakan bagian "\wp-content\themes", nah dstu agan bebas pake template yg mana aj sbg dasar buat bkin WP agan jadi sesuai sm PSD agan.
Standarnya bawaan WP kan ada 3 ( twentyfifteen , twentyfourteen , twentythirteen ),
ente bisa pake yang ada atau pake naked blank themes wp , apa lagi itu ? itu template kosongan buat develop themes sndri, gak kosong2 bgd sih ya ada isinya, cuma polos aj hhe.
Nah yang biasa ane pake HTML5 Blank WordPress Theme, sebenernya banyak selain ini.
strukturnya seperti begini :
bisa agan2 liat,
blok biru : sebagai file2 struktur html, agan bs atur sesuai gaya coding agan dr header sampe footer.
blok orange : sebagai file2 struktur css dan js
blok hijau : sebagai file fungsi, dmn pengaturan seperti Post Thumbnails, Post, button Read More. dll.
trus digimanain lagi ?
trus gmn bkin menu, bagian footer, atau sesuatunya bisa di update lewat admin WP ?
sabar gan, tujuannya emang kesana .. struput lagi kopinya gan
Oke, struktur file udah kita liat, kita coding html+css sesuai design kita mulai dr header dan footer, yang hampir disetiap page ada terus bagian itu. Ini bagian cukup inti karena ini proses develop html+css kita jadi sesuai tampilan design. Ane anggep ente bisa proses bkin html+css ini.
kemudian untuk buat html2 yang sudah kita buat sesuai PSD menjadi dinamis atau bisa diedit dari admin/dashbord WP, agan perlu edit html sesuai lokasi. Ane contohin misal di footer, ane mau di footer ada alamat dan nanti bisa diedit dr dashbord.
file footer.php
yang ane kotakin merah itu contoh nanti tampil lokasi alamat,
nah ane naro code/function widget sesuai id yg ane siapin di file function.php
file function.php
nah yg bawaan masih standar sidebar, kita duplikat aj dr itu, terus ganti sesuai id2nya.
Kemudian save, nanti liat di dashbord trus dipage widget udah ada lokasi buat naro widget dstu. nanti masukin widget editor html aj.
Ini berlaku untuk semua kebutuhan agan, misal di header ada menu, siapin code/function menu nya di html header agan sesuai lokasi/struktur html agan, terus di widget agan masukin widget custom menu.
Terakhir, kurang lebih segitu yang ane bisa share, kalau dari agan ada pertanyaan kita bahas bareng atau pun ada cara lain ane terima kasih bisa dapet pengalaman baru juga. Thanks udah mampir. Cendolnya gans
hallo Agan2 kaskuser semua, khususnya para WP developer.
Quote:
PSD to WP, yaitu convert design file photoshop jadi bentuk cms Wordpress.
Nah bagaimana prosesnya ?
bagi yang belum tahu, sebenernya banyak cara dan banyak tools. Disini ane share dengan versi ane ya.
Singkatnya : design-> slice -> coding
gampang sih emang ngomong ya,
ya emang prosesnya cuma itu, hhe
Quote:
Pertama, yang pasti kita design dulu di photoshop full web yg kita mau buat gmn nanti view jadinya, semua page sampe bner detail viewnya.
ukurannya juga sesuain buat web kita. Kalo mau RWD sekalian jg buat ukuran di tiap device. minimal desktop dan mobile.
atau pun, kita terima file jadi dari designer file PSD yg siap kita jadiin WP.
Nah PSD sudah final.
Spoiler for ss1:
Kedua,kita slice atau istilahnya potong2/crop2 bagian2 yg nantinya kita butuhin dalam bentuk html.
misal ada logo, background-image, atau image lainnya. yang sifatnya bisa dibuat di html dengan CSS gak usah dibawa.
cukup itu.
Spoiler for ss2:
Ketiga,nah kita langsung main ke koding, siapin kopinya dulu gan, hhe
udah tau kan daleman struktur file2 diWP kayak gmn,
adakan bagian "\wp-content\themes", nah dstu agan bebas pake template yg mana aj sbg dasar buat bkin WP agan jadi sesuai sm PSD agan.
Standarnya bawaan WP kan ada 3 ( twentyfifteen , twentyfourteen , twentythirteen ),
ente bisa pake yang ada atau pake naked blank themes wp , apa lagi itu ? itu template kosongan buat develop themes sndri, gak kosong2 bgd sih ya ada isinya, cuma polos aj hhe.
Nah yang biasa ane pake HTML5 Blank WordPress Theme, sebenernya banyak selain ini.
strukturnya seperti begini :
Spoiler for ss:
bisa agan2 liat,
blok biru : sebagai file2 struktur html, agan bs atur sesuai gaya coding agan dr header sampe footer.
blok orange : sebagai file2 struktur css dan js
blok hijau : sebagai file fungsi, dmn pengaturan seperti Post Thumbnails, Post, button Read More. dll.
trus digimanain lagi ?
trus gmn bkin menu, bagian footer, atau sesuatunya bisa di update lewat admin WP ?
sabar gan, tujuannya emang kesana .. struput lagi kopinya gan
Oke, struktur file udah kita liat, kita coding html+css sesuai design kita mulai dr header dan footer, yang hampir disetiap page ada terus bagian itu. Ini bagian cukup inti karena ini proses develop html+css kita jadi sesuai tampilan design. Ane anggep ente bisa proses bkin html+css ini.
kemudian untuk buat html2 yang sudah kita buat sesuai PSD menjadi dinamis atau bisa diedit dari admin/dashbord WP, agan perlu edit html sesuai lokasi. Ane contohin misal di footer, ane mau di footer ada alamat dan nanti bisa diedit dr dashbord.
file footer.php
Spoiler for footer.php:
yang ane kotakin merah itu contoh nanti tampil lokasi alamat,
nah ane naro code/function widget sesuai id yg ane siapin di file function.php
file function.php
Spoiler for function.php:
nah yg bawaan masih standar sidebar, kita duplikat aj dr itu, terus ganti sesuai id2nya.
Kemudian save, nanti liat di dashbord trus dipage widget udah ada lokasi buat naro widget dstu. nanti masukin widget editor html aj.
Ini berlaku untuk semua kebutuhan agan, misal di header ada menu, siapin code/function menu nya di html header agan sesuai lokasi/struktur html agan, terus di widget agan masukin widget custom menu.
Terakhir, kurang lebih segitu yang ane bisa share, kalau dari agan ada pertanyaan kita bahas bareng atau pun ada cara lain ane terima kasih bisa dapet pengalaman baru juga. Thanks udah mampir. Cendolnya gans
Diubah oleh ragilhadianto 18-11-2015 12:16
0
3.2K
28
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Mari bergabung, dapatkan informasi dan teman baru!
Website, Webmaster, Webdeveloper
23.3KThread•4.3KAnggota
Terlama
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru