Modul Pembuatan Website Menggunakan
Versi 3.5.1
Divisi Web Puskom URhttp://puskom.unri.ac.id
Oleh: 07 - 08 Mei 2013
Design : www.mhdsyarif.p.ht
i
Daftar Isi
Daftar Isi...................................................................................................................................i
A. Install XAMPP ........................................................................................................................ 1
B. Install Wordpress Di Localhost .......................................................................................5
C. Penggunaan Wordpress .................................................................................................13
Mengenal Bagian-bagian Wordpress .................................................................................. 13
Login Admin ........................................................................................................................ 14
Pengelolaan Tulisan (Posts) ................................................................................................ 15
a. Membuat Tulisan ................................................................................................. 15
b. Merubah Tulisan .................................................................................................. 17
c. Menghapus Tulisan .............................................................................................. 18
d. Menyisipkan Gambar Di Dalam Tulisan ............................................................ 18
e. Membuat Video Youtube Di Dalam Tulisan ..................................................... 23
Pengelolaan Halaman (Pages) ............................................................................................. 26
a. Membuat Halaman ............................................................................................... 26
b. Merubah Halaman ................................................................................................ 27
c. Menghapus Halaman ........................................................................................... 28
Pengelolaan Tampilan (Appearance) .................................................................................. 29
a. Mengganti Tampilan Website ............................................................................. 28
b. Mengganti Tampilan Website ............................................................................. 28
c. Mengatur Widget Di Sidebar .............................................................................. 31
d. Mengatur Menu (Menus) ..................................................................................... 32
e. Mengganti Gambar Header ................................................................................. 34
Daftar Pustaka ........................................................................................................................... 37
Install XAMPP | http://puskom.unri.ac.id Page 1
A. Install XAMPP
Ada beberapa langkah dalam install XAMPP sebagai berikut :
1. Download XAMPP dialamat :
http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/1.7.1/xamp
p-win32-1.7.1.exe/download
2. Klik dua kali file XAMPP (Menggunakan xampp-win32-1.7.1-installer.exe, ),
apabila mempunyai versi XAMPP yang lebih baru, cara instalasi
kemungkinan masih sama.
3. Klik [Next] pada jendela Setup Wizard yang muncul.
4. Berikutnya diminta memilih folder tempat XAMPP dipasang. Untuk
mudahnya pilih saja drive c:\, seperti default-nya dan klik [Next].
Install XAMPP | http://puskom.unri.ac.id Page 2
5. Pada jendela yang muncul berikutnya, tandai semua yang ada pada service
section dan klik [Install].
6. Tunggu beberapa menit sementara XAMPP di-instal.
Install XAMPP | http://puskom.unri.ac.id Page 3
7. Klik [Finish] setelah XAMPP selesai diinstal.
8. Akan muncul pesan, apakah akan menjalankan XAMPP Control Panel
sekarang atau lain kali. Klik [Yes] bila akan menjalankannya, klik [No] bila
jika tidak.
9. Untuk melihat hasilnya buka web browser, ketikkan http://localhost pada
jendela address, akan muncul tampilan seperti di bawah ini, Klik [English]
untuk memilih bahasa Inggris.
Install XAMPP | http://puskom.unri.ac.id Page 4
10. Setelah itu akan muncul halaman seperti dibawah ini.
Install Wordpress di Localhost | http://puskom.unri.ac.id Page 5
B. Install Wordpress di Localhost
1. Download Wordpress di alamat : http://wordpress.org/latest.zip
2. Extract here Wordpress yang telah di download. Akan muncul sebuah folder
yang secara default diberi nama "Wordpress".
Install Wordpress di Localhost | http://puskom.unri.ac.id Page 6
3. Pindahkan folder Wordpress CMS yang bernama "Wordpress" tersebut ke
dalam "C:\xampp\htdocs". Yang paling utama diperhatikan adalah
penyimpanan yang harus dilakukan di folder "htdocs". Sebab ketika membuka
URL web tersebut pada browser, sistem localserver XAMPP yang digunakan
akan membaca folder htdocs tersebut dan akan mencari web yang dimaksud
sehingga dimunculkan pada browser.
4. Jika sudah memindahkan atau meng-copy paste folder Wordpress tersebut,
folder “Wordpress” boleh dirubah sesuai keinginan. Untuk tutorial sekarang ini
nama folder tidak perlu dirubah.
5. Buka web browser (Mozilla Firefox, Internet Explorer, Google Chrome, Opera),
kemudian ketik alamat "http://localhost/phpmyadmin" pada jendela address
sehingga muncul halaman phpMyAdmin. kemudian buat database yang akan
digunakan oleh Wordpress yang akan diinstal. Cukup tulis nama database
yang akan digunakan pada kotak di bawah tulisan "Create new database".
Misalkan diberi nama "belajar_Wordpress". Kemudian klik tombol "Create"
yang ada di sebelah kanannya.
6. Masih pada web browser, ketikkan juga alamat "http://localhost/wordpress"
pada address bar. Perhatikan bahwa alamat tersebut bergantung pada
penamaan folder yang diberikan pada langkah 4. Akan muncul tampilan
Wordpress error seperti gambar di bawah ini karena belum terdapat file
bernama wp-confic.php. File tersebut merupakan file yang berisi penganturan
(konfigurasi) untuk web Wordpress. Untuk membuat file konfigurasi tersebut,
klik tombol yang bertuliskan "Create a Configuration File".
Install Wordpress di Localhost | http://puskom.unri.ac.id Page 8
7. Selanjutnya akan muncul halaman "Setup Configuration File" seperti berikut
ini. Klik tombol yang bertuliskan "Let's Go!".
8. Akan muncul halaman untuk konfigurasi :
Dabase Name : isi dengan nama yang telah dibuat pada langkah 5.
User Name : isi dengan username yang punya akses untuk masuk ke
dalam sistem phpMyAdmin pada server yang digunakan. Secara default
biasanya usernamenya adalah "root".
Password : jika phpmyadmin mempunyai password masukkan password,
untuk sementara password phpmyadmin secara default kosong.
Database Host : karena kita menyimpan/menghosting web pada
localhost, maka isi dengan "localhost".
Table Prefix : digunakan untuk mengunikkan tabel pada database
"belajar_wordpress". Untuk sementara gunakan yang default, yaitu "wp_".
Seteleh itu klik tombol “Submit”.
9. Jika pengaturan sudah benar, maka akan muncul halaman seperti di bawah ini.
Klik tombol “Run the install”.
10. Selanjutnya akan diminta halaman untuk mengisi informasi tentang web yang
akan dibuat. Ketikkan sesuai data yang diinginkan, setelah itu klik tombol
“Install Wordpress”
Install Wordpress di Localhost | http://puskom.unri.ac.id Page 10
11. Setelah instalasi sukses dijalankan, silahkan klik tombol “login”
12. Ketikkan username dan password untuk masuk kehalaman admin.
13. Selanjutnya akan muncul tampilan seperti dibawah ini.
14. Untuk melihat hasil web yang telah dibuat ketikkan alamat :
http://localhost/wordpress
Install Wordpress di Localhost | http://puskom.unri.ac.id Page 12
15. Instalasi Wordpress telah berhasil.
Penggunaan Wordpress | http://puskom.unri.ac.id Page 13
C. Penggunaan Wordpress
Mengenal bagian-bagian Wordpress Sebelum mulai menggunakan Wordpress yang telah terinstall, ada baiknya
mengenali terlebih dahulu bagian-bagian dari Wordpress serta istilah-istilah yang
akan digunakan. Sebagai contoh disini memakai themes default dari Wordpress.
Tampilan tiap themes tentu bermacam-macam, jadi untuk sementara digunakan
themes default.
A
C
D
E
C1
C4
C2
B
C3
Penggunaan Wordpress | http://puskom.unri.ac.id Page 14
Berikut keterangan dari gambar diatas :
A. Header : Tempat meletakkan judul, keterangan singkat maupun gambar
tentang blog.
B. Menu : Menampilkan menu.
C. Content : Tempat munculnya artikel-artikel blog. Pada halaman utama
secara default akan muncul artikel-artikel terbaru lengkap
dengan Judul artikel yang memiliki link ke artikel tersebut.
C1 : Judul artikel
C2 : Komentar artikel
C3 : Kategori artikel
C4 : Tanggal dibuat artikel
D. Sidebar : Menampilkan kumpulan link, dan aneka fasilitas. Di area ini bias
diletakkan informasi apa saja. Mulai form pencarian, daftar
halaman statis (Pages), Arsip (Archives), Category (Kategori),
Kumpulan Link (Blogroll), Meta, dan lain-lain.
E. Footer : Informasi bagian kaki blog, biasanya berisi link RSS artikel dan
komentar, serta informasi kecil mengenai blog.
Login Admin Untuk mengelola Wordpress, maka anda harus dikenali sebagai admin oleh
Wordpress. Oleh karena itu anda harus login ke Admin Panel. Ada tiga cara
untuk mengakses Admin Panel :
a. Melalui URL : http://localhost/wp-login.php
b. Melalui URL : http://localhost/wp-admin
c. Mengklik link Login yang ada di sidebar.
Penggunaan Wordpress | http://puskom.unri.ac.id Page 15
Berikutnya, masukkan username dan password
pada form yang tersedia. Selanjutnya cukup
mengklik tombol Login dan anda akan masuk ke
Dashboard Admin Panel.
Diatas merupakan gambar dari dashboard admin panel wordpress.
Pengelolaan Tulisan (Posts) a. Membuat Tulisan
1. Klik [Post] pada sisi kiri halaman
2. Pilih [Add New]
3. Tulis judul dari artikel
Penggunaan Wordpress | http://puskom.unri.ac.id Page 16
4. Tulis isi artikel pada kotak kosong di mana Anda bisa
memasukkan tulisan, link ke gambar, dan informasi apapun yang
ingin Anda tampilkan di situs Anda. Anda dapat menggunakan
baik Visual atau tampilan Teks untuk menulis posting Anda.
5. Pilih Categories (Kategori berfungsi untuk mengelompokan
beberapa tulisan berdasarkan isi atau tema dari tulisan. Hal ini
agar pengunjung blog mudah untuk melakukan pencarian dan
menemukan konten suatu tulisan pada blog).
Klik [+ Add New Category], Kumudian tulis nama kategori
yang akan di buat untuk tulisan anda.
6. Pilih Tags (Tag adalah semacam penggolongan tulisan. Di
WordPress sendiri terdapat 2 jenis penggolongan tulisan, yaitu
kategori dan tag. Penggolongan tag lebih spesifik. Contoh bila
anda membuat tulisan tentang “About Wordpress”, maka tag yang
buat adalah “WordPress”).
Tulis nama tag yang ingin dibuat dan klik [Add]
7. Setelah selesai, klik tombol [Publish]
Tulis Judul Artikel 3 1 2
Isi Artikel 4
5
6
7
Penggunaan Wordpress | http://puskom.unri.ac.id Page 17
Untuk melihat hasilnya klik [view post]
b. Merubah Tulisan
1. Klik [Post] pada sisi kiri halaman
2. Setelah tampil halaman ‘Posts’, silahkan pilih tulisan yang ingin
anda lakukan pengeditan dengan cara mengklik link [Edit].
Penggunaan Wordpress | http://puskom.unri.ac.id Page 18
3. Setelah muncul halaman ‘Edit Post’, lakukan pengeditan tulisan
yang telah anda buat sebelumnya dan setelah selesai klik tombol
[Update]
c. Menghapus Tulisan
1. Klik [Post] pada sisi kiri halaman
2. Setelah tampil halaman ‘Posts’, silahkan centang √ tulisan yang
ingin dihapus dan klik menu [Move to Trash] dan klik tombol
[Apply].
3. Tulisan akan terhapus, jika ingin mengembalikannya lagi klik
[Trash]. d. Menyisipkan Gambar Di Dalam Tulisan
1. Klik [Post] pada sisi kiri halaman
2. Pilih [All Posts]
Penggunaan Wordpress | http://puskom.unri.ac.id Page 19
3. Pilih tulisan yang ingin disisipkan gambar, klik [Edit]
4. Pilih tombol [Add Media]
5. Pada tab ‘Insert Media’ klik tombol [Select Files] untuk
mengambil gambar di dalam komputer anda.
Penggunaan Wordpress | http://puskom.unri.ac.id Page 20
6. Setelah gambar berhasil ter-upload akan tampil menu pengaturan
sebagai berikut :
7. Lakukan pengaturan jika menginginkannya atau langsung klik saja
tombol [Insert Into Post] untuk menyisipkan gambar di dalam
tulisan.
8. Untuk mengatur tata letak gambar klik gambar kemudian klik [Edit Image].
Penggunaan Wordpress | http://puskom.unri.ac.id Page 21
9. Setelah itu atur tata letak gambar sesuai keinginan Anda dan klik
[Update].
Penggunaan Wordpress | http://puskom.unri.ac.id Page 22
Penggunaan Wordpress | http://puskom.unri.ac.id Page 23
10. Setelah selesai, klik tombol [Update] bila ingin melihat hasilnya
klik tombol [View Post].
e. Menyisipkan Video Youtube Di Dalam Tulisan
1. Klik [Post] pada sisi kiri halaman
2. Pilih [All Posts]
3. Pilih tulisan yang ingin disisipkan video youtube, klik [Edit]
Penggunaan Wordpress | http://puskom.unri.ac.id Page 24
4. Kemudian pilih video youtube yang di ingin disisipkan, klik kanan
pada video yang dipilih kemudian pilih [Copy embed html].
5. Setelah itu pilih tampilan Text pada tulisan, dan masukkan kode
program yang telah di copy di video youtube diatas.
Penggunaan Wordpress | http://puskom.unri.ac.id Page 25
6. Klik [Update] dan Klik [View Post]
Penggunaan Wordpress | http://puskom.unri.ac.id Page 26
Pengelolaan halaman (Pages) Pembuatan halaman baru pada blog umumnya digunakan untuk
manampilkan informasi-informasi singkat seperti profil penulis, buku tamu
dan informasi lain yang ingin ditampilkan dalam waktu yang lama dan
bersifat permanen.
a. Membuat Halaman :
1. Klik [Pages] pada sisi kiri halaman dasboard 2. Pilih [Add New] 3. Tulis judul dari halaman
4. Tulis isi halaman
5. Setelah selesai klik tombol [Publish]
Untuk melihat hasilnya klik [view page]
Tulis Judul Halaman 3
Tulis Isi Halaman 4
1 2
5
Penggunaan Wordpress | http://puskom.unri.ac.id Page 27
b. Merubah halaman
1. Klik [Pages] pada sisi kiri halaman dasboard
2. Setelah itu akan tampil halaman ‘Pages, silahkan pilih halaman
yang dirubah dengan cara mengklik link [Edit].
Penggunaan Wordpress | http://puskom.unri.ac.id Page 28
3. Setelah muncul halaman ‘Edit Page’ lakukan perubahan
terhadap halaman yang telah anda buat sebelumnya dan setelah
selesai klik tombol [Update]
c. Menghapus Halaman
1. Klik [Pages] pada sisi kiri halaman dasboard
2. Setelah itu tampil halaman ‘Pages’ silahkan centang √ halaman
yang ingin dihapus dan klik menu [Move to Trash] dan klik
tombol [Apply].
3. Tulisan akan terhapus, jika ingin mengembalikannya lagi klik
[Trash].
Penggunaan Wordpress | http://puskom.unri.ac.id Page 29
Pengelolaan Tampilan (Appearance) Secara default saat menginstall wordpress, wordpress menggunakan themes
‘Twenty Twelve‘. Wordpress memiliki banyak themes baik secara gratis
maupun berbayar. Bila themes tersebut tidak sesuai dengan selera anda dan
anda ingin menggantinya. Berikut cara mengganti themes :
a. Mengganti Tampilan Website (Themes)
1. Klik [Appareance] pada sisi kiri halaman dashboard
2. Setelah itu tampil halaman ‘Manage Themes’.
3. Dalam halaman ‘Manage Themes’.
Pilih themes sesuai dengan
keinginan anda. Sebelum memilih
themes yang akan diaktifkan
sebaiknya anda pilih [Live Preview] untuk melihat hasil dari themes
tersebut, setelah anda yakin klik
[tombol save and activate].
Penggunaan Wordpress | http://puskom.unri.ac.id Page 30
4. Jika ingin menginstall themes yang sudah anda download
sebelumnya, pilih tab [Install Themes], klik [Upload] [Browse][Install Now].
5. Tunggu sampai proses install selesai, setelah itu akan mucul
halaman themes yang telah diinstall, pilih [Live Preview] jika
ingin melihat hasil dari themes tersebut dan pilih [Activate] jika
ingin menggunakannya atau [return to Themes page] untuk
tidak menggunakannya sekarang.
Penggunaan Wordpress | http://puskom.unri.ac.id Page 31
b. Mengatur Widgets Di Sidebar
Sidebar adalah tempat untuk menampilkan kumpulan link, dan aneka
fasilitas. Di area ini bisa diletakkan informasi apa saja, seperti form
pencarian, daftar halaman statis (Pages), Arsip (Archives), Category
(Kategori), Kumpulan Link (Blogroll), Meta, dan lain-lain.
Beberapa widget memudahkan bagi pengunjung untuk menemukan
konten yang spesifik pada situs Anda, untuk menggunakan widget
sebagai berikut :
1. Klik [Appareance] pada sisi kiri halaman dashboard
2. Setelah itu pilih [Widgets] 3. Dalam halaman ‘Widgets’ tarik widget yang ingin diletakkan ke
modul sidebar sebelah kanan.
Penggunaan Wordpress | http://puskom.unri.ac.id Page 32
c. Mengatur Menu (Menus)
Navigasi menu memungkinkan untuk merubah urutan halaman,
membuat submenu dan mengatur beberapa halaman dengan
membuat kategori. Berikut langkah-langkah untuk membuat menu :
1. Klik [Appareance] pada sisi kiri halaman dashboard
2. Setelah itu pilih [Menus], akan muncul halaman ‘Menus’
Penggunaan Wordpress | http://puskom.unri.ac.id Page 33
3. Membuat menu, ketik nama yang ingin dibuat dan klik tombol
[Create Menu].
4. Menambahkan link kustom (Custon Link), ketik URL, nama label
dan kemudian klik tombol [Add to Menu].
5. Menambahkan halaman (Pages) ke menu, silahkan centang √
halaman yang ingin dimasukkan dan kemudian klik tombol [Add to Menu].
6. Menambahkan ketegori (Categories) ke menu, silahkan centang
√ kategori yang ingin dimasukkan dan kemudian klik tombol [Add to Menu].
Penggunaan Wordpress | http://puskom.unri.ac.id Page 34
7. Merubah urutan menu dan membuat sub-menu. Drag dan drop
item keatas dan kebawah sesuai dengan urutan menu. Drag dan
drop item kekiri dan kekanan untuk membuat sub-menu.
Kemudian klik tombol [Save Menu].
Hasilnya sepeti berikut :
d. Mengganti Gambar Header
Header adalah komponen yang penting di dalam blog. Dengan
adanya gambar header, dapat mencerminkan isi dari blog yang dibuat,
serta menarik pangunjung untuk tahu lebih dalam isi dari blog kita
Penggunaan Wordpress | http://puskom.unri.ac.id Page 35
dengan melihat adanya gambar header tersebut. Bila ingin mengganti
header default anda dengan gambar pilihan anda, berikut langkah-
langkahnya :
1. Klik [Appareance] pada sisi kiri halaman dashboard
2. Setelah itu pilih [Header] 3. Akan muncul halaman ‘Custom Header’ pilih tombol [Browse]
untuk memilih gambar pada komputer anda, setelah itu klik
[Upload].
4. Setelah itu akan muncul halaman ‘Crop Header Image’ pilih
tombol [Crop and Publish].
5. Setelah dipilih ‘Crop and Publish’ klik tombol [Save Changes],
untuk melihat hasilnya pilih [Visite Site] disebelah kiri atas
dashboard.
Penggunaan Wordpress | http://puskom.unri.ac.id Page 36
Daftar Pustaka | http://puskom.unri.ac.id Page 37
Daftar Pustaka
Wordpress (2013). Writing Post. Diakses 19 Februari 2013, http://codex.wordpress.org/Posts.
----------------------. Pages. Diakses 20 Februari 2013, http://codex.wordpress.org/Pages.
----------------------. Using Themes. Diakses 20 Februari 2013, http://codex.wordpress.org/Themes.
----------------------. Get The Most From WordPress.com. Diakses 21 Februari 2013, http://learn.wordpress.com.
Top Related