tutorial pembuatan template wordpress

Upload: yohanes-marius-wahyu-dp

Post on 02-Apr-2018

223 views

Category:

Documents


0 download

TRANSCRIPT

  • 7/27/2019 Tutorial Pembuatan Template Wordpress

    1/14

    Tutorial Pembuatan Template Wordpress

    (Windows Versi)

    Hal pertama yang harus disiapkan adalah Xammp(Downloaddisini), Wordpress (downloaddisini), dan

    Notepad++ (downloaddisini). Setelah siap ketiga alat tersebut kita akan memulainya dengan Setting xampp.

    A.Setting XAMPP1. Install Xampp terlebih dahulu (lalu tinggal ikuti langkah-langkahnya, sesuai dengan default install)

    *Jika anda sudah menginstal local server seperti IIS, maka anda harus mengganti port localhost xamppselain 80.

    2. Setelah selesai kita akan setting supaya bisa digunakan local webserver.a. Pertama, kita buka program xampp, dan akan keluar seperti ini.

    b. Kedua, Tanda X Apache dan MySql diklik itu untuk menjalankan program pada service. Lalu akan muncul2 kali kotak dialog. Kotak dialog yang pertama di kilik YES. Biasanyapada Apache akan muncul kotak

    dialog lagi yaitu untuk meminta ijin berjalan di system jadi pilih yang ALLOW.

    c. Ketiga, kita akan klik start pada Apache, dan MySql. Dan akan tampak seperti ini.

    3. Setelah Apache dan Mysql telah jalan kita coba dengan membuka browser(chrome), pada alamatnyadiketikan localhost.

    http://ncu.dl.sourceforge.net/project/xampp/XAMPP%20Windows/1.8.1/xampp-win32-1.8.1-VC9-installer.exehttp://ncu.dl.sourceforge.net/project/xampp/XAMPP%20Windows/1.8.1/xampp-win32-1.8.1-VC9-installer.exehttp://ncu.dl.sourceforge.net/project/xampp/XAMPP%20Windows/1.8.1/xampp-win32-1.8.1-VC9-installer.exehttp://wordpress.org/latest.ziphttp://wordpress.org/latest.ziphttp://wordpress.org/latest.ziphttp://download.tuxfamily.org/notepadplus/6.3/npp.6.3.Installer.exehttp://download.tuxfamily.org/notepadplus/6.3/npp.6.3.Installer.exehttp://download.tuxfamily.org/notepadplus/6.3/npp.6.3.Installer.exehttp://download.tuxfamily.org/notepadplus/6.3/npp.6.3.Installer.exehttp://wordpress.org/latest.ziphttp://ncu.dl.sourceforge.net/project/xampp/XAMPP%20Windows/1.8.1/xampp-win32-1.8.1-VC9-installer.exe
  • 7/27/2019 Tutorial Pembuatan Template Wordpress

    2/14

    B.Install Wordpress pada localhost.Pada tahap ini saya akan menjelaskan installing wordpress di localhost. Siapkan file yang telah kita

    download tadi dalam bentuk zip .

    1. Extract ke folder htdocs, C:\xampp\htdocs. (ini tergantung anda menginstall xampp nyatadi dimana).

    2. kita harus membuat database di phpmyadmin. Buka di web Browser lalu pilihmenu dibagian atas.

  • 7/27/2019 Tutorial Pembuatan Template Wordpress

    3/14

    3. Pada Text box Create Database di isikan nama database, namanya wordpress.

    4. Buka folder wordpress lalu kita rename wp-config-sample.php menjadi wp-config.php. dan bukawp-config.php menggunakan Notepad++ isikan seperti ini:

    5. Buka web browser lalu ketikan localhost/wordpress untuk nama wordpress sesuai folder yang ada di htdocs,berhubung nama saya wordpress maka /wordpress. Akan Muncul page seperti ini.

  • 7/27/2019 Tutorial Pembuatan Template Wordpress

    4/14

    6. Isikan sesuai dengan yang diinginkan Site Title : I2CTEST Username : i2ctest Password : i2ctest Your Email:[email protected]

    Lalu tinggal klik

    7. Lalu setelah install maka akan masuk ke page login:http://localhost/wordpress/wp-login.php (Biasakansetiap membuka dan mau mengedit wordpress harus login dulu)

    mailto:[email protected]:[email protected]:[email protected]://localhost/wordpress/wp-login.phphttp://localhost/wordpress/wp-login.phphttp://localhost/wordpress/wp-login.phpmailto:[email protected]
  • 7/27/2019 Tutorial Pembuatan Template Wordpress

    5/14

    C.Membuat Template WordpressSebelum terlalu jauh sebaiknya kita mengenal bebrapa komponen penting yang berada di template

    wordpress ini.

    Berkas Utama Theme

    Sejatinya, ada 2 berkas penting yang harus dimiliki sebuah themes, 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

    1. Oke hal pertama yang akan kita lakukan adalah membuat style.css, program yang akan kita gunakan adalahnotepad++. Buat sepert ini:

    1. /*2. Theme Name: Theme I2C3. Theme URI: http://wordpress.or.id/4. Description: Theme I2C Blog contest5. Author: Radioactive6. Author URI: http://Radioactive.com/7. Version: 1.08. */

  • 7/27/2019 Tutorial Pembuatan Template Wordpress

    6/14

    2. Sebelum kita melangkah lebih jauh kita akan menggambar mockup yang ingin kita buat. Ini contoh yang akan sayabuat :

    Dengan begini akan terlihat lebih jelas bagian bagian yang ingin kita buat. Index.php merupakan bagian yang

    menggabungkan semuannya itu menjadi satu.

    3. Lalu kita masuk ke index.php disini kita akan mempelajari beberapa bagian yang dimasukan kedalam index.php1. 2. 3.4. 5. 6. 7. 8.9. 10. ..11. ..12. ..13. 14.15. 16. 17. 18.19. 20. 21. 22.23.24.

    Sudah dapat dijelaskan, kalau didalam index.php terdapat bagian-bagian yang melinkkan file diluar (dapat

    dipelajari diwww.php.net).

    http://www.php.net/http://www.php.net/http://www.php.net/http://www.php.net/
  • 7/27/2019 Tutorial Pembuatan Template Wordpress

    7/14

    Setelah megetahuinya sekarang kita akan mencoba membuatnnya,

    1) Kita buat file index.html (jangan dibuat php terlebih dahulu, untuk membuat mockup tadi ke dalam bentukweb)

    2) Lalu kita akan membuat bagian- bagian itu di HTML.a) Membuat bagian head, copy text berikut ini ke Index.html:

    1.

  • 7/27/2019 Tutorial Pembuatan Template Wordpress

    8/14

    35 36 Previous

    Entries Next Entries

    37 d) Lalu kita masukanformsearch dengan code di bawah ini:

    38 39 Search40 41 42

    e) Ini bagian sidebar copy code di bawah ini:43 44 Category45 46 Uncategorized47 News & Update48 Design49 50 Archives51 52 October 200653 September 200654 August 200655 56

    f) Bagian ini adalah yang terakhir yaitu footer57 58 59 Recent Posts 60 61 Blog Title Text
    62 10/23/200663 Blog Title
    64 10/23/200665 Title Text
    66 10/23/200667 Sample Blog Title
    68 10/23/200669 70 71 72 Recently Commented73 74 Nick: This is a test comment75 Jen: Hello, nice day!76 Someone: Wow, this is another test

    comment

    77 Admin: This is a comment78 79

  • 7/27/2019 Tutorial Pembuatan Template Wordpress

    9/14

    80 81 About82

    Welcome to my design blog and portfolio showcase. Duis autem vel

    eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu

    feugiat nulla facilisis.

    83

    Feel free to contact me.

    84 85 86 87 88 89

    3) Setelah index.html selesai kita akan membuat CSS kita edit di style.css yang telah kita buat. (Buat belajarlebih detail mengenai CSS kalian bisa bukahttp://www.w3schools.com/css/). Berikut code CSSnya ada di

    file (demo.zip). Yang peru kalian ingat, adalah

    a. Untuk mengatur id pada html kalian menggunakan tanda # contoh: id=footer, di css #footer.b. Untuk mengatur class pada html kaliang menggunakan tanda titik(.). contohclass=right-col di css

    .right-col

    c. Satu lagi biasnya gambar yang ditampilkan pada antarmuka default itu semua rata-rata semuadimasukan lewat css contoh: background: url(images/mini-rss.gif)

    4) Setelah Html dan CSS nya selsai maka gambar2 yang sudah saya siapkan di masukan ke dalam folder images(nama sesuai pemanggilan pada css, lihat contoh 3.b).

    5) Pastikan akan seperti ini terletak dalam satu folder tidak terpisah-pisah:

    Ketika sudah sama seperti ini maka coba kalian buka di web browser lihat hasilnnya.

    Jika sama maka kalian sekarang bisa lanjut untuk membuat template wordpress yang sebenarnya.

    http://www.w3schools.com/css/http://www.w3schools.com/css/http://www.w3schools.com/css/http://localhost/var/www/apps/conversion/tmp/scratch_4/demo.ziphttp://localhost/var/www/apps/conversion/tmp/scratch_4/demo.ziphttp://localhost/var/www/apps/conversion/tmp/scratch_4/demo.ziphttp://localhost/var/www/apps/conversion/tmp/scratch_4/demo.ziphttp://www.w3schools.com/css/
  • 7/27/2019 Tutorial Pembuatan Template Wordpress

    10/14

    4. Setelah kita sudah membuat HTML + CSS kita sekarang akan menjadikannya template. Masih ingat strukturpada index.php, sekarang kita akan memecah mecah dari index html yang telah kita buat.

    1. Pertama kita akan membuat header.php, Copykan bagian headdan header kedalamheader.phpdan lakukan perubahan seperti ini.

    Perubahannya

  • 7/27/2019 Tutorial Pembuatan Template Wordpress

    11/14

  • 7/27/2019 Tutorial Pembuatan Template Wordpress

    12/14

    4. Keempat kita akan membuat footer.phpdengan mencopykan bagian footer dan lakukan perubahanseperti ini.

  • 7/27/2019 Tutorial Pembuatan Template Wordpress

    13/14

    5. Terakhir kita akan membuat index.php, Dalam index.php ini terdapat pemanggilan-peanggilan file php lainnya, seperti header.php, sidebar.php, dan footer.php.

  • 7/27/2019 Tutorial Pembuatan Template Wordpress

    14/14

    D. Menginstall Template di WordpressUntuk menginstall template di wordpress local host, pertama di zip template yang php(wordpress) lalu

    masukhttp://localhost/wordpress/wp-admin/> > Install Themes > upload ,

    maka akan muncul seperti ini.

    Mau lihat hasil extractnya bisa lihat di: C:\xampp\htdocs\wordpress\wp-content\themes\glossyblue

    Oke setelah selasai semuanya pastikan semua file php tadi dalam satu folder, seterusnya silahkan kembangkan lagisesuai dengan imajenasi mu ya. Kalian Bisa Buat dengan menggunakan Teknologi web terkini yaitu Responsive web

    desain. Ini ada file Zip dari hasil code nya tadi. Trimakasih.

    Catatan:

    *Udah ada contoh code nya versi html dan wordpress(php). Dilihat di filedemo.zip

    http://localhost/wordpress/wp-admin/http://localhost/wordpress/wp-admin/http://localhost/wordpress/wp-admin/http://localhost/var/www/apps/conversion/tmp/scratch_4/demo.ziphttp://localhost/var/www/apps/conversion/tmp/scratch_4/demo.ziphttp://localhost/var/www/apps/conversion/tmp/scratch_4/demo.ziphttp://localhost/var/www/apps/conversion/tmp/scratch_4/demo.ziphttp://localhost/wordpress/wp-admin/