การออกแบบเว็บไซด์ด ้วยบล็อก
Thai Edition
WordPress คือ อะไร? สาหรับหลายๆ คนอาจจะรู ้จักมันแล ้วก็เป็ นได ้ ื่ ว่ายังมีอก แต่ผมก็ยังคงเชอ ี หลายๆ คน ทีเ่ พิง่ จะเริม ่ เข ้าสูว่ งการเว็บ อาจจะ พึง่ รู ้จักมัน หรือ อาจไม่รู ้จักมันเลย ซงึ่ วันนีผ ้ มก็จะมาอธิบายให ้ท่าน ทัง้ หลายได ้ฟั งกันว่า “WordPress คือ อะไร ? และมีเหตุผลอะไรที่ ้ ัน” มาเริม เราควรใชม ่ กันเลยดีกว่าครับ ประว ัติความเป็นมาของ WordPress แบบคร่าวๆ WordPress คือ CMS (Content Management System) หรือภาษาไทย เรียกว่า ระบบจัดการเนือ ้ หาเว็บไซต์แบบออนไลน์ ถูกพัฒนาขึน ้ มาด ้วย ภาษา PHP โดยมีความตัง้ ให ้เป็ น Open Source Web Software คือ ซอฟแวร์แบบเปิ ดสาหรับทาเว็บไซต์ เริม ่ พัฒนามาตัง้ แต่ปี 2003 โดย Matt Mullenweg และ Mike little ร่วมกันก่อตัง้ และพัฒนาจนกระทัง่ ถึง ปั จจุบน ั ความสามารถของ WordPress นนไม่ ั้ ธรรมดาเลยจริงๆ WordPress ถือได ้ว่าเป็ น CMS ทีม ่ ค ี วามยืดหยุน ่ เป็ นอย่างมาก บางคนอาจ บอกว่า WordPress ทาได ้แค่เพียง Blog นัน ้ คือความเข ้าใจทีผ ่ ด ิ WordPress นัน ้ มีความสามารถทีจ ่ ะทาเว็บทีม ่ ี Scale ใหญ่ๆ ได ้เหมือนกัน แต่ทงั ้ นีท ้ งั ้ นัน ้ มันขึน ้ อยูก ่ บ ั ผู ้ทีน ่ าไปใชว่้ าสามารถจะประยุกต์และดึง ั ยภาพของ WordPress ออกมาได ้แค่ไหน ตัวอย่างเว็บไซต์ทใี่ ช ้ ศก WordPress ในการพัฒนา ได ้แก่ Major Cineplex, Notebook Spec และ WordPress.com เป็ นต ้น นีเ้ ป็ นเพียงแค่สว่ นหนึง่ ทีผ ่ มพอจะหา มาให ้ดูได ้เท่านัน ้ ยังมีเว็บไซต์ทใี่ ช ้ WordPress เป็ นแกนหลักสาหรับการ พัฒนาอีกเยอะแยะมากมาย WordPress.com ก ับ WordPress.org ต่างก ันอย่างไร
้ การใน WordPress.com นัน ้ คือบริการเว็บไซต์สาเร็จรูปทีเ่ ปิ ดให ้ใชบริ ี เงิน โดยทีท ้ รูปแบบฟรีและแบบเสย ่ า่ นไม่ต ้องใชความรู ้อะไรมากมาย ิ แล ้วก็เริม เพียงแค่สมัครสมาชก ่ เขียนเนือ ้ หาได ้เลย หากใครเคยใช ้ บริการฟรีบล็อกหรือฟรีเว็บไซต์ตา่ งๆ ก็น่าจะนึกภาพออกครับ
้ WordPress.org คือ ตัวระบบทีใ่ ห ้เราดาวน์โหลดไปใชงานและติ ดตัง้ ิ้ แต่ต ้อง ได ้ด ้วยตัวเองและไม่มค ี า่ ใชจ่้ ายในการดาวน์โหลดใดๆ ทัง้ สน ไปเชา่ Hosting และ จดโดเมน ต่างหากครับ เพือ ่ ให ้เว็บไซต์ทท ี่ า่ นคิด จะทานัน ้ สามารถออนไลน์ได ้
เหตุผลทีค ่ วรใช ้ WordPress
้ ใชงานง่ าย ไม่ต ้องเรียนรู ้อะไรมากก็สามารถเขียนเนือ ้ หาได ้แล ้ว เป็ น CMS ทีไ่ ด ้รับการพัฒนาอยูส ่ มา่ เสมอ ดังนัน ้ จึงมัน ่ ใจได ้ในระดับ หนึง่ เลยในเรือ ่ งของความปลอดภัย มี Community ขนาดใหญ่ทค ี่ อยให ้คาปรึกษาและสนับสนุน ้ ทัง้ WordPress.com และ WordPress.org ใชฟรี ้ ี มี Plugins และ Theme ฟรีให ้ดาวน์โหลดมากมาย หรือ จะใชแบบเส ย เงินก็มค ี รับ ฮา่ ๆ ้ ติดตัง้ ง่ายใชเวลาเพี ยงแค่ 5 นาที นีค ้ อ ื Concept ของ WordPress เลยครับ ง่ายจริงๆ ผมรับรอง ฯลฯ นึกไม่ออกครับ เดีย ๋ วนึกออกแล ้วมาเพิม ่ ทีหลัง ฮา่ ๆ
ข้อจาก ัดบางอย่างของ WordPress ้ อเปล่าครับ ฟั งผมบรรยายสรรพคุณของมันก็คงคิดว่ามัน Perfect มากใชหรื ็ ต์หรอกครับ ข ้อจากัด แต่โลกนีไ้ ม่มอ ี ะไรทีด ่ ห ี รือพร ้อม 100 เปอร์เซน บางอย่างทีผ ่ มว่าก็คอ ื หากคุณไม่มค ี วามในเรือ ่ งของภาษาโปรแกรมแล ้ว การพัฒนาให ้ WordPress เป็ นไปตามใจทีค ่ ณ ุ คิดก็คงเป็ นเรือ ่ งยาก แต่ ปั ญหานีม ้ น ั ก็เกิดขึน ้ กับทุกๆ CMS และครับ เป็ นเรือ ่ งปกติ แต่ทต ี่ ้องบอกไว ้ ก็เพือ ่ ให ้ท่านเข ้าใจ เดีย ๋ วจะหาว่าผมโม ้เกินจริง ผมคิดว่าหลายๆ คนที่ ั ตัวสาหรับใชท ้ าเว็บไซต์ก็น่าจะลอง WordPress กัน กาลังมองหา CMS ซก ้ ดูนะครับ และยังไงว่างๆ เดีย ๋ วผมจะเขียนบทความแนะนาวิธก ี ารใชงานและ ึ ษาเรียนรู ้กันต่อไปครับ แนะนาอย่างอืน ่ ทีเ่ กีย ่ วกับ WordPress ให ้ได ้ศก ข ้อมูลจาก http://ilidd.com
เริม ่ ต้นสร้างเว็ บด้วย Wordpress.com ี เี มล์ การสร ้างเว็บไซต์ด ้วยWordpress.comจะต ้องเริม ่ จากการมีบญ ั ชอ (email Address) ก่อนจะเป็ นฟรีอเี มล์อย่าง Gmail หรือ Hotmail หรือ ี เี มล์พร ้อมแล ้ว ก็เริม ่ น Yahoo Mail ก็ได ้ เมือ ่ มีบญ ั ชอ ่ เข ้าสูอ ิ เทอร์เน็ตแล ้ว เข ้าเว็บไซต์ Wordpress.com ซงึ่ จะปรากฏจอภาพการทางาน ดังนี้
จากรูปให ้กดปุ่ ม sign up เพือ ่ โหมดการลงทะเบียน ิ สมัครสมาชก
ิ อยูแ กรอกทีอ ่ ยูE ่ mail ถ ้าเป็ นสมาชก ่ ล ้ว ิ จะแสดงผล ดังนี้ จอภาพสว่ นการลงทะเบียนสมัครสมาชก
่ mailและPasswordขัน ใสE ้ ตอนง่ายๆคล ้ายกับการสมัคร Face Book หรือ เว็บไซด์ทวั่ ไป
สว่ นนีจ ้ ะเป็ นการคลีเอทบล็อคหรือเริม ่ ทาการออกแบบแต่เขาจะมี ่ ถ ้าคุณทดลองใชฟรี ้ จะมีฟังชน ั่ อะไรบ ้างหรือถ ้าแบบเสย ี เงิน รายละเอียดเชน (เป็ นดอลล่ารายปี )จะได ้อะไรทีม ่ ากกว่าแบบทดลองใชบ้ ้างเมือ ่ เลือกแล ้วก็ คลิกทีC ่ reate Blogได ้เลย
้ แสดงสว่ นทีย ่ น ื ยันการใชWordPressของคุ ณโดยข ้อความจะเข ้ามาทาง ้ คร Emailทีค ่ ณ ุ ใชสมั
หน ้าเริม ่ ต ้นก่อนเข ้าสูร่ ะบบ
หน ้านีใ้ ห ้เราเข ้าระบบโดยการกรอกEmail Addressแล ้วทาการ Login
ิ สมบูรณ์ จากรูปแสดงขัน ้ ตอนการสมัครสมาชก
สว่ นนีเ้ ริม ่ จากการเปลืย ่ นรูปแบบ Themeซงึ่ Themeแต่ละตัวก็จะมีกากับอีก ี เงินเรามองได ้จากมุมใต ้ภาพตามลูกศร ว่าฟรีหรือเสย
จอภาพแสดงการทางานของเว็ปไซด์
จอโหมดบริหารจัดการเนือ ้ หาเว็บ
เริม ่ ตกแต่งตัง้ แต่หน ้า Log in
ี าวให ้เราคลิกขวาแล ้วเลือกไปทีต โดยปรกติเริม ่ ต ้นหน ้าจะเป็ นสข ่ รวจสอบ องค์ประกอบ(ตามภาพ)
ี รากฏให ้เราป้ อนรหัสเข ้าไป ให ้เราเลือกตรงคาว่า background จะมีรหัสสป ี งึ่ รายละเอียดต่างๆสามารถปรับเปลีย เพือ ่ เปลีย ่ นสซ ่ นได ้จากหน ้านีซ ้ งึ่ เรา ึ ษาการอ่านโค ้ตและทามาการเปลีย จะต ้องศก ่ นแปลงได ้ ไม่วา่ จะเป็ นความ กว ้าง สูง ส ี และอืน ่ ๆ
่ น ้าจอซงึ่ ทีผ เมือ ่ เข ้าสูร่ ะบบแล ้วจะเข ้ามาสูห ่ มให ้ดูนค ี้ อ ื ตัวอย่างทีผ ่ มทาขึน ้ มาแล ้ว
สว่ นนีค ้ อ ื หน ้าจอทีเ่ ราทาการเข ้าสูร่ ะบบแล ้ว
1
4
3 2
ื่ เรา(เจ ้าของบล็อก) 1.ชอ 2.รายละเอียดหัวข ้อทีเ่ ราโพสต์ลงไป ึ ษาดูครับ) 3.ตัวเลือกการตกแต่ง ภาพ พืน ้ หลัง widget และอืน ่ ๆ(ลองศก 4.ตัวเลือกการไปยัง wordpress.org ไปทีห ่ น ้า page ตรวจสอบความคิดเห็ น หัวข ้อ หมวดรายการหลัก
จานัน ้ เราลองมาดูทห ี่ น ้าเพจ อันนีค ้ อ ื หน ้าเพจทีป ่ รับแต่งแล ้วและมีการโพสต์เรือ ่ งราวลงไป
่ ด มาดูครับว่าวิธแ ี ต่งหน ้าเพจทายังไงจากขัน ้ ต ้นทีเ่ ราเริม ่ ใสช ุ รูปแบบกราฟิ กนั น ้ ถ ้าเรา ่ งทางอืน ไม่ชอบเราก็สามารถจะหาจากชอ ่ ได ้จากเวปต่างๆ ตัวอยางtemplateจากhttp://www.wix.com/
่ าพสว่ นหัว ภาพพืน หน ้านีจ ้ ะเป็ นหน ้าทีเ่ ราปรับแต่งใสภ ้ หลัง
1
่ าพเองก็แค่เลือก เลือกไฟล์ 1เลือกทีร่ ป ู ลักษณ์หน ้าเว็บถ ้าเราอยากใสภ
2เลือกภาพทีต ่ ้องการ แล ้วเลือกคาว่ากดสง่ ไฟล์ขน ึ้
ทาการบันทึกการเปลีย ่ นแปลงภาพทีเ่ ลือกจะปรากฏสว่ นหัวของหน ้าเพจ
ี น ่ เดียวกันคือการปรับสต ี ามใจชอบหรือเลือก สว่ นนีค ้ อ ื การปรับสพ ื้ หลัง เชน ่ วั เพจขัน ่ ี ไฟล์ภาพเหมือนกับใสห ้ ตอนเดียวกันตัวอย่างทีผ ่ มทาคือผมใสส
ส่วนสีพื ้นหลัง
ส่วนหัวหน้ าเพจ
ซงึ่ เราสามารถตรวจดูได ้ด ้วยการคลิกคาว่า testเพือ ่ ดูการตกแต่งได ้
การเพิม ่ widgets
เมือ ่ คลิกคาสงั่ บล็อกเมนูข ้างจะปรากฏหน ้าเพจตามภาพ
การเพิม ่ นัน ้ จะขึน ้ เรียงตามลาดับดังภาพ
่ idgets ตัวอย่างการใสw
คลิก สร ้างwidgetsขึน ้ เอง
่ ว่ นที1่ ปากฎหน ้าทีใ่ ห ้เราเลือกว่าจะวางสว่ นไหน(อย่างทีผ ่ มบอกถ ้าเราใสส ่ ว่ นต่อไปเลย)สว่ นนีจ แล ้วเราก็เลือกใสส ้ ะเป็ นการใส ่ HTMLยกตัวอย่างถ ้า ิ ิ ่ าฬกาก็ เราจะใสน คด ั ลอก HTMLของนาฬกามาใส ไ่ ด ้เลย
ก๊อปปี้ สว่ นนีไ้ ปวางที่
แล ้วกดบันทึก
ภาพทีไ่ ด ้เมือ ่ ทาการ testจะปรากฏดังนี้
การโพสต์ข ้อความ ื่ เรือ ก็เป็ นแบบง่ายๆคือการสร ้างชอ ่ งทีจ ่ ะโพสต์และพิมพ์เนือ ้ หาลงไปใน หน ้านีม ้ ก ี ารจัดเรียงปรับแต่งเหมือนกับไมโครซอฟเวิรด ์ และมีการจัดการ ต่างๆให ้เลือกใช ้ หลังจากเสร็จก็ทาการสง่ เผยแพร่เนือ ้ หา
ข ้อมูลเบือ ้ งต ้นอาจไม่ละเอียดเท่าทีค ่ วรจึงขออภัยสาหรับผู ้ทีเ่ ปิ ดอ่านเพือ ่ ึ ษาเพราะตอนนีผ ึ ษาอยูเ่ ชน ่ กันแต่นาเอาความรู ้เท่าทีม ศก ้ มก็กาลังศก ่ ม ี า แบ่งปั นสาหรับผูทส ี่ นใจเพียงแค่หวังว่าอาจมีประโยชน์บ ้างไม่มากก็น ้อยถ ้า ึ ษาด ้วยตัวเองและตาราต่างๆต่อไป ผู ้ใดมีความสนใจก็ขอให ้ศก .................ขอบคุณครับ ั ทองเผือก rattanachai666@gmail.com รัตนชย