Top Banner
Tutorial CMS WordPress 3 Oleh : Musa Amin http://musaamin.web.id Makassar, 9 Agustus 2010
35

Tutorial CMS WordPress 3

Jan 13, 2015

Download

Software

musaamin

 
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Tutorial CMS WordPress 3

 

Tutorial CMS WordPress 3 

 

  

 

 

Oleh : Musa Amin 

http://musaamin.web.id  

Makassar, 9 Agustus 2010 

   

Page 2: Tutorial CMS WordPress 3

Software yang dibutuhkan 

1. Webserver XAMPP download di http://www.apachefriends.org/en/xampp‐windows.html 2. CMS Wordpress download di http://wordpress.org/latest.tar.gz. 

  

Install XAMPP 

Jalankan file instalasi XAMPP, kemudian pilih drive/harddisk yang akan menjadi lokasi web server misalnya C:\ atau D:\ setelah itu klik Extract.  

 

Gambar Memilih Lokasi Ekstrak File  

 

Gambar Proses Ektrak File 

Setelah proses ekstrak selesai, maka webserver siap untuk dijalankan. Masuk ke lokasi folder XAMPP kemudian jalankan file xampp‐control.exe. Server yang harus dijalankan yaitu Apache dan MySQL.  

Page 3: Tutorial CMS WordPress 3

 

Gambar XAMPP Control 

Untuk mengetes apakah server Apache sudah berjalan dengan baik akses http://localhost menggunakan web browser.  Jika muncul halaman XAMPP maka apache sudah aktif.  

 

Gambar Tampilan Awal XAMPP setelah Instalasi 

Sedangkan untuk mengetes server MySQL akses http://localhost/phpmyadmin, jika tampilannya seperti gambar di bawah ini maka server MySQL sudah jalan.  

Page 4: Tutorial CMS WordPress 3

 

Gambar phpMyAdmin 

Install WordPress 

1. Extract master wordpress yang sudah didownload ke dalam folder xampp/htdocs.  

 

Gambar Winrar ‐ Extract CMS Wordpress 

   

Page 5: Tutorial CMS WordPress 3

2. Sebelum melakukan proses install wordpress dibuatkan dulu databasenya. Akses http://localhost/phpmyadmin. 

3. Buat database  dengan nama “wordpress”, lalu klik Create 

 

Gambar phpMyAdmin – Membuat Database 

 

Gambar Pesan Database sukses dibuat 

4. Akses http://localhost/wordpress 5. Klik “Create a Configuration File” 

 

6. Klik “Let’s go!” 

Page 6: Tutorial CMS WordPress 3

 7. Setting koneksi database : 

a. Database name = nama database yang sudah dibuat di phpmyadmin; wordpress b. User Name = username database; root c. Password = password database; kosongkan saja d. Database host = server database; localhost e. Klik “Submit” 

 Gambar Setting Koneksi Database 

 Instalasi standar XAMPP username=root dan password=tidak ada 

 8. Klik “Run the install” 

 

Page 7: Tutorial CMS WordPress 3

Gambar Run The Install 

9. Settingan blog a. Site Title : judul website b. Username : username untuk admin blog c. Password : password untuk admin blog d. Masukkan ulang password e. Your E‐mail : alamat email f. Klik Install WordPress 

 

Gambar Settingan Blog 

10. Jika sukses akan muncul pesan seperti gambar dibawah ini 

   

Page 8: Tutorial CMS WordPress 3

 

Gambar Pesan Install WordPress Sukses 

• Untuk melihat halaman depan blog/frontpage akses http://localhost/wordpress 

 

Gambar Login Admin WordPress 

   

Page 9: Tutorial CMS WordPress 3

• Untuk login admin WordPress akses http://localhost/wordpress/wp‐admin atau http://localhost/wordpress/wp‐login.php 

 

Gambar Halaman Depan/Frontpage WordPress 

   

Page 10: Tutorial CMS WordPress 3

Post /Artikel 

Membuat Post 

1. Masuk di admin wordpress, klik menu Posts Add New 

 

Gambar Menu Posts Add New 

