Basic WordPress as a CMS

Page 1

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


Basic WordPress as a CMS by SmallBooks.org

ขอมูลทั่วไปของหลักสูตร ชื่อหลักสูตร ภาษาอังกฤษ: 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 เบื้องตน และขอคำนึงเวลาใสขอมูล การเก็บสถิติผูเยี่ยมชมเว็บ และสิ่งที่ควรนำมาพิจารณาปรับปรุง

หนา 2


Basic WordPress as a CMS by SmallBooks.org

หลักสูตรนี้เหมาะสำหรับ • ผูสนใจทั่วไป, ผูประกอบการที่ตองการมีเว็บไซตเปนของตนเอง • ฝายไอที, ฝายดูแลเว็บไซต, ฝายประชาสัมพันธ, ฝายการตลาด ขององคกรตางๆ • นักออกแบบเว็บไซต ที่ตองการมีพื้นฐานดานการใชงาน 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 เผยแพรครั้งแรก

หนา 3


Basic WordPress as a CMS by SmallBooks.org

ความรูพื้นฐานเกี่ยวกับเว็บ เว็บคือการสื่อสารสองทางที่เปดใหบริการตลอดเวลา เราสามารถใสขอมูลตางๆ ได ทั้งภาพ, เสียง, วีดีโอ, ตารางรายละเอียด ตางๆ และรับขอมูลจากผูเยี่ยมชมได เชน ความคิดเห็น, แบบฟอรมสั่งซื้อ, สถานะการทำงาน ฯลฯ เว็บที่ดี คือเว็บที่ตอบโจทยทั้งเจาของเว็บและคนเยี่ยมชมเว็บที่เปนกลุมเปาหมาย เชน ผูเยี่ยมชมสามารถหาขอมูลที่ตองการ ไดงาย (ราคา, รูปภาพสินคา/บริการ, แผนที่, เบอรติดตอ) ขอมูลอัพเดทสม่ำเสมอ มีระบบที่เพียงพอกับการสื่อสาร/รับสง ขอมูล เว็บเปนระบบที่ประยุกตใชไดหลายรูปแบบ ทำใหหากตองมีการวิเคราะหระบบและออกแบบตามความตองการโดยละเอียด จะ ตองใชเวลาและงบประมาณสูงมาก (บริษัทไทเกอร ไอเดีย ของผม รับงานเว็บขององคกร/โรงแรม/รานคา อาจมีราคาเริ่มตนที่ 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 เปนเหมือนบานสำเร็จรูปที่แจกฟรี ซึ่งทำใหเราสรางเองไดงาย

หนา 4


Basic WordPress as a CMS by SmallBooks.org

การนำเสนอในรูปแบบเว็บ เนื่องจากเว็บเปนสื่อใหม ทำใหการนำเสนอขอมูลและการรับชมขอมูลยังไมเปนมาตรฐานมากนัก เกิดการเปลี่ยนแปลงอยาง รวดเร็ว ทำใหความรูและการคาดหวังเกี่ยวกับเว็บไซตของแตละคนแตกตางกันมาก ในขณะที่สื่ออื่นๆ เชน หนังสือพิมพ, รายการวิทยุ, รายการโทรทัศน ฯลฯ คอนขางเปนมาตรฐานแลว เราสามารถเขาใจลำดับการนำเสนอไดงาย ในยุคนี้เว็บพัฒนาและเปลี่ยนแปงไปมาก เราอาจเรียกวาเปนยุคของเว็บ 2.0 ซึ่งคือ การที่คนทั่วไปสามารถเขาถึงเว็บ/ทำเว็บ/ สงขอมูลใหเว็บไดงาย คนหาขอมูลผาน Search Engine (เชน Google) ไดสะดวกกวาการพิมพชื่อเว็บแบบเดิม ทำให พฤติกรรมการบริโภคขอมูลของเว็บเปลี่ยนไป และทำใหการนำเสนอของเว็บเปลี่ยนไปดังนี้ อดีต (Web 1.0)

พาดหัวหนังสือพิมพ มีทุกอยางในทุกหนา นำเสนอในมุมมององคกร คาดหวังใหเริ่มเขาหนาแรก คาดหวังใหคนอานทุกที่ จัดโครงสราง/หมวดหมูขอมูลไมดี แบงขอมูลตามประเภทสื่อ (รูป/วีดีโอ) ปรับปรุงชา

ปจจุบัน (Web 2.0)

พาดหัวหนาแรกไมมาก 1 หนา 1 เรื่องเดน นำเสนอในมุมมองผูชม คน Search มาเจอ คนอานสิ่งที่อยากอาน จัดโครงสราง/หมวดหมูขอมูลดี แบงขอมูลตามเนื้อหา (ขาว/บทความ) ปรับปรุงเร็ว ขอมูลทันสมัย

หนา 5


Basic WordPress as a CMS by SmallBooks.org

การเตรียมขอมูลเพื่อทำเว็บ เปาหมาย ควรตอบคำถามพื้นฐานใหไดกอนวา ... 1. ทำเว็บอะไร? (เว็บองคกร/เว็บบทความ/เว็บขายชอง/เว็บชุมชน/ฯลฯ) 2. ทำเว็บใหใครดู? (ผูสนใจทั่วไป/ลูกคาบุคคล/ลูกคาองคกร/เฉพาะกลุม/ฯลฯ) 3. คนดูตองการอะไร? (ขอมูล/เบอรติดตอ/ตัวอยางสินคา/แผนที่/คำแนะนำ/ฯลฯ) 4. ตองการใหคนดูแลวทำอะไร? (ซื้อของ/แสดงความคิดเห็น/โทรศัพท/สมัครสมาชิก/ฯลฯ) 5. ทำเว็บแลวไดอะไร? (เพิ่มยอดขาย/สรางภาพลักษณ/ ใหขอมูลติดตอ/แบงปนความรู/ฯลฯ) ซึ่งหากสรุปแลวก็คือ การตั้งเปาหมายของเว็บไซตนั่นเอง เมื่อไดเปาหมายและรายละเอียดแลว ก็จะเปนการเตรียมขอมูล และ จัดโครงสรางของหนาตางๆ

เตรียมขอมูล จัดทำขอมูลทั้งหมดที่ตองการนำเสนอตามเปาหมาย ใหเปนรูปแบบ Digital เพื่อจะไดนำขึ้นเว็บได เชน รูปถาย/เอกสาร ที่ ตองมีการ Scan, หรือขอความตางๆ ที่ตองพิมพไว, รวมถึงสื่อประเภทอื่นๆ ที่ตองการนำเสนอ ทั้งรูปภาพ, อัลบัม, สไลดโชว, วีดีโอ, เสียง, e-book ฯลฯ ซึ่งนอกจากเรื่องความสวยงามแลว ก็จะเปนเรื่องการสื่อสารที่เหมาะสม เชนอาจตองทำแผนภูมิ ใหมใหเขาใจงาย, ทำตารางเปรียบเทียบ, คัดเกลาสำนวนใหเหมาะสม (Copy-write), ตรวจสอบความถูกตอง - พิสูจนอักษร (Proof-read), ตรวจสอบลิขสิทธิ์, นโยบายความเปนสวนตัว และขอกำหนดตางๆ (License, Privacy Policy, Term of service)

สรางแผนที่ ไซต (Site-Map) เมื่อเตรียมขอมูลนำเสนอที่เหมาะกับเปาหมายแลว ก็จัดลำดับการนำเสนอใหอยูในหนา และ หนายอยตางๆ เรียกวา แผนที่ ไซต หรือ Site Map เชน หนาแรก

เกี่ยวกับเรา สินคา บริการ

หมวด A

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

หมวด B หมวด C

ติดตอเรา

หนา 6


Basic WordPress as a CMS by SmallBooks.org

ติดตั้ง WordPress แบบงาย ระบบควบคุมเว็บจำนวนมากในปจจุบันนั้น จะมีเครื่องมือชวยติดตั้งโปรแกรมตางๆ เรียกวา Fantastico หากมีตัวนี้แนะนำให ลองทำดังนี้ 1. ไปที่ Fantastico

2. เลือก WordPress > New Installation

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

ภาษาไทย แตเนื่องจาก Fantastico เมื่อติดตั้งเสร็จ ยังไมพรอมสำหรับภาษาไทย (เพราะคามาตรฐานไมใช UTF-8) ดังนั้น เราตองเขาไป ติดตั้งปลั๊กอินเพิ่ม ชื่อวา UTF-8 Database Converter แลวสั่งใหปลั๊กอินดำเนินการแปลงฐานขอมูลใหเปนภาษาไทย ดูรายละเอียดการติดตั้ง ในบท การติดตั้งโปรแกรมเสริม (Plugin)

หนา 7


Basic WordPress as a CMS by SmallBooks.org

ติดตั้ง WordPress อยางละเอียด ดูขอมูลที่ http://codex.wordpress.org/

หนา 8


Basic WordPress as a CMS by SmallBooks.org

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

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

หนา 9


Basic WordPress as a CMS by SmallBooks.org

การใสขอมูลลงใน WordPress การสรางหนาตางๆ (Page) ไปที่เมนู Pages เลือก Edit จะพบวามีหนามาตรฐาน ชื่อ About อยู ให 1. คลิกที่หนา About แลวลองแกไขขอมูล 2. คลิกที่ Add New แลวลองเพิ่มหนาอื่นๆ เชน Product, Service, Contact

หนา 10


Basic WordPress as a CMS by SmallBooks.org

การใสขอความ/จัดรูปแบบขอความ ขอมูลจำเปนของหนาเว็บแตละหนา คือ ชื่อ และ ขอความ ในขอความ หากกดปุมขวา (ตรงลูกศร) จะทำใหบรรทัดในการจัดการเพิ่มขึ้นอีก เชนเปลี่ยนสีตัวอักษร เปลี่ยนชนิดขอความ (เปนตัวอักษรธรรมดา หรือเปนหัวเรื่อง: Heading 1-6) หากตองการขอความที่เปนตัวอยางตัวอักษร แนะนำใหใชขอความจาก http://www.lipsum.com/

หนา 11


Basic WordPress as a CMS by SmallBooks.org

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

เมื่อคลิกแลว จะไดกลองโตตอบขึ้นมาดังนี้ ใหคลิกที่ Select Files แลวเลือกไฟลรูปภาพที่ตองการใสเขามา แนะนำใหเตรียมรูปภาพไวกอน คือปรับแตงสี และยอขนาดไวไมเกิน 800 pixel เราสามารถเลือกไฟลหลายๆ ไฟลพรอมกันไดดังรูป (เวลาเลือก ใหลองกดปุม Ctrl, Shift แลวคลิกเลือกหลายไฟล)

หนา 12


Basic WordPress as a CMS by SmallBooks.org โดยในแตละไฟล จะมีรายละเอียดใหกรอกไดดังรูป แนะนำใหกรอกชื่อที่มีความหมายไปใน Title (เพื่อใหคนพิการและ คอมพิวเตอรรูจักรูปนี้) สวนหากอยากใหมีคำบรรยายใตภาพ ใหกรอกที่ Caption Link URL คือการเลือกวา จะใหคลิกแลวลิงกไปที่ไหน อาจเปนรูปฉบับเต็ม หรือเว็บอื่น หรือไมตองลิงกก็ได Alignment คือการจัดรูปชิดซาย-ขวา Size คือขนาดของรูปที่ระบบยอใหโดยอัตโนมัติ (สามารถตั้งคามาตรฐานใน Settings ได) หากไมตองการรูปนี้ สามารถกดปุม Delete ได หากตองการใชใหกดปุม Insert into Post

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

หนา 13


Basic WordPress as a CMS by SmallBooks.org

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

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

โดยเราสามารถลากไฟลรูปขึ้นลงเพื่อจัดลำดับของรูปได และใน Gallery Settings เราสามารถปรับแตงไดอีกเล็กนอย เชน จำนวนคอลัมนของรูปที่จะแสดง เสร็จแลว Update แลวไปดูผลลัพธที่หนาบาน

หนา 14


Basic WordPress as a CMS by SmallBooks.org

การใสวิดีโอ แนะนำใหสมัคร Youtube.com แลวอัพโหลดผานทาง Youtube เพราะสะดวก และลดคาใชจายดานพื้นที่+การดูแลเว็บ นอกจากนั้นยังเพิ่มยอดผูชมที่ชมเรื่องคลายกันบน Youtube อีกดวย การแทรกวิดีโอจาก Youtube ใหคัดลอก url ของ วีดีโอนั้นๆ ก็จะใชงานได เชน http://www.youtube.com/watch?v=fihOmQY-JxY

หลังบาน

หนาบาน

หนา 15


Basic WordPress as a CMS by SmallBooks.org

การแทรก 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/

หนา 16


Basic WordPress as a CMS by SmallBooks.org

การตั้งคาแสดงผลของหนา • สามารถเปลี่ยนสถานะเปน ฉบับราง, หรือ รอตรวจสอบ ได (ทำใหยังไมแสดงหนาเว็บ เปนการบันทึกไวกอนชั่วคราว) • สามารถตั้งรหัสผาน / ดูเฉพาะคนเขียนได • สามารถเปลี่ยนวันที่ที่แสดงผลได (ตั้งเวลาลวงหนาเพื่อแสดงผลในอนาคตได) กอนกด Publish หรือ Update เราสามารถตั้งคาแสดงผลในกลองขวาบน

หนา 17


Basic WordPress as a CMS by SmallBooks.org

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

การเรียงลำดับหนา สามารถใสคา Order ได เรียกวา Page Order (ลำดับหนา) ถาใสในรูปกลองดานบนทีละหนาก็ได ลำดับหนาจะเรียงจากนอย ไปมาก หรือใสที่หนา Pages -> Edit ก็ได โดยเอาเมาสวางเหนือชื่อ แลวคลิกที่ Quick Edit จะเห็นภาพรวมงายกวา

หนา 18


Basic WordPress as a CMS by SmallBooks.org

การสรางบล็อก (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 หมายถึงการปกหมุดใหอยูบนสุดเวลาแสดงผล หนา 19


Basic WordPress as a CMS by SmallBooks.org

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

ธีมที่อยูในฐานขอมูลของเวิรดเพรส ไปที่ Appearance -> Add New Themes จะพบวามีหลายวิธี หากตองการคนหาธีมที่แจกฟรีในระบบของ WordPress ก็ลอง เลือกคำคนตางๆ แลวกดปุม Find Themes ลางสุด (ไมกรอกขอมูลเลยแลวกด จะแสดงธีมทั้งหมด) จะพบธีมและคำอธิบาย ตางๆ สามารถกด Preview เพื่อดูตัวอยางได หรือกด Install เพื่อติดตั้งในเว็บเราแบบอัตโนมัติ

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

หนา 20


Basic WordPress as a CMS by SmallBooks.org

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

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

หนา 21


Basic WordPress as a CMS by SmallBooks.org

การติดตั้งโปรแกรมเสริม (Plugin) โปรแกรมเสริม จะทำให WordPress สามารถทำงานไดมากกวาการจัดการขอมูลปกติ เชน สรางหนาชั่วคราวเวลาปด ปรับปรุง, สรางเว็บบอรด, แคตาล็อก, เชื่อมตอกับ Facebook/Twitter, ปรับปรุงการทำงานและการแสดงผลตางๆ แนะนำใหใชเฉพาะจาก WordPress.org เทานั้น เพื่อความปลอดภัยและการตรวจสอบปญหาความเขากันไดกับปลั๊กอินอื่นๆ ไปที่หนา Plugins -> Add New จะเห็นวามีทั้งระบบคนหาจากฐานขอมูล WordPress และ Upload เองเหมือนธีม

หนา 22


Basic WordPress as a CMS by SmallBooks.org

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

จะพบวา Maintenance Mode นั้นสรางหนาของตัวเอง (เพื่อจะไดตั้งคาเพิ่มเติมได) ซึ่ง Plugin จำนวนมากจะเปนเชนนี้ เขาหนาของ Maintenance Mode โดยคลิกที่ Setting หลังจากติดตั้งเสร็จ เลือก Activate แลว Save

เมื่อคนอื่นเขามาดู จะพบวา เว็บนี้อยูใน Maintenance Mode หรือระหวางการปรับปรุงนั่นเอง เมื่อคนอื่นเขามาดู (แตหากเราล็อกอินไว เราจะเห็นเปนปกติ สามารถดูขอมูลไดทุกอยาง) หากตองการเปน “คนอื่น” แนะนำใหใช ฺBrowser อีกตัวหนึ่ง (เชน Chrome) เขามาดูหนาเว็บ แนะนำใหลอง WP Maintenance Mode จะปรับแตงไดมากกวา หนา 23


Basic WordPress as a CMS by SmallBooks.org

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 เพื่อใหเหมาะกับภาษาไทย

หนา 24


Basic WordPress as a CMS by SmallBooks.org

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 ได

หนา 25


Basic WordPress as a CMS by SmallBooks.org

การใชงานวิดเจ็ต (Widget) วิดเจ็ต คือเครื่องตกแตงในหนาเว็บเพื่อชวยเพิ่มความสามารถ โดยปกติ WordPress จะมีพื้นที่ดานขาง (Sidebar) ใหวาง Widget ได หากเราไมไดใสขอมูลไว ระบบจะตั้งวิดเจ็ตตามแตที่ธีมออกแบบ ใชงานวิดเจ็ตโดยไปที่หนา Appearance -> Widget แลวลาก Widget จากซายมือ ไปไวที่ชอง Sidebar ดานขวามือ

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

หนา 26


Basic WordPress as a CMS by SmallBooks.org

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

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

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

Writing

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

Reading

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

Discussion

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

Media

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

Privacy

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

Permalinks

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

Miscellaneous

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


Basic WordPress as a CMS by SmallBooks.org

การตั้งคาใหแสดงผลแบบหนา 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 มีเกิน ดูรายละเอียดการแกที่หนา ปรับแตงธีมดวยตนเอง หนา 28


Basic WordPress as a CMS by SmallBooks.org

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

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

หนา 29


Basic WordPress as a CMS by SmallBooks.org ก็จะทำใหรูปแบบการแสดงผลเปลี่ยนไป

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

หนา 30


Basic WordPress as a CMS by SmallBooks.org

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

แนะนำใหลอง ลองแกสวนลางของเว็บ (Footer.php) เพิ่มเครดิตตนเองลงในขอความ ตอทายเครดิตของคนทำธีม ลองแกดานขางของเว็บ (Sidebar.php) เพิ่มขอความทดสอบตอนตน Sidebar สำหรับคนที่เขาใจ HTML ลองแกสวนบนของเว็บ (Header.php) ลองเพิ่ม/ลด เมนู ดวยการหาฟงกชั่น wp_list_page ซึ่งโดยมาก จะอยูในคำสั่ง <ul></ ul> และ Page แตละหนาจะแสดง <li>ชื่อหนา</li> อยูแลว ดังนั้น ลองสราง <li>ชื่อหนาอื่นๆ</li> เพิ่มเติมดู

หนา 31


Basic WordPress as a CMS by SmallBooks.org

พื้นฐานการทำใหเว็บติด 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-keywordschecklists/ ซึ่ง WordPress นั้นทำเชิงเทคนิคใหเกือบหมดแลว เหลือแตในดานเนื้อหาที่เราตองใสใหถูกตอง และแนะนำใหลงปลั๊กอิน All In one SEO Pack

หนา 32


สรางขอมูลพื้นฐานของเว็บให Search Engine เขาใจ ลงปลั๊กอิน All in One SEO แลวกรอกคาเริ่มตนดังรูป หลักๆ คือ Enabled ปลั๊กอินตัวนี้ แลวกรอกชื่อ/คำอธิบาย/คียเวิรด นอกนั้นใหเปนคามาตรฐานดีที่สุด

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

ที่เหลือจะเปนพวกหัวขอ (Heading 1-6) ใชใหเหมาะสม, รูปภาพ ตั้งชื่อใหมีความหมาย ใส Caption ใหมีความหมาย และ หมั่นตรวจสอบสถิติคนเยี่ยมชมวาเขามาดวยคียเวิรดอะไรบาง อันดับใดบาง แนะนำใหใช Google Analytics และ Google Webmaster Tools หนา 33


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.