Modul Pembuatan Website Menggunakan Wordpress

39
Modul Pembuatan Website Menggunakan Versi 3.5.1 Divisi Web Puskom UR http://puskom.unri.ac.id Oleh: 07 - 08 Mei 2013 Design : www.mhdsyarif.p.ht

description

Wordpress versi 3.5.1

Transcript of Modul Pembuatan Website Menggunakan Wordpress

Page 1: Modul Pembuatan Website Menggunakan Wordpress

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

Page 2: Modul Pembuatan Website Menggunakan Wordpress

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

Page 3: Modul Pembuatan Website Menggunakan Wordpress

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].

Page 4: Modul Pembuatan Website Menggunakan Wordpress

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.

Page 5: Modul Pembuatan Website Menggunakan Wordpress

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.

Page 6: Modul Pembuatan Website Menggunakan Wordpress

Install XAMPP | http://puskom.unri.ac.id Page 4

10. Setelah itu akan muncul halaman seperti dibawah ini.

Page 7: Modul Pembuatan Website Menggunakan Wordpress

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".

Page 8: Modul Pembuatan Website Menggunakan 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.

Page 9: Modul Pembuatan Website Menggunakan Wordpress

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".

Page 10: Modul Pembuatan Website Menggunakan Wordpress

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”.

Page 11: Modul Pembuatan Website Menggunakan Wordpress

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”

Page 12: Modul Pembuatan Website Menggunakan Wordpress

Install Wordpress di Localhost | http://puskom.unri.ac.id Page 10

11. Setelah instalasi sukses dijalankan, silahkan klik tombol “login”

Page 13: Modul Pembuatan Website Menggunakan Wordpress

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

Page 14: Modul Pembuatan Website Menggunakan Wordpress

Install Wordpress di Localhost | http://puskom.unri.ac.id Page 12

15. Instalasi Wordpress telah berhasil.

Page 15: Modul Pembuatan Website Menggunakan Wordpress

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

Page 16: Modul Pembuatan Website Menggunakan Wordpress

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.

Page 17: Modul Pembuatan Website Menggunakan Wordpress

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

Page 18: Modul Pembuatan Website Menggunakan Wordpress

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

Page 19: Modul Pembuatan Website Menggunakan Wordpress

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].

Page 20: Modul Pembuatan Website Menggunakan Wordpress

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]

Page 21: Modul Pembuatan Website Menggunakan Wordpress

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.

Page 22: Modul Pembuatan Website Menggunakan Wordpress

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].

Page 23: Modul Pembuatan Website Menggunakan Wordpress

Penggunaan Wordpress | http://puskom.unri.ac.id Page 21

9. Setelah itu atur tata letak gambar sesuai keinginan Anda dan klik

[Update].

Page 24: Modul Pembuatan Website Menggunakan Wordpress

Penggunaan Wordpress | http://puskom.unri.ac.id Page 22

Page 25: Modul Pembuatan Website Menggunakan Wordpress

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]

Page 26: Modul Pembuatan Website Menggunakan Wordpress

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.

Page 27: Modul Pembuatan Website Menggunakan Wordpress

Penggunaan Wordpress | http://puskom.unri.ac.id Page 25

6. Klik [Update] dan Klik [View Post]

Page 28: Modul Pembuatan Website Menggunakan Wordpress

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

Page 29: Modul Pembuatan Website Menggunakan Wordpress

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].

Page 30: Modul Pembuatan Website Menggunakan Wordpress

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].

Page 31: Modul Pembuatan Website Menggunakan Wordpress

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].

Page 32: Modul Pembuatan Website Menggunakan Wordpress

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.

Page 33: Modul Pembuatan Website Menggunakan Wordpress

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.

Page 34: Modul Pembuatan Website Menggunakan Wordpress

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’

Page 35: Modul Pembuatan Website Menggunakan Wordpress

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].

Page 36: Modul Pembuatan Website Menggunakan Wordpress

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

Page 37: Modul Pembuatan Website Menggunakan Wordpress

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.

Page 38: Modul Pembuatan Website Menggunakan Wordpress

Penggunaan Wordpress | http://puskom.unri.ac.id Page 36

Page 39: Modul Pembuatan Website Menggunakan Wordpress

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.