Bagaimana Cara Membuat Themes Dari Wordpress Themes

[ganda]

Halo Prestashoper! Dengan bangga sejauh yg saya tau open source utk toko online terbaik saat ini adalah Prestashop! Tapi bagaimana caranya ya membuat themes seperti yg sudah pernah dilakukan teman-teman. Misal kita liat web template di tempat lain (misal templatenya wordpress: www.wordpresstemplates.com), nah bagaimana cara mensinkronkan template yang kita sukai dengan scriptnya Prestashop? Mungkin yg pernah bikin themes berpikir "wah susah jelasinnya" saya menyadari itu tapi bagaimana kalau dasar2nya saja dan dibuat step by step, misal:

1. ambil script file blabla.php lalu copy paste ke template, dst..dst
2. ????
3. ????

Bagaimana? Tolong ya teman2, saya yg baru belajar ini saya tau dg memanfaatkan fungsi search dari forum ini ada beberapa hasil karya themes dari teman2 yg keren2 juga sih, tapiiii saya ingin belajar membuat sesuka hati. Saya yakin banyak Prestashoper disini yang juga punya imajinasi liar dalam membuat desain untuk sekedar belajar atau untuk toko onlinenya, jadi ajarin dong

[ganda]

Seperti http://tokolengkap.com/shop/

Ini web keren (karena minimalis, grafis yg oke, warna yg pas). Ini contoh yg enggak ngikutin defaultnya Prestashop. Ajarin dong yang punya ini web atau teman-teman lain yang mengerti akan hal ini.

[prestanesia]

Kebetulan gi bikin theme. Proses bikin theme si dari coret2/design dulu ya, baru digambar pake photoshop dan dibuatkan HTML dan CSS nya.

Potongan2 HTML ini yang disisipkan di file .tpl yang ada di root theme folder.

Sebetulnya ada cara mudah kalo theme yang dibuat masi menggunakan format 3 kolom. Modalnya cuman firefox + web developer plugin ato aplikasi yg namanya CSSVista. Dengan menggunakan tool tsb kita bisa meng-edit CSS secara online jadi proses untuk merubah template jadi lebih mudah.

Cara extreme ? misal bikin theme yg gag ada bau2 nya prestashop ? umm kalo aku si css bawaan prestashop dihapus, nah nantinya kan brantakan layoutnya, baru dirapi2 in lagi pake design kita. Ribet si tapi puas hwhwhwhhw

Oh iya, bikin theme ga melulu modif layout di CSS, ada juga yang nempel di module, kyk featured product dll.

[ganda]

Yang lain bisa menambahkan?

[gonebdg - webindoshop.com]

Sekedar sharing .... mulai dari dasarnya

Fungsi jenis2x file, Sederhananya sbb:
css adalah file pengaturan tampilan/desain, html adalah file konten alias isi, php adalah file bahasa pemrograman utama, javascript/js adalah bahasa pemrograman tambahan untuk lebih jelasnya silahkan tanya Om google saja ya ... banyak artikel yg menjelaskan hal ini

Developt dilakukan di localhost

Software/Aplikasi yg dibutuhkan : (ini yg saya gunakan)

XAMMP (utk menciptakan lingkungan localhost)
Firefox & addons : firebugs + web developer (utk internet browser, alat bantu deteksi&pemeriksaan;script) + febe (utk membuat backup & multiple profil firefox)
IE/chrome/opera (utk check kompatibilitas desain)
phpeditor (utk editing file2x script : php, html, xhtml, xml, dst)
Corel/Photoshop/Paint/Button Shop/Flash Creator/gif creator & aplikasi image editing lainnya (utk editing image agar sesuai keinginan dalam menghasilkan background&tampilan;)

Buat salinan themes default prestashop (sebaiknya dibuat mulai dari atau berdasar dari ini)
copy-paste default folder themes prestashop pd directory yg sama lalu rename dgn nama lain ... misalnya menjadi "customthemes"
Nah, file2x yg ada didalam customthemes inilah yg kita edit lebih lanjut dimana didalamnya terdapat 5 folder yaitu folder config (konfigurasi themes), folder css(desain tampilan diatur oleh file2x css yg menjadi referensi html file), folder img (tempat utama file image), folder js(tempat file javascript), folder lang(tempat php file translasi bahasa), dan berbagai file tpl yang merupakan isi berbagai halaman web prestashop (diatur/diprogram oleh file php di root directory)

Selanjutnya, buat konsep desain themes sesuai keinginan. Bisa didalam hati dan pikiran, atau ditulis pada kertas ato di notepad agar ide2x yg terpikirkan ga terlupakan

Seperti desain website pada umumnya, Prestashop juga terdiri dari beberapa bagian/blok utama yaitu :
Header, Top, Left Column, Center Column, Right Column, Footer, Main Background & Blok Background (bisa warna latar atau gambar latar)
Dan sebagaimana mustinya sebuah halaman website, maka ada head dan body

