panduan membuat wordpress

25
Total Guide : Membuat Blog Wordpress ! A. Pendahuluan Wordpress merupakan sebuah Tools Opensource yang ditulis dalam kode pemprograman PHP dan membutuhkan Database MySQL. Sebenarnya Wordpress merupakan Bloging tools tetapi dia memiliki keleluasaan sehingga yang tadinya hanya bias digunakan untuk Blog dapat dikembangkan menjadi sebuah CMS yang serba guna. Sebagai contoh adalah blog saya sendiri www.nafasku.com merupakan website yang dibangun menggunakan aplikasi Wordpress. Seperti yang Anda lihat, website saya gabungan antara Blog dan juga unsur website yang lain (seperti page-page : galery, About me, dll). Panduan ini akan membahas menggunakan blog wordpress seperti di www.nafasku.com dengan hosting dan domain sendiri secara gratis. B. Langkah-langkah Langkah-langkah yang dilakukan untuk membuat sebuah site Worpress yang utuh adalah pertama-tama kita harus memiliki web server agar situs yang kita miliki dapat dilihat orang. Tidak usah takut, kita akan menggunakan web hosting gratis yang mensuport segala kebutuhan untuk installasi Wordpress yaitu hosting yang mendukung PHP dan juga MySQL. Untuk turoturial ini saya menggunakan webhosting www.orgfree.com . Setelah itu tools yang Anda butuhkan adalah sebuah FTP tool. Sangat banyak sekali tools FTP yang freeware, diantarana adalah FileZila http://www.sourceforge.net/projects/filezilla . Ketiga adalah source Wordpress yang bisa di download di: http://wordpress.org/download/ C. Mendaftarkan Diri di WebHosting Gratis Ada dua yang bisa saya gunakan dengan gratis, yaitu: www.orgfree.com dan www.byethost.com keduanya menawarkan free space dan semua yang dibutuhkan untuk membuat situs dengan Wordpress.

Upload: kresnokoro1945

Post on 13-Jan-2015

3.748 views

Category:

Documents


6 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Panduan  Membuat  Wordpress

Total Guide : Membuat Blog Wordpress ! A. Pendahuluan

Wordpress merupakan sebuah Tools Opensource yang ditulis dalam

kode pemprograman PHP dan membutuhkan Database MySQL. Sebenarnya

Wordpress merupakan Bloging tools tetapi dia memiliki keleluasaan sehingga

yang tadinya hanya bias digunakan untuk Blog dapat dikembangkan menjadi

sebuah CMS yang serba guna. Sebagai contoh adalah blog saya sendiri

www.nafasku.com merupakan website yang dibangun menggunakan aplikasi

Wordpress. Seperti yang Anda lihat, website saya gabungan antara Blog dan

juga unsur website yang lain (seperti page-page : galery, About me, dll). Panduan ini akan membahas menggunakan blog wordpress seperti di

www.nafasku.com dengan hosting dan domain sendiri secara gratis.

B. Langkah-langkah

Langkah-langkah yang dilakukan untuk membuat sebuah site

Worpress yang utuh adalah pertama-tama kita harus memiliki web server

agar situs yang kita miliki dapat dilihat orang. Tidak usah takut, kita akan

menggunakan web hosting gratis yang mensuport segala kebutuhan untuk

installasi Wordpress yaitu hosting yang mendukung PHP dan juga MySQL.

Untuk turoturial ini saya menggunakan webhosting www.orgfree.com.

Setelah itu tools yang Anda butuhkan adalah sebuah FTP tool. Sangat

banyak sekali tools FTP yang freeware, diantarana adalah FileZila

http://www.sourceforge.net/projects/filezilla.

Ketiga adalah source Wordpress yang bisa di download di:

http://wordpress.org/download/

C. Mendaftarkan Diri di WebHosting Gratis

Ada dua yang bisa saya gunakan dengan gratis, yaitu:

www.orgfree.com dan www.byethost.com keduanya menawarkan free space

dan semua yang dibutuhkan untuk membuat situs dengan Wordpress.

Page 2: Panduan  Membuat  Wordpress

Bukalah halaman utama www.orgfree.com yang akan muncul seerti

gambar di bawah ini:

Scroll ke bawah layar sampai menemukan form quick registrasion:

Isikan alamat yang Anda inginkan. Sebagai catatan saja, nama yang

anda masukan di form tersebut akan menjadi alamat website Anda nantinya.

Bila berhasil, Anda akan dibawa ke halaman penuh Form yang harus Anda isi

untuk melakukan registrasi. Ikuti saja apa yang mereka inginkan. Setelah

selesai, Anda akan mendapatkan email konfirmasi dan seluruh data account

Anda.

Sampai disini semuanya sudah beres. Selanjutnya And abisa lanjut ke

lengkah berikutnya.

Page 3: Panduan  Membuat  Wordpress

Untuk Anda yang ingin menggunakan www.byethost.com Anda bisa

mencobanya sendiri. Registrasinya terhitung jauh lebih mudah dibandingkan

di www.orgfree.com. Sebagai catatan pilihlah plan yang mendukung

MySQL(bukan yang Storage ataupun Trafic).

Tetapi setelah selesai setup webhosting, Anda harus login ke dalam

Control panel (CP) untuk membuat account FTP sendiri. Caranya:

Pilih menu seperti pada gambar berikut ini:

Page 4: Panduan  Membuat  Wordpress

Isilah field “Username”,” password” dan “password repeat” yang lain

biarkan saja apa adanya. Bila berhasil akan muncul keluaran seperti berikut

ini: Okey, untuk setup registrasi serer selesai

D. Download Wordpress Source

Wordpress source bisa di download di http://wordpress.org/download/

untuk mendownloadnya tidak dikenakan biaya. File yang di download sekitar

500 KB lebih.

Setelah selesai, Unzip file tersebut. Setelah selesai di unzip, maka

akan muncul sebuah folder bernama “Wordpress” di dalam folder tersebut

berisi banyak sekali file-file ber-ekstensi PHP yang nantinya kita upload.

Tak usah kawatir, kita tidak akan membukanya kemudian menelisiri

satu demi satu line codingnya. Seperti yang sudah saya ucapkan, semuanya

bisa selesai tanpa coding!

Page 5: Panduan  Membuat  Wordpress

E. Setting Control Panel Server

Okey, next step!

Setelah kita punya webhosting, dan juga sudah ada source code dari

Wordpress,kita harus melakukan setting untuk Databasenya. Caranya sebagai

berikut (untuk yang hosting di Byethost): Masukan nama database yang diinginkan(cek option “Use numerical

ID), kemudian klik “Add” bila berhasil akan mucul tampilan seperti di bawah

ini:

Langkah selajutnya adalah menambahkan user untuk database yang

ada, dengan cara klik “Add SQL user”

Page 6: Panduan  Membuat  Wordpress

Ingat kasih tanda cek pada option ”use Numerical ID” untuk

mengurangi kemungkinan kegagalan.

Untuk User yang menggunakan hosting www.orgfree.com Anda tidak

butuh melakukan hal-hal tersebut karena sudah dibuatkan oleh pihak admin. Tetapi jikalau Anda ingin menginstall banyak aplikasi, orgfree memiliki

kekurangan karena hanya bisa memberi database sebanyak satu saja, tetapi

untuk yang di Byethost dapat memiliki sampai 10 Database(atau minimal 2

SQL database).

Sampai saat ini, persiapan webhosting telah selesai! Next step!!!!

F. Upload using FTP program

Semua source code dari Wordpress (yang tadi sudah kita download)

harus di Upload ke server kita.

“How to Upload Them???

It’s Easy!!!”

Gunakan FTP tools seperti FileZila yang bisa di download di:

http://www.sourceforge.net/projects/filezilla . FTP tools ini freeware dan

sangat mudah digunakan.

Page 7: Panduan  Membuat  Wordpress

Untuk menguploadnya, pertama-tama kita harus melakukan beberapa

hal sebagai berikut (supaya bisa kita lakukan lagi tanpa harus mengingat-

ingat accont kita) hal ini dilakukan apabila menggunakan komputer pribadi.

1. 2. 3.

Pilih “File >> Site Manager” sampai kotak dialog Site manager

keluar

Kemudian pilih “New Site” kemudian isilah nama situsnya

