Membuat Template WordPress Dengan Mudah 1

Untuk yang mencari-cari artikel tentang membuat tema wordpress terus gak dapet-dapet yang mudah dipahami beruntung jika anda nyasar ke sini karena disini kita akan coba membuat tema wordpress dengan mudah dipahami, ok mulai aja tapi mungkin artikel ini akan bersambung karena cukup panjang  mungkin sampai 3 atau 4 artikel tapi saya yakin anda akan berhasil karena itu yang saya alami. Membuat Template WordPress Dengan Mudah

Oke langsung aja  Kita akan mencoba membangun sebuah theme sederhana, tanpa gambar sama sekali. Untuk gambar, anda bikin sendiri aja.

Ketahui dulu struktur berkas themes worpress sebelum mengutak-atik kode.

Berkas Utama Theme

Ada 2 berkas penting yang harus dimiliki sebuah themes wordpress, yaitu:

– style.css
– index.php

Dengan dua berkas ini, kita sudah bisa membangun sebuah themes WordPress. Tapi, untuk menampilkan hasil yang lebih fantastis, kita membutuhkan beberapa berkas lain untuk mendukung themes 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

 

Tapi sekarang kita hanya akan membuat yang paling penting nya aja karena kalo yang paling pentingnya anda bisa mengikuti saya jamin anda akan mahir nantinya. yang paling penting yaitu

Index, style dan Function untuk yang lainnya akan di bahas denga judul yang berbeda.

 

Membangun Theme WP: Style.css

Oke, sekarang kita mulai dengan membangun style dulu. Sebenarnya cara kerjanya bergantian antara file index.php dan style.css. Tapi karena informasi theme ada di file style.css, maka file inilah yang pertama kali kita buat.

Sebelum bicara terlalu banyak, untuk membuat theme WordPress anda membutuhkan sebuah server lokal (localhost). Anda bisa pakai AppServ, XAMPP atau yang lainnya untuk membangun server lokal di komputer pribadi.  Saya anggap anda sudah tahu soal instalasi WordPress di localhost dan cara mengaktifkan themes. Kalau belum bisa ulik dulu itu.

Saya juga menganggap anda tahu bagaimana cara membuat file PHP. Kalau ini juga belum bisa, silahkan pelajari dulu.

Oke, jika sudah siap, kita buat dulu folder tempat theme kita. Kita akan namakan theme ini dengan: Free-Wordpress-Theme. Jadi, silahkan buat folder /Free-Wordpress-Theme/ di wp-content/themes.

Berikutnya semua file yang kita buat harus masuk di folder ini.

File pertama yang kita buat adalah style.css. File ini akan menangani semua tampilan theme kita. Untuk kustomisasi style, anda bisa baca referensi soal CSS. Tapi disini kita akan langsung pakai perintah-perintah CSS yang kita terapkan di theme.

Pertama, kita isi file style.css  dengan keterangan seperti ini:

  1. /*
  2. Theme Name: Free-Wordpress-Theme
  3. Theme URI: http://wordpress.or.id/
  4. Description: Template WordPress Gratis
  5. Author: kodjodesign
  6. Author URI: https://www.kodjodesign.com/
  7. Version: 1.0
  8. */

Theme Name: isilah dengan nama theme yang ingin anda buat
Theme URI: isilah dengan tempat mendownload theme ini
Description: isilah dengan diskripsi singkat theme anda. Jika mau diupload ke wordpress.org anda harus mengisinya dalam bahasa Inggris
Author: isilah dengan nama anda
Author URI: isilah dengan URL Website Anda
Version: isi dengan versi themesnya. karena baru Idealnya jadi 1.0

Simpan file tersebut Sekarang buat file index.php di dalam folder Free-Wordpress-Theme tadi. Tidak perlu diisi dulu, kosongan aja.

dan coba anda cek di bagian Appearance seharusnya di menu Appearance – Themes sudah ada sebuah theme baru dengan nama Free-Wordpress-Theme. Silahkan aktifkan dan cek Urlnya kalo blank alias gak ada isinya berarti anda berhasil sampai tahap ini

 

index.php

kita akan melangkah ke bagian yang lebih rumit sedikit yaitu file index.php. File ini bekerja sebagai pengatur apa saja yang ingin kita tampilkan di blog.

Kita akan langsung saja mengisi file index.php yang sudah kita buat kemarin tapi masih blank.

Untuk awalnya, kita isi dengan standart HTML biasa seperti ini:

  1. <html>
  2.    <head>
  3.       <title>Judul website</title>
  4.    </head>
  5.    <body>
  6.       <h1>Judul Artikel</h1>
  7.       <p>Disini Isi artikel</p>
  8.    </body>
  9. </html>

Simpan dan coba buka website anda. jika sekarang sudah muncul tulisan  berarti anda berhasil sampai tahap ini.

 

Designing

Untuk panduan sederhana kita nanti, kita akan buat sebuah theme seperti ini:

free theme wordpress

1.   Header Blog
2.   Content
3a. Sidebar lebar atas: Cocok untuk adsense atau iklan kotak besar
3b. Sidebar kiri: Kita pakai untuk menampilkan recent post, category, dll
3c. Sidebar kanan: Kita pakai untuk menampilkan banner iklan atau blogroll.
4.   Bagian footer untuk menampilkan credit  kita.

 

Cara membuatnya seperti ini:

  1. <html>
  2.    <head>
  3.       <title>Theme Percobaan</title>
  4.    </head>
  5.    <body>
  6.       <div id=”wrap”>
  7.        <div id=”header”>
  8.         Lokasi header
  9.      </div>
  10. <div id=”maincontent”>
  11. <div id=”content”>
  12. Artikel akan muncul disini
  13. </div>
  14. <div id=”sidebar”>
  15. <div id=”lebar”>
  16. Iklan kotak ada disini
  17. </div>
  18. <div id=”kiri”>
  19. Menu-menu sidebar kiri ada disini
  20. </div>
  21. <div id=”kanan”>
  22. Menu-menu sidebar kanan ada disini
  23. </div>
  24. </div>
  25. </div>
  26. <div style=”clear:both;”></div>
  27. <div id=”footer”>
  28. Footer ada disini
  29. </div>
  30. </div>
  31. </body>
  32. </html>

Save dulu gan, semua yang ada diantara tag <body> dan </body>

akan dimunculkan di browser. Jadi sekarang kita fokus dulu pada kode-kode diantara dua tag itu.

Mendingan Lihat dulu bagaimana template wordpress anda sekarang.

kalo cuman tulisan aja yang muncul seperti ini

free wordpress theme2

berarti anda berhasil sampai saat ini karena di bagian

selanjutnya kita akan menuliskan kode-kode di style.css untuk memunculkan kolom-kolom atau layout seperti gambar di atas.

sekian dulu postingan hari ini besok saya lanjutin lagi

Komen dulu ahh biar semangat

 

 

Leave a Reply