33
Basic WordPress as a CMS สรางเว็บสมัยใหม เรียบงาย ใชเวิรดเพรส หนึ่งวันเริ่มมีเว็บ สวยงาม แกไขงาย สารบัญ หนา ขอมูลทั่วไปของหลักสูตร 2 ความรูพื้นฐานเกี่ยวกับเว็บ 4 การเตรียมขอมูลเพื่อทำเว็บ 6 ติดตั้ง WordPress 7 หนาบาน และ หลังบาน 9 การใสขอมูลลงใน WordPress 10 การติดตั้งชุดตกแตง (Theme) 20 การติดตั้งโปรแกรมเสริม (Plugin) 22 การใชงานวิดเจ็ต (Widget) 26 การตั้งคาตางๆ ใน WordPress 27 การปรับแตงธีม/แกธีม 29 พื้นฐานการทำใหเว็บติด Google 32 หนา 1

Basic WordPress as a CMS

Embed Size (px)

DESCRIPTION

การใช้งาน WordPress

Citation preview

Page 1: Basic WordPress as a CMS

Basic WordPress as a CMS

สรางเว็บสมัยใหม เรียบงาย ใชเวิรดเพรสหน่ึงวันเริ่มมีเว็บ • สวยงาม • แกไขงาย

สารบัญ หนา

ขอมูลทั่วไปของหลักสูตร3 2

ความรูพื้นฐานเกี่ยวกับเว็บ3 4

การเตรียมขอมูลเพื่อทำเว็บ3 6

ติดตั้ง WordPress3 7

หนาบาน และ หลังบาน3 9

การใสขอมูลลงใน WordPress3 10

การติดตั้งชุดตกแตง (Theme)3 20

การติดตั้งโปรแกรมเสริม (Plugin)3 22

การใชงานวิดเจ็ต (Widget)3 26

การตั้งคาตางๆ ใน WordPress3 27

การปรับแตงธีม/แกธีม3 29

พื้นฐานการทำใหเว็บติด Google3 32

หนา 1

Page 2: Basic WordPress as a CMS

ขอมูลท่ัวไปของหลักสูตร

ชื่อหลักสูตร

ภาษาอังกฤษ: Basic WordPress as a CMS

ภาษาไทย: สรางเว็บสมัยใหม เรียบงาย ใชเวิรดเพรส

URL: http://www.smallbooks.org/basic-wordpress-as-a-cms/

คำอธิบาย

ปรับวิธีคิดเกี่ยวกับการทำเว็บใหเนนที่เนื้อหาและการนำเสนอ, การเขาถึงงายและใชงาย (Usability), การติดอันดับในกูเกิ้ล

อยางยั่งยืน (White Hat SEO), และการปรับปรุงเว็บไซตอยางสม่ำเสมอดวยระบบจัดการขอมูลหลังบาน (CMS)

หลักสูตรนี้เปนหลักสูตรที่สอนใหผูเขาอบรมสามารถสรางเว็บไซตที่นำเสนอเนื้อหาเชน เว็บองคกร, เว็บแคตาล็อกสินคา, เว็บ

สื่อการเรียนรู, เว็บบล็อก, เว็บขาว, เว็บแคมเปญพิเศษ ฯลฯ และเริ่มนำไปใชงานจริงได โดยใช WordPress เปนระบบจัดการ

ขอมูลในเว็บไซต เลือกดีไซน (ธีม) และสวนขยายระบบ (ปลั๊กอิน) ที่เหมาะสม หลังจากนั้นใหปรับแตงธีมบางสวน เชน โลโก

รูปภาพหลัก ชุดสี ฯลฯ เพื่อสรางเอกลักษณใหเว็บไซต

หากมีความรูพื้นฐานดานการใชโปรแกรมแตงภาพ (เชน Photoshop, Gimp), ภาษาดานเว็บไซต (HTML, CSS, PHP) จะเพิ่ม

ความสะดวกในการเรียนรูและการปรับแตงขอมูล

หัวขอสัมมนา

ชวงเชา 9:00 - 12:00 น.

• การนำเสนอขอมูลที่ดี และการเตรียมขอมูลในการทำเว็บ (แหลงขอมูล, พื้นฐานการออกแบบ)

• การวางแผนโครงสรางของหนาตางๆ ในเว็บ (Site-map)

• การใสขอมูลแบบตางๆ ทั้ง ขอความ, รูปภาพ, การจัดรูปแบบตัวอักษร, วีดีโอ, แกลอรี, สไลด, ไฟลสิ่งพิมพ ฯลฯ

• การติดตั้งธีม, ปลั๊กอิน รวมถึงการตั้งคาตางๆ ใน WordPress

• โดเมน, โฮสติ้ง และการติดตั้ง WordPress ผาน Hosting ของตนเอง

ชวงบาย 13:00 - 16:00 น.

• ปฏิบัติการทำเว็บ โดยตั้งโจทยของแตละคนเอง

• ในขั้นนี้ จะมีการสาธิตการปรับแตง ซึ่งตองใชคำสั่ง HTML/CSS หรือโคด PHP บางสวน

• SEO เบื้องตน และขอคำนึงเวลาใสขอมูล

• การเก็บสถิติผูเยี่ยมชมเว็บ และสิ่งที่ควรนำมาพิจารณาปรับปรุง

Basic WordPress as a CMS by SmallBooks.org

หนา 2

Page 3: Basic WordPress as a CMS

หลักสูตรน้ีเหมาะสำหรับ

• ผูสนใจทั่วไป, ผูประกอบการที่ตองการมีเว็บไซตเปนของตนเอง