kemudian isilah seperti contoh di bawah ini(untuk Host,

disesuaikan dengan server, lihat di email konfirmasi

pendaftaran web hosting yang Anda terima), username dan

password juga disesuaikan dengan langkah-langkah

sebelumnya (untuk Byethost, untuk yang di orgfree, lihat di

email konfirmasi).

klik “save and exit” kemudian pilih conect ke server yang Anda

mau dengan mengeklik icon di kiri atas. Kemudian program FTP

akan melakukan koneksi. Apabila koneksi berhasil, maka akan

muncul tampilan seperti berikut ini!

Page 8: Panduan  Membuat  Wordpress

4. 5.

Untuk pengguna Byethost:

Untuk pengguna OrgFree:

Untuk pengguna Byethost masuklah ke folder htdocs dan

hapuslah semua isinya, untuk orgfree, hapus semua files yang

ada di main directory (diatas ada 3 files dan satu folder)

Pilih folder Wordpress Anda, kemudian bukalah folder tersebut.

Kemudian pilih semua file di dalam diretory tersebut. Kemudian

klik kanan dan pilih “upload” Tunggulah sampai proses Upload

selesai

Page 9: Panduan  Membuat  Wordpress

6.

catatan:

Sebaiknya Anda mengupload sedikit demi sedikit untuk

menghindari error.

Setelah selesai, berati Upload file telah selesai!!!

Jangan tutup dulu FT tools Anda karena kita masih sedikit bermain

dengannya.

G. Setting Setup

Sebelum kita mulai setup, kita lihat kembali FTP Anda. Di sebelah

kanan setiap file yang berada di server ada seperti huruf-huruf aneh seperti

ini: Itu adalah permission atau dengan kata lain status tersebut

menentukan apakah directory atau file tersebut bisa “dibaca(R)”, “Ditulis(W)”

dan “Execute(X)”. Apabila satu file saja permissionnya tidak benar, maka

Wordpress tiak akan bisa berjalan. Maka lakukan beberapa hal berikut ini:

1. Klik kanan pada directory atau file-file berikut ini(tahan Control lalu

click file/foldernya):

Main folder(ex: public_html bila ada)

wp-admin

wp-content

wp-includes

wp-config.php

2. Kemudian klik kanan dan pilih “File Attributes” maka akan muncul

kotak daialog seperti ini:

Page 10: Panduan  Membuat  Wordpress

3. Ubah permission tiap file/folder diatas(point satu) menjadi:

main folder : Owner/Group/Public beri tanda cek semua

wp-admin : Owner cek semua, Group dan Public read dan

execute saja

wp-content : cek semua

wp-includes : sama seperti wp-admin

wp-config.php : cek semua

4. bila semua sudah selesai, Anda bole menutup FTP Anda karena kita

mulai bekerja di browser.

Langkah pertama, Buka browser Anda. Bukalah alamat situs Anda. Maka akan

muncul layar seperti ini jika berhasil:

Piliha dan klik create a wp-config.php file through a web interface setelah di

klk akan muncul tampilan berikutnya:

Page 11: Panduan  Membuat  Wordpress

Klik “Let’s go” dan selanjutnya Anda diminta mengisi informasi Database

MySQL yang akan digunakan: Isilah dengan informasi sesuai dengan langkah “E” bila benar akan muncul

pesan: “All right sparky! You've made it through this part of the installation. WordPress can now communicate with your database. If you are ready, time now to run the install!”

Anda tinggal mengeklik link “Run The install” dan anda akan dibawa ke

langkah berikutnya. Dan munculah halaman set-up dari Wordpress:

Page 12: Panduan  Membuat  Wordpress

Klik “First Step” dan kemudian akan muncul halamana berikutnya sbb: Isilah kedua field diatas (Bisa diganti nantinya) kemudian klik “Continue to

Second Step” Hati-hatilah di second step, karena bila Anda sampai salah

melangkah, Anda harus mengulangi setup dari awal!

Page 13: Panduan  Membuat  Wordpress

Selamat!!! Anda telah memiliki Blog sendiri!!!

Sekarang yang harus Anda lakukan adalah mengcopy password (Jangan

gunakan ctrl+C kalau Anda tidak yakin pada keyoard Anda) lalu bukalah link

di bawahnya di window Baru!

