4526) Trainer berpengalaman WordPress dan Joomla!

Hakcipta Terpelihara 2014

www.BengkelLamanWeb.com.my

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

Hakcipta Terpelihara 2014 1



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 www.JomTraining.com.my

2



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 Tips 2: Menukar Themes – Semak Theme Settings ............................................................................................... 42

3



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.

4



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

5



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.

6



4. Sekiranya Log in anda berjaya, anda akan menerima paparan seperti di bawah. Kini anda telah memasuki ruangan CPanel hosting. Inilah hosting anda.

cPanel

Tick dan Klik No, I’m fine. Thanks

Nama Domain anda

5. Turun ke bawah, klik pada bahagian Software / Services > Fantastico De Luxe.

Klik Fantastico De Luxe

7



Klik pada WordPress:

1

Klik WordPress

2

Klik New Installation

8



6. Paparan berikut akan diperolehi. Ini adalah proses installation WordPress.

1

2

Biarkan saja nama domain anda. WordPress akan diinstall pada domain tersebut

Kosongkan ruangan ini.

3

Masukkan username Admin dan Password – akan digunakan untuk membina web WordPress anda nanti. Sila salin untuk mengelakkan lupa username dan password admin ini.

4

Masukkan nickname Admin. Apa saja nama dibolehkan.

5

Masukkan emel anda.

6

Klik Install

9



7. Proses Installation hampir siap.

Klik Finish Installation

8. Proses installation siap. Proses installation ini hanya perlu dilakukan sekali sahaja. Selepas ini tidak perlu dilakukan lagi.

1

Masukkan emel anda untuk anda mempunyai salinan info proses installation tadi ke dalam kotak emel.

2

Klik Send E-mail.

9. Paparan laman web anda akan dipaparkan. Lihat mukasurat seterusnya.

10



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.

11



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.

Masukkan Username dan Password yang telah anda tetapkan semasa proses pemasangan (installation) WordPress sebelum ini (seperti di mukasurat 6).

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.

12



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

Klik General

13


3.


General Setting Taipkan Tajuk Laman Web

1

4

5

2

Masukkan Tagline

3

Masukkan emel anda.

Tukarkan TimeZone ke UTC+8 atau cari Kuala Lumpur (salah satu saja)

Klik Save Changes.

14



Melihat Themes / Reka Bentuk Laman Web Yang Sedang Digunakan 1.

Klik pada Appearance > Themes

1

Klik Appearance dan Klik 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 pada Activate untuk menukar Theme

15



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

Butang Refresh (pada Google Chrome) atau tekan F5

Mozilla Firefox

Butang Refresh (pada Mozilla Firefox) atau tekan F5

16



Tips Belajar WordPress 1. Untuk memudahkan mempelajari WordPress peringkat asas dan pertengahan, sebaiknya anda mempelajari tajuk-tajuk berikut. a. b. c. d. e. f. g. h. i.

Membina Menu / Pages Membina Sub-Menu Widgets Posts Memasukkan Gambar ke dalam Pages / Posts Memasukkan Gambar ke Header Membuat Hyperlink Memasang / Install Themes yang baru Memasang Plugins

2. Sekiranya anda dapat menggunakan perkara di atas, bermakna anda sudah boleh membina laman web WordPress anda sendiri.

17



Membina Menu 1. Pergi ke Dashboard. Appearance > Menus

1

Klik Menus

2. Menu Name 2

Biarkan saja nama Menu 1

3

Klik Create Menu

3. Menu Settings

1

Tick kedua-duanya 2

Klik Save Menu

4. Refresh Laman Web 18



19



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:

Akan ditukar kepada Utama

2. Pergi di Dashboard. Appearance > Menu

1

2

Taipkan Utama pada ruangan Navigation Label

Klik pada Custom

3

Klik Save Menu

3. Refresh laman web anda.

20



Menambah Menu Baru / Pages

1. Untuk membuat menu baru, anda hanya perlu membuat Pages. Pergi di Dashboard > Pages

2 1

Klik Add New

Klik Pages

2. Tuliskan kandungan Page dan klik Publish 1

2

Taipkan Tajuk Page (akan menjadi Tajuk Menu)

Taipkan isi kandungan Page

3

Klik Publish

3. Refresh laman web. Nota: Page menjadi Menu kerana anda telah tick pada ruangan Auto add Pages di Menus > Menu Settings

Tick option ini.

21



Membuang Menu Yang Tidak Perlu 1. Pergi di Dashboard. Appearance > Menus

1

Klik Menus

2. Pergi ke Menu Structure. Contohnya menu Sample Page yang ingin dibuang.

2

Klik pada tanda (arrow down) Page yang ingin dibuang.