2. Mengisi form post a. Masukkan judul post b. Masukkan isi post 

 

 Gambar Editor Post 

 c. Pilih kategori post, kategori bisa lebih dari satu. Jika kategori belum ada tambah 

kategori baru dibagian Add New Category lalu klik Add New Category. 

Page 11: Tutorial CMS WordPress 3

 

Gambar Form Kategori Post 

d. Masukkan tag/keyword yang berhubungan dengan isi artikel. Tag bisa lebih dari satu dibatasi dengan koma (contoh: iphone, flash player) lalu klik Add. 

 

 Gambar Form Tag 

e. Klik Publish 

 Gambar Option Publish 

  

Page 12: Tutorial CMS WordPress 3

 Gambar Hasil Postingan 

  Membuat Postingan Bergambar  1. Buat postingan baru, masukkan judul 2. Klik icon Add Image pada Upload/Insert 

 

Gambar Icon Add Image 

3. Klik tombol Select Files, lalu browse file gambar yang akan digunakan 

Page 13: Tutorial CMS WordPress 3

J

 

4. Sit

5. Gis

Jika sudah pInsert Into P

Setelah gamtu klik InsertGambar yangsi postingan

pernah mengPost. 

G

bar selesai dt Into Post g telah diupl. 

Gam

gupload gam

ambar Uplo

diupload, pil

load telah m

mbar Editor P

mbar maka c

Gam

ad File dari K

ih posisi alig

masuk di edit

Postingan be

ukup memil

mbar Gallery

 

Komputer 

gnment agar

tor postingan

erisi gambar

ih gambarda

 postingan le

n tinggal me

ari Gallery, k

 

ebih rapi. Se

elanjutkan m

 

klik Show lalu

etelah 

mengetik 

u klik 

 

Page 14: Tutorial CMS WordPress 3

 

Gambar Postingan memakai gambar 

Membuat Postingan Download File 

1. Klik icon Add Media pada Upload/Insert 

 

Gambar Icon Add Media 

2. Klik Select Files, lalu Open file yang akan diupload 

 

Gambar Upload File 

3. Setelah proses upload selesai, klik Insert into Post 

Page 15: Tutorial CMS WordPress 3

 

Gambar Add Media 

 

Gambar Editor Postingan berisi Link File 

 

 

Gambar Postingan berisi Link Download File 

   

Page 16: Tutorial CMS WordPress 3

Info : 

Semua file yang diupload akan tersimpan di folder xampp\htdocs\wordpress\wp‐content\uploads. 

Menambahkan Fungsi More pada Postingan 

Penggunaan fungsi More pada postingan bertujuan agar postingan yang terlalu panjang bisa dipotong dan untuk membaca versi lengkapnya harus mengklik Read More atau judul postingan. 

1. Buat postingan seperti biasa, masukkan judul dan isi postingan 2. Tentukan dimana batasan intro postingan lalu klik tombol Insert more tag pada toolbar 

editor maka akan muncul tanda More … 

 

Gambar Editor Postingan berisi link Read More 

 

Gambar Postingan memakai Read More 

 

Page/Halaman 

Membuat Page 

Untuk membuat Page klik menu Pages Add New. Cara membuat Page sama saja dengan membuat Post namun ada beberapa perbedaannya : 

Page 17: Tutorial CMS WordPress 3

1. Page tidak memiliki category dan tag 2. Page akan menjadi sebuah menu agar bisa dibaca 

 

Gambar Page About 

 

Comment / Komentar 

Komentar/respon yang diberikan oleh pengunjung pada postingan atau page. Untuk memberi komentar harus memasukkan nama dan alamat email dan isi komentar 

 

Gambar Form Comment 

Page 18: Tutorial CMS WordPress 3

 

Gambar Contoh Komentar pada post Hello world! 

Mengatur Comment 

Menampilkan komentar klik menu Comments 

 

Gambar Menu Comments 

 

Gambar Daftar Comments 

Status : 

• All : semua komentar 

• Pending : komentar yang belum disetujui untuk ditampilkan 

Page 19: Tutorial CMS WordPress 3

