1
(Asas & Pertengahan)
Ditulis oleh Zaki Yusof
Trainer bertauliah PSMB (TTT/4526)
Trainer berpengalaman WordPress dan Joomla!
EBOOK INI ADALAH PERCUMA
BOLEH sebarkan ebook ini untuk manfaat masyarakat sedunia. Tidak boleh DIJUAL / BELI.
2
Panduan Menggunakan Ebook Ini
1) Untuk keselesaan dan kesan yang lebih optima, sila print manual panduan ini semasa membuat rujukan.
2) Sila ikut langkah demi langkah mengikut urutan. Saya telah mengujinya pada beberapa orang dan ia berkesan dan mereka berjaya membinanya.
3) Sila gunakan senarai Isi Kandungan untuk kemudahan merujuk.
4) Senarai isi kandungan mempunyai hyperlink / pautan. Anda boleh klik sahaja pada senarai Isi Kandungan untuk terus ke mukasurat yang diinginkan
(sekiranya dalam ebook ini).
Bantuan Sokongan
Ebook ini TIDAK menyediakan bantuan sokongan. Saya mencadangkan anda boleh mencari di forum / google / youtube jika terdapat sebarang masalah berkenaan WordPress.
Hakcipta Ebook Ini
Ebook ini dimiliki, ditulis dan disediakan oleh Zaki Yusof.
FB Page: Bengkel Laman Web
FB Profile: Zaki JTC
Saya gembira jika anda berjaya menghasilkan laman web menggunakan ebook ini. Sila sebarkan kepada kawan / rakan sekerja / sesiapa sahaja.
KOMEN / CADANGAN
Sila emelkan maklumbalas / komen / cadangan anda FB Profile saya atau emel: [email protected]
LIVEWEBS NETWORK & TECHNOLOGY SDN. BHD.
47-1, Jalan OP 1/2, 1 Puchong Business Park,
47160 Puchong, Selangor. Malaysia. Tel: 03-80820392 , 03-80750392
019-2626101, 016-2636101, 019-2626625, 019-2207101
3
Senarai Isi Kandungan
Pengenalan ... 4
Kenapa WordPress? ... 4
Pra Persediaan Sebelum Membina Lamab Web WordPress di Internet ... 5
Di mana Membeli Domain dan Hosting Yang Terbaik? ... 5
Memasang Perisian Wordpress ... 6
Laman Web Yang Telah Siap. ... 11
Masuk ke Ruangan WordPress Admin ... 12
Settings General Wordpress ... 13
Melihat Themes / Reka Bentuk Laman Web Yang Sedang Digunakan ... 15
Memaparkan Paparan Laman Web - Themes Yang Digunakan / Hasil Perubahan ... 16
Tips Belajar WordPress ... 17
Membina Menu ... 18
Menukar Nama Menu (Contoh: Home kepada Utama) ... 20
Menambah Menu Baru / Pages ... 21
Membuang Menu Yang Tidak Perlu ... 22
Mengubah Kedudukan Menu ... 24
Membuat Sub-Menu ... 25
Widgets – Mengubahsuai / Menambah Widgets ... 26
Posts ... 28
Membuang Leave a Reply pada Pages / Posts ... 30
Memasukkan Gambar ke dalam Pages / Posts ... 32
Menukar Gambar Header ... 35
Membuat Hyperlink ... 37
Memasang / Install Theme Baru ... 38
Tips 1: Menukar Themes – Semak Menu ... 41
4
Pengenalan
Manual panduan ini adalah rujukan untuk membuat laman web menggunakan aplikasi WordPress. Di dalam panduan ini anda akan ditunjukkan cara-cara membina laman web secara praktikal dan terus membina laman web anda dengan menggunakan nama domain anda sendiri. (seperti .com / .net / .my / .com.my / .org.my / .edu.my dll)
Contohnya nama domain anda ialah www.jomtraining.com.my, maka laman web anda nanti akan memaparkan web yang telah siap anda bina.
Contoh paparan web: (Ini dipanggil web korporat / syarikat)
Lihat laman web di bawah ini menggunakan WordPress:
1. www.Teraju.gov.my (Unit Peneraju Agenda Bumiputera – TERAJU) 2. www.PUIM.my (Persatuan Usahawan Internet Malaysia – PUIM) 3. www.WangCyber.com (Portal Usahawan Internet Malaysia)
Kenapa WordPress?
Kenapa saya mencadangkan WordPress untuk membina laman web anda? Ada 3 sebab utama kenapa saya mencadangkan WordPress untuk anda:
1. WordPress adalah percuma.
2. Sangat mudah untuk menggunakannya. 3. Cepat untuk menghasilkan sebuah web.
5
Pra Persediaan Sebelum Membina Lamab Web WordPress di Internet
Anda memerlukan 3 perkara berikut sebelum boleh membina laman web di Internet. 1. Nama domain yang telah aktif (seperti .com / .net / .my / .com.my / .edu.my dll –
anda perlu membeli domain jika belum berbuat demikian.)
2. Hosting yang telah aktif. Sudah menerima info berkenaan username dan password hosting. Hosting yang akan digunakan ialah jenis Linux dengan kemudahan CPanel. (anda perlu membeli hosting jenis ini jika belum berbuat demikian)
3. Aplikasi WordPress di dalam hosting (WordPress telah disediakan oleh syarikat penyedia hosting. Kebiasaannya ia ada di dalam Fantastico, Fantastico Deluxe atau Softaculous).
Sekiranya 3 perkara utama di atas telah dipenuhi, maka anda boleh mula membina laman web WordPress. Sekiranya belum, sila beli domain dan hosting daripada syarikat di bawah.
Di mana Membeli Domain dan Hosting Yang Terbaik?
Pemilihan syarikat penyedia domain dan hosting sangat penting bagi memastikan laman web anda tiada sebarang gangguan. Kenapa saya mencadangkan syarikat penyedia hosting berikut?
Kriteria penting saya adalah:
Saya telah menggunakannya sejak 5 tahun lalu. Sangat berpuashati. Server uptimenya tinggi 99.9%. Sentiasa boleh dicapai (reliable). Supportnya 5 star (24 jam). Mudah dihubungi dan cepat maklumbalas. Harganya ekonomik. Sesuai dengan bajet dan pakej yang berbaloi. Syarikat hosting yang saya sangat cadangkan ialah:
1. Syarikat dari Malaysia : KLIK-> www.Internet-Webhosting.com 2. Syarikat dari USA : KLIK-> www.HostGator.com
(domain berakhir .my tidak boleh dibeli di Hostgator kerana ia syarikat dari luar negara. Namun boleh dibeli di Internet-Webhosting)
Saya sangat mencadangkan anda membeli domain dan hosting di syarikat yang sama (kecuali anda sudah mahir berkenaan penggunaan domain dan hosting). Sila berhubung terus dengan syarikat tersebut jika anda tidak tahu untuk membelinya (mereka sedia membantu).
6
Memasang Perisian Wordpress
1. Buka web browser (boleh menggunakan Mozilla Firefox, Google Chrome) dan taipkan nama domain anda pada ruangan URL (di atas sekali). Jangan taip pada ruangan Google Search – ia tidak akan dijumpai.
2. Anda perlu masuk ke CPanel.
Taipkan alamat CPanel anda iaitu namadomain/cpanel (semua huruf kecil) Contoh: www.jomtraining.edu.my/cpanel
Paparan seperti di atas akan diperolehi.
3. Masukkan username dan password cPanel Login yang diberikan oleh penyedia hosting anda. Biasanya anda akan menerima melalui emel. Sila hubungi pihak hosting jika anda belum menerimanya. Kemudian klik butang “Log in”.
Masukkan Username dan Password CPanel login yang diberikan syarikat hosting.
7 4. Sekiranya Log in anda berjaya, anda akan menerima paparan seperti di bawah. Kini
anda telah memasuki ruangan CPanel hosting. Inilah hosting anda.
5. Turun ke bawah, klik pada bahagian Software / Services > Fantastico De Luxe.
Klik Fantastico De Luxe Nama Domain anda
Tick dan Klik No, I’m fine. Thanks
8 Klik pada WordPress:
2 Klik New Installation Klik WordPress
9 6. Paparan berikut akan diperolehi. Ini adalah proses installation WordPress.
1
2
6 3 Masukkan username Admin
dan Password – akan digunakan untuk membina web WordPress anda nanti. Sila salin untuk mengelakkan lupa username dan password admin ini.
Biarkan saja nama domain anda. WordPress akan diinstall pada domain tersebut
Kosongkan ruangan ini.
Klik Install
4 Masukkan nickname Admin. Apa saja nama dibolehkan.
10 7. Proses Installation hampir siap.
8. Proses installation siap. Proses installation ini hanya perlu dilakukan sekali sahaja. Selepas ini tidak perlu dilakukan lagi.
9. Paparan laman web anda akan dipaparkan. Lihat mukasurat seterusnya. Klik Finish Installation
Masukkan emel anda untuk anda mempunyai salinan info proses installation tadi ke dalam kotak emel.
1
Klik Send E-mail.
11
Laman Web Yang Telah Siap.
Anda boleh melihat laman web WordPress yang telah siap dengan menaipkan nama domain selepas selesai proses install sebentar tadi.
Di bawah ini adalah paparan laman web anda:
Namun paparan web yang diperolehi mungkin tidak menarik bagi anda. Oleh itu anda perlu melakukan sedikit pengubahsuaian.
Langkah seterusnya akan ditunjukkan cara-cara melakukan pengubahsuaian dan
pembinaan laman web dengan lebih sempurna lagi seperti menukar themes (rekabentuk laman web), membina menu, sub-menu, memasukkan artikel, gambar dan sebagainya.
12
Masuk ke Ruangan WordPress Admin
1. Untuk melakukan pengubahsuan laman web, anda perlu masuk ke ruangan Admin WordPress. Caranya dengan menaipkan di URL:
namadomain/wp-admin (semua huruf kecil)
Contoh: www.jomtraining.edu.my/wp-admin Paparan di bawah akan diperolehi.
2. Sekiranya login anda berjaya, maka akan dipaparkan Dashboard.
Dashboard adalah tempat untuk anda membuat sebarang pengubahsuaian laman web seperti menukar themes, membuat menu, memasukkan artikel, memasukkan gambar dan lain-lain lagi.
Masukkan Username dan Password yang telah anda tetapkan semasa proses pemasangan (installation) WordPress sebelum ini (seperti di mukasurat 6).
13
Settings General Wordpress
1. Ini adalah LANGKAH PERTAMA sebelum anda melakukan apa-apa perubahan yang seterusnya untuk laman web anda iaitu membuat Settings. Pergi ke Dashboard.
2. Settings > General
14
3. General Setting
Taipkan Tajuk Laman Web
Masukkan Tagline
Masukkan emel anda.
2
3 1
Tukarkan TimeZone ke UTC+8 atau cari Kuala Lumpur (salah satu saja)
4
Klik Save Changes.
15
Melihat Themes / Reka Bentuk Laman Web Yang Sedang Digunakan 1. Klik pada Appearance > Themes
2. Themes yang dipaparkan secara tetapan awal ialah Twenty Fourteen
3. Menukar Themes – Activate. Untuk tujuan latihan di dalam ebook ini, kita akan menggunakan theme Twenty Thirteen
Klik Appearance dan Klik Themes
1
Klik pada Activate untuk menukar Theme
16
Memaparkan Paparan Laman Web - Themes Yang Digunakan / Hasil Perubahan
1. Buka laman web anda, taipkan URL nama domain anda dan enter. Sila taip di ruangan paling atas sekali (bukan dalam ruangan Google Search).
Contoh: www.JomTraining.edu.my (huruf kecil atau besar tidak mengapa) Paparan Theme laman web yang telah di-activate dipaparkan seperti di bawah.
2. Gunakan butang Refresh atau tekan papan kekunci F5 untuk melihat setiap kali perubahan di laman web.
Google Chrome
Mozilla Firefox
Butang Refresh (pada Google Chrome) atau tekan F5
17
Tips Belajar WordPress
1. Untuk memudahkan mempelajari WordPress peringkat asas dan pertengahan, sebaiknya anda mempelajari tajuk-tajuk berikut.
a. Membina Menu / Pages b. Membina Sub-Menu c. Widgets
d. Posts
e. Memasukkan Gambar ke dalam Pages / Posts f. Memasukkan Gambar ke Header
g. Membuat Hyperlink
h. Memasang / Install Themes yang baru i. Memasang Plugins
2. Sekiranya anda dapat menggunakan perkara di atas, bermakna anda sudah boleh membina laman web WordPress anda sendiri.
18
Membina Menu
1. Pergi ke Dashboard. Appearance > Menus
2. Menu Name
3. Menu Settings
4. Refresh Laman Web
Klik Create Menu Biarkan saja nama Menu 1
Tick kedua-duanya
Klik Save Menu
1 2 Klik Menus 1 2 3
20
Menukar Nama Menu (Contoh: Home kepada Utama)
1. Setelah anda melihat laman web anda, ada dipaparkan menu Home pada laman web. Untuk menukarkan nama menu Home kepada Utama seperti di bawah:
2. Pergi di Dashboard. Appearance > Menu
3. Refresh laman web anda.
Taipkan Utama pada ruangan Navigation Label
1
2 3 Klik Save Menu
Klik pada Custom Akan ditukar kepada
21
Menambah Menu Baru / Pages
1. Untuk membuat menu baru, anda hanya perlu membuat Pages. Pergi di Dashboard > Pages
2. Tuliskan kandungan Page dan klik Publish
3. Refresh laman web.
Nota: Page menjadi Menu kerana anda telah tick pada ruangan Auto add Pages
di Menus > Menu Settings
Klik Add New
2 1
1
2 Taipkan isi kandungan Page 3 Klik Publish Klik Pages
Taipkan Tajuk Page (akan menjadi Tajuk Menu)
22
Membuang Menu Yang Tidak Perlu
1. Pergi di Dashboard. Appearance > Menus
2. Pergi ke Menu Structure. Contohnya menu Sample Page yang ingin dibuang.
2 Klik pada tanda (arrow down) Page yang ingin dibuang. Klik Menus
23 3. Paparan di bawah akan diperolehi. Remove > Save Menu
4. Refresh laman web.
3 Klik pada Remove
24
Mengubah Kedudukan Menu
1. Pergi ke Dashboard. Appearance > Menus
2. Pergi ke bahagian (di sebelah kanan) Menu Structure. Contohnya kedudukan menu
Tentang Kami ingin di ubah iaitu di letak dihujung sekali (selepas menu Hubungi
Kami)
3. Drag & Drop menu Tentang Kami ke bawah sahaja.
4. Refresh laman web.
Drag & Drop ke bawah dan lepaskan mouse
2 Klik Save Menu
25
Membuat Sub-Menu
1. Pergi ke Dashboard. Appearance > Menus 2. Pergi ke bahagian Menu Structure.
Contohnya:
Menu Perkhidmatan Kami ingin di jadikan sebagai Sub-Menu kepada Tentang Kami
3. Drag & Drop menu Perkhidmatan Kami ke kanan untuk dijadikan Sub-Menu kepada Tentang Kami
4. Refresh laman web.
Drag & Drop ke kanan dan lepaskan mouse
1
26
Widgets – Mengubahsuai / Menambah Widgets 1. Apa itu Widgets?
Widgets akan dipaparkan di bahagian bawah, kiri, kanan, atas laman web (bergantung kepada Themes).
Contoh Widgets adalah seperti di bawah:
2. Pergi di Dashboard. Appearance > Widgets
Widgets
27 3. Paparan Widgets yang sedia ada di sebelah kiri. Ia boleh digunakan bila-bila masa
diperlukan. Paparan di kanan pula adalah Widgets yang aktif dan dipaparkan di laman web sekarang.
4. Untuk menambah Widgets di laman web. Drag & Drop sahaja widgets dari sebelah kiri ke kanan (ke dalam ruangan Main Widget Area atau Secondary Widget Area).
5. Refresh laman web. Available Widgets ialah Widgets yang telah
sedia ada di dalam Theme ini dan boleh
digunakan bila-bila masa.
Bahagian ini ialah Widgets yang akan dipaparkan di laman
web (bergantung kepada Themes)
KIRI KANAN
Drag & Drop Widgets Calendar di kiri ke kanan. Masukkan di dalam blok area widget tersebut
28
Posts
1. Apa itu Posts?
Posts ialah apa-apa saja maklumat atau coretan semasa yang anda ingin paparkan di laman web. Kegunaan posts ialah untuk menyampaikan informasi dari masa ke semasa. Ianya boleh dikatakan seperti coretan atau catatan sebuah blog. Post boleh dipaparkan di laman utama. Posts sangat bagus untuk menunjukkan laman web anda aktif (sentiasa ada info terkini) dan ianya disukai oleh enjin carian seperti Google. Contoh post seperti di bawah:
Artikel Hello Word di bawah adalah Posts (paparan di muka utama).
2. Pergi di Dashboard. Posts
Posts Terkini Hello World! Klik Posts 1
29 3. Klik Add New
4. Masukkan isi kandungan Posts
5. Refresh laman web.
Klik Add New
2
Tajuk Posts
1
Klik Publish Taipkan isi kandungan Posts
2
30
Membuang Leave a Reply pada Pages / Posts
1. Leave a Reply secara otomatik boleh terdapat pada setiap Pages dan Posts. Ianya akan dipaparkan di bahagian paling bawah sekali pada setiap Pages dan Posts. Contohnya seperti Pages Tentang Kami di bawah:
2. Anda mungkin tidak memerlukan Leave a Reply. Ianya boleh disembunyikan. Klik Pages jika anda tidak memerlukan Leave a Reply pada page tersebut.
Paparan ini mungkin tidak perlu pada pages (Tentang Kami) ini.
31 3. Paparan Quick Edit. Allow Comments > kosongkan ruangan kekotak.
4. Refresh laman web.
Biarkan kosong Uncheck Allow Comments
Klik Update
2 1
32
Memasukkan Gambar ke dalam Pages / Posts 1. Pergi ke Dashboard > Pages.
Dalam contoh ini kita akan memasukkan gambar di dalam Pages Hubungi Kami. (Cara untuk memasukkan gambar di dalam Posts adalah sama)
2. Klik butang Add Media
Letakkan cursor dimana gambar ingin diletakkan.
Klik Add Media
33 3. Insert Media.
4. Pilih gambar dari dalam PC / thumb drive yang anda ingin masukkan.
5. Klik Insert into page.
Klik Upload Files
2
Klik Select Files
3
Klik Insert into page Gambar dipaparkan
34 6. Gambar telah dipaparkan di dalam page tersebut.
7. Refresh laman web.
Klik Publish
6
Gambar berjaya dimasukkan di dalam page Hubungi Kami.
35
Menukar Gambar Header
1. Header adalah gambar (imej) yang berada paling atas dalam sesebuah laman web. Contohnya adalah seperti berikut:
Setiap header mempunyai saiz yang tertentu. Ianya bergantung kepada Themes. Contohnya untuk Themes di atas, saiz header dinyatakan adalah 1600 x 230 px. Oleh kerana kita telah membuat header dengan saiz tersebut (semasa menggunakan pixlr.com), maka kita boleh menukarkan header tersebut dengan header yang telah dibuat sebelum ini.
2. Pergi ke Dashboard. Appearance > Header. Header Laman Web
36 3. Paparan Header. Saiz header yang dinyatakan ialah 1600 x 230 pixels (px)
4. Buang tanda pada Header Text untuk menghilangkan teks bertindan (jika berlaku)
5. Refresh laman web.
Klik Choose File dan Upload
Buang tanda dalam kotak. Biarkan kosong.
Klik Save Changes
1
2
37
Membuat Hyperlink 1. Apa itu Hyperlink?
Hyperlink ialah pautan yang diletakkan pada sesuatu teks atau gambar yang mana apabila di klik padanya akan memaparkan laman web tersebut.
2. Pra Syarat sebelum membuat Hyperlink.
Anda mestilah tahu alamat laman web yang ingin di hyperlink kan. Contohnya: anda memiliki Fan Page facebook anda sendiri. Anda mesti tahu alamat FB Fan Page anda. Contoh https://www.facebook.com/jomtraining
Oleh itu anda boleh membuat hyperlink untuk ke fan page fb anda dari laman web WordPress anda nanti.
3. Pergi ke Dashboard. Sila masukkan gambar pada mana-mana Pages / Posts. (Rujuk di mukasurat 26 nombor 8 untuk memasukkan gambar).
4. Masukkan URL link tersebut.
5. Refresh laman web.
Klik pada gambar tersebut
1
Klik pada ikon rantai
2
Masukkan alamat laman web / URL tersebut dan tick pada kekotak.
3
Klik Update
38
Memasang / Install Theme Baru 1. Apa itu Themes?
Themes ialah rekabentuk laman web. Terdapat banyak Themes yang ada di dalam WordPress tersebut. Kita boleh melihat Themes tersebut dan boleh install di dalam WordPress kita. Themes tersebut kebanyakannya adalah percuma dan ada juga yang berbayar (jika dinyatakan).
2. Peringatan!
Apabila anda menukar sesuatu Theme, kedudukan Menu, Widgets, paparan Header dan lain-lain bahagian juga akan bertukar. Berkemungkinan besar item tersebut tidak dipaparkan apabila anda activate kan Theme baru tersebut.
Oleh itu anda perlu membuat sedikit setting pada Theme baru tersebut. Settings tersebut berbeza-beza mengikut Themes. Anda perlulah membaca manual atau documentation berkenaan untuk memahami cara setting Theme tersebut. Namun semua isi kandungan Menus, Pages, Posts, Widgets dan lain-lain masih ada di dalam web tersebut (ia tidak hilang). Oleh itu anda tidak perlu panik!
3. Pergi ke Dashboard. Appearance > Themes
39 4. Klik Add New.
5. Paparan Themes yang sedia ada. Pilih Themes yang berkenan.
Klik Newest untuk
mendapatkan Themes yang terkini (terbaru).
Klik Add New
Klik Install Now
1
40 6. Selepas anda klik Install Now, anda perlu memasukkan info di bawah ini.
7. Themes berjaya di install dan klik Activate.
8. Refresh Laman Web.
Taipkan localhost
Masukkan username cPanel Login Masukkan password cPanel Login
1 2 3 Klik Proceed 4 Klik Activate
41
Tips 1: Menukar Themes – Semak Menu
Apabila menukar sesuatu Themes, langkah berikut boleh dijadikan panduan. 1. Menukar Setting Menu.
2. Pergi ke bahagian Menu Settings > Theme locations
3. Refresh laman web.
Tick kan pada bahagian ini
Klik Appearance dan Klik Menus
42
Tips 2: Menukar Themes – Semak Theme Settings
1. Appearance > Nama Themes. Semak pada bahagian Themes Setting (jika ada). Kebiasaan Theme mempunyai settingnya tersendiri.
2. Anda perlu melakukan setting tersebut seperti yang dikehendaki oleh Theme tersebut (ianya berbeza-beza mengikut Themes). Anda boleh membaca manual panduan Theme tersebut untuk lebih memahami fungsi-fungsinya.
3. Anda juga boleh melihat pada setiap menu Appearance > Customize, Widgets,
Menus, Header, Background dan lain-lain untuk Themes tersebut.
4. Refresh laman web.
Contoh nama Theme Settings yang perlu dilakukan. Klik pada settings tersebut.
43
Dapatkan 2 Domain +
10
15GB Hosting PERCUMA!
dan Bina Laman Web WordPress
Anda 100% Secara Praktikal!
Kuota Terhad
500
Tinggal 147 Orang Sahaja!
Selagi Kuota Masih Ada.
44
