(Asas & Pertengahan) EBOOK INI ADALAH PERCUMA. Ditulis oleh Zaki Yusof Trainer bertauliah PSMB (TTT/4526) Trainer berpengalaman WordPress dan Joomla!

Transkripsi

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. Hakcipta Terpelihara

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: zaki@jomtraining.com.my LIVEWEBS NETWORK & TECHNOLOGY SDN. BHD. 47-1, Jalan OP 1/2, 1 Puchong Business Park, Puchong, Selangor. Malaysia. Tel: , , , ,

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 Masuk ke Ruangan WordPress Admin Settings General Wordpress Melihat Themes / Reka Bentuk Laman Web Yang Sedang Digunakan Memaparkan Paparan Laman Web - Themes Yang Digunakan / Hasil Perubahan Tips Belajar WordPress Membina Menu Menukar Nama Menu (Contoh: Home kepada Utama) Menambah Menu Baru / Pages Membuang Menu Yang Tidak Perlu Mengubah Kedudukan Menu Membuat Sub-Menu Widgets Mengubahsuai / Menambah Widgets Posts Membuang Leave a Reply pada Pages / Posts Memasukkan Gambar ke dalam Pages / Posts Menukar Gambar Header Membuat Hyperlink Memasang / Install Theme Baru Tips 1: Menukar Themes Semak Menu Tips 2: Menukar Themes Semak Theme Settings

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 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. (Unit Peneraju Agenda Bumiputera TERAJU) 2. (Persatuan Usahawan Internet Malaysia PUIM) 3. (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

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-> 2. Syarikat dari USA : KLIK-> (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

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: 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

7 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. Nama Domain anda 5. Turun ke bawah, klik pada bahagian Software / Services > Fantastico De Luxe. Klik Fantastico De Luxe 7

8 Klik pada WordPress: 1 Klik WordPress 2 Klik New Installation 8

9 6. Paparan berikut akan diperolehi. Ini adalah proses installation WordPress. 1 Biarkan saja nama domain anda. WordPress akan diinstall pada domain tersebut 2 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

10 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 2 Masukkan emel anda untuk anda mempunyai salinan info proses installation tadi ke dalam kotak emel. Klik Send Paparan laman web anda akan dipaparkan. Lihat mukasurat seterusnya. 10

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

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: 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

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 Klik General 13

14 3. General Setting 1 Taipkan Tajuk Laman Web 2 Masukkan Tagline 3 Masukkan emel anda. 4 Tukarkan TimeZone ke UTC+8 atau cari Kuala Lumpur (salah satu saja) 5 Klik Save Changes. 14

15 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

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

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

18 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 19

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: Akan ditukar kepada Utama 2. Pergi di Dashboard. Appearance > Menu 1 Klik pada Custom 2 Taipkan Utama pada 3 Klik Save Menu ruangan Navigation Label 3. Refresh laman web anda. 20

21 Menambah Menu Baru / Pages 1. Untuk membuat menu baru, anda hanya perlu membuat Pages. Pergi di Dashboard > Pages 2 Klik Add New 1 Klik Pages 2. Tuliskan kandungan Page dan klik Publish 1 Taipkan Tajuk Page (akan menjadi Tajuk Menu) 2 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

22 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

23 3. Paparan di bawah akan diperolehi. Remove > Save Menu 4 Klik Save Menu 3 Klik pada Remove 4. Refresh laman web. 23

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. 1 Drag & Drop ke bawah dan lepaskan mouse 2 Klik Save Menu 4. Refresh laman web. 24

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 2 Klik Save Menu 1 Drag & Drop ke kanan dan lepaskan mouse 4. Refresh laman web. 25

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: Widgets 2. Pergi di Dashboard. Appearance > Widgets Klik Widgets 26

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. KIRI KANAN 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) 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 5. Refresh laman web. 27

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). Posts Terkini Hello World! 2. Pergi di Dashboard. Posts 1 Klik Posts 28

29 3. Klik Add New 2 Klik Add New 4. Masukkan isi kandungan Posts 1 Tajuk Posts 2 Taipkan isi kandungan Posts 3 Klik Publish 5. Refresh laman web. 29

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: 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

31 3. Paparan Quick Edit. Allow Comments > kosongkan ruangan kekotak. 1 Biarkan kosong Uncheck Allow Comments 2 Klik Update 4. Refresh laman web. 31

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) Letakkan cursor dimana gambar ingin diletakkan. 2. Klik butang Add Media 1 Klik Add Media 32

33 3. Insert Media. 2 Klik Upload Files 3 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

34 6. Gambar telah dipaparkan di dalam page tersebut. Gambar berjaya dimasukkan di dalam page Hubungi Kami. 6 Klik Publish 7. Refresh laman web. 34

35 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

36 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 Buang tanda dalam kotak. Biarkan kosong. 3 Klik Save Changes 5. Refresh laman web. 36

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 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). 2 Klik pada ikon rantai 1 Klik pada gambar tersebut 4. Masukkan URL link tersebut. 3 Masukkan alamat laman web / URL tersebut dan tick pada kekotak. 4 Klik Update 5. Refresh laman web. 37

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 Klik Themes 38

39 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

40 6. Selepas anda klik Install Now, anda perlu memasukkan info di bawah ini. 1 Taipkan localhost 2 Masukkan username cpanel Login 3 Masukkan password cpanel Login 4 Klik Proceed 7. Themes berjaya di install dan klik Activate. Klik Activate 8. Refresh Laman Web. 40

41 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 3. Refresh laman web. 41

42 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

43 Dapatkan 2 Domain GB 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

44 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