สารบัญ
Intro : เกริ่นนำ�กับเวิร์ดเพรส 4.7+(WordPress เวอร์ชั่นล่าสุด)
2
Session 1 : เตรียมความพร้อมก่อนการสร้างเว็บบล๊อคด้วย WordPress
7
Session 2 : ทำ�ความเข้าใจกับ Admin Panel และปรับแต่งค่าพื้นฐาน ของ WordPress
15
Session 3 : เรียนรู้การจัดการเนื้อหาใน WordPress
19
Session 4 : การจัดการไฟล์ Media ต่างๆ
41
Session 5 : การสร้างเมนูใน WordPress
47
Session 6 : เรียนรู้การใช้งาน Plugin ใน WordPress
53
Session 7 : เรียนรู้การใช้งาน Theme และปรับแต่งให้สวยงาม
83
Session 8 : เรียนรู้การใช้งาน Widgets
87
Session 9 : การจัดการระบบสมาชิก, User Management
95
Session 10 : Responsive Web Design กับ WordPress
105
Session 11 : สิ่งที่ Administrator’s จำ�เป็นต้องรู้
113
2
ทำ�ความรู้จักกับเวิร์ดเพรส และเหตุผลที่คนทั้งหลายเลือกใช้งาน WordPress WordPress เป็นโปรแกรมสำ�เร็จรูปที่มีไว้เพื่อสร้างและจัดการเนื้อหาบนอินเตอร์เน็ต ( Contents Management System หรือ CMS) แทนที่เราจะดาวโหลดโปรแกรมมาทำ�การสร้างและออกแบบเว็บไซต์ บนเครื่องคอมพิวเตอร์ของเราอย่างเช่น Macromedia Dreamwaver เป็นต้น แต่ CMS นั้นถูกสร้างมาเพื่อ ใช้งานบนอินเตอร์เน็ตโดยตรง เมื่อคุณจะใช้งานโปรแกรมนี้ คุณก็สามารถใช้ได้ทันทีผ่านอินเตอร์เน็ต แค่คุณ ล็อกอินเข้าสู่ระบบจัดการของ CMS นั้นๆ บางคนอาจจะคุ้นกับ CMS อื่นๆ เช่น joomla, simple machines, open cart, magento เป็นต้น สิ่งที่หลายคนเลือกใช้งาน WordPress คือ สะดวกต่อการใช้งาน คุณไม่ต้องเริ่มสร้างเว็บจาก 0 ไม่จำ�เป็นต้องมีความรู้ทางโปรแกรมเมอร์ เพราะระบบมีทุกอย่างไว้ให้ คุณ มีหน้าที่เลือกรูปแบบและใส่เนื้อหาของคุณเข้าไป
WordPress ประกอบด้วยอะไรบ้าง WordPress เขียนด้วยภาษา PHP และใช้ Apache, MySQL และ PhpMyAdmin ในการรันเป็นเซิฟ
เวอร์ คุณสามารถลองใช้โปรแกรม DesktopServer เพื่อจำ�ลองเซิฟเวอร์สำ�หรับติดตั้งและใช้งาน WordPress ได้ เพราะ WordPress นั้นจะรันอยู่บนฝั่งเซิฟเวอร์ เราจึงต้องมีเครื่องมือจำ�ลองเซิฟเวอร์ซะก่อน
3
ตัวอย่าง เว็บที่ทำ�ด้วย เวิร์ดเพรส ตัวอย่างเว็บไซต์ที่ทำ�ด้วยเวิร์ดเพรส เว็บไซต์ตัวอย่างนี้จากต่างประเทศ เหตุที่นำ�ของต่างประเทศมา ให้ดูเนื่องจากอยากจะให้เห็นแนวคิดที่แตกต่างของ WordPress ที่เคยคิดว่าเป็นแค่บล๊อกธรรมดาไม่น่าสนใจ เพราะคุณเคยเห็นเพื่อนๆ พี่ๆ น้องๆ เค้านำ�มาทำ�เป็นบล๊อกกัน แต่ที่ต่างประเทศ เค้านำ�ศักยภาพของ WordPress ขุดออกมาใช้ได้อย่างเต็มที่ ทั้งเว็บขายสินค้า เว็บแสดงข้อมูลบริษัท เว็บไซต์ส่วนบุลคคล เว็บไซต์ที่มี ความซับซ้อนมากกว่า เพื่อเป็นแรงบันดาลใจในการออกแบบของคุณ
4
กว่าจะเป็น WordPress หลังจากที่ทำ�ความรู้จักกับ WordPress ว่าคืออะไรแล้ว มารู้จักกับประวัติของ WordPress กัน
Matt Mullenweg เป็นผู้ก่อตั้ง WordPress ในวัยเพียง 18 ปี ถูกพัฒนามาจากแพลตฟอร์ม b2 โดยแยกออก มาจาก b2 อย่างเป็นทางการ วันที่ 23 พฤษภาคม 2003 และ 4 วันต่อมา 27 พฤษภาคม 2003 WordPress 0.7 ซึ่งเป็นเวอร์ชั่นแรกก็เปิดตัว ซึ่งเขียนโดย Michel Valdrighi ในตอนที่พัฒนา WordPress แรกๆ นั้น Matt ยังศึกษา PHP อยู่ ไม่ได้เป็นเทพโปรแกรมมิ่งแต่อย่างใด Matt คิดพัฒนา WordPress เพราะ Michel Valdrighi นั้นหายไป ไม่อัพเดต b2 เขาจึงกลัวว่าบล็อกรูปถ่ายของเขาจะไม่ได้รับการพัฒนา ผู้ให้การช่วย เหลือ Matt ในการสร้าง WordPress ถือเป็น Early Founders เลยคือ Mike Little ผู้ที่ให้ชื่อเรียก “WordPress” ทำ�ให้ WordPress ถือกำ�เนิดขึ้น คือเพื่อนของ Matt ชื่อ Christine Tremoulet ในตอนนั้น มีการ fork b2 หลายตัว และ WordPress ก็ได้รวมเอา b2++ ซึ่ง fork โดย Donncha O Caoimh มารวมด้วย ส่วน b2evolution ซึ่ง fork โดย Francois Planque นั้น เขาไม่สนใจร่วมพัฒนาด้วยกัน เพราะเขาคิดว่ามัน ไม่คุ้มค่า “too much work for too little benefit” WordPress ได้เปลี่ยนชื่อไฟล์ต้นฉบับของ b2 จาก b2 เป็น wp ในปี 2003 โดยครั้งนั้น Alex King หนึ่งในผู้ ร่วมพัฒนาในตอนนั้น เรียกว่าเป็น “The Great Renaming” และหลังจากนั้นเขาก็ทำ�การย้ายไฟล์มากมาย เหล่านั้นเข้าไว้ใน โฟลเดอร์อย่าง wp-admin และ wp-includes ก่อนที่จะมาเป็น Codex ซึ่งเปรียบเสมือน คู่มือการใช้งาน WordPress อย่างละเอียด นี้ มันเคยเป็น WordPressWiki มาก่อน สร้างบนแพลตฟอร์ม MediaWiki เช่นเดียวกันกับเว็บ Wikipedia ชื่อ “Codex” ได้รับการแนะนำ�จาก Monkinetic ในห้องแชท ของ WordPress Hello Dolly ที่เราเห็นเป็นปลั๊กอินเริ่มต้นใน WordPress ทุกวันนี้ ถูกสร้างเพื่อเป็นต้นแบบสาธิตให้ นักพัฒนารู้ว่าว่าปลั๊กอินควรถูกใช้ยังไง และมันก็อยู่แบบนั้นเรื่อยมา ชื่อของ WordPress แต่ละเวอร์ชั่น ถูกตั้งตามนักร้องเพลงแจ๊สในตำ�นาน เพราะ Matt ชื่นชอบเพลงแจ๊สมาก ในเดือน พฤษภาคม ปี 2004 WordPress มียอดดาวน์โหลด 19,000 เพิ่มจากเดือน เมษายนที่มีเพียง 8,000 ครั้ง อันเนื่องมากจาก Six Apart ผู้สร้าง Movable Type ในตอนนั้นมีการคิดค่าลิขสิทธิ์ ทำ�ให้คนหันมาใช้ WordPress แทน ในปี 2008 หลังจากก่อตั้ง WordPress มาได้ 5 ปี WordPress ยังมีพนักงานเพียงแค่ 18 คน ในขณะที่มีผู้ร่วมลงทุนหลายล้านดอลล่าห์
5
WordPress 4.7 มีอะไรใหม่บ้าง WordPress 4.7 เป็นเวอร์ชั่นล่าสุดในปัจจุบัน (2017) ซึ้งสิ่งที่ได้ถูกพัฒนาออกมาใหม่จากเวอร์ชั่นเดิมคือ • ธีมใหม่ Twenty Seventeen รองรับการใช้รูปภาพและวิดีโอเป็น Header ได้แล้ว โดยรองรับการใช้ งานในระดับธุรกิจโดยเฉพาะ และปรับแต่งหน้าแรกให้แบ่งเนื้อหาออกเป็นหลายกลุ่มย่อยได้ดีขึ้น โดย ยังคงปรับแต่งได้อย่างอิสระเหมือนเช่นเคย และรองรับการอ่านได้จากทุกอุปกรณ์ทันทีในตัว • ระบบ Customizer ดีขึ้น สามารถปรับแต่งค่าเริ่มต้นและหน้าตาแรกเริ่มได้ง่ายขึ้น, มี Shortcut สำ�หรับไปปรับแต่งหน้าตาส่วนต่างๆ ได้รวดเร็ว • ปรับ UI การเลือก Menu โดยสามารถสร้าง Page ใหม่ๆ ได้จากหน้า Menu ทันที ไม่ต้องสลับหน้าไป มาอีกต่อไป • สามารถเพิ่ม Custom CSS และเห็นผลการเปลี่ยนแปลงที่เกิดขึ้นได้โดยไม่ต้อง Refresh หน้าจอ • แสดง Thumbnail Preview สำ�หรับไฟล์ PDF ได้ (อันนี้ร้ายกาจมากครับ) • เลือกภาษาใน Dashboard ได้ต่างจากภาษาของระบบทั้งหมด รองรับกรณีมีผู้ใช้งานจากหลากหลาย เชื้อชาติ • มี REST API สำ�หรับการ Post, Comment, Term, User, Meta และ Setting ให้นำ�ไปเชื่อมต่อกับ ระบบอื่นได้ • มี Post Type Template ทำ�ให้นักพัฒนาสามารถนำ�ไปพัฒนาต่อยอดได้ง่ายขึ้น • เพิ่มความสามารถใหม่ๆ สำ�หรับนักพัฒนาธีมให้ใช้งานได้มากขึ้น • สร้าง Custom Bulk Action ได้ • ปรับปรุง Settings Registration API ใน register_setting() ให้มี Visibility ของ Type, Description และ REST API เพิ่มขึ้น • ปรับแต่ง Changesets ได้ • ปรับแต่งแก้ไขบั๊กต่างๆ
7
8
การติดตั้ง XAMPP 1. Download XAMPP 3.2.2 ที่ Website : https://www.apachefriends.org/download.html
- เลือก Version ตามระบบปฏิบัติการของเครื่องตนเอง ในที่นี้ผู้เขียนเลือกใช้ Version 7.1.1
2. ติดตั้ง XAMPP - คลิกที่ไฟล์ที่ Download มา - เลือก Next
- เลือกที่เก็บ Folder ของโปรแกรม และรอจนโปรแกรมทำ�งานเสร็จ
9
การสร้างฐานข้อมูล 1. เข้าโปรแกรม XAMPP
2. ส่วนของ Action ของ Module Apache , MySQL กด Start
3. เมื่อโปรแกรมทำ�งานปกติ จะได้ลักษณะ ดังภาพ
4. เข้า Browser ของ Internet แล้วพิมพ์ URL : localhost 5. จะปรากฎหน้าเว็บ ดังภาพ
6. คลิกเลือก phpMyAdmin
10
7. เลือก database
8. กำ�หนดชื่อของ database ในที่นี้ใช้ wp_nagas2
และเลือกช่อง Collation เป็น utf8_general_ci แล้วกด Create
การโหลด Wordpress 1. เข้าไปที่ ULR : https://wordpress.org
11
2. คลิก Download Wordpress
3. เมื่อ Download เสร็จแล้ว ให้ทำ�การแตกไฟล์ที่โหลดมา 4. เข้าไปในโฟลเดอร์ของ Wordpress
5. Double-Click ที่ไฟล์ wp-config-sample 6. เลื่อนหาในส่วนของการแก้ไข ดังภาพ
12 12
7. แก้ไขข้อมูลในส่วนต่างๆ ดังนี้ - ให้แก้ไข ดังนี้
- DB_NAME ให้เปลี่ยนตามชื่อของ Database
- DB_USER ให้เปลี่ยนเป็น root
- DB_PASSWORD ให้ว่างไว้
8. กด save-as ตั้งชื่อ wp-config.php
13
การติดตั้ง Wordpress 1. คัดลอกโฟลเดอร์ wordpress ไปไว้ที่ xampp > htdocs
2. จากนั้น เปลี่ยนชื่อโฟลเดอร์ wordpress ให้เป็นเหมือนชื่อของ database
3. เข้า Browser internet เข้า URL : localhost ตามด้วยชื่อโฟลเดอร์
- localhostwp_nagas2
14 14
4. เปลี่ยนภาษาของ wordpress
5. กรอกข้อมูลให้เรียบร้อย แล้วกด ติดตั้ง
6. เข้าสู่ระบบ Wordpress
15
16 16
Administration Panel
หน้าแอดมินคือหน้าที่เอาไว้สำ�หรับให้แอดมินหรือผู้ดูแลเว็บไซต์จัดการปรับปรุงแก้ไขและควบคุมการ
ทำ�งานของเว็บไซต์นั้นเอง ทุกเว็บไซต์ต้องมีหน้าแอดมิน wordpress ก็เช่นเดียวกันครับ เว็บไซต์ที่ เราเห็นๆ กันมันจะมีอยู่ 2 ส่วนคือส่วนแรกหน้าที่คนทั่วไปเห็นๆ กัน หน้าหลักของเว็บไซต์ เช่นหน้าเว็บ ต่าง ๆ และอีกส่วนหนึ่งคือ หน้าของแอดมิน คนทั่วไปจะมองไม่เห็น จะมีเฉพาะแอดมินเท่านั้นที่ จะสามารถเข้ามาหน้านี้ได้ ทีนี้เรามาดูหน้าแอดมินของ wordpress กันดีกว่า ว่ามีหน้าตายังไง
17
ส่วนประกอบของ Administration Panel
18
1. หน้าแรก และ อัพเดท : หน้านี้จะเป็นหน้าหลักของแอดมินจะแสดงข้อมูลของเว็บไซต์ต่าง ๆ ไว้
ที่หน้านี้เช่น แสดงจำ�นวนบทความ, หน้า, คอมเม้น, คอมเม้นต่าง ๆ ส่วนเมนูอัพเดท เวลามีพวก
ปลั๊กอิน ธีม และตัว wordpress มีเวอร์ชั่นใหม่ออกมาก็จะแจ้งเตือนที่เมนูนี้
2. เรื่อง : เข้าไว้สำ�หรับจัดการกับบทความต่าง ๆ ของ wordpress จะเขียนบทความใหม่, ดู
บทความทั้งหมด, สร้างหมวดหมู, สร้างป้ายกำ�กับ ก็ทำ�จากในเมนูนี้ครับ
3. ไฟล์สื่อ : เอาไว้จัดการไฟล์ต่าง ๆ เช่นรูปภาพและวีดีโอ เวลาเราอัพรูปขึ้น wordpress ในการ เขียนบทความพวกไฟล์รูปต่าง ๆ ก็จะมาแสดงอยู่ที่หน้านี้ เราสามารถจัดการ แก้ไขชื่อ หรือลบ
รูปภาพ
4. หน้า : เอาไว้สร้างหน้าเพจ จัดการหน้าเว็บไซต์ต่าง ๆ 5. ความเห็น : ไว้จัดการความคิดเห็นหรือคอมเม้นจากผู้ชมเว็บไซต์ เวลามีผู้ชมเว็บมาคอมเม้นที่เว็บ
เราระบบก็จะเตือนให้เรารู้ว่ามีคอมเม้นมาใหม่แล้วเราก็เข้ามาจัดการได้ที่เมนูนี้
6. รูปแบบเว็บ : ไว้จัดการกับหน้าตาเว็บไซต์ของเรา เช่น ติดตั้งธีม, ดูธีมทั้งหมดที่เราติดตั้งไป, จัดการเมนูของเว็บไซต์, จัดการ widgets, แก้ไขส่วนหัวพื้นหลังของ wordpress ก็ทำ�จากเมนูนี้ 7. ปลั๊กอิน : ใช้จัดการกับปลั๊กอินทั้งหมด ปิดและเปิดปลั๊กอินของ wordpress ของเรา หรือจะติดตั้ง
ปลั๊กอินใหม่ ก็ทำ�จากที่นี่เลย
8. ผู้ใช้ : ใช้จัดการกับข้อมูลส่วนตัวของแอดมินรวมถึงผู้ใช้งานที่เป็นสมาชิก 9.
เครื่องมือ : ใช้จัดการเนื้อหาทั้งหมดของเว็บไซต์และสิ่งต่าง ๆ ที่เกี่ยวข้องกับไฟล์ เช่นการ Im
port, Export ไฟล์หรือเนื้อหาต่าง ๆ 10. ตั้งค่า : เป็นเมนูที่เอาไว้ปรับแต่การทำ�งานของ wordpress โดยรวม เช่น ตั้งชื่อเว็บ, ตั้งเวลา, และการตั้งค่าทั้งหมด
20 20
การจัดหมวดหมู่ (Categories) และ ป้ายกำ�กับ (Tag)
หมวดหมู่ คือ การจัดหมวดหมู่ให้โพสแต่ละโพสเพื่อให้ผู้ใช้สามารถค้นหาโพสได้อย่างสะดวกมาก
ขึ้น โดยการค้นหาตามหมวดหมู่ จะพบโพสที่เกี่ยวกับหมวดหมู่นั้นๆทั้งหมด เช่น ภาคอีสาน จังหวัดขอนแก่น เป็นต้น
ป้ายกำ�กับ คือ ป้ายที่ติดกำ�กับโพสต่างๆแต่ละโพสในลักษณะคำ� เพื่อบอกให้ทราบและจัดหมวดหมู่
ให้เข้าใจถึงแต่ละโพส เช่น หากทำ�โพสแนะนำ�สถานที่ในจังหวัดระยอง อาจจะติดป้ายกำ�กับไว้ว่า ทะเล ภูเขา สวนผลไม้ เป็นต้น
การสร้างหมวดหมู่ (Categories) 1.ไปที่ เรื่อง และไปยังแท็บ หมวดหมู่
21
2.ใส่รายละเอียดเกี่ยวกับหมวดหมู่ให้ครบถ้วน แล้วกด สร้างหมวดหมู่
2.1 ชื่อของหมวดหมู่ 2.2 Slug คือการทำ�ให้ผู้ใช้สามารถเข้า URL ของเว็บได้ง่ายขึ้น โดยแนะนำ�ให้กำ�หนดให้สื่อความหมายและ เป็นข้อความสั้นๆ 2.3 ป้ายกำ�กับ ในกรณีที่หมวดหมู่เป็นหมวดหมู่ย่อย สามารถเลือกหมวดหมู่หลักเพื่อให้หมวดหมู่ที่สร้างใหม่ อยู่ในหมวดหมู่หลักด้วย เช่น จังหวัดมหาสารคาม เป็นหมวดหมู่ย่อยของ ภาคอีสาน 2.4 คำ�ขยายความ เป็นคำ�ขยายความเพื่ออธิบายให้ผู้ใช้งานเข้าใจถึงหมวดหมู่แต่ละหมวดหมู่มากยิ่งขึ้น
22 22
การสร้างป้ายกำ�กับ (Tag) 1.ไปที่ เรื่อง และไปยังแทบ ป้ายกำ�กับ
2.ใส่รายละเอียดเกี่ยวกับป้ายกำ�กับให้ครบถ้วน แล้วกด เพิ่มป้ายกำ�กับใหม่
2.1 ชื่อของป้ายกำ�กับ 2.2 Slug คือการทำ�ให้ผู้ใช้สามารถเข้า URL ของเว็บได้ง่ายขึ้น โดยแนะนำ�ให้กำ�หนดให้สื่อความหมายและเป็นข้อความสั้นๆ ลักษณะเดียวกันกับ หมวดหมู่ 2.3 คำ�ขยายความ เป็นคำ�ขยายความเพื่ออธิบายให้ผู้ใช้งานเข้าใจถึงป้ายกำ�กับมากยิ่งขึ้น
23
การสร้างโพส (Post)
การสร้างโพสมีการใส่ข้อมูลอยู่สองรูปแบบคือ แบบเสมือน(Visual Editor) คือการจัดข้อมูลแบบ
เหมือนจริง คล้ายกับการพิมพ์งานใน MS-Word และแบบตัวอักษร(HTML Editor) คือการจัดข้อมูลแบบเป็น โค้ดเหมือนการทำ�เว็บคล้าบแบบ HTML 1.ไปที่แถบ เรื่อง > เขียนเรื่องใหม่
2.กรอกรายละเอียดต่างๆให้ครบถ้วน
การเพิ่มข้อมูลแบบเสมือน(Visual Editor)
24 24
เมนูที่ควรรู้คือ 2.1.แถบลักษณะการจัดตัวอักษร จะมีให้เลือกเป็นลักษณะหัวข้อต่างๆ
นอกจาก ตัวหนา เอียง ขีดเส้นใต้ จัดหน้าทั่วไปแล้ว สิ่งหนึ่งที่เราจะต้องใช้ก็คือ รูปแบบตัวหนังสือ
หรือ Format ที่ปกติแล้วจะเป็นค่าเริ่มต้นว่า ย่อหน้า (Paragraph) ซึ่งจะแสดงตัวหนังสือในขนาดปกติ ใช้ใน การเขียนทั่วไป แต่เมื่อใดที่เราต้องการที่จะขึ้นหัวข้อ เราก็สามารถที่จะเปลี่ยนรูปแบบข้อความนี้เป็น หัวข้อ (Heading) หัวข้อจะมีหมายเลขเรียงตามขนาด ตั้งแต่ 1-6
การกำ�หนด หัวข้อ ให้กับบทความ เป็นการทำ�ให้เว็บทั้งเว็บมีรูปแบบเป็นหนึ่งเดียวกัน ดีกว่าการ
กำ�หนดขนาดตัวหนังสือ ดังนั้น WordPress จึงไม่ใส่ที่กำ�หนดขนาดตัวหนังสือมาให้เรา และประเด็นที่สำ�คัญ เลยก็คือ SEO (Search Engine Optimization) เครื่องมือในการค้นหาเว็บอย่าง Google.com นั้นจะทำ�การ เก็บข้อมูลโดยดูจากหัวข้อต่างๆ เป็นหลักไปทำ�เป็นดัชนี เพื่อดูว่าเว็บเรานั้นเขียนเกี่ยวกับเรื่องอะไร หัวข้อเหล่า นี้ควรสอดครั้งกับชื่อเรื่อง จะส่งผลต่อการค้นหามากที่สุด
25
2.2.แถบป้ายกำ�กับอ่านเพิ่มเติม เพื่อตัดข้อความที่แสดงอยู่หน้ารวมโพสไม่ให้ยาวเกินไป ให้เหมาะสม
และสวยงาม
ภาพที่แสดงในแบบเสมือน(Visual Editor)
ภาพที่แสดงในหน้าหลัก
26 26
การเพิ่มข้อมูลแบบตัวอักษร(HTML Editor)
เปิดหน้าตัวอักษรแล้วจะพบว่าลักษณะของข้อความ จะมีการจัดข้อมูลอยู่ในลักษณะ HTML Code
แล้วสามารถเพิ่มแก้ไช้ Code เข้าไปได้เลย เช่น เพิ่ม Code แผนที่
27
2.2.แถบป้ายกำ�กับอ่านเพิ่มเติม เพื่อตัดข้อความที่แสดงอยู่หน้ารวมโพสไม่ให้ยาวเกินไป ให้เหมาะสม
และสวยงาม
ภาพที่แสดงในแบบเสมือน(Visual Editor)
ภาพที่แสดงในหน้าหลัก
28 28
เมื่อแก้ไขโค้ดเสร็จ เราสามารถดูตัวอย่างได้ที่หน้า เสมือน ดังตัวอย่าง
การเพิ่มรูป หรือมีเดียเข้าไปในโพสสามารถทำ�ได้โดย เลือกที่ปุ่มเพิ่มสื่อ แล้วเลือกสื่อที่ต้องการลงไป
29
การเพิ่มลิ้งค์
หากเป็นลิ้งค์วีดีโอจาก Youtube ลงในเมนูการเพิ่มข้อมูลแบบเสมือนจะมีการเปลี่ยนแปลงเป็นภาพ
วีดีโอให้โดยอัตโนมัติ ดังรูป
30 30
การเพิ่มลิ้งค์ลงในข้อความ
เป็นการทำ�ให้ข้อความสามารถเชื่อมโยงไปที่เว็บไซต์ภายนอกได้ โดยสามารถทำ�ได้โดยครอบทึบรอบ
ตัวข้อความที่ต้องการ
แล้วเลือกปุ่ม เพิ่ม/แก้ไขลิ้งค์
31
แล้วนำ�ลิ้งค์ที่ต้องการมาใส่
กด Enter จะได้ข้อมูลดังภาพ
32 32
3.เลือก หมวดหมู่ของโพส และเพิ่ม ป้ายกำ�กับ โดยถ้าหากต้องการเพิ่มหลายป้าย สามารถเพิ่มทีเดียวโดยใส่ เครื่องหมายคอมม่า ( , ) เพื่อคั่นกลางระหว่างป้าย แล้วกดเพิ่ม
4.เมื่อกดเพิ่มจะได้ดังนี้
33
5.เพิ่มรูปพิเศษ หรือ รูปตัวอย่างที่จะแสดงหน้าโพส
6.เมื่อเพิ่มรายละเอียดเสร็จ ให้กดเผยแพร่
34 34
การสร้างโพส (Post) 1.ไปที่แถบ หน้า > เขียนหน้าใหม่
2.ใส่รายละเอียด แล้วกด เผยแพร่
35
การจัดการคอมเม้น เพิ่ม แก้ไข ลบ
คอมเม้นคือความคิดเห็นต่างๆของผู้เข้าชมที่แสดงความคิดเห็นต่อโพสแต่ละโพส ซึ่งในฐานะ Admin
เราจะสามารถเพิ่ม ลบ แก้ไข คอมเม้นต่างๆได้ รวมถึงการอนุมัติหรือไม่อนุมัติคอมเม้นแต่ละคอมเม้นได้ด้วย ดังต่อไปนี้
การเพิ่มคอมเม้น
สามารถทำ�ได้โดยเข้าไปในโพสที่ต้องการแล้วพิมพ์ข้อความในช่องความเห็นแล้วกดแสดงความคิดเห็น
แล้วจะได้ผลลัพธ์ที่แสดงออกมาเป็น
36 36
การแก้ไขคอมเม้น
สามารถทำ�ได้โดยกดปุ่มแก้ไขข้างๆคอมเม้นที่ต้องการดังภาพ
แล้วจะเข้าไปสู่หน้าจัดการดังนี้
ซึ่งสามารถแก้ไขอีเมล URL ต่างๆ แก้ไขข้อมูลใน คอมเม้นรวมถึงสถานะต่างๆของคอมเม้นได้
37
ซึ่งในฐานะแอดมินโดยสามารถปรับสถานะให้เป็นสถานะต่างๆได้ ซึ่งถ้าหากข้อความนั้นเป็นข้อความ
ที่ไม่ดี เราสามารถแก้ไขสถานะเป็น สแปม แล้วกดอัปเดต เมื่อแก้ไขเสร็จเพื่อเป็นการบันทึกคอมเม้น
การใช้ Press This ช่วยในการสร้าง Content
Press This เป็นเครื่องมือเล็ก ๆ ที่อนุญาตให้คุณนำ�สิ่งเล็ก ๆ ของเว็บมาสร้างเป็นเรื่องใหม่อย่าง
ง่ายดาย
ใช้ Press This เพื่อแนบไฟล์ตัวอักษร รูปภาพและไฟล์วีดีโอจากเว็บอื่น ๆ แล้วแก้ไขและเพิ่ม
โดยตรงจาก Press This ก่อนที่คุณจะบันทึกหรือเผยแพร่สิ่งนั้นในเรื่องบนเว็บของคุณ
หรือพูดง่ายๆคือการสร้างโพสใหม่โดยนำ�ลิ้งค์มาแสกนเพื่อเก็บภาพ หรือสื่อในลิ้งค์นั้นมาลงเป็นโพส
ของเรา โดยการใช้งานจะสามารถใช้ได้ดังนี้ เข้าไปที่เครื่องมือ > เปิด Press This
38 38
จะได้หน้าตาของ Press This ดังนี้
โดยเราสามารถนำ�ลิ้งค์มาวางแล้วกด แสกน เพื่อนำ�สื่อเข้ามาในโพสของเราได้ เช่น
39
โดย Press this สามารถจัดการข้อมูลได้เหมือนกับการจัดการข้อมูลในโพสทั่วไป ซึ่งสามารถจัดหมวด
หมู่ จัดป้ายกำ�กับได้เช่นเดียวกัน เมื่อสร้างโพสเสร็จ แล้วกดเผยแพร่ ก็จะเป็นการเสร็จสิ้นการสร้างโพสด้วย Press this
42
การจัดการไฟล์ Media ต่าง ๆ Media
เป็นส่วนที่ใช้ในการจัดเก็บไฟล์สื่อเข้าระบบ ได้แก่ ไฟล์รูปภาพ ไฟล์วิดีโอ ไฟล์เสียง และไฟล์เอกสาร เป็นต้น ภายในเมนู Media ผู้ใช้งานสามารถอัพโหลดไฟล์และจัดหมวดหมู่ไฟล์อย่างเป็นระบบ แต่จำ�เป็นต้อง ติดตั้งปลั๊กอินที่ช่วยเสริมความสามารถของ Media Library เพิ่มเข้าไป Media Library Panel
1.ปุ่มเลือกมุมมองระหว่าง List View กับ Grid View 2.ปุ่ม Add New ใช้สำ�หรับอัพโหลดไฟล์สื่อ 3.Bulk Select คลิกเพื่อเลือกไฟล์สื่อที่ต้องการลบ 4.ตัวกรอง (Filter) เพื่อใช้เลือกดูไฟล์แต่ละประเภท ได้แก่ Images, Audio, Video, PDF, Unattached, All Uncategorised
43
5.ตัวกรอง (Filter) เพื่อใช้เลือกดูไฟล์แบบแยกวันที่ (Dates) 6.ตัวกรอง (Filter) เพื่อใช้เลือกดูไฟล์แบบแยกตามหมวดหมู่ (Media Categories) (จะปรากฏเมื่อมีการสร้าง หมวดหมู่ให้ไฟล์) 7.ปุ่ม Reset All Filter สำ�หรับการยกเลิกตัวกรองการค้นหาไฟล์สื่อ 8.ช่องสำ�หรับค้นหาไฟล์สื่อ Media Uploading การเพิ่มไฟล์สื่อเพื่อใช้งานบน WordPress จำ�เป็นต้องใช้วิธีการอัพโหลดเก็บไว้ใน Media Library ก่อน จึงจะสามารถนำ�ไปใช้ในเนื้อหาได้ สำ�หรับการเพิ่มหรือการอัพโหลดไฟล์สื่อ สามารถทำ�ได้ 2 วิธี ได้แก่ วิธีที่ 1. การอัพโหลดผ่าน Media Library ผู้ใช้งานสามารถใช้วิธีการลากไฟล์จากคอมพิวเตอร์ไปวางลงในหน้าต่าง Media Library โดยตรง หรือคลิกเลือกที่ปุ่ม Add New ภายใต้เมนู Media แล้วกด Select Files เพื่อเลือกไฟล์ หรือใช้วิธีการ Drag & Drop
44
วิธีที่ 2. เพิ่มไฟล์สื่อในหน้าจอที่ใช้เขียน Post หรือ Page โดยกดเพิ่มจากปุ่ม Add Media ในหน้า Editor ของ Post และ Page
Gallery
เป็นการใส่รูปภาพทีละหลายๆภาพลงในเนื้อหา สามารถจัดรูปแบบให้เป็นสัดส่วนและแบ่งคอลัมน์
ได้ ซึ่งผู้เข้าชมเว็บไซต์สามารถเรียกดูภาพและเลื่อนดูภาพอื่นๆใน Galleryเดียวกันได้ (กรณีที่ติดตั้ง ปลั๊กอิน Gallery เพิ่มเติม) 1. คลิกที่ปุ่ม Add Media
45
2. จากแท็บด้านซ้าย ให้เลือก Create Gallery ส่วนแท็บด้านบน เลือกรูปภาพที่อัพโหลดไว้แล้วในแท็บ Media Library หรือเลือกอัพโหลดภาพใหม่ในแท็บ Upload Files
ด้านขวามือจะมีส่วน Gallery Setting สำ�หรับตั้งค่า Gallery ดังนี้
46
Link To: สำ�หรับกำ�หนดลิงค์ให้กับรูปภาพ เมื่อผู้เข้าชมเว็บไซต์คลิกที่ภาพ มีดังนี้ • Media File: แนบลิงค์ไปที่ไฟล์รูปขนาดจริง • Attachment Page: แนบลิงค์ไปที่หน้ารายละเอียดของรูปภาพ • Custom URL: แนบลิงค์แบบกำ�หนดเอง • None: ไม่แนบลิงค์ Columns: จำ�นวนคอลัมน์ของ Gallery เลอรี Random Order: สุ่มการเรียงลำ�ดับรูปภาพ ให้ทำ�เครื่องหมายถูกต้อง Size: สำ�หรับกำ�หนดขนาดของภาพที่ต้องการให้แสดงบนเว็บไซต์ ได้แก่ Thumbnail Medium Large และ Full Size 3. เมื่อเลือกรูปภาพได้ตามที่ต้องการแล้ว คลิกปุ่ม Insert Gallery
4. รูปภาพที่เลือกจะแสดงในหน้า Editor โดยการแสดงผลอาจไม่ใช่ขนาดเดียวกับการแสดงผลจริงบนเว็บไซต์ ผู้ใช้งานสามารถคลิกปุ่ม Preview เพื่อแสดงตัวอย่างก่อน Publish
48
การสร้างเมนู 1. เข้าไปที่เมนูรูปแบบเว็บ 2. ไปที่ เมนูเมนู 3. ให้ทำ�การสร้างเมนูใหม่โดยคลิกทที่ปุ่ม สร้างเมนูใหม่ 4. สามารถเลือกเมนูจากหน้าที่เราสร้างไว้ลิงก์และหมวดหมู่ โดยคลิกปุ่มเพิ่มเมนู 5. เสร็จแล้วให้ทำ�การคลิกที่ ปุ่ม บันทึก
49
การเข้าใช้งานระบบ Menu Locations การปรับตำ�แหน่งของเมนู 1. เข้าไปที่เมนูรูปแบบเว็บ 2. ไปที่ เมน ูเมนู 3.ไปที่ Mange Locations 4.ทำ�การเลือกเมนูที่จะให้อยู่ในตำ�แหน่งที่ต้องการ 5.เสร็จแล้วให้ทำ�การคลิกที่ ปุ่ม บันทึก
50
เมื่อเข้าไปที่หน้าหลักของเว็บ เมนูที่เราสร้างจะปรากฎขึ้นบนตำ�แหน่งที่เราจัดวางไว้
การสร้างเมนูเพื่อดึง Post/Page และ Plugin ออกมาแสดง 1. เข้าไปที่ Edit Menus 2. เลือกเมนูที่เราต้องการดึง Post/Page และ Plugin ออกมาแสดง 3.เสร็จแล้วให้ทำ�การคลิกที่ Select
51
4.สามารถเลือก Post/Page และ Plugin ที่ต้องการได้จากหน้าที่เราสร้างไว้ลิงก์และหมวดหมู่ 5. ทำ�การเลือก Post/Page และ Plugin ที่ต้องการเพิ่มไปที่เมนู 6. เสร็จแล้วให้ทำ�การคลิกที่ ปุ่ม Add to Menu
52
เมื่อเข้าไปที่หน้าหลักของเว็บ Post/Page และ Plugin ที่ต้องการจะปรากฎในเมนูที่เราสร้าง
54
การหาและการติดตั้ง Plug-in
1.1 ให้ไปที่เว็บไซต์ http://wordpress.org/extend/plugins/ หรือเว็บไซต์อื่นที่แจก Plugin ของ WordPress ฟรี เช่น http://lesterchan.net/portfolio/programming/php/ หรือ สามารถ Search หา จาก Google.com ได้. 1.2 ในเว็บไซต์ของ WordPress จะมี Plugin ให้เราเลือกมากมาย ลองคลิกเข้าไปอ่านความสามารถ วิธีการติดตั้ง วิธีการใช้งานก่อน ถ้าถูกใจแล้วก็ดาวน์โหลดมาเก็บไว้ที่เครื่องได้
1.3 เมื่อได้ไฟล์ Plugin นามสกุล .zip มาแล้ว สามารถติดตั้งได้ 2 วิธีคือ วิธีที่ 1 ไม่ต้องแตกไฟล์ ให้ Login เข้าไปหน้าจัดการ Blog เลือกเมนู Plugin>Add New จากนั้นให้ “Browse” เลือกไฟล์ Plugin นามสกุล .zip ที่เก็บอยู่ในเครื่อง แล้วกดปุ่ม “Install Now”
55
รอจนกว่าจะขึ้นหน้าแสดงข้อความ Successfully installed the plugin. จากนั้นให้คลิกที่ Activate Plugin เพื่อเริ่มใช้งาน Plugin ตัวนั้น
วิธีที่2 ให้แตกไฟล์ .zip นั้นก่อน แล้ว Upload ทั้ง folder ไปที่ Host ตาม path นี้ /public_html/ yourblog/wp-content/plugins (บางครั้ง Plugin ก็เป็นแค่ไฟล์ .php ไฟล์เดียว) จากนั้น Login เข้าหน้าจัดการ Blog เลือกเมนู Plugin > Installedที่หน้าจอจะแสดง Plugin ที่มี ทั้งหมด ที่อยู่ใน folder wp-content>plugins แบ่งเป็นส่วนของ Currently Active Plugins คือ Plugin ที่กำ�ลังใช้งานอยู่ (ด้านบน) และส่วน Inactive Plugins จะมีรายชื่อ Plugin ที่ไม่ได้ถูกใช้งาน (ด้านล่าง) ในส่วนของ Inactive Plugins ให้คลิกที่ Action : Activate ในบรรทัดของ Plugin ที่เราต้องการใช้งาน
การใช้งาน Plugin แต่ละตัวไม่เหมือนกัน บางตัวแค่ Activate ก็ทำ�งานทันที เราไม่ต้องทำ�อะไร เพิ่มเติมอีก แต่บางตัวก็ต้องมีการ set เพิ่มเติม ให้อ่านวิธีใช้จากคำ�แนะนำ�การใช้งานของ Plugin นั้นๆ อีก ที เมื่อติดตั้งแล้วเรายังสามารถปรับค่าต่างๆ ของ Plugin ได้ตามต้องการ ซึ่ง Plugin มักจะมาอยู่ในส่วนของ Settings / Tool
56
Fighting SPAM with Akismet
Akismet เป็น Plugin ตัวหนึ่งที่ช่วยต้องสู้กับ SPAM วิธีการค้นหาให้ไปที่ Plugins แล้วกด Add New
จากนั้นพิมพ์ akismet ในช่องค้นหา
จากนั้นคลิ๊กที่ Phugin Akismet แล้ว Installed ดังรูป
57
จากนั้นคลิ๊กที่ Settings จะเห็นได้ว่าเราได้ติดตั้ง Plugin Akismet เรียบร้อยแล้ว ให้เราคลิ๊ก Akismet
จากนั้นให้เราคลิ๊กที่ปุ่ม Get your API key
จากนั้นคลิ๊กที่ปุ่ม GET AN AKISMET API KEY
58
จากนั้นทำ�การกรอกข้อมูลเพื่อทำ�การสมัครเข้าใช้งาน
จากนั้นเลือกการใช้งานแบบ Basic กดที่ปุ่ม GET STANDED
จากนั้นทำ�การกรอกชื่อ แล้วกดปุ่ม Continue
59
เราจะได้ Akismet API Key ให้เราทำ�การ Copy Key
จากนั้นวางคีย์ ดังรูป เป็นการเสร็จสิ้น
60
การใช้งาน Nextgen สร้าง แกลลอรี่รูปภาพให้สมบูรณ์แบบ
ขั้นตอนที่ 1 เริ่มต้นด้วยการตั้งค่าการทำ�งานของ NextGEN Gallery ในกรณีที่ต้องการตั้งค่าการ ทำ�งานให้กับการสร้า’อัลบั้มเพิ่มเติมนอกเหนือจากที่ระบบได้ตั้งค้าไว้ให้ให้คลิกเลือกที่เมนู Gallery > Options จะปรากฏหน้าต่างการตั้งค่า ให้สามารถตั้งค่าต่าง ๆ ได้ดังนี้
รายละเอียดการตั้งค่า General Options การตั้งค่าทั่วไป Thumbnails การตั้งค่าขนาดของรูปย่อ Images การตั้งค่าขนาดของรูปภาพที่ต้องการให้แสดง Gallery การตั้งค่า Gallery Effects การใส่ Effects ให้กับอัลบั้มภาพ Watermark การใส่ลายน้ำ� Slideshow การกำ�หนดขนาดและรูปแบบของ Slideshow ขั้นตอนที่ 2 การสร้างอัลบั้มและการอัพโหลดรูปเลือกเมนูคำ�สั่ง Add Gallery / Images > ใส่ชื่อ อัลบั้มที่ต้องการ > คลิกปุ่ม Add gallery ดังภาพด้านล่าง
61
หลังจากสร้างอัลบั้มแล้วให้ทำ�การอัพโหลดไฟล์รูปที่ต้องการ ดังภาพด้านล่าง
หลังจากการอัพโหลดไฟล์แล้วถ้าต้องการให้รูปแสดงผลบนหน้าเว็บ ต้องนำ�ไฟล์รูปที่สร้างไว้ไปใส่ใน บทความ หรือเรื่องของ WordPress ซึ่งจะพบว่ามีเครื่องมือที่เพิ่มเข้ามาหนึ่งเครื่องมือคือ NextGEN.desc เป็นเครื่องมือของการนำ�รูปภาพจาก Gallery ที่สร้างจาก NextGEN Gallery มาใช้งาน ซึ่งมีหน้าต่างการ ทำ�งานดังนี้
เมื่อตั้งค่าเรียบร้อยแล้วให้คลิกปุ่ม Insert แล้วทำ�การบันทึกการเขียนบทความเมื่อรีเฟรชหน้าเว็บก็จะ ปรากฎรูปภาพดังตัวอย่างด้านล่าง Note : การตั้งชื่อ Gallery ควรสร้างเป็นชื่อที่เป็นภาษาอังกฤษและตัวเลข เพราะการตั้งชื่อเป็นภาษา ไทยอาจทำ�ให้เกิดการผิดพลาดในการอัพโหลดไฟล์ภาพไปเก็บในเครื่อง Server ได้ นอกจากการเขียนบทความ NextGEN Gallery ยังได้ติดตั้ง Widgets สำ�หรับเพิ่มเติมให้ซึ่งประกอบ ไปด้วย NextGEN Media RSS เป็นการแบ่งปันอัลบั้มรูปให้เว็บอื่นๆ นำ�ไปใช้ได้โดยการ Feed NextGEN Widgets เป็นการนำ�อัลบั้มรูปไปแสดงไว้ในส่วนของ Widgets ของเว็บไซต์
62
NextGEN Slideshows เป็นการนำ�รูปทั้งหมดมาแสดงผลในส่วนของ Widgets ในรูปแบบของ Slideshow
วิธีการใช้งานให้เลือกที่เมนู รูปแบบบล็อก > Widgets มองหาเมนู Widgets ที่ต้องการอาจจะ เป็น NextGEN Slideshows หรือ NextGEN Widgets คลิกที่ Widgets ที่ต้องการค้างไว้ แล้วลากไปใส่ใน ตำ�แหน่งที่ต้องการดังภาพด้านล่าง
63
ทำ�ความเข้าใจเทคนิคการทำ� SEO Search engine optimization (SEO) คือ การที่ทำ�ให้เว็บของเรามีลำ�ดับที่ดีในการขนหาของ Search engine ยกตัวอย่างที่เป็นที่นิยมที่สุด เช่น Google, Bing การทำ� seo นี้มีความสำ�คัญค่อนข้างมากเลยทีเดียว สำ�หรับเว็บที่ต้องการทราฟฟิคหรือคนเข้าเว็บจากทาง search เพราะเว็บที่ติดอันดับต้นๆ นั้น ย่อมจะถูกเปิด อ่านก่อนเสมอ คนส่วนใหญ่มักจะไม่เปิดหน้าค้นหาเกิน 5 หน้าแน่นอน โดยเฉพาะหากเราต้องการที่จะขาย สินค้าชิ้นหนึ่ง เรายิ่งจำ�เป็นอย่างยิ่งที่จะทำ�ให้เว็บของเรานั้นติดอันดับต้นๆ ให้ได้ แต่ก่อนนั้นมีการลงทุนอย่าง มาก เป็นจำ�นวนเงินหมื่นเงินแสนสำ�หรับการทำ� seo นี้ แต่ปัจจุบัน เนื่องจาก search engine ต่างๆ ได้มีกา รอัพเดตอัลกอริทึ่มใหม่ออกมาเรื่อยๆ เปลี่ยนแปลงวิธีการคัดสรรให้พัฒนายิ่งขึ้นเรื่อยๆ ทำ�ให้การให้บริการนี้ เริ่มล้มหายตายจาก ผู้คนหันมาซื้อโฆษณาจาก Google โดยตรง หรือการโปรโมทผ่านเฟซบุคและโซเชี่ยวมีเดีย อื่นๆ เพื่อให้เข้าถึงกลุ่มผู้ชมได้มากยิ่งขึ้น
แต่ถึงกระนั้น การทำ� seo ก็ยังคงสำ�คัญอยู่เช่นเดิมสำ�หรับการทำ�เว็บไซต์ โดย WordPress นั้นขึ้นชื่อ ว่ามีประสิทธิภาพและทำ� seo ขึ้นได้ง่ายสุดๆ อาจจะเป็นเพราะโครงสร้างต่างๆ รวมถึงเครื่องมือที่มีมาให้นั้น ช่วยให้ผู้ใช้งานปรับแต่งได้สะดวกมากยิ่งขึ้น ว่ากันว่า Less is more ทำ�ไม่ต้องเยอะ ทำ�ให้สะอาดๆ นั่นแหละ ดีที่สุด เพราะ google นั้นหวังให้ผู้อ่านได้รับสิ่งที่มีประโยชน์มากที่สุด สิ่งที่เราควรใส่ใจมากที่สุดก็จึงควรจะ เป็น “Content” หรือเนื้อหา นั่นเอง ดังนั้น Seo วันนี้เราว่าด้วยเรื่องของ Onpage เพราะเกี่ยวกับการทำ� seo กับเนื้อหาโดยตรง สิ่งต่างๆ ต่อไปนี้ ว่ากันว่า ทำ�แล้ว ช่วยให้ seo ดีขึ้น เว็บติดอันดับดีขึ้นอย่างแน่นอน แล้วก็ไม่ได้ทำ�ยากอะไรด้วย เป็น วิธีพื้นๆ ที่ปลอดภัยที่สุด
64
1. Title หรือ ชื่อเรื่อง สิ่งนี้มีความสำ�คัญอย่างมากในการเขียนบทความ เพราะมันเป็นสิ่งแรกที่ Google นั้นจะนำ�ไปแสดงในผลการค้นหา และเป็นคีย์หลักที่จะกำ�หนดเนื้อหาต่างๆ ในบทความ ยกเว้นเว็บ ข่าว ที่ปัจจุบันนี้เน้นสร้าง title หลอกให้คิดว่าเป็นเรื่องดราม่าเสียเป็นส่วนใหญ่ นอกจาก Title ที่ควรตั้งให้ น่าสนใจแล้ว ก็ควรมี keyword ของสิ่งที่เราต้องการจะเขียนถึงแทรกอยู่ในนั้นด้วย นอกจากนี้ WordPress ยังแปลง Title นี้ไปเป็น url ให้เราแบบอัตโนมัติหากเราได้ตั้งค่า url แบบ postname ไว้ในตอนที่เรา ตั้งค่า Permalinks ถึงแม้หลายท่านจะบอกว่า google เริ่มลดความสำ�คัญของ url แล้วก็ตาม
2. Heading คือแท็กหนึ่งของ Html ที่ถูกนำ�มาใช้เพื่อเป็นส่วนหนึ่งในการกรองเนื้อหาที่สำ�คัญของ เว็บ แปลตามตัวตรงๆ ก็คือ หัวข้อเรื่อง บทความแต่ละบทความนั้นควรมี heading ที่สอดคล้องกับ title อย่างเช่นบทความนี้ เราก็ใส่ heading 2 (แท็ก h2) ให้กับหัวข้อเรื่องในบรรทัดแรก ย่อหน้าแรกเลยคือคำ�ว่า Search engine optimization (SEO) เนื่องจาก heading 1 (h1) นั้นจะถูกใช้อัตโนมัติใน title แล้ว (โดย ธีมส่วนใหญ่) ส่วนใหญ่เขาเตรียมไว้ให้เราหลายอย่างแล้ว มันถึงได้แรงไง เอาเป็นว่า ก่อนที่จะเขียนบทความ ใดๆ ให้เรานึกในใจก่อนว่าจะใช้ keyword คำ�ไหนที่สามารถนำ�มาเป็นหัวข้อได้บ้าง โดยพยายามให้เชื่อมโยง กับ Title ด้านบน และสอดคล้องกับสิ่งที่เราต้องการจะเขียน ไม่ใช่จะเขียนถึง ไข่ไก่ แต่คำ�สำ�คัญมีแต่ ผัก ผล ไม้ ซึ่งไม่ใกล้เคียงกันเลย Heading นั้นควรมีอย่างน้อยในย่อหน้าแรกชื่อสอดคล้องกันกับ Title และเนื้อหาในย่อหน้านั้นก็ควร มีคีย์เวิร์ดหรือคำ�หลักของบทความอยู่ในนั้นด้วย
65
3. เน้นคำ�สำ�คัญ การเน้นคำ�สำ�คัญด้วย ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ เพื่อให้ search engine ได้รู้ ว่าคำ�เหล่านี้สำ�คัญ และมันก็จะรู้ว่าบทความนี้พูดถึงเกี่ยวกับเรื่องเหล่านี้เมื่อมีการค้นหา แต่ห้ามสแปมเป็นอัน ขาด ไม่ใช่ใส่ตัวหนา ตัวเอียง ขีดเส้นใต้กันทุกสองสามประโยค แบบนี้เขาก็ไม่ปลื้มเช่นกันนะคะ เพราะมันจะ มองว่าเป็นบทความที่ไม่มีคุณภาพ น้ำ�ท่วมทุ่งผักบุ้งโหลงเหลง เอาเป็นว่าให้ผู้อ่านอ่านรู้เรื่อง เน้นความสมจริง ไม่ใช่เน้นมั่วไปหมดค่ะ เครื่องมือมีให้แล้ว ใช้ให้เป็นประโยชน์
4. รูปภาพ สิ่งหนึ่งที่เมื่อเราค้นหาแล้วจะมีที่หน้าแรกบ่อยมากๆ เลยนั่นก็คือ รูปภาพ โดยเฉพาะเว็บ ขายสินค้า ภาพสวยๆ ใครก็อยากคลิกใช่มั๊ย การทำ� Seo โดยละเลยการใส่ข้อมูลให้ search engine รู้ว่า ภาพของเราเกี่ยวกับอะไรนั้นถือว่าเฟลมาก คอมพิวเตอร์นั้นไม่สามารถดูภาพออกว่ามันคือภาพอะไร ดังนั้น เราจึงจำ�เป็นที่จะต้องบอกให้มันรู้ว่า ภาพนี้คือภาพอะไร อาจจะมองดูเป็นการเสียเวลา แต่เชื่อเถอะค่ะว่าไม่มี อะไรเสียไปโดยเปล่าประโยชน์แน่นอน สิ่งที่เราสามารถทำ� Seo ให้กับรูปภาพได้ก็คือการกำ�หนดแท็ก Alt (Alternative) และ Title ให้กับภาพ (ส่วนชื่อไฟล์ภาษาไทยอาจมีปัญหาในอนาคต ขอไม่เอ่ยถึง แต่ใครจะใช้ ก็ไม่ว่ากัน) แล้วจะทำ�ยังไง เพราะ WordPress เตรียมไว้แล้ว เราแค่เสียเวลากรอกมันนิดหน่อยเท่านั้นเองค่ะ โดยเมื่อเราแทรกภาพ แล้วทำ�การคลิกที่ภาพ จะมีกรอบสี่เหลี่ยมและรูปดินสอให้เราแก้ไขภาพ ตรงนั้นแหละ ค่ะ ให้เราใส่ข้อมูล keyword หรือข้อความอะไรก็ได้ ที่เราต้องการจะสื่อว่าภาพนี้คืออะไร หรือภาพนี้เกี่ยวกับ บทความนี้อย่างไร อาจจะตั้งเป็นชื่อเดียวกันกับชื่อเรื่องของบทความเลยก็ได้
66
5. ลิงค์ การสร้างการเชื่อมโยงลิงค์ในเว็บไซต์นั้นเป็นประโยชน์อย่างยิ่ง ทั้งต่อ Seo และคนอ่าน เพราะถ้ามีการเชื่อมโยงลิงค์ดีๆ เราจะสามารถทำ�ให้ผู้อ่านอยู่กับเรานานขึ้นด้วยการคลิกลิงค์ไปอ่านยังบทความ อื่นๆ ของเรา การสร้างลิงค์นี้ก็ง่ายมากใน WordPress เพียงแต่มีหลักการ Seo ง่ายๆ คือ ลิงค์ควรมีคำ�หลัก อยู่ด้วย แทนที่เราจะใช้คำ�ว่า คลิกที่ เป็นลิงค์ ซึ่งไม่เกิดประโยชน์อะไรเลย เราก็ทำ�ลิงค์เป็นประโยคไปเลยก็ได้ โดยให้ลิงค์ดูกลมกลืนไปกับบทความ และมีคำ�หลักของบทความนั้นๆ อยู่ในลิงค์ด้วย จะลิงค์ไปที่บทความไหน ก็ใช้ชื่อบทความนั้นนั่นแหละมาเป็นลิงค์ การสร้าง Link ใน WordPress นั้นก็แสนง่าย มีกล่องให้เสริมหา บทความที่จะลิงค์ได้เลย แถมยังสร้าง Title ให้ลิงค์อัตโนมัติ ซัพพอร์ต Seo สุดๆ
6. Featured image , Excerpt ข้อนี้ไม่เชิงว่ามีผลกับ Seo แต่ Excerpt (ตัดทอน) และ Featured image (รูปพิเศษ) มีผลกับผู้อ่านโดยตรง เพราะมันเปรียบเสมือน Tailor หนังตัวอย่าง ที่จะบอก ให้คนอ่านได้รู้ว่าคุณจะเข้าไปพบกับอะไรบ้าง เราจะเขียนให้น่าสนใจ ตื่นเต้น หรือน่าเบื่อก็อยู่ที่ตรงนี้แหละ โดยเราจะเห็น Excerpt ในบางธีม โดยเฉพาะธีมแนวบล็อก โดยให้เรา เขียนเนื้อเรื่องย่อของบทความนั้นลงไป มันก็จะไปโชว์ที่หน้าแรกหรือหน้ารวม เมื่อผู้ชมอ่านดูก็จะรู้ว่าบทความนี้ มีเนื้อหาเกี่ยวกับอะไรบ้าง โดยปกติ หากเราไม่เขียนเอง ระบบจะดึง ข้อความบนย่อหน้าแรกมาแสดงแทน ซึ่งถ้าอยากให้น่าสนใจกว่านั้น เราก็ ควรจะเสียเวลาซักนิด เขียนมันขึ้นมา เองจะดีกว่า ส่วน Featured image
67
7. Social อย่างที่เราทราบกันว่าเดี๋ยวนี้ Facebook มา แรงมากๆ ในบ้านเรา ถ้าเป็นต่างประเทศก็จะมีใช้กันอีกหลาย ตัวมาก ยิ่งบทความไหนมีคนแชร์มาก บทความนั้นก็จะยิ่งแรง ไปด้วย ดังนั้นจึงจำ�เป็นอย่างยิ่งที่เว็บจะต้องมี ปุ่มแชร์ โดย WordPress นั้นก็มีปลั๊กอินที่ใช้สำ�หรับแชร์หลายตัวมากเลย ที่เรา ได้เขียนไปแล้วก็จะมี Hupso share อันนี้ยืดหยุ่นแต่ก็ยังเรียบง่าย อยู่ พวกอลังๆ กว่านี้มีอีกเยอะ หรือง่ายกว่านั้น Jetpack ปลั๊กอิน เอนกประสงค์ ของเราก็มีปุ่มแชร์มาให้ด้วย แค่ลากๆ วางๆ ก็เสร็จ เรียบร้อย อีกทั้งยังมีฟังชั่น Publicize ซึ่งเมื่อเราคลิกปุ่ม Publish (เผยแพร่) บทความเราปุ๊บ มันก็จะทำ�การแชร์ไปยัง social ต่างๆ ไม่ว่าจะเป็น facebook, twitter, google+ ให้เราอัตโนมัติ Publicize แชร์อัตโนมัติเมื่อคลิก Publish
Share – ปุ่มแชร์ลากวาง ของ Jetpack อยากได้อันไหนบ้างก็ลากวางได้เลย
ปุ่มแชร์ที่ขาดไม่ได้
68
การปรับแต่งเว็บไซต์เพื่อรองรับ SEO ด้วยปลั๊กอิน WordPress SEO by Yoast WordPress SEO by Yoast คือปลั๊กอินที่ช่วยสำ�หรับการทำ� SEO บน WordPress อีกปลั๊กอินหนึ่งที่ มีคนใช้งานเยอะมากๆ ในปัจจุบัน โดยปลั๊กอินจะช่วยในการตั้งค่าต่างๆ และวิเคราะห์ seo ต่างๆ บนเว็บและ บทความของเรา โดยจะเป็นการทำ� seo แบบ onpage ซึ่งบางส่วนนั้นเราก็สามารถทำ�เองได้เช่นกัน การใช้งาน Yoast ในปกติแล้วเราจะใช้งาน Yoast มากที่สุดก็คือในการเขียนบทความนั่นเอง โดยเราจะใช้ Yoast ในการเขียน Title หรือ Description ขึ้นมาใหม่ ซึ่งอาจจะไม่ใช่ประโยคหรือข้อความแบบเดียวกันกับ ในบทความของเรา แต่ข้อความเหล่านี้จะเป็นข้อความที่เราต้องการให้แสดงบน Searh Engine และเมื่อแชร์ ไปบน Social Media ต่างๆ เพราะบางทีอาจจะมีปัญหาเกี่ยวกับการแสดงข้อความหรือรูปภาพไม่ตรง และ บางทีเราก็ต้องการใช้ข้อความของเราเองเพื่อที่จะสามารถระบุคำ�ที่เราต้องการให้ค้นหา หรือที่เรียกว่า การทำ� SEO SEO นี้ย่อมาจากคำ�ว่า Search Engine Optimization คือ การปรับปรุงให้เข้ากับเครื่องมือค้นหา ที่รู้จัก กันเป็นอย่างดี เช่น Google, Bing, Yahoo, Baidoo เป็นต้น หลังจากที่เราติดตั้งปลั๊กอินไปแล้ว เมื่อเราทำ�การเขียนบทความ ไม่ว่าจะเป็น Post หรือ Page ก็ตาม ด้านล่างจะมีกล่องที่เรียกว่า Yoast SEO กล่องนี้คือกล่อง Yoast Metabox ใช้สำ�หรับให้เราเขียน Title หรือ Description ขึ้นมาใหม่ให้น่าสนใจ โดยการแก้ไข Snippet คลิกที่ปุ่ม Edit snippet แล้วทำ�การแก้ไข Title (ในรูปจะเห็นว่า Title จะแปลกๆ อันนั้นเป็นการตั้งค่าเทมเพลตอัตโนมัติที่จะอธิบายถัดไป) , slug (url) และ Description ได้ตามต้องการ ขีดสีเขียวจะเต็มขึ้นเรื่อยๆ ตามความยาวของข้อความที่ควรจะใช้ ถ้าเปลี่ยนเป็น สีแดงแสดงว่าควรหยุดได้แล้ว เพราะจะยาวเกินไปสำ�หรับ Search Engine
69
ไฟเขียว ไฟแดง? ไฟเขียว ไฟเหลือง ไฟแดง เหล่านี้หาใช่ไฟจราจรไม่ แต่เป็นคะแนนที่ Yoast ทำ�การประเมินให้กับ หน้านั้นๆ โดยวัดจาก Focus Keyword ที่เรากำ�หนดให้กับหน้านั้นๆ โดยระบบจะนำ� Focus Keyword นี้ไป คำ�นวณกับเนื้อหาภายหน้านั้นๆ แล้วคำ�นวณคะแนน SEO ออกมาให้เราเป็นสัญลักษณ์ไฟสีต่างๆ ทั้งนี้ Focus Keyword นั้นไม่ใช่ตัวเดียวกันกับแท็ก meta keyword ที่เราเคยใช้กันนะคะ เป็นคนละตัว ซึ่ง meta keyword นั้นไม่ได้ถูกนำ�มาพิจารณาในเว็บไซต์แล้วไม่ว่าด้วยเหตุผลอะไรก็ตาม ดังนั้นการกำ�หนด Focus Keyword ในที่นี้ จึงเป็นเหมือนการกำ�หนดคำ�ที่เราต้องการทำ� SEO ให้ปลั๊กอินรู้ เพื่อที่จะได้คำ�นวณ และแนะนำ�ได้ถูกว่าบทความในหน้านั้นๆ ขาดเหลืออะไรบ้างที่จะช่วยให้ SEO ในหน้านั้นดีขึ้น
70
การกำ�หนดการแสดงผลให้กับ Social Network
เราสามารถกำ�หนดข้อมูล ไม่ว่าจะเป็น Title, Description, Featured image สำ�หรับการแชร์ไปยัง Social เช่น Facebook โดยเฉพาะได้ โดยการคลิกที่ไอคอนแชร์ แล้วเลือก Social Network ที่ต้องการ จาก นั้นก็ใส่ข้อมูลที่เราต้องการ รวมถึงเลือกรูปภาพที่อยากให้แชร์
หากเป็นการแก้ไขข้อความที่เคยมีการแชร์ไปแล้ว Facebook จะเก็บข้อมูลนั้นไว้แล้วเพื่อนำ�มาแสดง เราต้องทำ�การ Debug ลิงค์นี้ใหม่เสียก่อน โดยไปที่ https://developers.facebook.com/tools/debug/ จากนั้นใส่ลิงค์ที่ต้องการดีบั๊กแล้วกด Debug หากยังไม่ขึ้นรูปตรงตามที่เปลี่ยน ก็กด Scrape Again จนกว่าจะ ได้รูปตามต้องการ การตั้งค่า ส่วนใหญ่แล้วเราจะใช้งานในส่วนของ Title และ Description ในแต่ละบทความ กับ การแชร์ไปยัง Social Network เท่านั้น แต่ในบทความนี้เราจะดูฟังชั่นรวมๆ ด้วยค่ะ การตั้งค่าหลักของ Yoast นั้น หลังจาก ที่ติดตั้งแล้วจะมีเมนู SEO เป็นเมนูหลัก สามารถคลิกเพื่อการตั้งค่าอื่นๆ ได้
71
รายละเอียดพื้นฐานของเว็บ เราสามารถที่จะตั้งค่าชื่อเว็บไซต์ได้ที่นี่ แม้ว่าโดเมนเว็บเราจะเป็นชื่อนึง แต่ก็ใช้ชื่อเว็บไซต์เป็นอีก ชื่อนึงก็ได้ โดย Yoast จะทำ�การเขียนทับ หมายถึงเมื่อเปิดใช้งาน Yoast แล้ว Google ก็จะดึงเอาตามที่เรา กำ�หนดไว้ใน Yoast แทน ซึ่งเราสามารถเพิ่มรายละเอียดได้ว่าเว็บของเรานั้นเป็นรูปแบบบุคคล หรือบริษัท ก่อนหน้านี้เว็บเราเลือกเป็นแบบ Personal ตอนนี้ลองเปลี่ยนมาใช้แบบ Company ค่ะ เพราะอาจจะมี บริการอะไรเพิ่มเติมในอนาคต เป็นต้น สามารถใส่โลโก้บริษัทได้ด้วย
72
การใช้งาน TinyMCE Advanced เสริม WYSIWYG Editer ให้กับ WordPress TinyMCE Advanced เป็นเครื่องมือที่ช่วยสร้างเนื้อหาเว็บ เพื่อเพิ่มฟังก์ชั่นการของการสร้างเนื้อหา ให้น่าสนใจเนื่องจาก เครื่องมือของ WordPress ในบางครั้งเครื่องมือไม่เพียงพอต่อการใช้งานจริงจำ�เป็นต้อง มี Plugin TinyMCE Advanced มาช่วย วิธีการตั้งค่า 1. หลังจากติดตั้ง Plugin TinyMCE Advanced แล้ว เข้าเมนู ไปตั้งค่า > TinyMCE Advanced คลิกเปิด Enable the editor menu ดังรูป
2. จากนั้นลากกล่องเครื่องมือที่ต้องการขึ้นไปใส่ในแถบเมนูตามต้องการ
3. ตั้งค่าเสร็จกด Save Changes
73
การใช้งาน Contact Form 7 เพื่อสร้างฟอร์มเก็บข้อมูล และเก็บข้อมูลลง Database
Contact Form 7 คือปลั๊กอินที่ใช้สร้าง Contact form ตามชื่อเลย โดยเมื่อผู้ติดต่อทำ�การกรอก ข้อมูลในแบบฟอร์มติดต่อของเราและกดส่ง ข้อความนั้นก็จะถูกส่งไปยังอีเมลของเรา ซึ่งเราก็จะสามารถที่จะ ตอบผ่านอีเมลของเราได้เลย การใช้งาน Contact Form หลังจากติดตั้งปลั๊กอินแล้ว ให้เราไปที่เมนู Contact > Contact Forms
ปลั๊กอินจะสร้างฟอร์มพร้อมใช้ไว้ให้เราแล้ว 1 ฟอร์ม ซึ่งเป็นแบบฟอร์มติดต่อพื้นฐาน สามารถก๊อปปี้ Shortcode ไปใช้งานได้ ทันที โดยระบบจะตั้งค่าส่งไปยังอีเมลของแอดมินโดยอัตโนมัติ
การนำ� Contact form ไปใช้ก็เพียงแค่วาง Shortcode ไว้ในหน้าและตำ�แหน่งที่เราต้องการให้แสดง แบบฟอร์ม
เราก็จะได้ Contact form ง่ายๆ ไว้ใช้งานแล้ว เพิ่มตัวเลือกฟอร์มที่เราต้องการ เช่น หากเราต้องการให้ มีตัวเลือกแบบ drop down menu ในฟอร์ม ก็คลิกเพื่อ เพิ่ม
74
การสร้างฟอร์ม
เราสามารถที่จะแก้ไขฟอร์มเดิมที่มีอยู่แล้ว หรือสร้างฟอร์มใหม่ก็ได้ โดยในแต่ละเว็บอาจจะมีหลาย ฟอร์ม เช่น ฟอร์มสำ�หรับติดต่อธรรมดา ฟอร์มสำ�หรับติดต่อขอใช้บริการ ฟอร์มสำ�หรับติดต่อขอความช่วยเหลือ Support เป็นต้น วิธีการสร้างฟอร์มก็ไปที่เมนู Contact > Add New จากนั้นคลิกที่ปุ่ม Add New เลยก็ได้ หรือเลือก ภาษาแล้วคลิกที่ปุ่ม Add New ที่อยู่ด้านข้าง
เสร็จแล้วก็กรอกชื่อฟอร์มในช่อง Title
ระบบจะสร้างโครงสร้างของฟอร์มพื้นฐานไว้ให้เราเรียบร้อย
75
เพิ่มตัวเลือกฟอร์มที่เราต้องการ เช่น หากเราต้องการให้มีตัวเลือกแบบ drop down menu ใน ฟอร์ม ก็คลิกเพื่อเพิ่ม
จากนั้นเราก็ทำ�ใส่ค่าต่างๆ ที่เราต้องการให้มี โดยไม่จำ�เป็นต้องเปลี่ยนช่อง Name นะคะ หาก ต้องการให้แบบฟอร์มนั้นจำ�เป็นต้องเลือก คือถ้าไม่เลือกก็จะไม่สามารถส่งข้อความได้ ก็ให้เราต๊ิกที่ช่อง Required field ด้วย จากนั้นก็คลิกที่ปุ่ม Insert tag
ระบบก็จะทำ�การแทรกโค้ดของฟอร์มลงไปในแบบฟอร์มของเรา โดยเราสามารถที่จะเพิ่มข้อความได้ โดยใช้โค้ด html ง่ายๆ เราก็เพียงแค่ลอกจากแถวก่อนหน้าก็ได้
76
แบบฟอร์มที่เราสร้างเสร็จแล้ว
คลิกที่ปุ่ม Save เพื่อนำ�ฟอร์มไปใช้
ระบบก็จะสร้าง shortcode ให้เรานำ�ไปใช้งาน
77
ฟอร์มที่ได้จากการสร้างก่อนหน้านี้
หลังจากที่เราสร้างฟอร์เสร็จแล้ว ขั้นตอนต่อมาก็คือต้องมาสร้างโครงสร้างของเมลที่จะส่งไปหาเรา โดยการคลิกที่แท็บ Mail เพื่อทำ�การตั้งค่าระบบจะแสดง shortcode ของ Form แต่ละส่วนที่เราสร้างไว้ ก่อนหน้านี้ โดยตรงที่เอามาใช้งานก็คือส่วนของ Name ที่เราบอกว่าไม่ต้องเปลี่ยนนั่นเองค่ะ โดยให้เราทำ� การนำ�แท็กเหล่านี้ไปวางในส่วนต่างๆ ที่เราต้องการ ส่วนช่อง To ก็คืออีเมลที่จะถูกส่งไปถึงนั่นเอง ในรูป ด้านล่างนี้เราไม่จำ�เป็นต้องแก้ไขอะไรเลยค่ะ ใช้ตามที่ระบบตั้งมาให้แล้วก็ได้
78
และในช่อง Massage Body ก็คือส่วนที่จะแสดงในส่วนของข้อความในอีเมลของเรานั่นเอง เราสามารถเรียง ลำ�ดับก่อนหลังยังไงก็ได้ หรือจะใส่ข้อความอะไรในอีเมลก็ได้ อันนี้แล้วแต่ความต้องการของเราค่ะ เมื่อเสร็จ แล้วก็อย่าลืมกด Save ด้วย
ตัวอย่างเมลที่จะส่งถึงเราโดยจะเห็นว่ามีการเรียงเนื้อหาและข้อความตามที่เราได้เรียงไว้ก่อนหน้านี้ใน ส่วนของ Mail นั่นเอง
79
Messages
ในส่วนนี้เป็นการตั้งค่าข้อความที่จะแสดงในสถานการณ์ต่างๆ เช่น หากลืมกรอกในช่องที่จำ�เป็นต้อง กรอก จะแสดงข้อความว่ายังไง ส่งเรียบร้อยแล้วจะแสดงข้อความว่ายังไง เป็นต้น
การแนบไฟล์
หากเราต้องการให้มีการส่งไฟล์ไปกับอีเมลได้ด้วย ในการการสร้างฟอร์ม ก็ให้เลือกแทรก file ลงไปใน ฟอร์ม โดยกำ�หนดขนาดในช่อง File size limit (bytes)ไฟล์ที่อนุญาตให้อัพโหลดในช่อง Acceptable file types แล้วก็กด Insert ในฟอร์มเหมือนเดิม
80
ปรับแต่งข้อความตามต้องการ
ขั้นตอนต่อไปก็คือการตั้งค่าในส่วนของ Mail เหมือนที่เราทำ�ก่อนหน้านี้ เพียงแต่รอบนี้เราก๊อปปี้เอา แท็กของ file ไปใส่ในช่อง File Attachments แทน
Captcha คือการให้ผู้ที่จะส่งเมล ต้องกรอกรหัส Captcha เสียก่อน ถ้ารหัสถูกต้องเมลถึงจะทำ�การ ส่งออกไปได้ ใช้ในการกรอง spam หากเราแทรก CAPTCHA ในฟอร์ม ระบบจะให้เราติดตั้งปลั๊กอิน Really Simple CAPTCHA เสียก่อน ก็ให้เราติดตั้งให้เสร็จแล้วมากดแทรก captcha อีกครั้ง
ปกติเราจะแทรก captcha ไว้ก่อนหน้าปุ่มกด ส่ง นะคะ captcha นี้จะไม่จำ�เป็นต้องใส่ใน Mail จึง จะไม่มีโค้ดนี้ให้ใช้ในแท็บ Mail
เพียงเท่านี้เราก็สามารถสร้างแบบฟอร์มสำ�หรับให้ผู้อ่านหรือลูกค้าส่งข้อความหาเราแบบง่ายๆ ได้แล้ว
81
การใช้งาน Jetpack by WordPress.com ปลั๊กอินนี้จริงๆ แล้วเป็นสิ่งที่ทำ�งานอยู่บนบล็อกของ WordPress.com หากใครยังไม่รู้เกี่ยวกับ WordPress.com ลองอ่านเกี่ยวกับ WordPress คืออะไร ความแตกต่างระหว่าง wordpress.com และ wordpress.org ปลั๊กอินนี้ได้นำ�เอาความสามารถต่างๆ ที่คนที่บล็อกบน WordPress.com มาให้ผู้ใช้งาน แบบ selfhost ใช้บ้าง ใช้แบบฟรีๆ เช่นกัน แต่จำ�เป็นที่จะต้องมี User ของ wordpress.com เสียก่อน สามารถเข้าไปลงทะเบียนบล็อกฟรีที่ www.wordpress.com การตั้งค่า หลังจากติดตั้งปลั๊กอินแล้ว Jetpack จะให้เราทำ�การเชื่อมต่อกับ account ของ wordpress.com ก็ให้เราทำ�การเชื่อมต่อไป
จะเข้าสู่หน้า Authorize Jetpack ให้เรายืนยันการเชื่อมต่อทั้งสองเข้าด้วยกัน
82
เมื่อเสร็จสิ้นการเชื่อมต่อของทั้งสองแอคเค้าท์เข้าด้วยกันแล้ว Jetpack ก็พร้อมที่จะทำ�งาน ฟังชั่นพื้น ฐานต่างๆ จะถูก Activate มาเรียบร้อยแล้ว
การตั้งค่า Jetpack เราสามารถเปิดปิดฟังชั่นต่างๆ ได้เองตามต้องการ ด้วยการไปที่เมนู Jetpack > Settings เพื่อ Active การทำ�งานต่างๆ ของ Jetpack โดยเราสามารถเลือก Active, Deactivate หรือ Configure ฟังชั่นที่ต้องการ ใช้งานได้เลย
84
ทำ�ความเข้าใจกับ Theme ของ WordPress
WordPress Theme ก็คือหน้าตาของ เว็บไซต์ นั่นเอง หรืออาจะจะมองว่า มันเป็นหน้ากากก็ได้ถ้า เป็นการ ทำ�เว็บ ในยุคก่อนๆ ก็คงจะไม่มีอะไรมาก เพราะเครื่องมือต่างๆ ที่ใช้ในการออกแบบ หรือทำ�ให้ ธีม ของเว็บ มันดูดีนั้น มีน้อยมากๆ ต้องเขียนโค้ดอย่างเดียว ยุ่งยากมากๆ แต่ในปัจจุบันรูปแบบของ Theme ได้ มีการพัฒนาไปอย่างมาก เพราะนอกจากจะเป็นความสวยงามของเว็บไซต์เองแล้ว มันยังมีการสอดแทรกฟัง ก์ชั่นการทำ�งานต่างๆ เพิ่มเข้าไปอีกด้วย
แหล่งดาวน์โหลด Theme
https://themeforest.net WordPress.org https://kairaweb.com
เทคนิคการเลือก Theme แบบไม่ผิดหวัง
ขั้นตอนในการเลือก WordPress Theme ให้ถูกใจ 1. รู้ว่าตัวเองกำ�ลังจะทำ�เว็บเกี่ยวกับอะไร 2. เลือกสไตล์ของเว็บที่ชอบ แล้วเลือกเอาซักแนว เช่น แบบเรียบง่าย หรือแบบสีสัน ลูกเล่น 3. ดู Features ต่างๆ ของธีมที่เราเล็งๆ ไว้ ว่ามีฟังชั่นพิเศษอะไร สามารถปรับแต่งตรงไหนได้บ้าง จุดเด่น จุดด้อยที่เรารับได้ การต่อยอดในอนาคต 4. รู้จักวางแผนล่วงหน้า เช่น ถ้าตรงนี้ธีมเราไม่มีแล้วเราจะสามารถหาอะไรมาทดแทนได้ มีปลั๊กอินไหน ที่จะขยายความสามารถตรงนี้ได้บ้าง หากลองหาแล้วไม่เจอธีมที่ตรงตามความต้องการจริงๆ (น้อยมากที่จะ ตรงเป๊ะ) การรู้ว่าเราจะไปต่อยังไงจะช่วยให้เรามีหนทางอยู่เสมอ 5. ธีมเฉพาะด้านมักจะใช้งานง่ายกว่า และตรงเป้ากว่าหากเว็บที่เราจะทำ�นั้นมีธีมเฉพาะด้านอยู่ก็ให้ลอง ดูเป็นอันดับแรก 6. ดู Demo ของธีม ซึ่งก็คือตัวอย่างขณะออนไลน์จริงนั่นเอง บางธีมจะมีตัวอย่างหลายแบบเพื่อให้เรา พอนึกภาพออกว่ามันสามารถปรับแต่งได้ยังไงบ้าง 7. ศึกษารายละเอียดและเงื่อนไขการใช้งานและซัพพอร์ต หรือบริการเสริมอื่นๆ เช่น สามารถอัพเดตได้ นานเท่าไหร่ มีบริการช่วยเหลืออย่างไร สามารถใช้ได้กี่เว็บ เป็นต้น 8. หากเขามีธีมฟรีก็ลองโหลดมาเล่นดูซักตัว ผู้ขายบางเจ้ามักจะใช้ระบบเดียวกันกับทุกธีม เราอาจจะได้ เห็นว่าการตั้งค่าการใช้งานต่างๆ นั้นทำ�ได้ยากง่ายแค่ไหน
85
9. ถ้าเป็นไปได้ ให้พยายามดู Feedback จากคนที่เราจะซื้อด้วย อาจจะใช้วิธีการเสริช หรืออ่านจากการ ตอบคอมเม้นท์หรือเว็บบอร์ดถ้าเขาเปิดให้เข้าดูได้ เช่น Themeforest เราสามารถที่จะดูคอมเม้นท์ได้หมด 10. สุดท้ายแล้ว หากไม่ได้ตรงตามที่ต้องการจริงๆ ทั้งในเรื่องของการออกแบบและระบบที่เราต้องการ อาจจะต้องพึ่งมืออาชีพสร้างให้โดยเฉพาะ แม้จะพูดได้ว่า WordPress สามารถที่จะทำ�เว็บได้ทุกเว็บก็จริง แต่ บางทีการเขียนเองเพื่อการใช้งานเฉพาะก็สะดวกและง่ายกว่าการนั่งปรับแต่ง หากทางเลือกนี้เป็นทางเลือก สุดท้าย ก็ควรเตรียมทุนไว้ให้ดี และข้อตกลงต้องชัดเจนทั้ง 2 ฝ่าย
การติดตั้ง Theme และทำ�การ Activation การติดตั้งธีมจาก Server ของ wordpress.org วิธีนี้ดี สะดวก ง่าย และปลอดภัย เพราะสามารถติดตั้งผ่านหน้าควบคุม (Dashboard) ของ WordPressได้เลย ธีมที่โหลดโดยตรงจาก wordpress.org จะเป็นธีมฟรีทั้งหมด และปลอดภัยพอสมควร ดีกว่าโหลดจากแหล่งโหลดเถื่อนที่เราไม่รู้ที่มาที่ไป สามารถที่จะเลือกคุณสมบัติของธีมที่ต้องการค้นหาเพื่อให้ ตรงกับความต้องการของเรามากที่สุด
วิธีการติดตั้ง
1. ไปที่เมนู รูปแบบเว็บ> ธีม (Theme) 2. คลิกที่คำ�ว่า เพิ่มใหม่ (Add) 3. จะมีธีมมากมายมาให้เราเลือก เราสามารถคลิกที่ ตัวกรอง Feature (Feature Filter) เพื่อคัด เลือกคุณสมบัติของธีมที่ต้องการได้ 4. คลิกที่ ติดตั้ง (install) หรือ ดูก่อน (Preview) เพื่อดูตัวอย่างของธีมก็ได้ (การดูตัวอย่างธีม อาจจะไม่ได้เหมือนกับในภาพ เพราะตัวอย่างอาจจะยังไม่ได้เซ็ทค่าภายใน Theme Option ของธีมนั้นๆ เสีย ก่อน)install 5. เสร็จแล้วให้เลือกตัวเลือก ดูแบบเสมือนจริง (Preview) | เปิดใช้งาน (Active) | กลับไปที่ตัว ติดตั้ง Theme (Return to Theme installer) 6. ซึ่งหากกลับมาที่หน้าติดตั้งธีมก็จะเห็นข้อความบอกว่าธีมได้ติดตั้งเสร็จเรียบร้อยแล้ว 7. เมื่อกลับมาที่หน้า ธีม (Theme) ก็จะเห็นธีมที่เราเพิ่งติดตั้งพร้อมใช้งาน
86
การติดตั้งธีม WordPress จากแหล่งภายนอก ขั้นตอนแรกเราก็ต้องมีตัวไฟล์ธีมเสียก่อน ซึ่งหาได้จากเว็บไซต์ทั่วไป ไม่ว่าจะแบบฟรีหรือเสียเงินซึ่ง ไฟล์ที่ได้มาก็จะเป็นไฟล์ .zip การติดตั้ง 1. ทำ�การแตกไฟล์ .zip ที่โหลดมา 2. นำ�โฟลเดอร์ Theme ที่แตกออกมาจาก .zip ไปไว้ที่ โฟลเดอร์ที่ติดตั้งโปรแกรม xampp\ htdocs\โฟลเดอร์WordPress \wp-content\themes 3. เมื่อกลับมาที่หน้า ธีม (Theme) ที่ Dashboard ก็จะเห็นธีมที่เราเพิ่งติดตั้งพร้อมใช้งาน
ปรับแต่ง Theme ที่จะใช้สำ�หรับสร้างเว็บ
1. คลิกที่ รูปแบบเว็บ > ปรับแต่ง จะมีหน้าเว็บของเรา และเมนูในการปรับแต่งทางซ้ายมือ 2. เลือกปรับแต่ละหัวข้อตามต้องการ 3. เสร็จแล้วคลิกที่ บันทึกและเผยแพร่ เพื่อบันทึกการแก้ไขของเราและทำ�ให้คนที่เข้าเว็บเราเห็น การเปลี่ยนแปลงที่เราได้ทำ�ไป
88
Widget คืออะไร คือโปรแกรมเล็ก ๆ สวยงาม เสริมความสามารถให้ระบบปฏิบัติการที่คุณใช้
ถ้าดาวน์โหลดมาติดตั้งลงบนคอมพิวเตอร์ โปรแกรมเล็กๆ ที่ว่านี้ จะปรากฏตัวอยู่บนหน้าจอมอนิเตอร์ (Desktop) มีสีสันสวยงาม โปร่งใส และใช้งานที่แตกต่างกันไป ซึ่งอาจจะเป็นพยากรณ์อากาศ ปฏิทิน นาฬิกา ตารางนัดหมาย หรือแม้กระทั่งเป็นข่าวสารที่ส่งผ่านมาถึงหน้าจอคอมพิวเตอร์สามารถนำ�มาติด ตั้งบน Blog หรือเว็บไซต์ก็ได้ เพื่อเพิ่มสีสัน ให้บล็อกคุณทันสมัย
ระบบการจัดการ Widget
ในบทนี้เราจะศึกษาเกี่ยวกับการจัดการ Widget เครื่องมือจะมีบล็อกขนาดเล็กที่ทำ�หน้าที่เฉพาะ
เหล่านี้ให้การออกแบบและควบคุมโครงสร้างธีม WordPress • พวกเขาช่วยให้คุณสามารถเพิ่มเนื้อหาและคุณลักษณะ • พวกเขาสามารถลากได้อย่างง่ายดายและลดลงในพื้นที่วิดเจ็ต • วิดเจ็ตที่แตกต่างกันกับรูปแบบธีม พวกเขาจะไม่เหมือนกันสำ�หรับทุกรูปแบบ
ขั้นตอนที่ (1): คลิกที่ลักษณะ -> วิดเจ็ต
89
ขั้นตอนที่ (2): เมื่อคุณคลิกที่นี้คุณจะได้รับหน้าเว็บที่มีเครื่องมือ
ที่นี่เรามีสามประเภทของเครื่องมือและแถบด้านข้างให้ดูเกี่ยวกับเหล่านี้ในรายละเอียด: • วิดเจ็ตที่มีอยู่: คุณสามารถใช้เหล่านี้เพื่อเพิ่มเข้าไปในหลักแถบด้านข้าง • แถบด้านข้างไม่ได้ใช้งาน : เหล่านี้จะไม่ได้ใช้และสามารถลบออกอย่างถาวรจากรายการวิดเจ็ต • วิดเจ็ตที่ไม่ได้ใช้งาน: การเอาเครื่องมือจากแถบด้านข้าง แต่เก็บไว้ในการตั้งค่า • แถบด้านข้างหลัก: วิดเจ็ตที่คุณเพิ่มที่นี่จะปรากฏบนเว็บไซต์ของคุณ • จัดการใน Customizer: พาคุณกลับไปหน้าการปรับแต่ง
ขั้นตอนที่ (3): ลากและวางในแถบด้านข้างหลัก วิดเจ็ตที่คุณเพิ่มที่นี่แสดงบนเว็บไซต์ของคุณ
90
ระบบจัดการ Theme ขั้นตอนในการปรับแต่งในรูปแบบ WordPress ขั้นตอนที่ (1): คลิกที่ Appearance-> กำ�หนด
ขั้นตอนที่ (2): คุณจะได้รับหน้าที่แสดงด้านล่าง
ที่นี่ที่ด้านซ้ายที่เรามีส่วนการปรับแต่งและในส่วนขวาเรามีรูปแบบที่คุณเลือก ดังนั้นการเปลี่ยนแปลงใด ๆ ที่คุณทำ�ทางด้านซ้ายมือจะแสดงที่ด้านขวาของหน้า ด้านล่างเรามีตัวเลือกที่คุณต้องรู้; • ใช้งานรูปแบบ: ในส่วนนี้คุณสามารถเปลี่ยนชุดรูปแบบปัจจุบันเพียงโดยคลิกที่ ‘เปลี่ยน’
เมื่อคุณคลิกที่ ‘เปลี่ยน’ คุณจะได้รับรายชื่อของรูปแบบให้คลิกที่ใด ๆ ของรูปแบบแล้วบอกว่า ‘บันทึกและ ดำ�เนินการต่อ’ ธีมของคุณจะถูกบันทึกไว้
91
• เว็บไซต์ชื่อและสโลแกน: ที่นี่เพิ่มชื่อเว็บไซต์ของคุณและสโลแกนที่คุณต้องการจะเพิ่มเว็บไซต์ของคุณ
เพิ่มชื่อชื่อของคุณในส่วน ‘เว็บไซต์ชื่อ’ และสโลแกนของคุณในช่อง ‘สโลแกน’ • สี: เปลี่ยนสีส่วนหัวของข้อความของคุณที่นี่ ในขณะที่คุณเลื่อนไปรอบ ๆ สีที่คุณพบการเปลี่ยนแปลง ที่เกิดขึ้นในทางด้านขวาของหน้าเว็บของคุณ คุณยังสามารถเพิ่มสีของคุณเองลงในกล่องที่ตั้งอยู่ในระหว่างสี ปัจจุบัน ‘และ’ เริ่มต้น
92
• ภาพส่วนหัว: เพิ่มภาพส่วนหัวได้โดยเลือกจากคำ�แนะนำ�หรือคุณสามารถเพิ่มภาพของคุณเองโดย คลิกที่ “เพิ่มภาพใหม่ ‘
•
วิดเจ็ต: เพิ่มวิดเจ็ตไปยังเว็บไซต์ของคุณจากที่นี่
เมื่อคุณคลิกที่เครื่องหมายลูกศรที่คุณจะได้รับเลื่อนนี้
ที่นี่เรามีสองตัวเลือก o ครั้งแรกคือ ‘หลักพื้นที่ Widget’ เมื่อคุณคลิกที่นี้คุณจะได้รับรายชื่อของเครื่องมือที่จะแสดงในพื้นที่ท้าย กระดาษอีก
93
เมื่อคุณคลิกที่ใด ๆ ของเครื่องมือที่เลื่อนลงจะปรากฏขึ้นซึ่งคุณสามารถแก้ไขเพิ่มเติมหรือเพิ่มมากขึ้น ตัวอย่างเช่นหากคุณต้องการที่จะเพิ่มหมวดหมู่แล้วมองไปที่ภาพด้านล่าง
ในภาพนี้ที่คุณสามารถดูคุณสามารถเพิ่มหมวดหมู่ของคุณในส่วน ‘ชื่อ’ ช่องใดก็ได้ที่ต้องการ หากคุณไม่ ต้องการที่จะเพิ่มใด ๆ แล้วพูดว่า ‘ลบ’ เดียวกันจะไปสำ�หรับเครื่องมืออื่น ๆ มากเกินไป o Widget รอง: ที่นี่คุณจะต้องคลิกที่ “เพิ่มวิดเจ็ต ‘และคุณได้รับแถบด้านข้างที่มีรายชื่อของเครื่องมือที่ แตกต่างกัน คลิกที่ใด ๆ และจะเพิ่มขึ้นไปยังรายการเครื่องมือของคุณ
หากคุณต้องการที่จะเพิ่มวิดเจ็ตแล้วคลิกที่ “เพิ่มวิดเจ็ต ‘อีกครั้งและคุณสามารถเพิ่มได้มากเท่าที่คุณต้องการ วิดเจ็ต
94
o ด้านหน้าแบบคงที่: เลือกอย่างใดอย่างหนึ่งโพสต์ล่าสุดหรือหน้าคงที่สำ�หรับเว็บไซต์ของคุณ
96
การตั้งค่ารายละเอียดส่วนบุคคล
ในเรื่องนี้เราจะได้เรียนรู้เกี่ยวกับการตั้งค่ารายละเอียดส่วนบุคคลใน WordPress
ขั้นตอนที่ (1): คลิกที่ Users-> โปรไฟล์ของคุณจากแถบนำ�ทางด้านซ้าย
ขั้นตอนที่ (2): เมื่อคุณคลิกที่โปรไฟล์ของคุณ ‘’ คุณจะได้รับหน้าจอด้านล่าง
ตัวเลือกส่วนบุคคล • ภาพบรรณาธิการ: ในขณะที่คุณกำ�ลังเพิ่มโพสต์ / หน้าเว็บไซต์ของคุณคุณสามารถเปิดใช้งานการตั้งค่า นี้หากคุณต้องการ หากคุณปิดการใช้งานคุณจะไม่สามารถที่จะใช้ตัวเลือกนี้ • โทนสี Admin: คุณสามารถเก็บสีของเว็บไซต์ของคุณ WordPress โดยการเลือกดังต่อไปนี้
97
• แป้นพิมพ์ลัด: ถ้าคุณเป็นเร็วเกินไปที่ได้รับงานของคุณทำ�ได้และต้องแป้นพิมพ์ลัดแล้วคุณ
สามารถตรวจสอบในช่องนี้
• แถบเครื่องมือ: หากคุณตรวจสอบบนกล่องนี้คุณสามารถดูแถบเครื่องมือที่เมื่อคุณกำ�ลังใช้
WordPress
ชื่อ
• ชื่อผู้ใช้: ป้อนชื่อผู้ใช้ของคุณ
• ชื่อ / นามสกุล: ใส่ชื่อของคุณและนามสกุล
• ชื่อเล่น: ใส่ชื่อนิคถ้ามี
• ชื่อที่แสดงต่อสาธารณะในฐานะ: กล่องตรวจสอบว่าคุณต้องการให้ชื่อของคุณจะปรากฏต่อ
สาธารณะ
ข้อมูลติดต่อ
• อีเมล์: ใส่ที่อยู่อีเมลที่ถูกต้อง
• เว็บไซต์: พิมพ์ที่อยู่เว็บของคุณ
เกี่ยวกับตัวเอง
• ข้อมูลชีวประวัติ: รายละเอียดบางอย่างเกี่ยวกับคุณ
• รหัสผ่านใหม่: ใส่รหัสผ่านที่คุณต้องการให้
• ทำ�ซ้ำ�รหัสผ่าน: ป้อนรหัสผ่าน รหัสผ่านต้องมี 7 ตัวอักษร
• รูปภาพของคุณ: คุณสามารถอัปโหลดภาพของคุณเองจากคอมพิวเตอร์ของคุณ นี้จะเป็นรูป
โปรไฟล์ของคุณ
ขั้นตอนที่ (3): หลังจากที่คุณได้รับการปรับปรุงเปลี่ยนแปลงทั้งหมดที่คุณต้องคลิกที่โปรไฟล์การอัพเดท
98
บทบาทของผู้ใช้/สิทธิการใช้งาน
ในบทนี้เราจะได้เรียนรู้เกี่ยวกับบทบาทของผู้ใช้ในเวิร์ดเพรส ผู้ใช้ทุกคนมีบทบาทของตัวเองในชื่อ
บทบาทเป็นเช่นสิทธิ์ที่กำ�หนดให้กับผู้ใช้โดยเฉพาะอย่างยิ่งในการเข้าถึงเว็บไซต์เวิร์ดเพรส บทบาทเหล่านี้ สามารถได้รับจัดสรรจากผู้ดูแลระบบเท่านั้น โดยมีดังต่อไปนี้ • ผู้ดูแลระบบ: Administrator มีสิทธิทั้งหมด ผู้ดูแลระบบสามารถทำ�อะไรและทุกอย่างในเว็บไซต์ชื่อ
เขาสามารถสร้างผู้ดูแลระบบเพิ่มเติมเชิญผู้ใช้มากขึ้นและยังสามารถลบออกได้
• บรรณาธิการ: แก้ไขมีการเข้าถึงทั้งหมดที่โพสต์หน้า, ความเห็น, หมวดหมู่, แท็กและการเชื่อมโยง พวก
เขาสามารถสร้างเผยแพร่แก้ไขหรือลบโพสต์หรือหน้าใด ๆ
• ผู้แต่ง: ผู้เขียนสามารถเขียนโพสต์ภาพที่อัปโหลดแก้ไขและเผยแพร่โพสต์ของตัวเอง • Contributor: Contributor เท่านั้นที่สามารถเขียนและแก้ไขการตอบกระทู้ของพวกเขาจนกว่าการ
ตีพิมพ์ พวกเขาสามารถสร้างโพสต์ของตัวเองและหน้า แต่ไม่สามารถเผยแพร่ได้ พวกเขาไม่สามารถ
อัปโหลดภาพหรือไฟล์ แต่สามารถดูสถานะของเว็บไซต์ของคุณ เมื่อพวกเขาต้องการที่จะเผยแพร่
โพสต์ใด ๆ ก็ต้องได้รับแจ้งครั้งแรกส่วนบุคคลไปยังผู้ดูแลโดยการมีส่วนร่วมในการตรวจสอบ โพสต์
เมื่อได้รับการอนุมัติมีส่วนร่วมไม่สามารถทำ�การเปลี่ยนแปลงใด ๆ ที่ครั้งหนึ่งเคยตีพิมพ์
• ผู้ติดตาม: ติดตามเท่านั้นที่สามารถอ่านและแสดงความคิดเห็นในโพสต์ ผู้ติดตามจะเป็นคนที่ได้ลงนาม
ในบัญชีของคุณได้รับการปรับปรุง
• Viewer: ผู้ชมสามารถดูกระทู้ของคุณ พวกเขาไม่สามารถแก้ไข แต่สามารถแสดงความคิดเห็นในโพสต์
99
การปรับ แต่งค่า โปรไฟล์
ในเรื่องนี้จะขอพูดถึงเกี่ยวกับรูปภาพของผู้ใช้ใน WordPress เพื่อเพิ่มภาพถ่ายของผู้ใช้ใน WordPress
คุณต้องติดตั้งปลั๊กอินรูปภาพของผู้ใช้จากปลั๊กอิน WordPress มันจะช่วยให้คุณสามารถเพิ่มรูปภาพของคุณ เองไปยังโปรไฟล์ของคุณ WordPress ขั้นตอนที่ (1): คลิกที่ตั้งค่า -> รูปภาพของผู้ใช้ใน WordPress
ขั้นตอนที่ (2): ตั้งมิติภาพขนาดเล็กสำ�หรับคุณและทำ�การเปลี่ยนแปลงที่จำ�เป็นและจากนั้นคลิกที่ปุ่มตัวเลือก การอัพเดท ขั้นตอนที่ (3): ถัดไปเพื่อดูผู้ใช้ปลั๊กอินภาพจะเปิดใช้งานไปยังผู้ใช้ -> โปรไฟล์ของคุณ ในหน้าโปรไฟล์ของ คุณคุณสามารถดูในส่วนของภาพของคุณจะถูกเพิ่ม ที่นี่คุณสามารถอัปโหลดภาพของคุณจะแสดงเป็นภาพ โปรไฟล์
100
การเพิ่ม ลบ แก้ไข สมาชิก และการกำ�หนดสิทธิ การแก้ไขผู้ใช้ ขั้นตอนที่ (1): ผู้ใช้คลิกที่ -> ผู้ใช้ทั้งหมดใน WordPress
ขั้นตอนที่ (2): ถัดไปคุณจะดูรายการของผู้ใช้
มีอีกสองแท็บปัจจุบันที่มันเป็น • ผู้ดูแลระบบ: รายชื่อของผู้บริหารจะปรากฏ • สมาชิก: รายชื่อของสมาชิกที่จะแสดง เมื่อเราคลิกที่เปลี่ยนบทบาทไปยังกล่องรายการแบบเลื่อนลงจะปรากฏเป็นที่ปรากฏข้างต้น • สมาชิก: คนที่สามารถจัดการโปรไฟล์ของเขา • Contributor: คนที่สามารถเขียนและกำ�กับดูแลการซ่อนข้อความของตัวเอง แต่ไม่สามารถเผยแพร่ได้ • ผู้เขียน: คนที่สามารถเผยแพร่และจัดการโพสต์ของเขาเอง • บรรณาธิการ: คนที่สามารถเผยแพร่และจัดการโพสต์และโพสต์ของผู้อื่น • ผู้ดูแลระบบ: คนที่มีการเข้าถึงทุกคุณสมบัติการบริหารงานในเว็บไซต์เดียว
101
คลิกที่กล่องกาเครื่องหมายของชื่อผู้ใช้เปลี่ยนบทบาทของผู้ใช้ คลิกที่ปุ่มเปลี่ยนและบทบาทผู้ใช้จะมีการ เปลี่ยนแปลงตามความเหมาะสม
ขั้นตอนที่ (3): คลิกที่แก้ไขตัวเลือกในการแก้ไขของผู้ใช้ที่แสดงด้านล่าง
ขั้นตอนที่ (4): ถัดไปแก้ไขหน้าผู้ใช้จะปรากฏขึ้น ที่นี่คุณสามารถแก้ไขหรือปรับเปลี่ยนทุกสาขาตามความ ต้องการของคุณและคลิกปรับปรุงผู้ใช้เพื่อบันทึกการเปลี่ยนแปลง
การลบผู้ใช้ ขั้นตอนที่ (1): ผู้ใช้คลิกที่ -> ผู้ใช้ทั้งหมดใน WordPress
102
ขั้นตอนที่ (2): ถัดไปรายชื่อผู้ได้รับการแสดงที่แสดงด้านล่าง
ขั้นตอนที่ (3): ตอนนี้เลือกหนึ่งที่คุณต้องการลบ และคลิกที่ลบ
ขั้นตอนที่ (4): เมื่อคุณคลิกที่ลบคุณจะได้รับหน้าต่อไป
ขั้นตอนที่ (5): เลือกตัวเลือกตามที่ต้องการและคลิกที่ยืนยันการลบ ผู้ใช้ของคุณจะถูกลบออก ขั้นตอนที่ (6): เรามีวิธีการของผู้ใช้ลบอีก ดูได้ที่ภาพด้านล่าง ที่นี่คุณสามารถเลือกผู้ใช้และลบในครั้งเดียวตรวจสอบกล่องและคลิกที่ลบออกจากแบบเลื่อนลงและคลิกที่ สมัคร
103
ขั้นตอนที่ (7): เมื่อคุณคลิกที่สมัครใช้จะถูกลบออก
106
Responsive Web Design คืออะไร
Responsive Web Design คือ เว็บที่ได้ถูกออกแบบให้การแสดงผลสามารถแสดงได้บนอุปกรณ์ หลากหลายขึ้น นอกเหนือไปจากคอมพิวเตอร์ เช่น อุปกรณ์ประเภท มือถือ แท็บเลท หลายแบบหลายขนาด หลากหลายระบบปฎิบัติ เช่น Android , ios และ Windows Mobile ได้อย่างเหมาะสม บนอุปกรณ์ที่แตก ต่างกัน โดยใช้ โค้ดร่วมกัน URL เดียวกัน
107
การติดตั้ง Responsive Web Design Plugin
ปัจจุบันนี้การเข้าใช้งานเว็บไซต์นั้น มีผู้ชมที่มาจากการชมผ่านมือถือ SmartPhoneหรือผ่าน Tablets กันมากขึ้น ด้วยหลายๆ ปัจจัย ไม่ว่าจะเป็นเทคโนโลยีใหม่ๆ หรือ ราคามือถือและtablets มีราคาที่ถูกลง ทำ�ให้มีการซื้อขายที่เพิ่มมากขึ้นการทำ�เว็บไซต์ของเรา ก็ควรจะพัฒนาให้ทันหรือเกือบจะทันกับเทคโนโลยีใหม่ๆ เพื่อความสะดวกของผู้เข้าชมเว็บไซต์ เรา ในที่นี้จะขอแนะนำ�ปลั๊กอินที่มีชื่อว่า WPtouch มีทั้งแบบฟรีและเสียเงิน ในที่นี้จะแนะนำ� แบบฟรี วิธีการติดตั้ง 1.ให้พิมพ์คำ�ว่า WPtouch ตรงช่องค้นหาปลั๊กอิน
108
2.คลิกติดตั้งปลั๊กอิน จากนั้นก็เปิดใช้งาน
3.เราก็จะได้ปลั๊กอินมาช่วยในเรื่องการแสดงผลในอุปกรณ์ต่างๆแล้ว และลองเช็คกับ Devices จริงๆดู
การปรับแต่ง Responsive Web Design
เมื่อเราได้ปลั๊กอินมาแล้ว ก็สามารถปรับแต่งได้ตามต้องการ ดังนี้ 1. เข้าไปเมนูชื่อ WPtouch เลือกตั้งค่า
109
2.จะปรากฏแสดงเมนูตั้งค่าให้
3.ตั้งค่าทั่วไป เราสามารถเปลี่ยนชื่อหัวข้อเว็บไซต์เราได้ ถ้าชื่อเว็บไซต์เรายาวเกินไป 4.ถ้ามันมีคำ�ว่า PRO ต่อท้าย จะไม่สามารถตั้งค่าได้ เนื่องจากต้องซื้อผลิตภัณฑ์ก่อน นอกนั้นสามารถทำ�ได้
110
5.การตั้งค่าอุปกรณ์ 6.การตั้งค่าเมนู
การใช้งานธีมที่มี Responsive Web Design
ต่อเนื่องจากปลั๊กอิน WPtouch ซึ่งเป็น Responsive ที่มีธีมให้เลือกใช้ โดยจะเชื่อมโยงจากธีมหลัก ของเรา แต่ทั้งนี้เราก็ต้องติดตั้งปลั๊กอินอื่นๆเข้ามาเสริมเพื่อดึงดูดความสนใจของผู้ชมเว็บไซต์และการเข้าถึงที่ ง่ายและสะดวกในการใช้เว็บไซต์ของเรา 1.เลือกปรับแต่งธีม คลิกที่ ไปยังโปรแกรมปรับแต่ง
111
2.จากนั้นก็ปรับแต่งตามความต้องการ ลักษณะจะเหมือนการปรับแต่งแบบหน้าจอเดสท็อป
3.เท่านี้เว็บไซต์ของเราก็ถือว่าครอบคลุมทุกหน้าจอการใช้งานแล้ว
สรุป Responsive Web Design คือ เว็บไซต์ที่สามารถแสดงผลได้เหมาะสมกับทุกอุปกรณ์ ในที่นี้ได้ใช้ตัวอย่างปลั๊กอินดังกล่าวในการช่วยเรื่องนี้ของ WordPress อาจจะมีข้อจำ�กัดบางบางเนื่องจากใช้ ฟรี แต่ก็ถือได้ว่าใช้งานได้ดี ทั้งนี้เราต้องติดตั้งปลั๊กอินอื่นๆเข้ามาช่วยด้วยเพื่อให้ผู้ใช้งานสะดวก สบาย ง่ายต่อ การเข้าถึง
114
วิธีติดตั้ง wordpress บน host 1.ทำ�การสมัครสมาชิก ไปที่ https://th.000webhost.com/ 2.แล้วเลือก สมัครสมาชิกฟรี
3. กรอกข้อมูล การสมัคร - กรอก Email - กรอก password - กรอก ซื้อเว็บไซต์
115
4. ทำ�การยืนยันการสมัคร โดยทาง 000webhost จะส่งข้อมูลไป ใน Email ที่เราทำ�การสมัคร 5. ทำ�การติดตั้ง wordpress โดยไปที่ Build wordpress website
6. ทำ�การกรอกข้อมูลให้ครบ และกด install
116
7. จากนั้นจะมีหน้าจอขึ้นมา ให้กดไปที่ Go to configuration page
8.ทำ�การ login เข้า wordpress เท่านี้เราก็ได้ เว็บไซต์ของเราแล้ว แบบง่ายๆ
117