Login dengan account Anda! Username Anda : “admin” dan password Anda

seperti yang tertera dalam halaman sebelumnya!

Page 14: Panduan  Membuat  Wordpress

Yup kini Anda telah masuk di Admin Control Panel!! Disini Anda mengelola

seluruh isi Blog Anda dengan mudah!

Okey, semenjak kita mendapat password yang aneh dan sulit diingat, Anda

bisa merubahnya menjadi password yang mudah Anda ingat.

Caranya, pergilah ke User Admin Control Panel, dengan mengeklik pilihan

user di menu bagian atas. Lihatlah gambar berikut:

Di bagian kanan bawah tuliskan Password Anda yang baru sebanyak dua kali,

kemudian klik “Update Profile”

Ok Sekarang Sudah beres. Sekarang kita melangkah ke Langkah berikutnya!

H. Managing Wordpress

Okey sekarang saya akan mencoba menjelaskan beberapa hal yang penting.

Beberapa yang penting diantaranya yaitu:

1. Post & membuat Page

2. managing (edit&Delete post/Page, Add/remove categories, Edit/Delete

Comment, Awaiting Moderation)

3. Link (Add/remove Link & Add/edit/remove Link categories)

Page 15: Panduan  Membuat  Wordpress

4. Presentation (themes)

Kita mulai saja mulai dari yang paling dasar:

Posting Posting berarti membuat tambahan isi pada Blog kita. Ada dua jenis post.

Pertama posting ‘Post’ dan yang kedua pasting “page”

Bedanya dimana? Cobalah Anda pilih “Write>>Write Post” ketikan sesuatu

disana kemudian tekan publish. Lalu Pilih sekali lagi pilih “Write>>Write

Page” kemudian tulis sesuatu disana dan tekan “publish”

Setelah Anda melakukan keduanya, sekarang lihat di bagian atas halaman

Anda sekarang (sebelah kiri) kemudian bukalah di halaman baru (view

Site>>). Dan seharusnya Anda mendapatkan tampilan seperti ini:

Bila Anda membuka salah satu page, maka akan muncul tampilan seperti ini:

Page 16: Panduan  Membuat  Wordpress

Sudah keliatan kan bedanya? Post merupakan inti dari Blog kita ini. Jadi kita

bisa membuat post sebanyak mungkin setiap hari. Page lebih berguna untuk

menyimpan informasi khusus seperti Biodata atau mungkin Hobby yang ingin

Anda buat page secara terpisah agar orang yang berkunjung tidak perlu

mencari di lusinan post yang Anda buat.

Sekarang saya akan mencoba menjelaskan bagaimana dan apa saja fasilitas

yang ditawarkan dalam Wordpress ini dalam membuat postingan baik post

biasa ataupun dalam pembuatan page.

Kita mulai dari text formating:

Pada Wordpress versi 2.0.x telah mendukung fasilitas What You See, What

You Get atau WYSWYG. Tetapi sejauh ini editor milik Wordpress ini hanya

Page 17: Panduan  Membuat  Wordpress

bekerja pada Browser tertentu. Berhubung saya pengguna AvantBrowser(IE-

based browser), Mozilla Firefox, dan Opera saya menemukan bahwa dalam

browser IE-based browser dan Firefox, editor ini dapat berjalan dengan baik,

sebaliknya, dalam browser Opera, Editor WYSWYG tidak bekerja, sehingga

yang muncul adalah HTML Editor sehingga mungkin bagi pengguna awam

HTML akan kebingungan. Dalam contoh ini saya menggunakan Browser

Internet Explorer 7 Beta 2 tidak banyak berbeda dengan browser tipe IE dan

Firefox.

Tapi walau sudah menerapkan editor WYSWYG, Wordpress 2.0.x ini masih

terdapat banyak kesalahan. Sehingga terkadang menimbulkan keanehan saat

website kita lihat. Jadi mau tak mau, kita harus mengandalkan sedikit

pngetahuan HTML. Tenang saja, saya akan menjelaskannya di bab terakhir!

Saya rasa untuk elemen-elemen standart sepert “Title , Bold, Italic, formating

rata kiri, rata kanan, center” sudah tidak asing lagi bagi Anda. Yang saya