Warna-ukuran-jenis-posisi huruf, warna atau gambar latar setiap blok, ukuran tinggi & lebar blok maupun sub.blok, margin, padding, border ... dst, secara general di atur dalam file css khususnya file global.css yg dibedakan melalui class dan id. Susunan blok/bagian di atur dalam file tpl yg berupa code html, sedangkan hubungan&pengaturan;file php to tpl atau tpl to tpl serta php to database, diatur oleh php script

Pelajari & Pahami dahulu fungsi code2x html seperti div, ul, li, br, a, a href, img src, ... dst serta pelajari&pahami;juga fungsi code2x css seperti align, widht, height, padding, margin, border, color, font-style, font-size, ...dst

Q : "Bagaimana caranya agar kita dpt dgn cepat mengetahui bagian mana dari file tpl, pada file css yg harus diedit agar tampilan yg ingin kita rubah sesuai keinginan ?"
A : "Perhatikan class dan atau id yg mengikuti code html bagian yg akan kita rubah, lalu gunakan fungsi search (pd aplikasi file editing-nya) saat explorasi file global.css agar mudah ditemukan"
(gunakan firebug ... just click your mouse to your desire object within webpage ... you'll see)

Q : "Bagaimana utk mengetahui lokasi file image/icon pada konten halaman dengan cepat ?"
A : "Pada firefox, klik kanan mouse Anda di image yg dimaksud, lalu klik menu view image background agar firefox menampilkan image tsb pada windows atau tab baru. Nah jika sudah tampil ... perhatikan url-nya pada adress bar, itu adalah lokasi file image"

... to be continued

[ganda]

Wah detail sekali tapi sayang to be continued...
Anyway trims banget gonebdg, cepetan disambung, kata orang barangsiapa suka berbagi ilmu maka ilmu orang tersebut akan terus ditambahi entah dari arah mana saja.

Dan yang lain ada lagi menambahkan? Gak usah pelajaran desain themes dari awal, tapi bagaimana caranya mengintegrasikan Prestashop dengan themes lain misal dari www.wordpresstemplates.com

Oke ditunggu...

[gonebdg - webindoshop.com]

Wah detail sekali tapi sayang to be continued...
Anyway trims banget gonebdg, cepetan disambung, kata orang barangsiapa suka berbagi ilmu maka ilmu orang tersebut akan terus ditambahi entah dari arah mana saja.

Dan yang lain ada lagi menambahkan? Gak usah pelajaran desain themes dari awal, tapi bagaimana caranya mengintegrasikan Prestashop dengan themes lain misal dari www.wordpresstemplates.com

Oke ditunggu...

:) ... 3 senyuman untuk mu ...., tambah satu lagi

kata orang ... barang siapa suka, mau, dan ulet dalam belajar, pasti orang tsb akan tambah ilmunya dan mengerti

ga jadi nerusin ah ... to be not continued .. wkwkwkwk
silahkan member yg lain menambahkan

[ganda]

Loh..loh kok malah gitu

[gonebdg - webindoshop.com]

Loh..loh kok malah gitu
...................................................
Dan yang lain ada lagi menambahkan? Gak usah pelajaran desain themes dari awal, tapi bagaimana caranya mengintegrasikan Prestashop dengan themes lain misal dari http://www.wordpresstemplates.com

Oke ditunggu…

Ya silahkan kamu pikirkan dan coba dahulu ngutak-ngatik template default prestashop, rubah background warnanya atau pake image, rubah ukuran text, rubah ukuran lebar right column atau center column, dst ... dst ... dst

Btw .... Saya mau tanya : Maksud kalimat kamu yg saya Red Bold diatas itu bagaimana ?

WP dgn Presta itu 2 CMS yg berbeda struktur & codingnya ....
Lha bagaimana mungkin bisa pakai template WP seutuhnya utk prestashop dgn add template WP ke folder themes presta begitu saja

Qlo modifikasi themes presta dgn mecontek template WP itu baru bisa ...

Sudah mengerti maksudnya belum Bos ?

[ganda]

Nah itu dia yang saya maksud: nyontek dari WP Themes, gimana step-stepnya? Mungkin selain Gonebdg, Ardian YS bisa bantu nambahin, krn saya pernah liat Ardian bikin free theme namanya Black Flower, yang terinspirasi dari salah satu WP Themes, ini yg saya maksud, gmn step-stepnya? (Jawaban teman2 saya yakin tdk saja membantu saya tapi membantu semua Prestashoper di forum ini yg lemah dari segi pengetahuan ngutak-atik theme).

Trimakasih.

[gonebdg - webindoshop.com]

Sebenarnya pd posting sy sebelumnya, sdh dapat ditarik gambaran bagaimana caranya utk dapat menyesuaikan/mendesain default template Prestashop berdasarkan Wordpress themes. Namun tampaknya pandangan Anda lebih rumit ...

Sebelum dilanjutkan, silahkan kamu edit sedikit judul thread disini (editing 1st post), tambahkan kalimat :
"............ berdasarkan Wordpress Themes "