• Approved : komentar yang sudah disetujui  

• Spam : komentar spam/iklan 

• Trash : komentar dalam tempat sampah 

Detail Comment : 

• Author : nama penulis komentar serta alamat websitenya 

• Comment : waktu penulisan komentar, dan isi komentarnya o Unapprove : tidak menyetujui komentar untuk ditampilkan o Reply : balas komentar o Quick Edit : edit komentar pada editor sederhana o Edit : edit komentar pada editor lengkap o Spam : jadikan sebagai komentar spam o Trash : masukkan di tempat sampah 

Membalas Komentar 

1. Klik Reply 2. Isi Komentar 3. Klik Submit Reply 

 

Gambar Membalas Komentar 

 

Page 20: Tutorial CMS WordPress 3

 

Gambar Komentar yang dibalas 

 

Links 

Links : daftar alamat website/blog.  

Instalasi standar wordpress menyertakan contoh Links dengan nama kategori Blogroll. 

 

Gambar Menu Links 

• Links : daftar Links 

• Add New : tambah Link baru 

• Links Categories : kategori link 

Page 21: Tutorial CMS WordPress 3

 

Gambar Daftar Links 

• Name : nama website 

• URL : alamat website 

• Categories : kategori website 

• Edit : ubah link 

• Delete : hapus link 

Link Categories 

Sebelum membuat Links dibuat dulu kategorinya. Klik menu Links   Link Categories. 

 

Gambar Form Link Category 

Page 22: Tutorial CMS WordPress 3

1. Link Category Name : nama kategori 2. Klik Add Category 

Setelah kategori ditambah maka daftar kategori link yang berada disebelah kanan form tambah link category akan terupdate. 

 

Gambar Daftar Link Categories 

 

 

Menambah Link 

Setelah membuat kategori link langkah selanjutnya membuat link. Klik menu Links Add New. 

 

Gambar Form Add New Link 

1. Name : masukkan nama website 2. Web Address : masukkan alamat website, harus memakai http:// 3. Categories : pilih kategori 4. Klik tombol Add Link 

Page 23: Tutorial CMS WordPress 3

 

Gambar Daftar Links 

 

Menampilkan Links Blog 

1. Klik menu Appearance Widgets 

 

Gambar Menu Appearance 

2. Drag widget Links Primary Widget Area 

 

Gambar Daftar Widget 

3. Pilih kategori link  

Page 24: Tutorial CMS WordPress 3

4. Klik Save 

 

Gambar Primary Widget Area 

 

Gambar Widget Links 

 

Appearance 

Appearance : settingan untuk pengaturan tampilan wordpress 

Themes 

Themes : tampilan/skin wordpress 

Menambah/Menginstall Themes 

1. Klik menu Appearance Themes 

Page 25: Tutorial CMS WordPress 3

2. Klik tab Install Themes 3. Klik Upload 4. Browse file theme dalam format .zip 5. Klik Install Now 6. Setelah install theme sukses, klik Activate untuk mengaktifkan theme yang baru saja diinstall 

 

Gambar Upload Theme 

 

Gambar pesan install theme sukses 

 

Page 26: Tutorial CMS WordPress 3

 

Gambar WordPress memakai theme Mystique 2.4.2 

Info : 

• Download theme wordpress gratis di http://wordpress.org/extend/themes/ 

• Lokasi folder themes di wp‐content\themes 

   

Page 27: Tutorial CMS WordPress 3

Widget 

Widget : tool/fitur yang ditampilkan pada sidebar theme. Pada pembahasan link telah diberikan contoh mengenai widget Links yang berfungsi untuk menampilkan daftar Links. 

Mengatur widget klik menu Appearance Widgets 

 

Gambar Daftar Widget 

Memasang Widget  

1. Drag salah satu widget ke salah satu posisi widget 2. Klik tombol Save pada settingan widget 

Page 28: Tutorial CMS WordPress 3

 

Gambar Widget 

• Search : menampilkan form pencarian 

• Categories : menampilkan kategori post 

• Recent Posts : menampilkan post terbaru 

• Recent Comments : menampilkan komentar terbaru 