• ฝายไอที, ฝายดูแลเว็บไซต, ฝายประชาสัมพันธ, ฝายการตลาด ขององคกรตางๆ

• นักออกแบบเว็บไซต ที่ตองการมีพื้นฐานดานการใชงาน WordPress

พื้นฐานความรูของผูเขาอบรม

• มีพื้นฐานในการใชคอมพิวเตอรและการหาความรูในอินเตอรเน็ท

• ไมจำเปนตองมีพื้นฐานการทำเว็บมากอน

ส่ิงท่ีจะไดรับจากการอบรม

• สามารถสรางเว็บไซตที่นำเสนอเนื้อหาเชน เว็บองคกร, เว็บแคตาล็อกสินคา, เว็บสื่อการเรียนรู, เว็บบล็อก, เว็บขาว, เว็บ

แคมเปญพิเศษ ฯลฯ และเริ่มนำไปใชงานจริงได

• สามารถบริหารขอมูลในเว็บไซต, เชียนขาว, เพิ่มทีมงานเพื่อชวยปรับปรุงขอมูล ฯลฯ เพื่อดูแลเว็บไซตตอได

วิทยากร

ครูเมน (จักรกฤษณ ตาฬวัฒน) iMenn.com

Art Director บริษัทไทเกอร ไอเดีย จำกัด (www.tigeridea.com)

ลิขสิทธิ์

ลิขสิทธิ์ของเอกสารและหลักสูตรนี้เปนของนายจักรกฤษณ ตาฬวัฒน แตอนุญาตใหดัดแปลง เผยแพร และนำไปใชเชิง

พาณิชยได โดยตองอางที่มา http://www.smallbooks.org/basic-wordpress-as-a-cms/

ตามสัญญาอนุญาต http://creativecommons.org/licenses/by/3.0/th/

ประวัติการแกไข

15 พ.ค. 25533 เผยแพรครั้งแรก

Basic WordPress as a CMS by SmallBooks.org

หนา 3

Page 4: Basic WordPress as a CMS

ความรูพื้นฐานเก่ียวกับเว็บเว็บคือการสื่อสารสองทางที่เปดใหบริการตลอดเวลา เราสามารถใสขอมูลตางๆ ได ทั้งภาพ, เสียง, วีดีโอ, ตารางรายละเอียด

ตางๆ และรับขอมูลจากผูเยี่ยมชมได เชน ความคิดเห็น, แบบฟอรมสั่งซื้อ, สถานะการทำงาน ฯลฯ

เว็บที่ดี คือเว็บที่ตอบโจทยทั้งเจาของเว็บและคนเยี่ยมชมเว็บที่เปนกลุมเปาหมาย เชน ผูเยี่ยมชมสามารถหาขอมูลที่ตองการ

ไดงาย (ราคา, รูปภาพสินคา/บริการ, แผนที่, เบอรติดตอ) ขอมูลอัพเดทสม่ำเสมอ มีระบบที่เพียงพอกับการสื่อสาร/รับสง

ขอมูล

เว็บเปนระบบที่ประยุกตใชไดหลายรูปแบบ ทำใหหากตองมีการวิเคราะหระบบและออกแบบตามความตองการโดยละเอียด จะ

ตองใชเวลาและงบประมาณสูงมาก (บริษัทไทเกอร ไอเดีย ของผม รับงานเว็บขององคกร/โรงแรม/รานคา อาจมีราคาเริ่มตนที่

5 หมื่นบาท, เว็บระบบหุน/ธนาคารบนอินเตอรเน็ท เริ่มตนที่ราคา 5 ลานบาท) แตหากเปนเว็บที่นำเสนอขอมูลทั่วๆ ไป ที่ไม

ตองการการวิเคราะหระบบ เราอาจใชระบบที่ออกแบบสำหรับการจัดการขอมูลพื้นฐานได เรียกวา Content Management

System (CMS) ซึ่งอาจเรียกวาโปรแกรมเว็บสำเร็จรูป มีหลากหลายโปรแกรม เชน WordPress, Drupal, Joomla

ทำใหการทำเว็บในปจจุบัน หากใชโปรแกรมสำเร็จรูป และจัดการขอมูลเอง อาจจะมีคาใชจายเหลือเพียงคาชื่อเว็บ (โดเมน)

และที่อยูเว็บ (โฮสติ้ง) ซึ่งประมาณปละ 1-2 พันบาท

โดเมน โฮสติ้ง และระบบจัดการขอมูล

Domain: โดเมน หรือ ชื่อเว็บ

เปนเหมือนเลขที่บาน ที่ทำใหไปรษณีย (อินเตอรเน็ท) รูวามีทะเบียนบานนี้อยู

แนะนำใหคนชื่อวางที่ name.com ซึ่งจะมีนามสกุลใหเลือกจำนวนมาก (เชน .com, .net, .org)

คาจดโดเมน ประมาณปละ $9

Hosting: โฮสติ้ง หรือท่ีอยูเว็บ

โฮสติ้ง คือบริการพื้นที่ในอินเตอรเน็ท ซึ่งก็คือเครื่องคอมพิวเตอรเซิฟเวอรที่เก็บขอมูลเว็บและ

อีเมลของเรานั่นเอง มีราคาแตกตางกันมาก ขึ้นอยูกับวาใชพื้นที่เยอะหรือเปลา? หรือมีคนเยี่ยม

ชมเยอะหรือเปลา? เสถียรแคไหน? เว็บทั่วไปคาเชาโฮสติ้งประมาณเดือนละ 100-1,000 บาท

Web Data and System: ขอมูลและระบบเว็บ อาจเทียบไดกับบาน/อาคาร