akan terangkan adalah “ Quote”, “Split Post….”, “insert Link”, “Unlink”, “Insert

Image” Pertama adalah Quote, Text yang kita quote(Sebelah kanan) akan tampil

dalam post seperti gambar berikut ini:

Cara menggunakannya simpel saja, blok text yang ingin di quote, kemudian

klik tombol quoye(yang kanan) apabila mau mebatalkannya, blok tulisan yang

telah di quote kemudian klik icon yang sebelah kiri. Link Adalah text yang bila klik akan membawa kita ke halaman lain. Cara

membuat link sangatlah mudah. Anda hanya perlu mengeblok kata atau

gambar(kalau gambar hanya cukup klik ada gambar tersebut sehingga

Page 18: Panduan  Membuat  Wordpress

gambar tersebut terseleksi) kemudian klik tombol link(sebelah kiri) Maka

akan muncul kotak dialog seperti gambar berikut ini:

Link URL diisikan dengan alamat yang mau dituju misalnya

http://www.yahoo.com (ingat selalu menambahkan http:// sebelum alamat

situs atau link) Untuk “target” untuk mengatur link apakah link akan dibuka di

halaman baru atau di halaman yang sama. Title berguna untuk memberi

penjelasan kemana link tersebut akan menuju.

Untuk menghapus link di sebuah kata atau lebih, cukup blok link tersebut

kemudian klik “unlink”(sebelah kanan dari icon Link)

Split post Merupakan salah satu cara memagi satu buah post apabila post

yang kita buat sangatlah panjang. Sehingga yang tampil hanyalah sebagian

dari post tersebut. Sehingga Apabila pembaca ingin membaca keseluruhan,

harus mengeklik sebuah link. Contoh: Cara menggunakannya sangat mudah, taruh kursor di baris yang ingin anda

hilangkan(masukan ke halaman detail), kemudian klik tombol icon Split post. Terakhir, kalau yang sudah expert atau sudah agak kenal dengan HTML

script, bisa mencoba melihat susunan script HTML-nya dengan menekan

tombol ”Edit HTML Source”

Page 19: Panduan  Membuat  Wordpress

Need help? Click Icon help di samping HTML editor Option Lain: Allow Comment dan Categories

Comment memberikan hak pada pembaca memberikan komentar tentang

post kita. Semua coment yang disubmit oleh pembaca, akan butuh ijin dari

kita untuk dapat dilihat oleh orang lain (lihat sub-bab berikutnya).

Categories memberikan pengkelompokan berdasarkan tema post kita dan ini

hanya terdapat dalam post biasa tidak ada dalam posting page. Dapat

ditambah lagsung di kolom yang disediakan atau di dalam menu manage.

Setiap post bisa memiliki kategori lebih dari satu. Upload files:

Page 20: Panduan  Membuat  Wordpress

Anda bisa mengupload berbagai macam files yang Anda inginkan, tetapi

mungkin Anda harus memperhatikan space yang Anda miliki.

Manage

Manage , adalah tempat untuk mengedit/menghapus Post dan page,

menampilkan seluruh coment yang kita punya, memberi aproval/menolak

terhadap comment yang masuk, serta menambah/mengedit/menghapus

categories.

Untuk mengedit post dan pages, Anda tinggal memilihih post mana yang

hendak Anda edit, kemudian Anda tinggal memilih opsi “Edit” maka Anda

akan dibawa ke halaman editor(sama dengan halaman “write”).

Untuk menambah dan mengurangi kategori, Anda tinggal menuju ke

“categories”

Page 21: Panduan  Membuat  Wordpress

“Name” diisikan nama kategori, untuk “category parent” bila kategori yang

Anda buat merupakan kategori induk(yang mungkin bukan bagian dari

sebuah kategori yang lebih luas) maka dibiarkan saja menjadi “none”

Themes Themes Wordpress hampir sama dengan seperti Skin Winamp…

membuat wordpress berganti kulit atau tampilan.

Kita tidak akan belajar bagaimana membuat Themes itu karena sudah

barang tentu minimal Anda harus sudah bisa HTML dan PHP. Saya rasa, saya

sendiri belum mampu membuatnya. Maka dari itu, sampai saat ini yang saya

lakukan hanya memodifikasi themes yang sudah ada.