22



3. Paparan di bawah akan diperolehi. Remove > Save Menu

4

3

Klik Save Menu

Klik pada Remove

4. Refresh laman web.

23



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.

1 Drag & Drop ke bawah dan lepaskan mouse

2

Klik Save Menu

4. Refresh laman web. 24



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

2

1

Klik Save Menu

Drag & Drop ke kanan dan lepaskan mouse




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:

Widgets

2. Pergi di Dashboard. Appearance > Widgets

Klik Widgets

26



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

Available Widgets ialah Widgets yang telah sedia ada di dalam Theme ini dan boleh digunakan bila-bila masa.

KANAN

Bahagian ini ialah Widgets yang akan dipaparkan di laman web (bergantung kepada Themes)

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

Drag & Drop Widgets Calendar di kiri ke kanan. Masukkan di dalam blok area widget tersebut


27



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

Posts Terkini Hello World!

2. Pergi di Dashboard. Posts

1

Klik Posts

28



3. Klik Add New 2

Klik Add New

4. Masukkan isi kandungan Posts

1 2

Tajuk Posts Taipkan isi kandungan Posts

3

Klik Publish


29



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:

Paparan ini mungkin tidak perlu pada pages (Tentang Kami) ini.

2. Anda mungkin tidak memerlukan Leave a Reply. Ianya boleh disembunyikan. Klik Pages jika anda tidak memerlukan Leave a Reply pada page tersebut.

Klik Quick Edit

30



3. Paparan Quick Edit. Allow Comments > kosongkan ruangan kekotak.

1

Biarkan kosong Uncheck Allow Comments 2

Klik Update


31



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)

Letakkan cursor dimana gambar ingin diletakkan.

2. Klik butang Add Media

1

Klik Add Media

32



3. Insert Media.

2

3

Klik Upload Files

Klik Select Files

4. Pilih gambar dari dalam PC / thumb drive yang anda ingin masukkan.

5. Klik Insert into page.

Gambar dipaparkan

5

Klik Insert into page

33



6. Gambar telah dipaparkan di dalam page tersebut.

Gambar berjaya dimasukkan di dalam page Hubungi Kami.

6

Klik Publish


34



Menukar Gambar Header 1. Header adalah gambar (imej) yang berada paling atas dalam sesebuah laman web. Contohnya adalah seperti berikut:

Header Laman Web

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.

Kilk Header

35



3. Paparan Header. Saiz header yang dinyatakan ialah 1600 x 230 pixels (px)

1

Klik Choose File dan Upload

4. Buang tanda pada Header Text untuk menghilangkan teks bertindan (jika berlaku)

2

3

Buang tanda dalam kotak. Biarkan kosong.

Klik Save Changes


36



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

Klik pada ikon rantai

2

1

Klik pada gambar tersebut

4. Masukkan URL link tersebut.

3

4

Masukkan alamat laman web / URL tersebut dan tick pada kekotak.

Klik Update




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

Klik Themes

38



4. Klik Add New. Klik Add New

5. Paparan Themes yang sedia ada. Pilih Themes yang berkenan.

1

Klik Newest untuk mendapatkan Themes yang terkini (terbaru).

2

Klik Install Now

39



6. Selepas anda klik Install Now, anda perlu memasukkan info di bawah ini.

4

1

Taipkan localhost

2

Masukkan username cPanel Login

3

Masukkan password cPanel Login

Klik Proceed

7. Themes berjaya di install dan klik Activate.

Klik Activate

8. Refresh Laman Web.

40



Tips 1: Menukar Themes – Semak Menu Apabila menukar sesuatu Themes, langkah berikut boleh dijadikan panduan. 1. Menukar Setting Menu.

Klik Appearance dan Klik Menus

2. Pergi ke bahagian Menu Settings > Theme locations Perhatikan bahagian ini!

Tick kan pada bahagian ini


41



Tips 2: Menukar Themes – Semak Theme Settings 1. Appearance > Nama Themes. Semak pada bahagian Themes Setting (jika ada). Kebiasaan Theme mempunyai settingnya tersendiri.

Contoh nama Theme Settings yang perlu dilakukan. Klik pada settings tersebut.

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.

42



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.

KLIK DI SINI

43



TERIMA KASIH KERANA MENGGUNAKAN EBOOK INI ANDA BOLEH SEBARKAN EBOOK INI KEPADA SESIAPA SAHAJA! SEMOGA ILMU YANG BERMANFAAT INI DAPAT DINIKMATI BERSAMA-SAMA OLEH SAYA DAN ANDA JUGA.

44

4526) Trainer berpengalaman WordPress dan Joomla!

Recommend Documents