เว็บเปรียบเสมือนบาน/อาคาร นั่นคือมีการใชงานไดหลายรูปแบบมาก, มีกลุมเปาหมายและ

มูลคาตางกัน ตึกที่ตองการสถาปนิก กับคอนโดที่มีผังสำเร็จรูป ยอมมีความยืนหยุนและใชเวลา

สรางตางกัน, WordPress เปนเหมือนบานสำเร็จรูปที่แจกฟรี ซึ่งทำใหเราสรางเองไดงาย

Basic WordPress as a CMS by SmallBooks.org

หนา 4

Page 5: Basic WordPress as a CMS

การนำเสนอในรูปแบบเว็บ

เนื่องจากเว็บเปนสื่อใหม ทำใหการนำเสนอขอมูลและการรับชมขอมูลยังไมเปนมาตรฐานมากนัก เกิดการเปลี่ยนแปลงอยาง

รวดเร็ว ทำใหความรูและการคาดหวังเกี่ยวกับเว็บไซตของแตละคนแตกตางกันมาก ในขณะที่สื่ออื่นๆ เชน หนังสือพิมพ,

รายการวิทยุ, รายการโทรทัศน ฯลฯ คอนขางเปนมาตรฐานแลว เราสามารถเขาใจลำดับการนำเสนอไดงาย

ในยุคนี้เว็บพัฒนาและเปลี่ยนแปงไปมาก เราอาจเรียกวาเปนยุคของเว็บ 2.0 ซึ่งคือ การที่คนทั่วไปสามารถเขาถึงเว็บ/ทำเว็บ/

สงขอมูลใหเว็บไดงาย คนหาขอมูลผาน Search Engine (เชน Google) ไดสะดวกกวาการพิมพชื่อเว็บแบบเดิม ทำให

พฤติกรรมการบริโภคขอมูลของเว็บเปลี่ยนไป และทำใหการนำเสนอของเว็บเปลี่ยนไปดังนี้

อดีต (Web 1.0) ปจจุบัน (Web 2.0)

พาดหัวหนังสือพิมพ

มีทุกอยางในทุกหนา

นำเสนอในมุมมององคกร

คาดหวังใหเริ่มเขาหนาแรก

คาดหวังใหคนอานทุกที่

จัดโครงสราง/หมวดหมูขอมูลไมดี

แบงขอมูลตามประเภทสื่อ (รูป/วีดีโอ)

ปรับปรุงชา

พาดหัวหนาแรกไมมาก

1 หนา 1 เรื่องเดน

นำเสนอในมุมมองผูชม

คน Search มาเจอ

คนอานสิ่งที่อยากอาน

จัดโครงสราง/หมวดหมูขอมูลดี

แบงขอมูลตามเนื้อหา (ขาว/บทความ)

ปรับปรุงเร็ว ขอมูลทันสมัย

Basic WordPress as a CMS by SmallBooks.org

หนา 5

Page 6: Basic WordPress as a CMS

การเตรียมขอมูลเพื่อทำเว็บ

เปาหมาย

ควรตอบคำถามพื้นฐานใหไดกอนวา ...

1. ทำเว็บอะไร? (เว็บองคกร/เว็บบทความ/เว็บขายชอง/เว็บชุมชน/ฯลฯ)

2. ทำเว็บใหใครดู? (ผูสนใจทั่วไป/ลูกคาบุคคล/ลูกคาองคกร/เฉพาะกลุม/ฯลฯ)

3. คนดูตองการอะไร? (ขอมูล/เบอรติดตอ/ตัวอยางสินคา/แผนที่/คำแนะนำ/ฯลฯ)

4. ตองการใหคนดูแลวทำอะไร? (ซื้อของ/แสดงความคิดเห็น/โทรศัพท/สมัครสมาชิก/ฯลฯ)

5. ทำเว็บแลวไดอะไร? (เพิ่มยอดขาย/สรางภาพลักษณ/ใหขอมูลติดตอ/แบงปนความรู/ฯลฯ)

ซึ่งหากสรุปแลวก็คือ การตั้งเปาหมายของเว็บไซตนั่นเอง เมื่อไดเปาหมายและรายละเอียดแลว ก็จะเปนการเตรียมขอมูล และ

จัดโครงสรางของหนาตางๆ

เตรียมขอมูล

จัดทำขอมูลทั้งหมดที่ตองการนำเสนอตามเปาหมาย ใหเปนรูปแบบ Digital เพื่อจะไดนำขึ้นเว็บได เชน รูปถาย/เอกสาร ที่

ตองมีการ Scan, หรือขอความตางๆ ที่ตองพิมพไว, รวมถึงสื่อประเภทอื่นๆ ที่ตองการนำเสนอ ทั้งรูปภาพ, อัลบัม, สไลดโชว,

วีดีโอ, เสียง, e-book ฯลฯ ซึ่งนอกจากเรื่องความสวยงามแลว ก็จะเปนเรื่องการสื่อสารที่เหมาะสม เชนอาจตองทำแผนภูมิ

ใหมใหเขาใจงาย, ทำตารางเปรียบเทียบ, คัดเกลาสำนวนใหเหมาะสม (Copy-write), ตรวจสอบความถูกตอง - พิสูจนอักษร

(Proof-read), ตรวจสอบลิขสิทธิ์, นโยบายความเปนสวนตัว และขอกำหนดตางๆ (License, Privacy Policy, Term of

service)

สรางแผนท่ีไซต (Site-Map)

เมื่อเตรียมขอมูลนำเสนอที่เหมาะกับเปาหมายแลว ก็จัดลำดับการนำเสนอใหอยูในหนา และ หนายอยตางๆ เรียกวา แผนที่