Beberapa Contoh Skin dapat Anda cari di www.wordpress.org atau

mungkin cari di dengan menggunakan Google atau Yahoo.

Biasanya, Skin Wordpress di download dalam bentuk ZIP. Dan untuk

dapat menggunakannya, Anda harus meng-ekstrak file tersebut kemudian

meng-upload-nya ke folder : “wp-content/themes/” Pada mulanya, ada 2

buah themes default yang disediakan oleh Wordpress Uploadlah file Themes tersebut bersama Foldernya:

Page 22: Panduan  Membuat  Wordpress

Setelah itu Anda loginlah ke Account Anda di Wordpress Anda. Dan

pergilah ke “Presentation” maka aka muncul satu themes baru: Untuk mengaktifkanya, cukup mudah. Klik themes yang Anda ingin

gunakan.

I. Masalah?

Seperti yang sudah saya katakan, Wordpress 2.0.x masih belum sempurna.

Beberapa kesalahan yang terjadi mungkin seharusnya tak terjadi.

Masalah yang selalu terjadi kebanyakan berasal dari WYSWYG editor pada

post.

Page 23: Panduan  Membuat  Wordpress

Perhatikan tulisan Path yang diberi kotak hitam di sebelah kiri bawah…. Dan

tag <div /> yang yang ada di sebelah kanan. Ini sering terjadi apabila saat

mengetik kita menekan enter sebanyak 2 kali apabila Path saat kita

menekan berubah menjadi tag div.

Ask : Apa yang terjadi bila kesalahan diatas disubmit post-nya?

Yang akan terjadi adalah: Dapat dilihat bahwa Sidebar yang seharusnya berada di samping akan

berpindah ke bawah.

Page 24: Panduan  Membuat  Wordpress

Ask: Memangnya ada tag selain div/bagaimana cara mengatasinya?

Seharusnya yang benar saat kita menekan enter satu kali, yang tampil pada

path adalah huruf “p”!! Contoh:

Perhatikan beda antara yang error tadi dan yang benar. Seharusnya saat kita

menekan “Enter” sekali yang keluar adalah TAG “P”.

Setiap awal paragraf baru diawali oleh <p> dan akhir paragraf selalu diakhiri

oleh </p>.

Apabila Anda ingin memulai baris baru tanpa membuat pargraf baru, tekan

kombinasi “shift+ENTER” maka di HTML Source Editor akan muncul sebuah

tag baru <br /> yang merupakan tag/perintah untuk membuat baris baru.

Apabila path telah menunjukan tag “p” apabila Anda menekan Enter 5 kali-

pun tidak ada kejadian seperti tag div seperti diatas.

Apabila sudah terlanjur berubah menjadi tag div, tak perlu kawatir!!

Anda cukup membuka HTML Source Editor dan mengganti tag <div> dengan

tag <p> dan untuk tag penutup </div> diganti dengan </p>.

Apabila ada tag <div /> yang berdiri sendirian ganti saja dengan tag

<p>[space]</p> maka semuanya akan beres.

Untuk masalah lain seperti image juga bisa anda pakaikan tag <p> dan

</p> untuk mencegah kembalinya tag menjadi tag <div>

Page 25: Panduan  Membuat  Wordpress

Masalah lainnya:

Lagi-lagi yang membuat masalah adalah editor WYSWYG-nya. Terkadang hal

ini memang membuat sebal dan kesal.

Masalah lainnya yang tidak begitu fatal tetapi cukup membuat penampilan

berubah adalah adanya tag pembuka tetapi tak ada tag penutup.

Dalam dunia koding bahasa mana saja, selalu ada Awal dan Akhir begitu

pula dengan HTML.

Biasanya yang terjadi adalah tag penutup “Strong” (pembuat tulisan menjadi

Bold) kelebihan (yang kita tidak tahu darimana asalnya). Contoh :

. . . . <strong /><strong /><strong /><strong /><strong /> </p>

Cara mengatasinya sangatlah mudah, cukup hapus tag yang berlebihan. Tetapi

Anda tak bisa sembarangan menghapusnya. Ingatlah bahwa setiap satu tag

<strong> harus memiliki satu tag penutup <strong /> atau </strong>

Created and Edit by : http://www.nafasku.com