• Tags : menampilkan tag post 

 

   

Page 29: Tutorial CMS WordPress 3

Plugin 

Plugin : tools/fitur tambahan untuk memaksimalkan wordpress.  

Akismet  

Akismet : plugin antispam. Komentar yang dideteksi oleh Akismet sebagai spam akan di set statusnya sebagai Spam. 

1. Klik menu Plugins 

 Gambar Menu Plugins 

 2. Aktifkan plugin Akismet dengan mengklik Acitvate 

 

Gambar Menu Plugin Akismet 

 

3. Setelah plugin Akismet diaktifkan akan muncul pesan untuk memasukkan API Key Akismet. Untuk mendapatkan API Key Akismet daftar di https://akismet.com/signup/#free‐api‐key. 

 

Gambar Pesan Aktifasi Plugin Akismet Sukses 

4. Setelah mendapatkan API Key Akismet masukkan key tersebut melalui menu Akismet Configuration. Beri cek pada Automatically discard spam comments on posts older than a month. lalu klik Update Options. 

 

Page 30: Tutorial CMS WordPress 3

 

Gambar Form Input Akismet API Key 

  Jika API Key cocok akan muncul pesan Your key has been verified. Happy blogging!. 

Menginstall Plugin 

1. Klik menu Plugins Add New 2. Klik Upload 3. Browse file plugin (format .zip) 4. Klik Install Now 

 

Gambar Form Install Plugins 

5. Setelah proses intall plugin selesai akan muncul pesan seperti gambar di bawah. Klik Activate Plugin untuk mengaktifkan plugin. 

 

Gambar Pesan Install Plugin Sukses 

 

Page 31: Tutorial CMS WordPress 3

Info : 

• Download plugin wordpress di http://wordpress.org/extend/plugins/ 

• Lokasi folder plugin wp‐content\plugins 

 

Mengganti Password Administrator 

1. Klik menu Users Your Profile 

 

Gambar Menu Users 

2. Masukkan password baru pada New Password 3. Klik Update Profile 

 

Gambar Form Ganti Password 

 

Upload WordPress ke Web Hosting 

Backup Database 

1. Akses http://localhost/phpmyadmin 2. Klik nama database wordpress yang digunakan 

Page 32: Tutorial CMS WordPress 3

 

Gambar phpMyAdmin 

3. Klik Export 

 

Gambar phpMyAdmin ‐ Export Database 

4. Cek Save as File 5. Klik Go 

Page 33: Tutorial CMS WordPress 3

 

Gambar phpMyAdmin – Export Database 

6. Save File, OK 

 

Gambar Download File wordpress.sql 

 

Import Database dan Upload File WordPress 

Import Database 

1. Login ke Control Panel hosting 2. Buat database, set username dan password databasenya 3. Login ke phpMyAdmin web hosting 4. Klik Import 5. Browse file .sql hasil backup database 6. Klik Go 

Page 34: Tutorial CMS WordPress 3

 

Gambar phpMyAdmin – Import Database 

Jika proses import database sukses muncul pesan “Import has been successfully finished”. 

7. Klik tabel wp_options 

 

Gambar phpMyAdmin – Daftar Tabel 

8. Edit option_value dari option_name siteurl dan option_value dari option_name menjadi nama 

dengan mengklik icon  . 

Page 35: Tutorial CMS WordPress 3

 

Gambar phpMyAdmin – Browse tabel wp_options 

9. Masukkan nama domain (pakai http://)pada option_value, lalu klik Go 

 

Gambar phpMyAdmin – Edit Data 

Upload File 

1. Upload file wordpress ke webserver menggunakan software ftp client seperti filezilla client. 2. Edit file wp‐config.php : 

• define('DB_NAME', 'nama_database'); 

• define('DB_USER', 'username_database'); 

• define('DB_PASSWORD', 'password_database'); 

Setelah melakukan proses import database dan upload file saatnya mencoba mengakses wordpress yang sudah online, akses domain yang digunakan. Jika belum berhasil periksa kembali apakah settingan database dan file wp‐config.php sudah cocok. 

 

Selamat ber‐WordPress