ไซต หรือ Site Map เชน

Basic WordPress as a CMS by SmallBooks.org

หนา 6

หนาแรก เกี่ยวกับเรา

สินคา

บริการ

ติดตอเรา

หมวด A

หมวด B

หมวด C

รายละเอียดสินคา

Page 7: Basic WordPress as a CMS

ติดตั้ง WordPress

แบบงาย

ระบบควบคุมเว็บจำนวนมากในปจจุบันนั้น จะมีเครื่องมือชวยติดตั้งโปรแกรมตางๆ เรียกวา Fantastico หากมีตัวนี้แนะนำให

ลองทำดังนี้

1. ไปที่ Fantastico

2. เลือก WordPress > New Installation

3. กรอกขอความตางๆ ระบบจะติดตั้ง WordPress ใหโดยอัตโนมัติ

ภาษาไทย

แตเนื่องจาก Fantastico เมื่อติดตั้งเสร็จ ยังไมพรอมสำหรับภาษาไทย (เพราะคามาตรฐานไมใช UTF-8) ดังนั้น เราตองเขาไป

ติดตั้งปลั๊กอินเพิ่ม ชื่อวา UTF-8 Database Converter แลวสั่งใหปลั๊กอินดำเนินการแปลงฐานขอมูลใหเปนภาษาไทย

ดูรายละเอียดการติดตั้ง ในบท การติดตั้งโปรแกรมเสริม (Plugin)

Basic WordPress as a CMS by SmallBooks.org

หนา 7

Page 8: Basic WordPress as a CMS

ติดตั้ง WordPress อยางละเอียด

ดูขอมูลที่ http://codex.wordpress.org/

Basic WordPress as a CMS by SmallBooks.org

หนา 8

Page 9: Basic WordPress as a CMS

หนาบาน และ หลังบานเมื่อติดตั้ง WordPress เสร็จ เราจะเห็นผลลัพทที่โดเมนของเรา เชน http://www.wpthai.info/ ตอไปนี้จะเรียกวา “หนาบาน”

แนะนำใหเปดอีกหนาตางหนึ่งสำหรับจัดการขอมูล “หลังบาน” โดยไปที่โดเมนของเรา แลวพิมพ /wp-admin/ ตอทายเชน http://wpthai.info/wp-admin จะเห็นวามีลิงกกรณีลืมรหัสผานดวย หากเลือก ระบบจะสงรหัสผานใหมไปทางอีเมลของ

เรา

Basic WordPress as a CMS by SmallBooks.org

หนา 9

Page 10: Basic WordPress as a CMS

การใสขอมูลลงใน WordPress

การสรางหนาตางๆ (Page)

ไปที่เมนู Pages เลือก Edit จะพบวามีหนามาตรฐาน ชื่อ About อยู ให

1. คลิกที่หนา About แลวลองแกไขขอมูล

2. คลิกที่ Add New แลวลองเพิ่มหนาอื่นๆ เชน Product, Service, Contact

Basic WordPress as a CMS by SmallBooks.org

หนา 10

Page 11: Basic WordPress as a CMS

การใสขอความ/จัดรูปแบบขอความ

ขอมูลจำเปนของหนาเว็บแตละหนา คือ ชื่อ และ ขอความ

ในขอความ หากกดปุมขวา (ตรงลูกศร) จะทำใหบรรทัดในการจัดการเพิ่มขึ้นอีก เชนเปลี่ยนสีตัวอักษร เปลี่ยนชนิดขอความ

(เปนตัวอักษรธรรมดา หรือเปนหัวเรื่อง: Heading 1-6)

หากตองการขอความที่เปนตัวอยางตัวอักษร แนะนำใหใชขอความจาก http://www.lipsum.com/

Basic WordPress as a CMS by SmallBooks.org

หนา 11

Page 12: Basic WordPress as a CMS

การใสรูป

เหนือชองใสขอความ จะมีปุมแรกรูปสี่เหลี่ยม ชื่อวา Add an Image เอาไวใสรูปภาพ

เมื่อคลิกแลว จะไดกลองโตตอบขึ้นมาดังนี้ ใหคลิกที่ Select Files แลวเลือกไฟลรูปภาพที่ตองการใสเขามา

แนะนำใหเตรียมรูปภาพไวกอน คือปรับแตงสี และยอขนาดไวไมเกิน 800 pixel

เราสามารถเลือกไฟลหลายๆ ไฟลพรอมกันไดดังรูป (เวลาเลือก ใหลองกดปุม Ctrl, Shift แลวคลิกเลือกหลายไฟล)

Basic WordPress as a CMS by SmallBooks.org

หนา 12

Page 13: Basic WordPress as a CMS

โดยในแตละไฟล จะมีรายละเอียดใหกรอกไดดังรูป แนะนำใหกรอกชื่อที่มีความหมายไปใน Title (เพื่อใหคนพิการและ

คอมพิวเตอรรูจักรูปนี้) สวนหากอยากใหมีคำบรรยายใตภาพ ใหกรอกที่ Caption

Link URL คือการเลือกวา จะใหคลิกแลวลิงกไปที่ไหน อาจเปนรูปฉบับเต็ม หรือเว็บอื่น หรือไมตองลิงกก็ได

Alignment คือการจัดรูปชิดซาย-ขวา

Size คือขนาดของรูปที่ระบบยอใหโดยอัตโนมัติ (สามารถตั้งคามาตรฐานใน Settings ได)

หากไมตองการรูปนี้ สามารถกดปุม Delete ได หากตองการใชใหกดปุม Insert into Post