Karena banyak sekali WP Themes, maka sebaiknya kamu pilih sebuah wordpress themes utk di contek webdesign-nya sebagai contoh kasus yg akan dibahas disini, attach screenshot dan link download templatenya kesini, sehingga memudahkan semua prestashoper utk turut berdiskusi, dan agar pembahasannya dapat dilakukan bertahap.

... silahkan

[ganda]

Meski capek nanggapi pertanyaan saya Gonebdg tetap ingin mensharing pengetahuannya, trimakasih banyak.
Perintah awal Gonebdg sdh saya laksanakan yaitu merubah judul topik, langkah kedua menentukan templates dari wordpress yg akan jadi studi kasus (asyik bakal seru nih kayak di kelas web design, cuma ini free euy) akan saya lakukan setelah nanti liat2 dulu mana template yg mau dijadikan studi kasus, mode learning = ON

[prestanesia]

wah kalo mw bikin theme bareng2 bikin thread baru aja & btw, knp nyomot themenya gag dari http://www.freecsstemplates.org/ aja ?

[Ardian Yuli Setyanto]

wah kalo mw bikin theme bareng2 bikin thread baru aja & btw, knp nyomot themenya gag dari http://www.freecsstemplates.org/ aja ?

referensi yang bagus. thanks. tak coba utak atik dulu.

[ganda]

Emm.. lebih mudah niru dari css templates ya daripada themes templates, ini juga ada referensi css templates yang keren2 www.templatemo.com/page/1

[gonebdg - webindoshop.com]

Emm.. lebih mudah niru dari css templates ya daripada themes templates, ini juga ada referensi css templates yang keren2 www.templatemo.com/page/1

Ini TS-nya qo malah ikutan sharing link free themes/template non Presta !?

@TS back to topic Please ![/b]
Segera ambil salah satu themes/templates utk dijadikan contoh kasus

[gonebdg - webindoshop.com]

......................................

[ganda]

Lanjut yuk... saya ambil secara random dari wordpress theme, pokoknya minimalis sehingga proses belajar sedikit mudah. Link downloadnya www.wordpresstemplates.com/download-wordpress-theme/?ID=628

Dan dibawah ini screen shotnya, lalu langkah pertamanya apa setelah mendownload theme? Jujur saya tdk tau apa yg harus selanjutnya dilakukan.

[zeeembah]

Tolong dilanjutkan tread ini....ayo para master, ditunggu nich kelanjutnya...

[pixelmedia]

Ini Moderatornya mana?huehuehue ga ikut2an lagi..hehehe

Lanjutin dong..biar kita semua bisa ngoprek boss

[rolas]

wah cukup membingungkan juga bagi pemula seperti saya..

[Rio]

Judulnya sangat simple tapi terdapat beberapa tahap yang harus dilakukan. Tahap merubah theme Wordpress ke Prestashop tidak membutuhkan pengalaman mengenai struktur theme Wordpress karena tidak berkaitan dengan sistem CMSnya jadi sebenarnya theme Wordpress dapat dengan mudah disulap menjadi theme Prestashop jika kita mempunyai skill dan pengetahuan di CSS dan HTML :]

Mungkin di lain kesempatan, Rio akan membuat tutorial lebih detail tentang bagaimana membuat theme Prestashop dari CMS apapun itu termasuk Wordpress. Tunggu saja, mungkin setelah Rio selesai membuat theme buat buat klien.

[Ardian Yuli Setyanto]

Wups, desainnya keren2. Selamat bergabung di Prestashop Indonesia bro.

[rolas]

ok ditunggu tutorialnya

[Rio]

Sepertinya dokumentasi buat development theme Prestashop sama sekali tidak lengkap dan sepertinya dukungan dokumentasinya sengaja tidak diperhatikan agar tidak banyak yang mau membuat theme buat Prestashop. Hal ini mungkin sengaja dilakukan agar pihak Prestashop bisa berjualan theme di Prestastore mungkin?

Berbeda dengan Wordpress yang lebih lengkap dokumentasinya, sehingga keingintahuan mas Ganda yang mengetahui banyaknya theme wordpress yang ada, berpikir kenapa pembuatan theme tidak semudah membuat theme buat Wordpress?

Yap, Rio rasa yang menjadi sumber permasalahan awal yang perlu kita selesaikan adalah "Dokumentasi Pembuatan Theme Prestashop" yang jelas dan mudah dipahami. Jadi sebelum Rio memulai tutorial tentang bagaimana proses konversi theme Wordpress ke Prestashop, kita perlu mempelajari struktur function/hooks yang digunakan theme Prestashop sehingga dengan bekal pemahaman tentang cara pembuatan theme Prestashop yang benar maka kita akan dengan mudah mampu mengkonversi theme dari CMS lain ke Prestashop.

Jadi Rio akan menjelaskan tentang bagaimana membuat theme Prestashop yang baik dulu sebelum kita bisa mengkonversi theme dari CMS apapun itu.

Rio telah membuat thread baru, "Cara Membuat Theme Prestashop" untuk lebih memahami bagaimana cara kerja function/hooks pada theme Prestashop.

[compret]

menuju ke TKP

[djito]

ikutan nandai, lagi pengen bikin ..