Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
คู่มือประกอบการอบรมเรื่อง      การสร้างเว็บไซต์ด้วย WORDPRESS                       SK1 ICT Teamสานักงานเขตพื้นการศึกษาประ...
สารบัญเรื่อง                                                               หน้าบทที่ 1 : WordPress คืออะไร?               ...
- เล็กๆน้อยก่อนขึ้นโฮสต์จริง                             78              - การลบ แก้ ไข บทความ                            ...
1                           บทที่ 1 : WordPress คืออะไร?           WordPress เป็นโปรแกรมสาหรับทาบล็อก ซึ่งพัฒนาโปรแกรมอยู่...
2 4. มีปลั๊กอิน ลูกเล่นเสริมมากมายทาให้เว็บไซต์มีลูกเล่นต่างๆหลากหลาย 5. สามารถเชื่อมต่อกับระบบ              Social Networ...
3                           เว็บไซต์โรงเรียนไทรเดี่ยววิทยาต่อไปเว็บไซต์ระดับมืออาชีพครับ                    เว็บของคุณเม่น...
4      จริงๆแล้ว มีอีกมากมายหลายเว็บไซต์ที่สร้างด้วย Wordpress ลองเสิร์ซหาคาว่าเว็บไซต์ที่สร้างด้วย Wordpress ก็จะพบได้อย่...
5                         บทที่ 2 : การติดตั้ง WordPress     โปรแกรมที่ท่านจะได้รับในการอบรมครั้งนี้     1. Appserv โปรแกร...
6การติดตั้ง AppServ      Appserv เป็นโปรแกรมที่จาลองเครื่องคอมพิวเตอร์ ของผู้พัฒนาโปรแกรมเองให้มีสถานะเป็น Web Server หรือ...
7    3. เข้าสู่ขั้นตอนการเลือกปลายทางที่ต้องการติดตั้ง โดยค่าเริ่มต้นปลายทางที่ติดตั้งจะเป็นC:AppServ หากต้องการเปลี่ยนปลา...
8   รูปที่ 4 เลือก Package Components ที่ต้องการติดตั้ง5. กาหนดค่าคอนฟิกของ Apache Web Server มีอยู่ด้วยกันทั้งหมด 3 ส่วน ...
9       6. Appserv จะกาหนด User ให้เราอัตโนมัติ คือ root แต่เราต้องสร้างรหัสผ่านเองเช่น       Enter root password = 1234  ...
108. โปรแกรมที่ทรัพยากรที่อยู่ใน โฟลเดอร์ AppServ ทั้งหมด
11การติดตั้ง WordPressดาวน์โหลดและติดตั้ง WordPress      หลังจากติดตั้งผู้ช่วยพระเอก Appserv แล้ว มาถึงขั้นตอนการดาวน์โหลด...
124. ดังภาพ5. ติดตั้งโดยการเปิดโปรแกรม Browser ที่ท่านถนัดขึ้นมา
13      6. สร้างฐานข้อมูลเพื่อรองรับ Wordpress โดยพิมพ์ URL ดังนี้      http://localhost/phpmyadmin         โปรแกรมจะถามหา...
147. สร้างฐานข้อมูลชื่อ   wordpress แล้ว คลิก ที่ปุ่ม ตกลง
15       8. เปิดบราวเซอร์ขึ้นมาอีกหนึ่งแท็ป พิมพ์ที่ช่องaddress bar ดังนี้       http://localhost/wordpressแล้ว       Ente...
1610. ตั้งค่าการเชื่อมต่อ WordPress กับฐานข้อมูลที่ได้สร้างไว้ก่อนหน้า10. 1 ชื่อฐานข้อมูลที่สร้างไว้กับ PhpMyadmin ของผมจะ...
1711. หน้าแสดงว่าค่าที่ตั้งทุกอย่างถูกต้องแล้วคลิก ปุ่ม ทาการติดตั้ง12. ทาการตั้งค่าเว็บไซต์ เบื้องต้น
1812.1 หัวข้อเว็บ คือ ชื่อของเว็บไซต์นั่นเอง กรณีนี้สามารถเปลี่ยนได้ภายหลัง12.2 ชื่อผู้ใช้ เป็นชื่อของผู้ดูแลระบบ ชื่อนี้จ...
1914. หน้าจัดการระบบของ          Wordpress     15. หน้าแรกเว็บไซต์ที่ผู้เยี่ยมชมทั่วไปสามารถเห็นได้ (ยังไม่ได้ติดตั้ง Them...
20                           บทที่ 3 : ติดตั้ง Arras Themeการติดตั้งและปรับแต่ง Theme Arras         ที่จริงแล้วภาพหน้าเว็บ...
211. เมื่อโหลดมาแล้ว        (ซึ่งได้ทาการโหลดมาให้แล้ว) ก็ทาการแตก zip เพื่อทาการย้ายTheme ไปไว้ที่ Root Directory ของ เว็...
223. เปิดหน้าเว็บ      http://localhost/wordpress/wp-admin เพื่อเข้าสู่ระบบ4. เลือกเมนู รูปแบบบล็อก       แล้วเลือก Themes
23      5. คลิกเลือก Theme Arras6. เสร็จขั้นตอนการติดตั้ง Theme Arras                                        รูปแบบหน้าตาข...
24   บทที่ 4 : สร้างหน้าเพจ / เมนู / หมวดหมู่   เรื่อง /บทความที่จะทาการประชาสัมพันธ์ เพื่อให้ผู้อบรมในครั้งนี้มองเห็นภาพ ...
25การสร้างหน้าเพจขั้นตอนที่ 1 ไปที่ เมนูด้านซ้าย ของหน้าผู้ดูแลระบบ เลือก หน้า    เขียนหน้าใหม่ขั้นตอนที่ 2 ใส่รายละเอียด...
26TIP การทางานแบบ WYSIWYG        การทางานแบบ WYSIWYG (ย่อมาจาก Waht You See is What You Get) คือ การทางานที่เราสามารถเห็นส...
27เมื่อเลือกรูปที่ต้องการแล้ว จะได้รูปดังภาพด้านล่าง ให้ใส่รายละเอียดรูปแล้วคลิกใส่เข้าในเรื่อง
28จะได้ดังภาพขั้นตอนที่ 4 เมื่อได้ปรับแต่งข้อความรวมถึงรูปภาพในหน้า ประวัติโรงเรียน เรียบร้อยแล้ว ก็เตรียมที่จะเผยแพร่หน้า...
29การสร้าง เมนู เพื่อให้เว็บแสดงเมนูหน้า ประวัติโรงเรียน           หรือหน้าอื่นๆที่เราสร้างขึ้นเพื่อให้เราหรือผู้เยี่ยมชมเ...
303. จะได้หน้าจัดการเมนู ดังภาพ4. เลือกการแสดงผลของเมนู
315. เพิ่มหน้าลงในเมนู6. จะแสดงผลหน้าเว็บไซต์ดังภาพ เป็นอันเสร็จขั้นตอนการสร้างหน้า และ เมนู ครับ
32การสร้างหมวดหมูของบทความหรือเรื่องที่จะประชาสัมพันธ์               ่         เพื่อให้การประชาสัมพันธ์ข่าวสารของหน่วยงานข...
33ขั้นตอนที่ 2 สร้างหมวดหมู่โดยกาหนดดังนี้ช่องที่ 1 ชื่อ ให้ใส่ชื่อหมวดหมู่ที่เราต้องการช่องที่ 2         Slug ให้ใส่คาที่...
34การสร้าง บทความ หรือ เรื่องที่จะประชาสัมพันธ์ในการสร้างเว็บไซต์เพื่อนาเสนอหน่วยงานนั้นสิ่งที่สาคัญที่สุดก็คือข่าวความเคล...
35ขั้นตอนที่ 3 เพิ่มเนื้อของข่าวสารลงไปรายละเอียดดังนี้ หมายเลข 1 เพิ่มข้อมูล เนื้อหา รายละเอียด รวมถึงภาพประกอบลงไป หมายเ...
36ในที่นี้ ให้ผู้เข้ารับการอบรมลองทดสอบเพิ่มข่าวสารเข้าสู่เว็บไซต์อย่างน้อยคนละ 5 เรื่อง เพื่อให้มองเห็นภาพรวมของการแสดงผล...
37ผลลัพธ์ดังภาพ ทีนี้ท่านพอจะมองออกหรือยังครับเกี่ยวกับการแสดงผลเว็บไซต์ ถ้ายังไม่ออกเรามาลองตั้งค่าการทางานของ Theme Arra...
38                   บทที่ 5 : การตั้งค่า Arras Theme        Arras Theme เป็น Theme ที่แจกให้ผู้ที่ใช้งาน Wordpress นาไปใช...
393. จะเข้าสู่หน้าตั้งค่าเบื้องต้นของ Arras Theme ซึ่งเป็นการตั้งค่าการเชื่อมต่อกับระบบ SocialNetwork เช่น Facebook Twiite...
40 4. ส่วน           Home เป็นส่วนตั้งค่าแสดงผลของเว็บไซต์ในหน้า Home หรือหน้าแรกของเว็บไซต์นั่นเอง ซึ่งจะทาการดึงบทความหร...
41             4.1.2 Slide Show ส่วนแสดงบทความที่อยู่ในรูปแบบของสไลด์        หมายเลข 1 เลือกว่าจะให้โชว์สไลด์หรือไม่ให้โชว...
42               หมายเลข 1 ตั้งชื่อส่วนหมวดหมู่แสดงผลหน้าเว็บไซต์ เช่น กิจกรรมของโรงเรียนทั้งหมด หมายเลข 2 เลือกว่าจะให้หม...
43หากเลือกเป็น   Traditional จะได้การแสดงผลดังรูป
444.1.4            Featured Posts #2 ใช้การตั้งค่าเช่นเดียวกันกับข้อ 4.1.34.1.5            News Posts ใช้การตั้งค่าเช่นเดี...
45         4.3 หน้า Design เป็นหน้าที่เอาไว้ตั้งค่าการแสดงผลของเว็บไซต์ดังนี้ 4.3.1         Overrall Layout เป็นการตั้งค่า...
46โดยที่ Side Bar จะบรรจุ Widgets อยู่ด้านในอีกที ซึ่งในบทต่อไปเราจะได้กล่าวถึง 4.3.2 ต่อไป default style จะเป็นการเลือกให...
47จะได้ผลลัพธ์ดังภาพ       4.3.3 Custom Logo เป็นการใส่โลโก้ ให้กับเว็บไซต์หน่วยงานของท่านเช่น
48ผลลัพธ์ทั้งนี้ท่านสามารถใช้รูปแบบและขนาดของโลโก้ตามที่ท่านต้องการได้ บางท่านอาจจะอยากได้แบนเนอร์ใหญ่เต็มหน้าแทนที่โลโก้ ...
494.3.4         Custom Blackgroud คือ การตั้งค่าพื้นหลังซึ่งเมื่อทาการคลิกที่ คาว่า    Set Custom Blackgroud จะเป็นการลิ้ง...
504.4        Thumbnail คือการตั้งค่าการย่อรูปให้แก่การแสดงผลเว็บไซต์ซึ่งตั้งเป็นค่าเริ่มต้นก็น่าจะพอดีกัยรูปแบบเว็บไซต์แล้...
51       4.5 Tools ส่วนนี้สาหรับผู้ที่เข้าใจโค้ดรูปแบบ Theme หากท่านไม่เข้าใจก็อย่าไปเปลี่ยนแปลงอะไรจะเป็นการดีที่สุดครับ ...
52                                 บทที่ 6 : การสร้าง Widgets        6.1 Widgets (วิดเจ็ต)คืออะไร        Widgets เป็นอีกไม...
53Widgets ของ Arras Themeเราสามารถลาก Widgets ที่อยู่ทางด้านซ้ายมือไปไว้ที่ช่อง Side Bar ด้านขวาได้ ง่ายๆ เพียงแค่คลิกลาก ...
54ผลลัพธ์ที่ได้
556.2 การสร้าง Widgets เพื่อใส่รูปหรือข้อความที่ได้สร้างขึ้นเองจะช่วยให้เราสามารถเพิ่มข้อความหรือรูปภาพลิ้งค์ไปยังที่ต่างๆ...
56แล้วกลับไปดูการแสดงผลหน้าแรกเว็บไซต์จะพบว่าวิตเจ็ด ได้เพิ่มขึ้นมาอีกหนึ่งวิตเจ็ด       6.3 ใส่รูปภาพในวิตเจ็ดแบบข้อความ ...
572. อัพโหลดรูปภาพที่เตรียมไว้ใส่ลงไปในเว็บไซต์ก่อนครับ ตามขั้นตอนดังนี้2.1 ไปที่เมนู สื่อ       เพิ่มไฟล์ใหม่2.2 ทาการอั...
58เมื่อเสร็จแล้วคลิก บันทึกการเปลี่ยนแปลงทั้งหมด สิ่งที่ท่านจะต้องจาเพื่อนาโค้ดไปแปะไว้ในวิตเจ็ด คือ        URL ของรูปภาพท...
59เมื่อคลิกแก้ไขจะได้ดังภาพก็จะได้ URL ดังนี้        http://www.mahathikun.ac.th/wp-content/uploads/2012/08/h9.pngซึ่งเป็น...
60เปิดไปหน้าแรกเว็บไซต์เพื่อดูผลลัพธ์
61            บทที่ 7 : ใส่ลูกเล่นให้กับเว็บไซต์ด้วย Plug-in การที่        Wordpress เป็น OpenSouce จึงทาให้มีนักพัฒนาเว็บ...
623. ระบบจะทาการส่งตัว activate ให้เราทาการยืนยันมาที่ email ที่เราได้ระบุไว้
634. ระบบจะส่งข้อมูลการเข้าสู่ระบบมาให้ พร้อมทั้ง API key ด้วยทาการติดตั้ง Akismet Plugin1. เข้าสู่ระบบ หน้าหลัก ของ wordp...
643. ทาการ คลิกใช้งาน4. ระบบจะแจ้งลิงค์ที่ให้เราใส่ API key ” enter your WordPress.com API key ”5. ทาการใส่ API key และ กด...
652. การติดตั้ง SI CAPTCHA Anti-Spam        wikipedia.org ได้ให้ความหมายของคาว่า CAPTCHA ดังนี้ CAPTCHA แค๊ปท์ชา คือการทดส...
663. เมื่อคลิกใช้งานปลั๊กอินแล้วจะกลับเข้าสู่หน้าปลั๊กอินดังภาพ4. ให้ตั้งค่าปลั๊กอินโดย คลิกที่คาว่า Setting แล้วตั้งค่าตา...
675. ทดสอบดูในส่วนแสดงความเห็น ของ บทความที่สร้างก็จะพบดังภาพ* ต้องออกจากระบบได้ Login ไว้ก่อนนะครับ ถึงจะมองเห็น
683. การติดตั้ง Lightbox Plusเป็นการนาเสนอรูปแบบการแสดงผลของรูปภาพบนเว็บไซต์ให้มีความสวยงามมากยิ่งขึ้นดังรูป      วิธีการต...
693. ตั้งค่าการใช้งานปลั๊กอิน โดยทาดังรูป4. ตั้งค่าการใช้ ลองทดสอบดูได้เลยครับเมื่อติดตั้งเสร็จแล้วสามารถไปที่หน้าแรกเว็บไ...
70                                                            เล็กๆน้อยก่อนขึ้นโฮสต์จริงเมื่อเราได้ทาการใช้งาน        Word...
71 การใส่วีดีโอในบทความ         การใส่วีดีโอเช่น Youtube จะช่วยเพิ่มบทความของเราให้มีความน่าสนใจมากยิ่งขึ้น ซึ่งมีวิธีการอ...
72 หมายเลข 1 เมื่อเจอวีดีโอที่ต้องการแล้ว ด้านล่างของวีดีโอจะมีปุ่ม       แบ่งปัน ให้คลิกที่ปุ่มแบ่งปัน หมายเลข 2 เมื่อคลิ...
73เสร็จแล้วสลับไปที่หน้าจอ Visual เพื่อพิมพ์ข้อความอีกครั้ง หลังจากนั้น ก็ทาการ เผยแพร่บทความ ก็จะได้บทความที่มีวีดีโอประก...
74                                            บทที่ 7 : Upload ขึ้นโฮส จริง         เมื่อเราได้ปรับแต่งเว็บไซต์ด้วย Wordpr...
75      2. เลือกฐานข้อมูลที่เราสร้างไว้ คือ wordpress แล้วคลิกที่แท็ป ส่งออก ดังรูป      3.จะได้ดังรูป1 เลือกส่งออก2 ติ๊กถ...
764. จะได้ไฟล์ ชื่อฐานข้อมูล.  sql เช่นฐานข้อมูลของผมคือ wordpress ก็จะได้ไฟล์ฐานข้อมูลเป็น wordpress.sql เป็นต้นเก็บไว้ก่...
777. คลิกเลือกที่ Import เพื่อเลือกฐานข้อมูลที่ได้สารองไว้ขึ้นมา8. คลิกลงมือ
789. การติดตั้งฐานข้อมูลจากไฟล์ที่สารองไว้เสร็จเรียบร้อยแล้ว10. ตั้งค่าไซต์ URL ของ Wordpress จากเดิม http://localhost/wor...
7910.       2 เลือก เปิดดู จะได้ดังภาพ10.3 หลังจากนั้นเลือกฟิลด์ในตาราง            wp_options ที่ชื่อ siteurl โดยคลิกที่ไอ...
80ขั้นตอนหลักที่ 2 การอัพโหลดไฟล์เว็บขึ้นโฮสต์จริง      ในที่นี้จะสมมติว่าท่านได้ URL ชื่อเว็บโรงเรียนของท่านหลังเว็บไซต์w...
81      define(DB_NAME, ชื่อฐานข้อมูลของท่าน);      define(DB_USER, ชื่อผู้ใช้งานฐานข้อมูล);      define(DB_PASSWORD, รหัส...
822. อัพโหลดไฟล์ขึ้น server หรือ โฮสต์2.1 เปิดโปรแกรมอัพโหลด        FileZilla แล้วตั้งค่าการเชื่อต่อ FTP ตามตัวอย่าง (ชื่อ...
83      2.2 ทาการเลือกโฟลเดอร์ C:/Appserv/www/wordpress ตามภาพแล้วเลือกไฟล์ที่อยู่ในโฟลเดอร์ wordpress ทั้งหมด โยน ขึ้นไปบ...
842.3 เปิดเว็บไซต์          www.sk1shools.org/mahathikun ก็จะพบเว็บไซต์ของท่านตามที่ได้ปรับแต่ง และตั้งค่าไว้ครับ หมายเหตุ...
85                                                                                จากใจผู้เขียน ด้วยการเขียนคู่มือฉบับนี้ ...
Upcoming SlideShare
Loading in …5
×

สร้างเว็บไซต์ด้วยWordpress

49,538 views

Published on

Published in: Education

สร้างเว็บไซต์ด้วยWordpress

  1. 1. คู่มือประกอบการอบรมเรื่อง การสร้างเว็บไซต์ด้วย WORDPRESS SK1 ICT Teamสานักงานเขตพื้นการศึกษาประถมศึกษาสระแก้วเขต 1
  2. 2. สารบัญเรื่อง หน้าบทที่ 1 : WordPress คืออะไร? 1 - ตัวอย่างเว็บ WordPress ที่น่าสนใจ 2บทที่ 2 : การติดตั้ง WordPress 5 - โปรแกรมที่ท่านจะได้รับในการอบรมครั้งนี้ 5 - การติดตั้ง AppServ 6 - การติดตั้ง WordPress 11บทที่ 3 ติดตั้ง Arras Theme 20 - การติดตั้งและปรับแต่ง Theme Arras 20บทที่ 4 : สร้างหน้าเพจ / เมนู / หมวดหมู่เรื่อง /บทความที่จะทาการ 24ประชาสัมพันธ์ - การสร้างหน้าเพจ 25 - การสร้าง เมนู 29 - การสร้างหมวดหมู่ของบทความหรือเรื่องที่จะประชาสัมพันธ์ 32 - การสร้าง บทความ หรือ เรื่องที่จะประชาสัมพันธ์ 34บทที่ 5 : การตั้งค่า Arras Theme 38 - ขั้นตอนการตั้งค่า Arras Theme 38 - ตั้งค่าการแสดงผลหน้า Home 40บทที่ 6 : การสร้าง Widgets 52 - Widgets (วิดเจ็ต)คืออะไร 52 - ตาแหน่งที่จัดวางวิดเจ็ต (Widget Areas) 52 - การสร้าง Widgets เพื่อใส่รูปหรือข้อความที่ได้สร้างขึ้นเอง 55 - ใส่รูปภาพในวิตเจ็ดแบบข้อความ 56บทที่ 7 : ใส่ลูกเล่นให้กับเว็บไซต์ด้วย Plug-in 61 - การติดตั้งปลั๊กอิน Akismet 61 - การติดตั้ง SI CAPTCHA Anti-Spam 65 - การติดตั้ง Lightbox Plus 68
  3. 3. - เล็กๆน้อยก่อนขึ้นโฮสต์จริง 78 - การลบ แก้ ไข บทความ 70 - การใส่วีดีโอในบทความ 71 - ตรวจสอบว่ามีสื่อประเภทใดบ้างอยู่บนเว็บไซต์เรา 73บทที่ 8 : Upload ขึ้นโฮส จริง 74 - Export / Import ฐานข้อมูล MySQL เตรียมตัวขึ้นเว็บ 74 - การอัพโหลดไฟล์เว็บขึ้นโฮสต์จริง 80 - ทาการตั้งค่าไฟล์เชื่อมต่อ Server 80 - อัพโหลดไฟล์ขึ้น server หรือ โฮสต์ 82
  4. 4. 1 บทที่ 1 : WordPress คืออะไร? WordPress เป็นโปรแกรมสาหรับทาบล็อก ซึ่งพัฒนาโปรแกรมอยู่บนพื้นฐานของภาษาโปรแกรมมิ่ง ที่ชื่อว่า PHP ซึ่งมีความยืดหยุ่นและได้รับความนิยมสูง โดยใช้ร่วมกับฐานข้อมูลMySQL WordPress เป็น CMS ( Contents Management System ) ที่ได้รับความนิยมอย่างสูงจากผู้ใช้งานทั่วโลกรวมถึงผู้ใช้งานคนไทย เหมาะสาหรับการนามาสร้างเว็บบล็อกส่วนตัวสานักงาน หรือแม้กระทั่งเว็บไซต์ขนาดใหญ่หลายๆเว็บไซต์ก็พัฒนามาจาก WordPress การที่ WordPress ได้รับความนิยมเป็นอย่างสูงก็เพราะว่า WordPress มีระบบการจัดการที่ง่ายและสะดวกต่อการใช้งาน โดยมีความง่ายตั้งแต่การติดตั้งโดยใช้เวลาติดตั้งไม่ถึง 5นาทีด้วยซ้าไป รวมถึงการเขียนบล็อกหรือการเปลี่ยนธีมของบล็อกหรือเว็บไซต์ก็ทาได้อย่างไม่ยากเย็น ไม่เป็นอุปสรรคที่ยากเกินไปสาหรับนักพัฒนาเว็บไซต์มือใหม่ รวมถึงมีความปลอดภัยที่น่าเชื่อถือ มีการอัพเดตเวอร์ชั่นใหม่ๆอยู่อย่างต่อเนื่อง การอัพเดตแต่ละครั้งก็เพิ่ม ฟีเจอร์ใหม่ๆเข้ามาอยู่เรื่อยๆ ทาให้เว็บไซต์หรือบล็อกของเราไม่หยุดนิ่ง และด้วยความเป็นOpenSouce ของ WordPress จึงทาให้มีนักพัฒนาสร้าง Plugin (ปลั๊กอิน) รูปแบบบล็อก(Theme) อย่างมากมาย สรุปข้อดีของ WordPress 1. เป็น CMS แบบ OpenSouce 2. ปรับแต่งหน้า (Theme) ได้ง่าย มีความสวยงาม แสดงผลได้ทุกบราวเซอร์ และเปลี่ยนได้ตลอดเวลา 3. มีการอัพเดตอย่างต่อเนื่อง ทาให้หมดกังวล ด้านความปลอดภัย ไวรัสและสแปม
  5. 5. 2 4. มีปลั๊กอิน ลูกเล่นเสริมมากมายทาให้เว็บไซต์มีลูกเล่นต่างๆหลากหลาย 5. สามารถเชื่อมต่อกับระบบ Social Network อื่นๆได้อย่างมากมาย 6. สามารถต่อยอดเป็น เว็บบล็อกส่วนตัว เว็บไซต์หน่วยงาน ได้อย่างง่ายดาย อื่นๆ อีกมากมายครับ แต่ว่าท่านจะได้รู้ระดับความสามารถของตัวโปรแกรมเมื่อได้ใช้งานจริงๆ ซึ่งจะทาให้รู้สึกทึ่ง อย่างไม่ยากเย็นตัวอย่างเว็บ WordPress ที่น่าสนใจ เพื่อเป็นการการันตีว่า WordPress สามารถทาอะไรได้หลายอย่างๆจริงๆ จึงของนาเอาเว็บไซต์ต่างๆที่สร้างขึ้นจาก WordPress มานาเสนอในครั้ง เพื่อประกอบการตัดสินใจว่าหลังจากที่ท่านได้อ่านคู่มือฉบับนี้แล้ว ท่านจะเปลี่ยนใจไปใช้ WordPress หรือไม่ หรือจะทาให้เว็บไซต์ท่านเป็นแบบเดิม พูดง่ายๆก็คือล่อใจท่าน ในการเปลี่ยนแปลงเว็บไซต์มาใช้WordPress นั่นเอง ขอโชว์เว็บที่สร้างเองก่อนแล้วกันนะครับ เว็บไซต์ โรงเรียนมหาธิคุณวิทยา www.mahathikun.ac.th
  6. 6. 3 เว็บไซต์โรงเรียนไทรเดี่ยววิทยาต่อไปเว็บไซต์ระดับมืออาชีพครับ เว็บของคุณเม่น คนนี้ระดับเชี่ยวชาญเลยครับ
  7. 7. 4 จริงๆแล้ว มีอีกมากมายหลายเว็บไซต์ที่สร้างด้วย Wordpress ลองเสิร์ซหาคาว่าเว็บไซต์ที่สร้างด้วย Wordpress ก็จะพบได้อย่างไม่ยากเย็น
  8. 8. 5 บทที่ 2 : การติดตั้ง WordPress โปรแกรมที่ท่านจะได้รับในการอบรมครั้งนี้ 1. Appserv โปรแกรมจาลองเครื่องคอมพิวเตอร์ให้มีสถานะเป็น Server ซึ่งได้บรรจุApache PHP5 Mysql PhpMyadmin และตั้งค่าให้สามารถทางานร่วมกันเรียบร้อยแล้ว 2. Wordpres3.2.2 สคริปค์ wordpressgเวอร์ชั่น 3.2.2 ภาษาไทย 3. Theme Arras 1.5.1.2 ซึ่งเป็น Theme ที่เราจะใช้เพื่อเป็นตัวอย่างในการปรับแต่งเว็บครั้งนี้ 4. โปรแกรม Edit+ เป็นโปรแกรมแก้ไขโค๊ด ของ Wordpress ซึ่งถ้าในเครื่องท่านมีDreamwaver หรือ Editor อื่นอยู่แล้วก็ไม่จาเป็นต้องลงใช้ตามความถนัดได้เลยครับ 5. โปรแกรม FileZilla สาหรับ อัพโหลดเว็บไซต์ขึ้นสู่โฮสต์จริงๆ
  9. 9. 6การติดตั้ง AppServ Appserv เป็นโปรแกรมที่จาลองเครื่องคอมพิวเตอร์ ของผู้พัฒนาโปรแกรมเองให้มีสถานะเป็น Web Server หรือ localhostขั้นตอนการติดตั้ง (อ้างอิงจากเว็บไซต์ผู้พัฒนาโปรแกรม) 1. ดับเบิ้ลคลิกไฟล์ appserv-win32-x.x.x.exe เพื่อทาการติดตั้งจะปรากฏหน้าจอตามรูปที่ 1 รูปที่ 1 ขั้นตอนการติดตั้งโปรแกรม AppServ 2. เข้าสู่ขั้นตอนเงื่อนไขการใช้งานโปรแกรม ยอมรับเงื่อนไขให้กด Next เพื่อเข้าสู่การติดตั้งในขั้นต่อไป รูปที่ 2 แสดงรายละเอียดเงื่อนไขการ GNU License
  10. 10. 7 3. เข้าสู่ขั้นตอนการเลือกปลายทางที่ต้องการติดตั้ง โดยค่าเริ่มต้นปลายทางที่ติดตั้งจะเป็นC:AppServ หากต้องการเปลี่ยนปลายทางที่ติดตั้ง ให้กด Browse แล้วเลือกปลายทางที่ต้องการ ตามรูปที่ 3 เมื่อเลือกปลายทางเสร็จสิ้น ให้กดปุ่ม Next เพื่อเข้าสู่ขั้นตอนการติดตั้งขั้นต่อไป รูปที่ 3 เลือกปลายทางการติดตั้งโปรแกรม AppServ 4. เลือก Package Components ที่ต้องการติดตั้ง โดยค่าเริ่มต้นนั้นจะให้เลือกลงทุกPackage แต่หากว่าผู้ใช้งานต้องการเลือกลงเฉพาะบาง Package ก็สามารถเลือกตามข้อที่ต้องการออก โดยรายละเอียดแต่ละ Package มีดังนี้ - Apache HTTP Server คือ โปรแกรมที่ทาหน้าเป็น Web Server - MySQL Database คือ โปรแกรมที่ทาหน้าเป็น Database Server - PHP Hypertext Preprocessor คือ โปรแกรมที่ทาหน้าประมวลผลการทางานของภาษา PHP - phpMyAdmin คือ โปรแกรมที่ใช้ในการบริหารจัดการฐานข้อมูล MySQL ผ่านเว็บไซต์ เมื่อทาการเลือก Package ตามรูปที่ 4 เรียบร้อยแล้ว ให้กด Next เพื่อเข้าสู่ขั้นตอนการติดตั้งต่อไป
  11. 11. 8 รูปที่ 4 เลือก Package Components ที่ต้องการติดตั้ง5. กาหนดค่าคอนฟิกของ Apache Web Server มีอยู่ด้วยกันทั้งหมด 3 ส่วน คือ Server Name คือช่องสาหรับป้อนข้อมูลชื่อ Web Server กาหนดเป็น localhost Admin Email คือช่องสาหรับป้อนข้อมูล อีเมล์ผู้ดูแลระบบ เช่น root@localhost HTTP Port คือช่องสาหรับระบุ Port ที่จะเรียกใช้งาน โดยทั่วไปแล้วนั้นจะมีค่าคือ 80 รูปที่ 5 แสดงการกาหนดค่าคอนฟิกค่า Apache Web Server
  12. 12. 9 6. Appserv จะกาหนด User ให้เราอัตโนมัติ คือ root แต่เราต้องสร้างรหัสผ่านเองเช่น Enter root password = 1234 Re- Enter root password = 1234 Character Setes = UTF-8 Unicode กด Next เพื่อไปที่ขั้นตอนต่อไป รูปที่ 6 แสดงการกาหนดค่าคอนฟิกของ MySQL Database 7. สาหรับขั้นตอนสุดท้ายนี้จะมีให้เลือกว่าต้องการสั่งให้มีการรัน Apache และMySQL ทันทีหรือไม่ จากนั้นกดปุ่ม Finish เพื่อเสร็จสิ้นการติดตั้งโปรแกรม AppServ รูปที่ 7 แสดงหน้าจอขั้นตอนสิ้นสุดการติดตั้งโปรแกรม AppServ
  13. 13. 108. โปรแกรมที่ทรัพยากรที่อยู่ใน โฟลเดอร์ AppServ ทั้งหมด
  14. 14. 11การติดตั้ง WordPressดาวน์โหลดและติดตั้ง WordPress หลังจากติดตั้งผู้ช่วยพระเอก Appserv แล้ว มาถึงขั้นตอนการดาวน์โหลดและติดตั้งพระเอกของเราเสียทีครับ1. โหลด WordPress ภาษาไทยที่ http://th.wordpress.orgแต่ในการอบรมครั้งนี้เราได้เตรียมไว้ให้ท่านพร้อมแล้ว อยู่ใน ซีดี หรือไดร์ที่แจกครับ2. จะได้ไฟล์ ดังรูป แล้วทาการแตก zip 3. คัดลอก Folder ที่อยู่ใน ไปที่ไดร์ C:AppServwww
  15. 15. 124. ดังภาพ5. ติดตั้งโดยการเปิดโปรแกรม Browser ที่ท่านถนัดขึ้นมา
  16. 16. 13 6. สร้างฐานข้อมูลเพื่อรองรับ Wordpress โดยพิมพ์ URL ดังนี้ http://localhost/phpmyadmin โปรแกรมจะถามหาชื่อผู้ใช้ และ รหัสผ่านชื่อผู้ใช้คือ root รหัสผ่านที่ผมตั้งไว้ก็คือ 1234พิมพ์เสร็จ คลิก ตกลง
  17. 17. 147. สร้างฐานข้อมูลชื่อ wordpress แล้ว คลิก ที่ปุ่ม ตกลง
  18. 18. 15 8. เปิดบราวเซอร์ขึ้นมาอีกหนึ่งแท็ป พิมพ์ที่ช่องaddress bar ดังนี้ http://localhost/wordpressแล้ว Enter 9. หน้าจอต้อนรับพร้อมกับแนะนาวิธีตั้งค่าเบื้องต้น
  19. 19. 1610. ตั้งค่าการเชื่อมต่อ WordPress กับฐานข้อมูลที่ได้สร้างไว้ก่อนหน้า10. 1 ชื่อฐานข้อมูลที่สร้างไว้กับ PhpMyadmin ของผมจะเป็น wordpress10.2 ชื่อผู้ใช้ ในที่นี้คือ root10.3 รหัสผ่านที่ตั้งไว้ของวิทยากรจะเป็น 123410.4 ชื่อโฮสต์เป็น localhost (ไม่ต้องแก้ไข)10.5 คานาหน้าตาราง ไม่ต้องแก้ไข10.6 ติดตั้ง
  20. 20. 1711. หน้าแสดงว่าค่าที่ตั้งทุกอย่างถูกต้องแล้วคลิก ปุ่ม ทาการติดตั้ง12. ทาการตั้งค่าเว็บไซต์ เบื้องต้น
  21. 21. 1812.1 หัวข้อเว็บ คือ ชื่อของเว็บไซต์นั่นเอง กรณีนี้สามารถเปลี่ยนได้ภายหลัง12.2 ชื่อผู้ใช้ เป็นชื่อของผู้ดูแลระบบ ชื่อนี้จะไม่สามารถเปลี่ยนได้ภายหลัง12.3 รหัสผ่านสองครั้ง หมายถึงให้เราใส่รหัสผ่านให้เหมือนกันทั้งสองช่อง12.4 อีเมล์ กรอกอีเมล์ของท่านเอง12.5 คลิกปุ่ม ติดตั้งเวิร์ดเพรส13. ติดตั้งสาเร็จคลิก ปุ่ม เข้าสู่ระบบ เพื่อทาการตั้งค่า Wordpress ดังภาพ
  22. 22. 1914. หน้าจัดการระบบของ Wordpress 15. หน้าแรกเว็บไซต์ที่ผู้เยี่ยมชมทั่วไปสามารถเห็นได้ (ยังไม่ได้ติดตั้ง Theme Arras )
  23. 23. 20 บทที่ 3 : ติดตั้ง Arras Themeการติดตั้งและปรับแต่ง Theme Arras ที่จริงแล้วภาพหน้าเว็บไซต์ดังรูปก่อนหน้านั้นคือหน้าสาเร็จรูปของ Wordpress แล้วนะครับ ซึ่งสามารถใช้งานต่างๆ เช่น เพิ่มบทความ เพิ่มรูป เพิ่มการเชื่อมต่อต่างๆ ใส่ลิ้งค์ หรือเปลี่ยนรูปแบบเว็บไซต์ให้เป็นแบบที่เราต้องการก็สามารถทาได้ แต่เพื่อให้เราง่ายขึ้นโดยที่ไม่ต้องเสียเวลาออกแบบ ได้มีผู้สร้างหน้าตาเว็บไซต์หรือที่เรียกว่า Theme ไว้มากมาย ซึ่งเราสามารถหาโหลด Theme ที่ชอบได้จาก Google โดยพิมพ์คาว่า Theme Wordpress Free โดยจะพบผลลัพธ์การค้นหามากมาย แล้วเราก็สามรถเข้าไปโหลด Theme ได้จากเว็บไซต์ของผู้ผลิตได้เลย แต่เพื่อให้เป็นรูปแบบเดียวกันและง่ายในการทาความเข้าใจต่อการอบรมครั้งนี้จึงเลือกใช้ Theme ที่มีชื่อว่า Arras 1.5.1.2 ซึ่งเป็นของฟรี เว็บไซต์ผู้ผลิต
  24. 24. 211. เมื่อโหลดมาแล้ว (ซึ่งได้ทาการโหลดมาให้แล้ว) ก็ทาการแตก zip เพื่อทาการย้ายTheme ไปไว้ที่ Root Directory ของ เว็บไซต์ของเราได้เลย แตก Zip ได้โฟลเดอร์ arras.1.5.1.2 ภายในโฟลเดอร์ arras.1.5.1.2 2. ทาการ Copy โฟลเดอร์ arras ที่อยู่ในโฟลเดอร์ arras.1.5.1.2ไปไว้ที่ไดร์ C:AppServwwwwordpresswp-contentthemes
  25. 25. 223. เปิดหน้าเว็บ http://localhost/wordpress/wp-admin เพื่อเข้าสู่ระบบ4. เลือกเมนู รูปแบบบล็อก  แล้วเลือก Themes
  26. 26. 23 5. คลิกเลือก Theme Arras6. เสร็จขั้นตอนการติดตั้ง Theme Arras รูปแบบหน้าตาของ Theme Arras เบื้องต้น ยังไม่ได้ปรับค่าอะไร
  27. 27. 24 บทที่ 4 : สร้างหน้าเพจ / เมนู / หมวดหมู่ เรื่อง /บทความที่จะทาการประชาสัมพันธ์ เพื่อให้ผู้อบรมในครั้งนี้มองเห็นภาพ ของการสร้างเว็บไซต์ด้วย Wordpress และการใช้งาน Arras Theme ซึ่งเป็นภาพที่มองเห็นได้ยากสาหรับมือใหม่ว่าเว็บไซต์จะออกมาในลักษณะหน้าตาเป็นอย่างไร ผมจะพาท่านสร้างหน้าที่จาเป็นสาหรับเว็บไซตโรงเรียน หรือหน่วยงานของท่านก่อนครับ เช่นหน้าต่างๆที่เราต้องการจะให้มี 1. ประวัติโรงเรียน 2. ข้อมูลบุคลากร 3. ข้อมูลนักเรียน 4. กรรมการสถานศึกษา 5. ข้อมูลการเดินทางมาโรงเรียน ฯลฯ เมนู คือ ส่วนที่ต้องการให้ผู้เยี่ยมชมเลือกว่าต้องการจะเข้าหน้าไหน หรือเรื่องใด ในที่นี้เราจะต้องสร้างเมนูเพื่อให้หน้าที่เราสร้างนั้นไปแสดงที่หน้าแรกหมวดหมู่ ที่ต้องการเพิ่มข่างประชาสัมพันธ์ เช่น1. ข่าวประชาสัมพันธ์ 2. กิจกรรมของโรงเรียน3. กิจกรรมสัมพันธ์ชุมชนบทความ หรือ เรื่องที่เราจะประชาสัมพันธ์ สามารถสร้างได้โดยอยู่ภายใต้หมวดหมู่
  28. 28. 25การสร้างหน้าเพจขั้นตอนที่ 1 ไปที่ เมนูด้านซ้าย ของหน้าผู้ดูแลระบบ เลือก หน้า  เขียนหน้าใหม่ขั้นตอนที่ 2 ใส่รายละเอียดหน้า ประวัติโรงเรียน
  29. 29. 26TIP การทางานแบบ WYSIWYG การทางานแบบ WYSIWYG (ย่อมาจาก Waht You See is What You Get) คือ การทางานที่เราสามารถเห็นสิ่งที่ปรากฏบนหน้าจอได้เหมือนกับผลที่ได้จากการพิมพ์ออกทางเครื่องพิมพ์ เช่น ตัวอักษรที่เน้นให้เป็นตัวหนาตัวเอียง หรือตัวขีดเส้นใต้ จะแสดงผลให้เห็นทางหน้าจอ ดังนั้น สิ่งที่เรากาหนดไว้จะแสดงให้เห็นจริงบนหน้าจอโดยตรง และไม่จาเป็นต้องพิมพ์ออกมาทดลองดูก่อน คุณสมบัตินี้ช่วยให้เราสามารถจัดการกับหน้าเอกสารตามความต้องการได้ทันทีขั้นตอนที3 ใส่รูปในหน้าประวัติโรงเรียน ่ คลิกที่ไอคอน ดังภาพจะปรากฏหน้าสาหรับอัพโหลดสื่อขึ้นมาต่อมาให้คลิกเลือกรูปที่เราต้องการจะใส่ โดยเลือกรูปจากเครื่องคอมพิวเตอร์
  30. 30. 27เมื่อเลือกรูปที่ต้องการแล้ว จะได้รูปดังภาพด้านล่าง ให้ใส่รายละเอียดรูปแล้วคลิกใส่เข้าในเรื่อง
  31. 31. 28จะได้ดังภาพขั้นตอนที่ 4 เมื่อได้ปรับแต่งข้อความรวมถึงรูปภาพในหน้า ประวัติโรงเรียน เรียบร้อยแล้ว ก็เตรียมที่จะเผยแพร่หน้านี้ได้แล้ว ครับ
  32. 32. 29การสร้าง เมนู เพื่อให้เว็บแสดงเมนูหน้า ประวัติโรงเรียน หรือหน้าอื่นๆที่เราสร้างขึ้นเพื่อให้เราหรือผู้เยี่ยมชมเว็บไซต์สามารถมองเห็นหน้าต่างๆที่เราได้สร้างไว้เราจาเป็นจะต้องสร้างเมนูขึ้นมาก่อน โดยขั้นตอนต่อไปนี้ 1. ไปที่แถบเมนู รูปแบบบล็อก เลือก เมนู2. สร้างเมนูชื่อ topmenu
  33. 33. 303. จะได้หน้าจัดการเมนู ดังภาพ4. เลือกการแสดงผลของเมนู
  34. 34. 315. เพิ่มหน้าลงในเมนู6. จะแสดงผลหน้าเว็บไซต์ดังภาพ เป็นอันเสร็จขั้นตอนการสร้างหน้า และ เมนู ครับ
  35. 35. 32การสร้างหมวดหมูของบทความหรือเรื่องที่จะประชาสัมพันธ์ ่ เพื่อให้การประชาสัมพันธ์ข่าวสารของหน่วยงานของท่าน ถูกจัดเรียงให้ตรงหมวดหมู่และให้ผู้มาเยี่ยมชมสะดวกในการอ่านหรือรับชมข่าวสารจากทางหน้าเว็บนั้น จาเป็นต้องจัดหมวดหมู่ของบทความให้อยู่ในหมวดหมู่เดียวกันเช่น เรื่องเด่น /ข่าวประชาสัมพันธ์ / กิจกรรมของโรงเรียน / กิจกรรมสัมพันธ์ชุมชน เป็นต้น ในตอนนี้ เราจะมาฝึกการสร้างหมวดหมู่ ด้วย wordpress กันครับเริ่มจาก ขั้นตอนที่ 1 ล็อกอินเข้าสู่ระบบในฐานะผู้ดูแลเว็บไซต์ แล้วไปที่ เมนู เรื่อง หมวดหมู่ ดังภาพด้านล่าง
  36. 36. 33ขั้นตอนที่ 2 สร้างหมวดหมู่โดยกาหนดดังนี้ช่องที่ 1 ชื่อ ให้ใส่ชื่อหมวดหมู่ที่เราต้องการช่องที่ 2 Slug ให้ใส่คาที่จะสร้าง URL ที่เป็นมิตรกับ search engine ใส่ชื่อเดียวกันกับช่องที่ 1 ก็ได้ครับช่องที่ 3 หลัก หมายความว่า ต้องการให้หมวดหมู่ที่เราสร้างอยู่ภายใต้หมวดหมู่ใดหรือไม่ หากไม่ใช่ ให้เลือก ไม่มีช่องที่ 4 คาขยายความ ใส่เพื่อธิบายหมวดหมู่ที่เราสร้าง เพื่อผลทางด้านการค้นหาของ Search Engine ดังภาพเมื่อกาหนดค่าข้างต้นเรียบร้อยแล้วให้คลิกที่ปุ่ม สร้างหมวดหมู่ ดังรูป (หมายเลข 5)เราก็จะได้หมวดหมู่ตามต้องการ
  37. 37. 34การสร้าง บทความ หรือ เรื่องที่จะประชาสัมพันธ์ในการสร้างเว็บไซต์เพื่อนาเสนอหน่วยงานนั้นสิ่งที่สาคัญที่สุดก็คือข่าวความเคลื่อนไหวหรือกิจกรรมของหน่วยงาน เพื่อที่จะให้สาธารณชนภายนอกได้รับรู้ข่าวสารที่หน่วยงานได้จัดขึ้นเพื่อเสริมสร้างภาพลักษณ์ที่ดีให้เกิดขึ้นแก่หน่วยงานนั้นๆ โดยขั้นตอนการสร้างบทความมีดังนี้ ขั้นตอนที่ 1 ท่านต้องล็อกอินอยู่ในฐานะผู้ดูแลระบบ หรือ ผู้ดูแลเว็บไซต์ ขั้นตอนที่ 2 ไปที่เมนู เรื่อง  เขียนเรื่องใหม่จะได้ดังภาพ
  38. 38. 35ขั้นตอนที่ 3 เพิ่มเนื้อของข่าวสารลงไปรายละเอียดดังนี้ หมายเลข 1 เพิ่มข้อมูล เนื้อหา รายละเอียด รวมถึงภาพประกอบลงไป หมายเลข 2 เลือกหมวดหมู่ของเรื่อง หมายเลข 3 ใส่ป้ายกากับ หรือ คีเวิร์ด เกี่ยวกับเรื่องนั้น (ใส่หรือไม่ใสก็ได้) หมายเลข 4 เมื่อเสร็จแล้ว คลิก เผยแพร่ให้ผู้อบรมลอง เปิดไปที่หน้าเว็บไซต์ที่ท่านสร้างขึ้นเองเช่น http://localhost/wordpressจะพบการเปลี่ยนแปลงดังภาพด้านล่าง
  39. 39. 36ในที่นี้ ให้ผู้เข้ารับการอบรมลองทดสอบเพิ่มข่าวสารเข้าสู่เว็บไซต์อย่างน้อยคนละ 5 เรื่อง เพื่อให้มองเห็นภาพรวมของการแสดงผลของเว็บไซต์ และเพิ่มให้มีเรื่องครบทุกหมวดหมู่ที่ได้สร้างไว้
  40. 40. 37ผลลัพธ์ดังภาพ ทีนี้ท่านพอจะมองออกหรือยังครับเกี่ยวกับการแสดงผลเว็บไซต์ ถ้ายังไม่ออกเรามาลองตั้งค่าการทางานของ Theme Arras 1.5.2.1 ที่เราได้ลงไว้ตั้งแต่ต้นดูก่อนนะครับ
  41. 41. 38 บทที่ 5 : การตั้งค่า Arras Theme Arras Theme เป็น Theme ที่แจกให้ผู้ที่ใช้งาน Wordpress นาไปใช้ได้ฟรีๆ โดยไม่มีค่าใช้จ่ายใดโดยมีลิขสิทธิ์เพียงเป็นแบบ GNU Licenses (อ่านว่า กนู ไลเซนส์) ซึ่ง กนูไลเซนส์ มีเงื่อนไขดังนี้  เสรีภาพในการใช้งาน ไม่ว่าใช้สาหรับจุดประสงค์ใด  เสรีภาพในการศึกษาการทางานของโปรแกรม และแก้ไขโค้ด การเข้าถึงซอร์สโค้ด (Opensouce)  เสรีภาพในการจาหน่ายแจกจ่ายโปรแกรม  เสรีภาพในการปรับปรุงและเปิดให้บุคคลทั่วไปใช้และพัฒนาต่อไป การเข้าถึงซอร์สโค้ดโดยมีเพียงเงื่อนไขว่า การนาไปใช้หรือนาไปพัฒนาต่อ จาเป็นต้องใช้สัญญาอนุญาตเดียวกัน ขั้นตอนการตั้งค่า Arras Theme 1. เข้าสู่เว็บไซต์ในฐานะ ผู้ดูแลระบบ2. เลือกเมนู Arras  Theme Option
  42. 42. 393. จะเข้าสู่หน้าตั้งค่าเบื้องต้นของ Arras Theme ซึ่งเป็นการตั้งค่าการเชื่อมต่อกับระบบ SocialNetwork เช่น Facebook Twiiter เป็นต้น และยังเป็นส่วนของการตั้งค่าข้อความด้านล่างสุดของเว็บไซต์หรือเรียกอีกอย่างหนึ่งว่า Footer นั่นเอง
  43. 43. 40 4. ส่วน Home เป็นส่วนตั้งค่าแสดงผลของเว็บไซต์ในหน้า Home หรือหน้าแรกของเว็บไซต์นั่นเอง ซึ่งจะทาการดึงบทความหรือเรื่องที่เราได้สร้างขึ้น นามาแสดงที่หน้านี้ 4.1 ตั้งค่าการแสดงผลหน้า Home 4.1.1 Post Option จะมี CheckBox ให้เลือก ซึ่งความหมายว่า หากมีบทความที่มีชื่อ และเนื้อหาคล้ายกันแล้วให้รวมบทความนั้นให้เป็นบทความเดียว
  44. 44. 41 4.1.2 Slide Show ส่วนแสดงบทความที่อยู่ในรูปแบบของสไลด์ หมายเลข 1 เลือกว่าจะให้โชว์สไลด์หรือไม่ให้โชว์ โดยการติ๊กเลือกจะทาการโชว์สไลด์เอาเครื่องหมายถูกออกจะไม่โชว์สไลด์ หมายเลข 2 เลือกว่าจะให้หมวดหมู่บทความไหน โชว์ ที่ สไลด์ ถ้า Check all จะเป็นการเลือกทั้งหมด Uncheck all ก็ความหมายตรงข้ามครับ หมายเลข 3 จะให้โชว์กี่เรื่อง 4.1.3 Featured Posts #1 เป็นส่วนที่แสดงเรื่องที่เราสร้างในอีกรูปแบบหนึ่ง โดยเราสามารถเลือกหมวดหมู่ที่ต้องการแสดง หรือ นามาแสดงทั้งหมดก็ได้ โดยการตั้งค่าจะคล้ายกันกับข้อ 4.1.2 มีข้อแตกต่างเพียงเล็กน้อย ดังนี้
  45. 45. 42 หมายเลข 1 ตั้งชื่อส่วนหมวดหมู่แสดงผลหน้าเว็บไซต์ เช่น กิจกรรมของโรงเรียนทั้งหมด หมายเลข 2 เลือกว่าจะให้หมวดหมู่ใดแสดงผลบ้าง หมายเลข 3 เลือกรูปแบบการแสดงผลของเรื่องหรือบทความ โดยมีรูปแบบดังนี้ หากเลือกเป็น Node Base จะได้การแสดงผลดังรูป หากเลือกเป็น Per Line จะได้การแสดงผลดังรูป หากเลือกเป็น Quick Preview จะได้การแสดงผลดังรูป
  46. 46. 43หากเลือกเป็น Traditional จะได้การแสดงผลดังรูป
  47. 47. 444.1.4 Featured Posts #2 ใช้การตั้งค่าเช่นเดียวกันกับข้อ 4.1.34.1.5 News Posts ใช้การตั้งค่าเช่นเดียวกันกับข้อ 4.1.3เมื่อตั้งค่าเสร็จแล้วให้คลิก Save Change ทุกครั้ง 4.2 หน้า Layout ไม่ต้องตั้งค่าใดๆครับ ปล่อยไว้โดยมีความหมายดังนี้ Excerpts คือ การตั้งค่าการตัดคา ในการแสดงผลบทความ Archive/ Search เป็นการเลือกรูปแบบการแสดงผลในหน้า Archive และหน้า Search Single Post เป็นการตั้งค่าให้หน้าบทความของเราแสดงข้อมูลอะไรบ้าง Tapestry หมายความว่าต้องการให้มีการตัดคาเนื้อหาด้านล่างหัวข้อบทความในโหมดNod Base หรือไม่
  48. 48. 45 4.3 หน้า Design เป็นหน้าที่เอาไว้ตั้งค่าการแสดงผลของเว็บไซต์ดังนี้ 4.3.1 Overrall Layout เป็นการตั้งค่าให้เว็บไซต์แสดงผลกี่คอลัมน์หรือกี่สดมน์ เช่นตั้งต่าให้เป็น 2 Column Layout(Left Sidebar) หมายความว่า ตั้งค่าเว็บเป็นสองคอลัมน์โดยให้แถบไซด์บาร์อยู่ด้านซ้าย จะผลลัพธ์ ดังนี้
  49. 49. 46โดยที่ Side Bar จะบรรจุ Widgets อยู่ด้านในอีกที ซึ่งในบทต่อไปเราจะได้กล่าวถึง 4.3.2 ต่อไป default style จะเป็นการเลือกให้เว็บไซต์ใช่ Style Sheet ใด เพื่อแสดผลเว็บไซต์ ยกตัวอย่างเช่น เลือก Blue.css
  50. 50. 47จะได้ผลลัพธ์ดังภาพ 4.3.3 Custom Logo เป็นการใส่โลโก้ ให้กับเว็บไซต์หน่วยงานของท่านเช่น
  51. 51. 48ผลลัพธ์ทั้งนี้ท่านสามารถใช้รูปแบบและขนาดของโลโก้ตามที่ท่านต้องการได้ บางท่านอาจจะอยากได้แบนเนอร์ใหญ่เต็มหน้าแทนที่โลโก้ ก็ใช้วิธีการเพิ่มรูปเช่นเดียว โดยค่าที่พอดีกับขอบเว็บคือความกว้าง 980px ส่วนความสูงนั้นแล้วแต่ท่านพอใจครับเช่น
  52. 52. 494.3.4 Custom Blackgroud คือ การตั้งค่าพื้นหลังซึ่งเมื่อทาการคลิกที่ คาว่า Set Custom Blackgroud จะเป็นการลิ้งไปสู่หน้าตั้งค่าพื้นหลัง หมายเลข 1 คลิกเลือกเพื่อให้การตั้งค่าทางาน หมายเลข 2/1 เลือกว่าจะใส่พื้นหลังแบบรูปภาพ หรือ หมายเลข 2/2 เลือกว่าจะใช้พื้นหลังแบบสี หมายเลข 3 บันทึกการเปลี่ยนแปลง
  53. 53. 504.4 Thumbnail คือการตั้งค่าการย่อรูปให้แก่การแสดงผลเว็บไซต์ซึ่งตั้งเป็นค่าเริ่มต้นก็น่าจะพอดีกัยรูปแบบเว็บไซต์แล้ว แต่ถ้าหากท่านใดอยากเปลี่ยนแปลงก็สามารถเปลี่ยนได้ตามหัวข้อ เลยครับ
  54. 54. 51 4.5 Tools ส่วนนี้สาหรับผู้ที่เข้าใจโค้ดรูปแบบ Theme หากท่านไม่เข้าใจก็อย่าไปเปลี่ยนแปลงอะไรจะเป็นการดีที่สุดครับ เป็นอันเสร็จสิ้นการตั้งค่าเบื้องต้นสาหรับ arras theme ส่วนจะสวยงามหรือไม่นั้นก็ขึ้นอยู่กับฝีมือในการออกแบบรูปภาพ ประกอบเว็บไซต์ของท่าน หรือการดีไซน์เว็บของท่านนั่นเองครับ
  55. 55. 52 บทที่ 6 : การสร้าง Widgets 6.1 Widgets (วิดเจ็ต)คืออะไร Widgets เป็นอีกไม้ตายหนึ่งของเวิร์ดเพรส (WordPress) เป็นเหมือนเครื่องประดับของเว็บไซต์พวกสร้อยคอ นาฬิกา กาไล แว่นตาของเว็บไซต์ เมื่อเปรียบเทียบดังนี้จะเห็นได้ชัดว่าวิดเจ็ตบางตัวนั้นนอกจากจะสวยงามแล้วยังเพิ่มความสามารถของเว็บไซต์หรือเป็นประโยชน์แก่เว็บไซต์ด้วย ตาแหน่งที่จัดวางวิดเจ็ต (Widget Areas)จ ะขึ้นอยู่กับThemeของเว็บไซต์ว่าจะมีส่วนใดเป็นส่วนประกอบบ้าง ซึ่งแต่ละThemeจะถูกสร้างขึ้นมาให้มีจานวนพื้นที่แตกต่างกันออกไป ซึ่งโดยทั่วไปอาจจะมีตั้งแต่ 1 ถึง 8 พื้นที่ Header 1 – พบน้อยใน Themeบางแบบ หรือ premium Theme Header 2 – พบน้อย ในThemeบางแบบ หรือ premium Theme Header 3 – พบน้อย ในThemeบางแบบ หรือ premium Theme Sidebar 1 – ต้องมีเป็นอย่างน้อย * Sidebar 2 – พบบ่อยใน Theme แบบ 3 คอลัมน์ (3 Column Themes) Footer 1 – พบน้อย ในThemeบางแบบ หรือ premium Themeเท่านั้น Footer 2 – พบน้อย ในThemeบางแบบ หรือ premium Themeเท่านั้น Footer 3 – พบน้อยใน Themeบางแบบ หรือ premium Themeเท่านั้น แต่Themeโดยส่วนมากจะมีเพียง 1 หรือ 2 widgets เท่านั้นคือ Sidebar 1 และSidebar 2 บางThemeอาจจะเรียกต่างกันไปตามลักษณะของThemeซึ่งบางครั้งอาจเรียกว่าLeft Sidebar หรือ Right Sidebar
  56. 56. 53Widgets ของ Arras Themeเราสามารถลาก Widgets ที่อยู่ทางด้านซ้ายมือไปไว้ที่ช่อง Side Bar ด้านขวาได้ ง่ายๆ เพียงแค่คลิกลาก Widgets ที่ต้องการแล้วนาไปปล่อยตรงพื้นที่ในกรอบด้านขวามือเท่านั้นเอง เช่น
  57. 57. 54ผลลัพธ์ที่ได้
  58. 58. 556.2 การสร้าง Widgets เพื่อใส่รูปหรือข้อความที่ได้สร้างขึ้นเองจะช่วยให้เราสามารถเพิ่มข้อความหรือรูปภาพลิ้งค์ไปยังที่ต่างๆได้ ทาได้ดังภาพแล้วเพิ่มข้อความลงไปในกรอบวิตเจ็ด
  59. 59. 56แล้วกลับไปดูการแสดงผลหน้าแรกเว็บไซต์จะพบว่าวิตเจ็ด ได้เพิ่มขึ้นมาอีกหนึ่งวิตเจ็ด 6.3 ใส่รูปภาพในวิตเจ็ดแบบข้อความ ต่อมาเราจะลองเพิ่มวิตเจ็ด ที่เป็นรูปภาพบ้างนะครับ เช่น นโยบาย 9 จุดเน้น1. ก่อนอื่นท่านต้องเตรียมรูปภาพขนาดความกว้าง 280 px ก่อนครับ ส่วนความสูงแล้วแต่ชอบครับรูปด้านบนนี้ ความกว้าง 280 ความสูง 60 px (พิกเซล) ครับ
  60. 60. 572. อัพโหลดรูปภาพที่เตรียมไว้ใส่ลงไปในเว็บไซต์ก่อนครับ ตามขั้นตอนดังนี้2.1 ไปที่เมนู สื่อ  เพิ่มไฟล์ใหม่2.2 ทาการอัพโหลดสื่อจากแหล่งที่ท่านเก็บไฟล์ที่ได้จัดเตรียมไว้เข้าไปในเว็บไซต์
  61. 61. 58เมื่อเสร็จแล้วคลิก บันทึกการเปลี่ยนแปลงทั้งหมด สิ่งที่ท่านจะต้องจาเพื่อนาโค้ดไปแปะไว้ในวิตเจ็ด คือ URL ของรูปภาพที่ จะนาไปใช้ ทาได้โดยการ ไปที่คลังสื่อ แล้ว คลิกแก้ไขทีรูปนั้นๆดังรูป
  62. 62. 59เมื่อคลิกแก้ไขจะได้ดังภาพก็จะได้ URL ดังนี้ http://www.mahathikun.ac.th/wp-content/uploads/2012/08/h9.pngซึ่งเป็นพาทที่อยู่ของรูปหลังจากนั้นให้ไปที่ รูปแบบบล็อก  Widgetsแล้วนาวิตเจ็ด ข้อความ ไปวางไว้ในส่วน Side Bar ด้านขวามือ แล้วใส่โค้ดดังนี้ <a href=" ใส่ URL ของลิ้งค์ที่ต้องการให้ไปเมื่อคลิกที่รูป "> <img src=" ใส่ URL ของรูปภาพที่เราได้ทาการคัดลอกไว้ "></a>จะได้ดังภาพด้านล่าง
  63. 63. 60เปิดไปหน้าแรกเว็บไซต์เพื่อดูผลลัพธ์
  64. 64. 61 บทที่ 7 : ใส่ลูกเล่นให้กับเว็บไซต์ด้วย Plug-in การที่ Wordpress เป็น OpenSouce จึงทาให้มีนักพัฒนาเว็บไซต์มากมายที่พัฒนาส่วนเสริมหรือลูกเล่นหรือ Plugin ซึ่งจะช่วยให้เว็บไซต์ของท่านมีอะไรที่น่าสนใจ น่าติดตาม มีสิ่งอานวยความสะดวกโดยที่เราไม่ต้องเขียนโค้ดเอง รวมถึงปลั๊กอินเพื่อความปลอดภัยที่ช่วยให้เว็บไซต์ของคุณไม่โดนไวรัสหรือสแปมได้ง่ายๆ ปลั๊กอินที่แนะนาเบื้องต้น 1. Akismet เป็นปลั๊กอินที่ช่วยกรองข้อมูลจากผู้ที่โพสต์บนเว็บไซต์ของเราว่าเป็นสแปมหรือไม่ คือคอยตรวจสอบการสแปมเว็ไซต์นั่นเอง 2. SI CAPTCHA Anti-Spam เป็นปลั๊กอินที่บังคับให้ผู้ใช้หรือแม้กระทั่งผู้ดูแลระบบทาการกรอก รหัสตัวอักษร ก่อนโพสต์ หรือเข้าระบบ เพื่อป้องกันสแปม สร้างความปลอดภัยได้อีกระดับ 3. Lightbox Plus เป็นปลั๊กอินที่ช่วยให้แสดงผลรูปภาพในรูปแบบที่สวยงามเรามาทดสอบและติดตั้งปลั๊กอินกันเลยครับ1. การติดตั้งปลั๊กอิน Akismet (ข้อมูลจาก http://www.ischool.in.th) Akismet Plugin เป็นปลั๊กอินที่ติดมาพร้อมกับ wordpress เมื่อตอนเราทาการติดตั้งระบบ โดย Akismet Plugin นี้มีไว้สาหรับตรวจสอบว่ามีสแปมมาที่บล็อกของเราหรือเปล่า การใช้งาน Akismet Plugin นั้นจะใช้ร่วมกับ API key ของ Wordpress โดยเราต้องไปลงทะเบียนเพื่อขอ API key ก่อน โดยทาการขอ API key ได้ที่ WordPress.com ซึ่งเราต้องลงทะเบียนเป็นสมาชิกก่อน เมื่อเราลงทะเบียนเสร็จเราก็จะได้ API key และนารหัสที่ได้มาใช้กับ Akismet ได้ครับขั้นตอนการลงทะเบียนเพื่อขอ API key1. ลงทะเบียนเพื่อขอ API key ที่นี่ http://en.wordpress.com/signup2. กรอกรายละเอียดต่างๆ
  65. 65. 623. ระบบจะทาการส่งตัว activate ให้เราทาการยืนยันมาที่ email ที่เราได้ระบุไว้
  66. 66. 634. ระบบจะส่งข้อมูลการเข้าสู่ระบบมาให้ พร้อมทั้ง API key ด้วยทาการติดตั้ง Akismet Plugin1. เข้าสู่ระบบ หน้าหลัก ของ wordpress2. ไปที่ ปลั๊กอิน ปลั๊กอินที่ติดตั้งแล้ว ดังรูป
  67. 67. 643. ทาการ คลิกใช้งาน4. ระบบจะแจ้งลิงค์ที่ให้เราใส่ API key ” enter your WordPress.com API key ”5. ทาการใส่ API key และ กดปุ่ม อัพเดตทางเลือก หากสาเร็จระบบจะแจ้งข้อความกลับมาครับเท่านี้การติดตั้ง Akismet Plugin เพื่อป้องกัน Spam ก็เป็นอันเสร็จสมบูรณ์แล้วครับ
  68. 68. 652. การติดตั้ง SI CAPTCHA Anti-Spam wikipedia.org ได้ให้ความหมายของคาว่า CAPTCHA ดังนี้ CAPTCHA แค๊ปท์ชา คือการทดสอบเพื่อเข้าสู่ระบบคอมพิวเตอร์แบบโต้ตอบชนิดหนึ่ง เพื่อทดสอบว่าผู้ใช้งานเป็นมนุษย์จริงหรือไม่ คาว่าคุณเป็นมนุษย์จริงหรือไม่นั้น ณ ที่นี้อาจจะหมายถึงสิ่งที่ไม่ใช่มนุษย์อาจจะเป็น Bot หรือโปรแกรมอัตโนมัติ ที่พยายามจะเข้าสู่ระบบของเราซึ่งอาจจะทาให้ระบบขาดความปลอดภัยได้ 1. ก่อนอื่นให้เข้าไปที่หน้าติดตั้งปลั๊กอินใน หน้าหลักผู้ดูแลระบบก่อน แล้วทาการค้นหาปลั๊กอินชื่อ SI CAPTCHA Anti Spam เมื่อเจอแล้วก็ทาการดาวน์โหลด ดังรูป2. และจัดการ Activate ให้เรียบร้อย โดยคลิกคาว่า ใช้งานปลั๊กอิน
  69. 69. 663. เมื่อคลิกใช้งานปลั๊กอินแล้วจะกลับเข้าสู่หน้าปลั๊กอินดังภาพ4. ให้ตั้งค่าปลั๊กอินโดย คลิกที่คาว่า Setting แล้วตั้งค่าตามภาพได้เลยครับ
  70. 70. 675. ทดสอบดูในส่วนแสดงความเห็น ของ บทความที่สร้างก็จะพบดังภาพ* ต้องออกจากระบบได้ Login ไว้ก่อนนะครับ ถึงจะมองเห็น
  71. 71. 683. การติดตั้ง Lightbox Plusเป็นการนาเสนอรูปแบบการแสดงผลของรูปภาพบนเว็บไซต์ให้มีความสวยงามมากยิ่งขึ้นดังรูป วิธีการติดตั้ง1. ทาการค้นหาและติดตั้งปลั๊กอิน2. เลือกใช้งานปลั๊กอิน
  72. 72. 693. ตั้งค่าการใช้งานปลั๊กอิน โดยทาดังรูป4. ตั้งค่าการใช้ ลองทดสอบดูได้เลยครับเมื่อติดตั้งเสร็จแล้วสามารถไปที่หน้าแรกเว็บไซต์แล้วเปิดบทความ คลิกทีรูป เพื่อดูการแสดงผลได้เลยครับ..
  73. 73. 70 เล็กๆน้อยก่อนขึ้นโฮสต์จริงเมื่อเราได้ทาการใช้งาน Wordpress มาพอสมควร ตั้งแต่ที่ผมแนะนามาและได้ข้ามขั้นตอนเบื้องต้นไปก่อนนั้น ในบทนนี้เราจะได้กล่าวถึง ซึ่งเป็นรายละเอียดปลีกย่อย ที่เราสามารถมาบริหารจัดการทีหลังได้ การลบ แก้ ไข บทความ การลบ หรือแก้ไข บทความที่เราได้สร้างนั้น หากได้ทดสอบโพสต์บทความและแก้ไขมาพอสมควร ก็คงจะจากันได้ แต่ถ้ายังจาไม่ได้ผมก็จะนาเสนออีกครั้งเพื่อความเข้าใจที่มากกว่าเดิมครับ1. ไปที่เมนู เรื่อง  เรื่องทั้งหมด2. เอาเมาส์ไปวางบนชื่อเรื่องทีต้องการลบหรือแก้ไขหมายเลข 1 คือ แก้ไข เมื่อคลิกจะไปที่หน้าแก้ไขหมายเลข 2 คือ การลบบทความ โดยคลิกที่คาว่า ถังขยะ
  74. 74. 71 การใส่วีดีโอในบทความ การใส่วีดีโอเช่น Youtube จะช่วยเพิ่มบทความของเราให้มีความน่าสนใจมากยิ่งขึ้น ซึ่งมีวิธีการอยู่ 2 วิธี ครับ 1. การเพิ่มโดยการใช้ปลั๊กอิน การเพิ่มวิธีนี้จะมีปลั๊กอินให้ท่านพร้อมใช้งานอยู่แล้วโดยการไปที่เว็บไซต์ wordpress.org ค้นหาปลั๊กอินเกี่ยวกับ Youtube มาติดตั้งลงในเว็บไซต์ ซึ่งวิธีนี้จะไม่ขอกล่าวถึงแล้วกันนะครับ 2. การเพิ่มโดยการเพิ่มโค้ดลงในหน้าเพิ่มบทความ ซึ่งวิธีนี้เป็นการคัดลอกโค้ดจากเว็บไซต์ที่ให้บริการวีดีโอมาแปะลงในส่วนของรายละเอียดบทความ ดังนี้ - ไปที่เรื่อง  เขียนเรื่องใหม่ แล้วตั้งหัวข้อเรื่อง - เมื่อตั้งหัวข้อเรื่องแล้ว ท่านจะใส่รายละเอียดก่อน หรือ ใส่วีดีโอก่อน ก็ได้ครับ โดยทาตามภาพดังนี้ ไปที่เว็บไซต์ที่ให้บริการวีดีโอ ในที่นี้ขอเลือก Youtube.com นะครับ แล้วเลือกวีดีโอที่ต้องการ ดังภาพ โดยจะอธิบายตามหมายเลขได้ดังนี้
  75. 75. 72 หมายเลข 1 เมื่อเจอวีดีโอที่ต้องการแล้ว ด้านล่างของวีดีโอจะมีปุ่ม แบ่งปัน ให้คลิกที่ปุ่มแบ่งปัน หมายเลข 2 เมื่อคลิกที่ปุ่มแบ่งปันจะปรากฏปุ่ม ฝัง ขึ้นมาให้คลิก หมายเลข 3 เลือกขนาดวีดีโอที่ต้องการโดยเลือกขนาดที่ Youtube กาหนดไว้ หรือตั้งค่าเองก็ได้ หมายเลข 4 คัดลอกโค้ดทั้งหมดที่อยู่ในช่องหมาย 4 ไว้เมื่อคัดลอกโค้ดตามหมายเลข 4 ไว้แล้วให้สลับไปที่หน้า เพิ่มเรื่อง ของ Wordpressแล้วคลิกแท็ป HTML ตามสี่เหลี่ยมสีแดง แล้วใส่โค้ดที่คัดลอกมาลงไป
  76. 76. 73เสร็จแล้วสลับไปที่หน้าจอ Visual เพื่อพิมพ์ข้อความอีกครั้ง หลังจากนั้น ก็ทาการ เผยแพร่บทความ ก็จะได้บทความที่มีวีดีโอประกอบแล้วครับ ตรวจสอบว่ามีสื่อประเภทใดบ้างอยู่บนเว็บไซต์เรา สื่อก็คือ รูปภาพ วีดีโอ คือสิ่งที่เราเพิ่มลงไปเว็บไซต์ ซึ่งบางครั้งรูปภาพหรือวีดีโอที่เพิ่มลงไปนั้น ไม่ได้ใช้งานแล้ว หากเราต้องลบออกจะต้องทาอย่างไร? ซึ่งไม่ยากเลยครับ ซึ่งไม่ยากเลยครับเพียงแต่ไปที่เมนู สื่อ  คลังสื่อ ดังรูปที่นี้ท่านก็จะสามารถ ลบ แก้ไข แล้วครับ
  77. 77. 74 บทที่ 7 : Upload ขึ้นโฮส จริง เมื่อเราได้ปรับแต่งเว็บไซต์ด้วย Wordpress จนเป็นที่พอใจแล้ว เราก็มีหน้าที่อีกอย่างหนึ่งที่สาคัญ นั่นก็คือ การนาเว็บไซต์ออกเผยแพร่สู่สาธารณชน ซึ่งสามารถเปิดดูที่ไหนก็ได้บนโลกโลกใบนี้ขอเพียงมี คอมพิวเตอร์ อินเตอร์เน็ต รู้จัก URL เว็บไซต์ หรือถ้าไม่รู้จักเว็บไซต์ขอเพียงค้นหาด้วย Google เป็นก็น่าจะไม่มีปัญหาอะไร แต่ปัญหาของเราตอนนี้ก็คือการนาเว็บไซต์ขึ้นโฮสต์จริงนั่นเอง สาหรับท่านที่มีความคุ้นเคยอยู่กับการทาเว็บไซต์อยู่แล้ว คงไม่เป็นการยาก ง่ายเหมือนปลอกกล้วยเข้าปากเสียด้วยซ้า แต่หากเป็นคุณครูที่จับพลัดจับผลู ต้องมาทาเว็บไซต์ทั้งที่ไม่มีพื้นฐานเดิมล่ะ อันนี้คงไม่ใช่งานง่ายใช่มั้ยครับ แต่หากผมจะบอกว่า ยุคสมัยโซเซียลเน็ตเวิร์กครองเมืองอยู่นี้ หากใคร นาเสนอผลงานตัวเอง ผ่านเว็บไซต์ละ (ซึ่งมีอยู่ไม่น้อยเลยที่ทาอยู่ตอนนี) ใครจะได้เห็นบ้าง อันนี้ฝากเป็นข้อคิดเผื่อท่านจะมีกาลังใจเพิ่มขึ้นครับ เพราะ ้โดยพื้นฐาน Wordpress ถูกสร้างขึ้นมาเพื่อเป็นเว็บบล็อกส่วนตัว ...! กระบวนการที่นาเว็บไซต์ที่สร้างจาก Wordpress ขึ้นสู่โฮสต์หรือ Server จริงนั้น มีขั้นตอนหลักๆอยู่เพียง 2 ขั้นตอน 1. Export / Import ฐานข้อมูล MySQL เตรียมตัวขึ้นเว็บ 2. การ Upload เว็บ WordPress จาก localhost ขึ้นโฮส จริงขั้นตอนหลักที่ 1Export / Import ฐานข้อมูล MySQL เตรียมตัวขึ้นเว็บ 1. เข้าจัดการฐานข้อมูล MySql ผ่าน PhpMyadmin โดยการพิมพ์ URL ดังนี้ http://localhost/phpmyadminจะพบกล่องข้อความขึ้นมาดังรูป แล้วให้เราเข้าสู่ระบบ
  78. 78. 75 2. เลือกฐานข้อมูลที่เราสร้างไว้ คือ wordpress แล้วคลิกที่แท็ป ส่งออก ดังรูป 3.จะได้ดังรูป1 เลือกส่งออก2 ติ๊กถูก หน้าคาว่า ส่งมาเป็นไฟล์3 คลิก ลงมือ
  79. 79. 764. จะได้ไฟล์ ชื่อฐานข้อมูล. sql เช่นฐานข้อมูลของผมคือ wordpress ก็จะได้ไฟล์ฐานข้อมูลเป็น wordpress.sql เป็นต้นเก็บไว้ก่อนครับ5. หลังจากนั้นให้เข้าสู่ URL ที่โฮสต์จริงๆของท่าน เช่นwww.sk1schools.org/phpmyadmin(กรณี ตัวอย่างเท่านั้นนะครับ)จะขึ้นกรอบข้อความเช่นเดียวกันกับ phpmyadminใน localhost ชื่อผู้ใช้ของท่าน ตามด้วยรหัสผ่าน6. เมื่อเข้าสู่หน้าจัดการระบบ PhpMyadmin เช่นผมได้ชื่อฐานข้อมูลจากผู้ดูแลระบบโฮสต์เป็นmahathikun (จาส่วนนี้ไว้ด้วยนะครับ เพราะว่าเราจะได้ใช้มันอีกครั้ง) จะได้ดังภาพ
  80. 80. 777. คลิกเลือกที่ Import เพื่อเลือกฐานข้อมูลที่ได้สารองไว้ขึ้นมา8. คลิกลงมือ
  81. 81. 789. การติดตั้งฐานข้อมูลจากไฟล์ที่สารองไว้เสร็จเรียบร้อยแล้ว10. ตั้งค่าไซต์ URL ของ Wordpress จากเดิม http://localhost/wordpress เป็นชื่อเว็บไซต์ของท่านเช่น http://www.sk1schools.org/mahathikun ตามขั้นตอนดังรูป10.1 เลือกฐานข้อมูลของท่าน ของผมคือ mahatikun แล้วเลือกตาราง wp_options
  82. 82. 7910. 2 เลือก เปิดดู จะได้ดังภาพ10.3 หลังจากนั้นเลือกฟิลด์ในตาราง wp_options ที่ชื่อ siteurl โดยคลิกที่ไอคอนดินสอ จะได้ดังภาพเป็นอันตั้งค่าฐานข้อมูล เรียบร้อย แล้วครับ
  83. 83. 80ขั้นตอนหลักที่ 2 การอัพโหลดไฟล์เว็บขึ้นโฮสต์จริง ในที่นี้จะสมมติว่าท่านได้ URL ชื่อเว็บโรงเรียนของท่านหลังเว็บไซต์www.sk1schools.org นะครับ เช่น www.sk1schools.org/mahathikun เป็นต้น 1. ทาการตั้งค่าไฟล์เชื่อมต่อ Server ดังนี้ 1.1 เปิดไดร์ C:/AppServ/www/wordpress แล้วเปิดไฟล์ wp-Config.phpด้วยโปรแกรแก้ไขโค้ดที่ท่านถนัด 1.2 ตั้งค่าการเชื่อมต่อ Server
  84. 84. 81 define(DB_NAME, ชื่อฐานข้อมูลของท่าน); define(DB_USER, ชื่อผู้ใช้งานฐานข้อมูล); define(DB_PASSWORD, รหัสผ่านฐานข้อมูล); define(DB_HOST, localhost);  ตรงนี้ไม่ต้องเปลี่ยนยกตัวอย่างเสร็จแล้วทาการบันทึก เตรียมนาไฟล์ขึ้นโฮสต์หรือ Server ได้เลยครับ
  85. 85. 822. อัพโหลดไฟล์ขึ้น server หรือ โฮสต์2.1 เปิดโปรแกรมอัพโหลด FileZilla แล้วตั้งค่าการเชื่อต่อ FTP ตามตัวอย่าง (ชื่อผู้ใช้และรหัสผ่านของท่านเอง)
  86. 86. 83 2.2 ทาการเลือกโฟลเดอร์ C:/Appserv/www/wordpress ตามภาพแล้วเลือกไฟล์ที่อยู่ในโฟลเดอร์ wordpress ทั้งหมด โยน ขึ้นไปบน Server(โฮสต์)
  87. 87. 842.3 เปิดเว็บไซต์ www.sk1shools.org/mahathikun ก็จะพบเว็บไซต์ของท่านตามที่ได้ปรับแต่ง และตั้งค่าไว้ครับ หมายเหตุ : 1. ชื่อเว็บไซต์ที่เป็น Server หรือโฮสต์เป็นแค่การยกตัวอย่างประกอบซึ่งอาจจะไม่สามารถใช้งานได้จริง ต้องรอการยืนยันจากเจ้าหน้าที่เขตอีกครั้ง 2. หากท่านอัพโหลดรูปไม่ขึ้น เมื่อเว็บไซต์ขึ้นโฮสต์จริง ต้องไป chmod 777 โฟลเดอร์upload ที่อยู่ใน wp-content ก่อนครับ 3. รายละเอียดอื่นๆที่เป็นเรื่องที่เล็กๆน้อยจะขอกล่าวถึงในการอบรมอีกครั้งหนึ่งซึ่งจะไม่ลงรายละเอียดมากในคู่มือนี้ เนื่องด้วยข้อจากัดด้านการจัดทาคู่มือ ซึ่งใช้เวลาค่อนข้างกระชั้นชิด และอาจจะตกหล่นไปบ้าง ต้องอภัยจริงๆครับ
  88. 88. 85 จากใจผู้เขียน ด้วยการเขียนคู่มือฉบับนี้ เป็นครั้งแรกในการเขียนคู่มือที่ใช้งานอย่างเป็นทางการ กับคณะครู จึงมีความกระด้างกระเดื่อง ใช้ภาษาตกหล่นไปบ้าง ต้องขออภัยจริงๆครับ อีกทั้งผู้เขียนเองก็ไม่อยากจะใช้ภาษาที่เป็นทางการ ศัพท์แสง ทางด้านคอมพิวเตอร์มากมายนักเพราะเข้าใจดีว่า คุณครูบางท่านไม่ได้จบเอกคอมพิวเตอร์โดยตรง และมาด้วยความจาใจบ้าง และตัวผมเองก็ไม่ได้เก่งอะไร เพียงแต่ได้มีประสบการณ์ในการปรับแต่งเว็บไซต์ด้วยWordpress มาก่อนก็แค่นั้นเอง อาศัยอินเตอร์เน็ตและเว็บไซต์ยอดนิยมอย่าง google ช่วยให้สามารถทาเว็บไซต์โรงเรียนให้ประสบความสาเร็จ มีคุณครูหลายท่าน ได้นา Wordpress ไปใช้ในการจัดการเรียนการสอนได้อย่างดีมากไม่เฉพาะการจัดทาเว็บเว็บไซต์สถานศึกษา บริษัทเท่านั้น จริงๆแล้ว wordpress ถูกออกแบบมาให้เป็นเว็บไซต์ส่วนตัว หรือที่เรียกกันว่า เว็บบล็อก นั่นเอง ท่านลองดูเถิดครับว่าท่านจะสามารถนาไปใช้ประโยชน์ได้อย่าง ลองค้นหาใน google ดูก็ได้ว่าคุณครูท่านอื่นได้ทาอย่างไรไว้บ้าง เราก็จะได้มีแนวทางของเรา..(นอกจากเว็บไซต์โรงเรียนแล้วยังได้เว็บบล็อกส่วนตัวสวยๆอีกครับ) มีบางคนบอกว่า ไม่อยากจะเสียเงินตรงทาเว็บไซต์ ค่าโฮสต์ ค่าโดเมน ไปเปล่าประโยชน์เพราะว่าพึ่งจะเริ่มทากลัวไปไม่เป็น ขอแนะนา wordpress.com เป็นเว็บให้บริการจัดทาบล็อกส่วนตัวฟรี สามารถใช้งานได้ และซึ่งผมคิดว่าได้มีคุณครูหลายท่านได้ลองทามาแล้ว หรือเว็บอย่าง goggle site ก็เห็นมีครูในสระแก้วเราทาอยู่เหมือนกัน การทาเว็บไซต์สมัยนี้มีเครื่องมือให้เรามากมาย ไม่ได้ยากจนเกินไป หรือง่ายจนไม่ต้องทาอะไร ท่านที่จะนาไปต่อยอดต่อ ก็ขอให้ท่านโชคดีครับ ส่วนท่านที่ไม่รู้จะไปต่อยอดยังเพราะไม่มีเวลาและไม่ค่อยชอบ ก็ขอให้คิดซะว่าได้มารู้จัก CMS อีกตัวนึงที่สามารถนาไปสร้างเว็บไซต์ได้ชื่อ Wordpress เหมือนกันกับ เรารู้จักผู้นาประเทศๆหนึ่ง ไม่รู้ว่าท่านเหล่านั้น ได้ทาประโยชน์อะไรไว้ให้กับประเทศบ้าง เหนื่อยแค่ไหน เพราะเราไม่ได้ใกล้ชิดสนิทกัน แค่ติดตามข่าวสารตามเป็นระยะๆ แบบนั้น วิทยากรก็พึงพอใจแล้วครับ สุดท้ายนี้อยากจะบอกว่า ในการอบรมครั้งนี้หากมีสิ่งหนึ่งสิ่งใด เป็นการรบกวนบังคับจิตใจ หรือใช้คาพูดที่ไม่เหมาะสม น่าเบื่อหน่าย ก็ต้องขอกราบขออภัยไว้ ณ ที่นี้ครับ สวัสดี ../ ชูชาติ โชติเสน

×