จะพบวารูปไปอยูในขอความเรียบรอย กด Update เพื่อปรับปรุงขอมูล

Basic WordPress as a CMS by SmallBooks.org

หนา 13

Page 14: Basic WordPress as a CMS

การใสอัลบัมภาพ

ถาหากรูปที่ใสมีหลายรูป เราอาจแสดงรูปในลักษณะ Gallery หรืออัลบัมภาพได โดยคลิกที่ปุมสี่เหลี่ยมเหนือขอความ

เลือกแทบ Gallery แลวคลิก Insert Gallery

โดยเราสามารถลากไฟลรูปขึ้นลงเพื่อจัดลำดับของรูปได และใน Gallery Settings เราสามารถปรับแตงไดอีกเล็กนอย เชน

จำนวนคอลัมนของรูปที่จะแสดง เสร็จแลว Update แลวไปดูผลลัพธที่หนาบาน

Basic WordPress as a CMS by SmallBooks.org

หนา 14

Page 15: Basic WordPress as a CMS

การใสวิดีโอ

แนะนำใหสมัคร Youtube.com แลวอัพโหลดผานทาง Youtube เพราะสะดวก และลดคาใชจายดานพื้นที่+การดูแลเว็บ

นอกจากนั้นยังเพิ่มยอดผูชมที่ชมเรื่องคลายกันบน Youtube อีกดวย

การแทรกวิดีโอจาก Youtube ใหคัดลอก url ของ วีดีโอนั้นๆ ก็จะใชงานได

เชน http://www.youtube.com/watch?v=fihOmQY-JxY

Basic WordPress as a CMS by SmallBooks.org

หนา 15

หลังบาน

หนาบาน

Page 16: Basic WordPress as a CMS

การแทรก HTML CODE

เราสามารถแกไขขอความตางๆ ในรูปแบบ HTML ได โดยคลิกที่ปุม HTML

ซึ่งทำใหแทรก Embed Code ตางๆ จากเว็บอื่นๆ ได เชน

แผนที่ จาก http://www.google.com/maps

ปฏิทิน จาก http://www.google.com/calendar/

สไลด จาก http://www.slideshare.net/

รูปภาพเคลื่อนไหว จาก http://photopeach.com, http://www.slide.com/

เอกสาร/หนังสือ/PDF จาก http://issuu.com/

Basic WordPress as a CMS by SmallBooks.org

หนา 16

Page 17: Basic WordPress as a CMS

การตั้งคาแสดงผลของหนา

• สามารถเปลี่ยนสถานะเปน ฉบับราง, หรือ รอตรวจสอบ ได (ทำใหยังไมแสดงหนาเว็บ เปนการบันทึกไวกอนชั่วคราว)

• สามารถตั้งรหัสผาน / ดูเฉพาะคนเขียนได

• สามารถเปลี่ยนวันที่ที่แสดงผลได (ตั้งเวลาลวงหนาเพื่อแสดงผลในอนาคตได)

กอนกด Publish หรือ Update เราสามารถตั้งคาแสดงผลในกลองขวาบน

Basic WordPress as a CMS by SmallBooks.org

หนา 17

Page 18: Basic WordPress as a CMS

การสรางหนายอย

ในสวนกลองดานขวาลาง จะมี Parent ซึ่งหมายถึงหนาระดับบน (พอ) เราสามารถเลือกใหอยูใตหนาใดๆ ก็ได (คือเปนหนาลูก

ของหนานั้นๆ อีกที)

การเรียงลำดับหนา

สามารถใสคา Order ได เรียกวา Page Order (ลำดับหนา) ถาใสในรูปกลองดานบนทีละหนาก็ได ลำดับหนาจะเรียงจากนอย

ไปมาก หรือใสที่หนา Pages -> Edit ก็ได โดยเอาเมาสวางเหนือชื่อ แลวคลิกที่ Quick Edit จะเห็นภาพรวมงายกวา

Basic WordPress as a CMS by SmallBooks.org

หนา 18

Page 19: Basic WordPress as a CMS

การสรางบล็อก (Post)

Post คือขาวสาร / บันทึก / ขอมูลตางๆ ที่ไมไดแสดงเปนหนาที่เปนลำดับชั้นเหมือน Page ซึ่งอาจเรียกวา Blog

แตเราสามารถประยุกตใช Post ในการแสดงขอมูลประเภทอื่นๆ ก็ได เชน สินคา / บทความ / รายการวิทยุออนไลน ฯลฯ

เชิงเทคนิค Post คือเนื้อหาที่ Dynamic นั่นคือสามารถเขาถึงไดหลายวิธี เชนดูตามหมวดหมู / ดูตามวันที่ / ดูตามปายกำกับ

(Tag) / ดูตามชื่อผูเขียนเรื่อง ฯลฯ

การสราง Post ใหไปที่ Post -> Add New แลวใสขอความเหมือนกับการสราง Page

Excerpt3คือบทนำ หรือเกร่ินนำเรื่อง

Post Tags คือปายกำกับ, ปายคำ หรือ คำสำคัญของเรื่องนั้นๆ เชน ชื่อเฉพาะตางๆ, ชื่อตราสินคา

Categories คือหมวดหมูของบทความนั้นๆ

ดานลางจะมี

Allow Comments - อนุญาตใหคนแสดงความคิดเห็นตอ Post นี้ไดหรือไม?

Allow trackbacks and pingbacks on this page - อนุญาตใหแสดงลิงกเว็บอื่นๆ กรณีที่อางถึงบทความนี้หรือไม?

สวนการแสดงผล (Publish - กลองขวาบน) ก็จะตั้งคาไดเหมือน Page คือ สถานะ (ฉบับราง,รอตรวจ,ตีพิมพ) การตั้งรหัส

ผาน, การแกไขวันที่ที่ Post กรณี Post จะมีเพิ่มมาคือ Sick this post หมายถึงการปกหมุดใหอยูบนสุดเวลาแสดงผล

Basic WordPress as a CMS by SmallBooks.org

หนา 19

Page 20: Basic WordPress as a CMS

การติดตั้งชุดตกแตง (Theme)เนื่องจาก WordPress นั้นแยกการเนื้อหา ออกจากการนำเสนอ ที่ผานมาเราเพียงแตใสเนื้อหาไว หากเราตองการเปลี่ยนรูป

แบบการแสดงผล เราสามารถทำไดผานธีม (Theme)

ธีมท่ีอยูในฐานขอมูลของเวิรดเพรส

ไปที่ Appearance -> Add New Themes จะพบวามีหลายวิธี หากตองการคนหาธีมที่แจกฟรีในระบบของ WordPress ก็ลอง

เลือกคำคนตางๆ แลวกดปุม Find Themes ลางสุด (ไมกรอกขอมูลเลยแลวกด จะแสดงธีมทั้งหมด) จะพบธีมและคำอธิบาย

ตางๆ สามารถกด Preview เพื่อดูตัวอยางได หรือกด Install เพื่อติดตั้งในเว็บเราแบบอัตโนมัติ

กดปุม Install , เลือก Activate แลวไปดูที่หนาบาน จะพบวาในเนื้อหาแบบเดิมนั้น การแสดงผลไมมีเหมือนเดิมแลว

Basic WordPress as a CMS by SmallBooks.org

หนา 20

Page 21: Basic WordPress as a CMS

ธีมอื่นๆ/ธีมสรางเอง

สวนการติดตั้งธีมอื่นๆ หรือธีมที่สรางเอง แนะนำใหใชวิธี Upload ไฟลที่ซิปไวไปแทน โดยไปที่เมนู Upload

ทดลองติดตั้งธีมอื่นๆ โดยการคนหาใน Google ดวยคำวา WordPress Theme จะพบธีมมากมาย ให Download มาไวที่

เครื่อง แลว Upload ผานหนานี้

Basic WordPress as a CMS by SmallBooks.org

หนา 21

Page 22: Basic WordPress as a CMS

การติดตั้งโปรแกรมเสริม (Plugin)โปรแกรมเสริม จะทำให WordPress สามารถทำงานไดมากกวาการจัดการขอมูลปกติ เชน สรางหนาชั่วคราวเวลาปด

ปรับปรุง, สรางเว็บบอรด, แคตาล็อก, เชื่อมตอกับ Facebook/Twitter, ปรับปรุงการทำงานและการแสดงผลตางๆ

แนะนำใหใชเฉพาะจาก WordPress.org เทานั้น เพื่อความปลอดภัยและการตรวจสอบปญหาความเขากันไดกับปลั๊กอินอื่นๆ

ไปที่หนา Plugins -> Add New จะเห็นวามีทั้งระบบคนหาจากฐานขอมูล WordPress และ Upload เองเหมือนธีม

Basic WordPress as a CMS by SmallBooks.org

หนา 22

Page 23: Basic WordPress as a CMS

Plugin: Maintenance Mode

ทดลองคนคำวา Maintenance Mode แลวคลิก Install

จะพบวา Maintenance Mode นั้นสรางหนาของตัวเอง (เพื่อจะไดตั้งคาเพิ่มเติมได) ซึ่ง Plugin จำนวนมากจะเปนเชนนี้

เขาหนาของ Maintenance Mode โดยคลิกที่ Setting หลังจากติดตั้งเสร็จ เลือก Activate แลว Save

เมื่อคนอื่นเขามาดู จะพบวา เว็บนี้อยูใน Maintenance Mode หรือระหวางการปรับปรุงนั่นเอง

Basic WordPress as a CMS by SmallBooks.org

หนา 23

เมื่อคนอื่นเขามาดู (แตหากเราล็อกอินไว เราจะเห็นเปนปกติ

สามารถดูขอมูลไดทุกอยาง)

หากตองการเปน “คนอื่น” แนะนำใหใช ฺBrowser อีกตัวหนึ่ง

(เชน Chrome) เขามาดูหนาเว็บ

แนะนำใหลอง WP Maintenance Mode จะปรับแตงไดมากกวา

Page 24: Basic WordPress as a CMS

Plugin: UTF-8 Database Converter

ปลั๊กอินตัวนี้จำเปนกรณีที่ลง WordPress จาก Fantastico แลวตองการใชภาษาไทย

หากลง WordPress วิธีอื่นจะไมจำเปนตองใช

ใหคนคำวา UTF-8 จะพบ UTF-8 Database Converter เปนตัวแรกที่เจอ ใหคลิก Install

เมื่อติดตั้งเสร็จ คลิกที่ Activate จะเขาหนารวม Plugin เมนูซายมือจะมีหนาเพิ่ม ใหคลิกเมนู UTF-8 Database Converter

หลังจากนั้นใหคลิก Next Step ไปเรื่อยๆ เพื่อใหระบบแปลง Database ใหเปน UTF-8 เพื่อใหเหมาะกับภาษาไทย

Basic WordPress as a CMS by SmallBooks.org

หนา 24

Page 25: Basic WordPress as a CMS

Plugin อื่นๆ ท่ีนาสนใจ

ปล๊ักอิน คำอธิบาย

Contact Form 7 เอาสรางฟอรมติดตอ เพื่อใชสงเมล (เชนหนา Contact) สามารถประยุกตใชไดมาก

เชน เปนแบบฟอรมจองหองพัก, สงไฟลงานสำหรับลูกคา, แบบสอบถาม ฯลฯ

All In one SEO Pack ทำใหระบบรองรับ SEO ไดดีขึ้น จำเปนมากสำหรับการทำ SEO (Search Engine

Optimization - หรือการทำใหติดอันดับผลการคนหาใน Search Engine ตางๆ)

WP Postratings อนุญาตใหผูเยี่ยมชมโหวตใหดาวในหนาตางๆ ได

Subscribe to Comments ใหผูกรอกคอมมเมนท สามารถรับเมลแจงเตือนเวลามีคนมาคอมเมนทตอ

Anyfont ทำใหแสดงผลโดยใชฟอนทอื่นๆ ได (ภาษาไทย แนะนำ f0nt.com)

Category Posts สราง Widget ไวสำหรับแสดงขาวสาร (Post) เฉพาะหมวดหมูที่ตั้งไว

WP E-commerce ระบบแคตาล็อกและตะกราสินคา คอนขางซับซอน สามารถรับบัตรเครดิตผาน

Paypal ได

Basic WordPress as a CMS by SmallBooks.org

หนา 25

Page 26: Basic WordPress as a CMS

การใชงานวิดเจ็ต (Widget)วิดเจ็ต คือเครื่องตกแตงในหนาเว็บเพื่อชวยเพิ่มความสามารถ โดยปกติ WordPress จะมีพื้นที่ดานขาง (Sidebar) ใหวาง

Widget ได หากเราไมไดใสขอมูลไว ระบบจะตั้งวิดเจ็ตตามแตที่ธีมออกแบบ

ใชงานวิดเจ็ตโดยไปที่หนา Appearance -> Widget แลวลาก Widget จากซายมือ ไปไวที่ชอง Sidebar ดานขวามือ

ทดลองลากวิตเจ็ตที่ชื่อ Text, Save แลวไปดูที่หนาบาน

Basic WordPress as a CMS by SmallBooks.org

หนา 26

Page 27: Basic WordPress as a CMS

การตั้งคาตางๆ ใน WordPressเวิรดเพรสสามารถปรับแตงคาไดเยอะมาก ดูในเมนู Setiings

เมนู Settings ซายมือ คำอธิบาย

General ปรับแตงทั่วไป ชื่อ/คำอธิบาย การแสดงผลดานเวลา

Writing ปรับแตงสำหรับเขียน ตั้งคาหมวดหมูมาตรฐานของบันทึก สามารถตั้งใหสงเมลแลว Post ได

Reading การตั้งวาหนาแรกจะแสดงผลแบบบล็อก หรือแบบ Page และปรับแตง Feed ไดนิดหนอย

Discussion ปรับแตงการคอมเมนท, ใครคอมเมนทไดบาง, ตั้งคาการตอบกลับคอมเมนท (Threaded)

Media ตั้งคารูปที่ระบบจะทำการยอใหอัตโนมัติ, ตั้งคาสื่ออื่นๆ ที่จะฝงในเนื้อหา (เชน Youtube)

Privacy ตั้งคาความเปนสวนตัว คืออนุญาตให Search Engine เก็บขอมูลไปหรือไม?

Permalinks ตั้งคาการแสดง URL วาจะเอาชื่อมาแสดง หรือรวมวันที่ หรือตามหมวดหมู ฯลฯ

Miscellaneous เบ็ดเตล็ด, ตั้งคาโฟลเดอรที่เอาไวเก็บไฟลบน Server

Basic WordPress as a CMS by SmallBooks.org

หนา 27

Page 28: Basic WordPress as a CMS

การตั้งคาใหแสดงผลแบบหนา Static Page

โดยมาตรฐาน WordPress จะแสดงผลแบบ Blog คือแสดงบันทึกใหมลาสุดตอกันไปเรื่อยๆ แตเราสามารถนำ WordPress มา

แสดงผลแบบเว็บ Static ทั่วไปไดดวย โดย

1. สราง Page ใหม เพื่อแสดงขอมูลหนาแรก อาจตั้งชื่อวา Home / Main Page / หนาแรก ฯลฯ

2. สราง Page ใหม เพื่อแสดงขอมูลสำหรับบันทึก (Post) อาจตั้งชื่อวา News / Blog / ขาวสาร ฯลฯ หรือจะไมสรางก็ได แต

จะทำใหไมมีหนารวมขาว

3. ไปที่ Settings -> Reading เลือกการแสดงหนาแรกใหเปน Static Page ตามรูป

ซึ่งจะทำใหหนาเว็บที่เคยแสดงเปนขาวสาร กลายเปนแสดงหนา Page ที่ชื่อ Home ออกมาแทน

แตบางธีมนั้นมักจะสราง Link Home มาใหกอน ทำใหเมนู Home มีเกิน ดูรายละเอียดการแกที่หนา ปรับแตงธีมดวยตนเอง

Basic WordPress as a CMS by SmallBooks.org

หนา 28

Page 29: Basic WordPress as a CMS

การปรับแตงธีม/แกธีม

การปรับแตงธีมผาน Theme Option

ธีมบางธีมนั้นจะสามารถปรับแตงเพิ่มไดเองงายๆ เรียกวา Theme Option เชนธีมที่ผมแจกใน WordPress.org ชื่อวา Blog

Happens ลองคนคำวา Happens จะพบ

หาก Install และ Activate ใชงาน จะพบ Theme Option ดานซายมือตามรูป ลองปรับแตงคาตางๆ

Basic WordPress as a CMS by SmallBooks.org

หนา 29

Page 30: Basic WordPress as a CMS

ก็จะทำใหรูปแบบการแสดงผลเปลี่ยนไป

ซึ่งหากอยากหาธีมเฉพาะที่มี Theme Option ในหนา Add New Themes ใหทำเครื่องหมายถูกหนา Theme Option กอนกด

คนหา

Basic WordPress as a CMS by SmallBooks.org

หนา 30

Page 31: Basic WordPress as a CMS

ปรับแตงธีมดวยตนเอง

เราสามารแกโคดบางสวนของธีมไดดวยเมนู Appearance -> Editor ซึ่งเปนภาษา HTML และ CSS

แนะนำใหลอง

ลองแกสวนลางของเว็บ (Footer.php) เพิ่มเครดิตตนเองลงในขอความ ตอทายเครดิตของคนทำธีม

ลองแกดานขางของเว็บ (Sidebar.php) เพิ่มขอความทดสอบตอนตน Sidebar

สำหรับคนที่เขาใจ HTML

ลองแกสวนบนของเว็บ (Header.php) ลองเพิ่ม/ลด เมนู ดวยการหาฟงกชั่น wp_list_page ซึ่งโดยมาก จะอยูในคำสั่ง <ul></

ul> และ Page แตละหนาจะแสดง <li>ชื่อหนา</li> อยูแลว ดังนั้น ลองสราง <li>ชื่อหนาอื่นๆ</li> เพิ่มเติมดู

Basic WordPress as a CMS by SmallBooks.org

หนา 31

Page 32: Basic WordPress as a CMS

พื้นฐานการทำใหเว็บติด Googleเครื่องมือคนหา หรือ Search Engine นั้นมีจำนวนมาก ที่นิยมก็เชน Google, Yahoo, Bing ซึ่งใชมาตรฐานใกลเคียงกัน ใน

การตัดสินวาเว็บไหนควรอยูบน ในอันดับของผลการคนหาคำตางๆ

นั่นคือ คราวๆ แลวพิจารณาจาก

1. มีเครือขายเยอะมั้ย? (มี link มาถึงหนานั้นๆ เยอะหรือเปลา ถาเยอะ ก็นาจะนาเชื่อถือ)

2. เครือขายนาเชื่อถือมั้ย? (link ที่มาถึง หรือสงออก มีความเกี่ยวของกันจริงหรือเปลา เปนเว็บจริง หรือเว็บขยะ? เปนเว็บที่

นาเชื่อถือมากนอยแคไหน?)

3. คำคนปรากฏในหนาเว็บอยางเหมาะสมมั้ย? (คือ Keyword ตางๆ ที่เราคนหาในหนาแตละหนา ตองเกี่ยวของกัน เปน

ธรรมชาติ มีปริมาณที่มากเหมาะสม หากมากเกินก็เขาขาย Spam คือจงใจปนอันดับ)

แนนอนวากฏตางๆ นั้นมีชองโหว ทำใหหากรูชองโหว ก็ทำใหไตอันดับไดเร็ว วิธีนี้เรียกวาสายดำ (Black Hat SEO) เชน แอบ

ซอนคียเวิรด, สรางเว็บเองปริมาณมากและหลอกวาเปนเว็บคุณภาพ, แอบปลอมเปนคนไปคนหาใน Google และคลิกลิงกของ

ตัวเองเยอะๆ ฯลฯ (การที่มีคนคนหาใน Google และคลิกลิงกแตละกัน Google ยอมเรียนรูตลอดเวลาวาคนทั่วไปชอบอะไร

อานอะไร คลิกอะไร และ Google ก็จะไปปรับอันดับใหมเรื่อยๆ) ซึ่งถาหากโดนจับได ก็จะถูกตัดแตม ไปจนถึงถูกแบนออกจาก

Google

แตอีกวิธีที่ผมแนะนำมาโดยตลอดคือการสรางเนื้อหาที่ดี และทำตามกฏหรือมาตรฐานของการเขียนเว็บ วิธีนี้เรียกวาสายขาว

(White Hat SEO) ซึ่งมีคนสรุปไวใหอานงาย และคุณพัชนำมาแปลไวที่ http://www.ipattt.com/2009/seo-keywords-

checklists/

ซึ่ง WordPress นั้นทำเชิงเทคนิคใหเกือบหมดแลว เหลือแตในดานเนื้อหาที่เราตองใสใหถูกตอง และแนะนำใหลงปลั๊กอิน All

In one SEO Pack

Basic WordPress as a CMS by SmallBooks.org

หนา 32

Page 33: Basic WordPress as a CMS

สรางขอมูลพื้นฐานของเว็บให Search Engine เขาใจ

ลงปลั๊กอิน All in One SEO แลวกรอกคาเริ่มตนดังรูป หลักๆ คือ Enabled ปลั๊กอินตัวนี้ แลวกรอกชื่อ/คำอธิบาย/คียเวิรด

นอกนั้นใหเปนคามาตรฐานดีที่สุด

แลวเวลาแกไขขอมูลในแตละหนา (Page/Post) จะพบวามีชองใหกรอกเพิ่ม แนะนำใหกรอกใหครบทุกหนา และไมซ้ำกัน

ที่เหลือจะเปนพวกหัวขอ (Heading 1-6) ใชใหเหมาะสม, รูปภาพ ตั้งชื่อใหมีความหมาย ใส Caption ใหมีความหมาย และ

หมั่นตรวจสอบสถิติคนเยี่ยมชมวาเขามาดวยคียเวิรดอะไรบาง อันดับใดบาง แนะนำใหใช Google Analytics และ Google

Webmaster Toolsหนา 33