Wordpress & Server2Go บุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี สำนักงานพัฒนาวิทยาศาสตร์...
บุญเลิศ อรุณพิบูลย์ <ul><li>2536 – 2551 </li></ul><ul><ul><li>NECTEC </li></ul></ul><ul><ul><ul><li>เจ้าหน้าที่ระบบคอมพิวเ...
Wordpress <ul><li>ซอฟต์แวร์ / ฟรีบริการในกลุ่มโอเพนซอร์ส  (Open Source Software)  ที่ทำหน้าที่บริการจัดการเนื้อหาสำหรับเว็...
เหตุผลที่เลือกใช้  Wordpress <ul><li>ฟรี </li></ul><ul><li>ได้  Source Code  และปรับแต่งแก้ไขได้ </li></ul><ul><li>มีผู้ใช...
http://trends.google.com
http://cmsmatrix.org
Web 2.0 <ul><li>ทุกคน  ( ตามเงื่อนไข / ข้อกำหนด )  มีสิทธิ์จัดการเนื้อหาในเว็บ </li></ul><ul><ul><li>ไม่ใช่ผู้ชมเว็บแต่เพี...
Mash-up
ความสำคัญของ  Web 2.0 การมีส่วนร่วม  (Participation)  คือ  หัวใจ  สำคัญ
การให้บริการของ  Wordpress <ul><li>http://www.wordpress.com </li></ul><ul><ul><li>บริการฟรีออนไลน์ </li></ul></ul><ul><li>...
http://www.wordpress.com
http://www.wordpress.org
http :// mu . wordpress . org /
ใช้จริง ทำอย่างไร <ul><li>องค์กร </li></ul><ul><li>เตรียม   Server  </li></ul><ul><ul><li>ติดตั้ง  Linux </li></ul></ul><u...
Server2Go <ul><li>ซอฟต์แวร์จำลองเครื่องแม่ข่ายเว็บ  (Web Server)  แบบพกพา </li></ul><ul><ul><li>Apache </li></ul></ul><ul>...
http://www.server2go-web.de
การเรียกใช้งาน  Server2Go ดับเบิลคลิกไอคอน Serve2Go.exe รอสักครู่ โปรแกรมจะเปิด  IE   Web Browser
สร้างตารางข้อมูล  MySQL # 1 <ul><li>พิมพ์  http://127.0.0.1:4001/phpmyadmin </li></ul>
สร้างตารางข้อมูล  MySQL # 2 <ul><li>คลิกในรายการ “สร้างฐานข้อมูลใหม่” </li></ul><ul><li>ป้อนชื่อ เช่น  wordpress </li></ul...
ติดตั้ง  Wordpress # 1 <ul><li>พิมพ์  URL http://127.0.0.1:4001/ </li></ul>
ติดตั้ง  Wordpress # 2 <ul><li>คลิกปุ่ม  Create a Configuration File </li></ul>1
ติดตั้ง  Wordpress # 3 <ul><li>เข้าสู่จอภาพเริ่มต้นการติดตั้ง คลิกปุ่ม  Let’s go! </li></ul>1
ติดตั้ง  Wordpress # 4 <ul><li>ป้อนข้อมูลการติดตั้งดังนี้ </li></ul><ul><ul><li>Database Name :  wordpress </li></ul></ul>...
ติดตั้ง  Wordpress # 5 <ul><li>หากโปรแกรมตรวจสอบแล้วข้อมูลตามขั้นตอนที่  4  ถูกต้อง จะปรากฎข้อมูลดังภาพ ให้คลิกปุ่ม   Run ...
ติดตั้ง  Wordpress # 6 <ul><li>ป้อนข้อมูลเกี่ยวกับเว็บไซต์ </li></ul><ul><li>Site Title:  ชื่อเว็บไซต์ </li></ul><ul><li>U...
ข้อแนะนำการสร้างรหัสผ่าน <ul><li>กำหนดเกณฑ์การสร้างรหัสผ่านให้ตนเอง </li></ul><ul><ul><li>ให้ความสำคัญกับการสร้างรหัสผ่าน ...
ติดตั้ง  Wordpress # 7 <ul><li>การติดตั้งสมบูรณ์ </li></ul>
การเรียกชมเว็บไซต์ <ul><li>เปิดใช้งาน  Server2Go </li></ul>
ชื่อเว็บไซต์ สโลแกนเว็บ เมนูจาก  Pages เนื้อเรื่อง  (Post) กลุ่มวิตเจ็ต
การเข้าสู่ระบบเว็บไซต์  –  Log in <ul><li>เข้าสู่เว็บไซต์ เลื่อนหาคำสั่ง  Log in  จากกลุ่มรายการ  Meta </li></ul><ul><li>ป...
จอภาพ ในส่วน ควบคุม ระบบ
ปรับแต่งระบบเว็บไซต์  - Config <ul><li>คลิกคำสั่ง  Settings  จากรายการเมนูด้านซ้าย </li></ul>1
ปรับแต่งระบบเว็บไซต์  - Config <ul><li>Site Title   </li></ul><ul><ul><li>ชื่อเว็บไซต์ควรเป็นภาษาอังกฤษ ตามด้วยภาษาไทยได้ ...
หน้าควบคุมหลัก  –  Dashboard <ul><li>เมื่อปรับแต่ง / ทำงานใด สามารถกลับสู่หน้าควบคุมหลัก ได้โดยคลิกคำสั่ง  Dashboard  </li...
ปรับแก้ไขข้อมูลสมาชิก <ul><li>คลิกที่ชื่อสมาชิก  (user name)  ที่มุมบนขวาของจอภาพ </li></ul>1
ปรับแก้ไขข้อมูลสมาชิก
ชมเว็บไซต์ที่ปรับแต่ง <ul><li>เมื่อปรับแต่ง / ทำงานใด สามารถชมหน้าเว็บได้โดยคลิกที่ชื่อเว็บไซต์ </li></ul>1
จากหน้าเว็บสู่หน้าควบคุม <ul><li>จากหน้าเว็บกลับสู่หน้าควบคุมได้โดย </li></ul><ul><ul><li>Log in  ใหม่ หรือคลิกคำสั่ง  Sit...
เปลี่ยนกราฟิกหัวเรื่องเว็บ  # 1
เปลี่ยนกราฟิกหัวเรื่องเว็บ  # 2 <ul><li>เข้าสู่ส่วนทำงาน  Dashboard </li></ul><ul><li>คลิกคำสั่ง  Appearance, Header </li>...
เปลี่ยนกราฟิกหัวเรื่องเว็บ  # 3 <ul><li>เลือกรูปแบบกราฟิกที่ต้องการ แล้ว  Save Change </li></ul>
เปลี่ยนกราฟิกหัวเรื่องเว็บ  # 4 <ul><li>สามารถนำภาพที่สร้าง / จัดเตรียมเป็นภาพหัวเรื่องเว็บได้โดยคลิกปุ่ม  Browse  แล้วเลื...
ใส่รายละเอียดเว็บ  –  About # 1 <ul><li>Wordpress  เตรียมเมนูควบคุมหลักให้  2  เมนู ได้แก่ </li></ul><ul><ul><li>Home  สำห...
ใส่รายละเอียดเว็บ  –  About # 2 <ul><li>คลิกที่ชื่อหน้า  About  เพื่อเข้าสู่การแก้ไข </li></ul><ul><li>เมื่อแก้ไขแล้วให้คล...
เครื่องมือแก้ไขเนื้อหา
คัดลอกเนื้อหาจากแหล่งอื่นๆ <ul><li>ไม่ควรคัดลอก  (Copy)  เนื้อหาจาก  Word  หรือแหล่งอื่นๆ มาวางใน  Editor  ของ  Wordpress ...
นำเข้ารูปภาพ  # 1 <ul><li>รูปภาพที่นำมาประกอบเนื้อหาของ  Wordpress  จะต้องเตรียมดังนี้ </li></ul><ul><ul><li>กำหนดชื่อแฟ้ม...
Progressive & Interlaced รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ  Interlaced การแสดงผลภาพ แบบ  Progressive
PNG & GIF Transparent
ปัญหาลิขสิทธิ์ของเมืองไทย
(cc)
การสืบค้นภาพที่เป็น  (cc) (cc)
วัน / เวลากล้องถ่ายภาพดิจิทัล / อุปกรณ์ดิจิทัล <ul><li>พรบ . การกระทำความผิดทางคอมพิวเตอร์ </li></ul>
Image Metadata : EXIF : IPTC
นำเข้ารูปภาพ  # 2 <ul><li>จากหน้าจอสร้าง / แก้ไขเนื้อหา คลิกเมาส์ ณ ตำแหน่งที่ต้องการวางภาพ คลิกปุ่ม ใส่รูปภาพ </li></ul><...
นำเข้ารูปภาพ  # 3 <ul><li>ป้อนชื่อภาพในรายการ  Title  ใช้ภาษาไทยได้ </li></ul><ul><li>ป้อนคำบรรยายภาพใน รายการ  Caption/De...
การสร้างหน้าใหม่  (New Page) <ul><li>การสร้างหน้าใหม่ ทำได้  2  วิธี  </li></ul><ul><ul><li>คลิกคำสั่ง  Pages, Add New </l...
การสร้างหน้าใหม่  (New Page) 1)  ป้อนชื่อเรื่อง 2)  พิมพ์เนื้อหา 4)  เลือกรูปแบบ และลำดับ การนำเสนอ 5) Publish 3)  เลือกเง...
ปรับแต่งค่าควบคุมของ  Page <ul><li>อนุญาต / ไม่อนุญาตการแสดงความคิดเห็น </li></ul><ul><li>การแสดงผล  Page </li></ul>ปรับเป...
การเผยแพร่เนื้อหาแบบ  Blog <ul><li>การเผยแพร่เนื้อหาแบบ  Blog  จะมีลักษณะที่ควบคุมด้วยวันที่ / เวลาที่เผยแพร่  (Published ...
การลบ  Post <ul><li>เลือกคำสั่ง  Posts  จาก  Dashboard </li></ul><ul><li>นำเมาส์ชี้ที่รายการ  Post  ที่ต้องการลบ คลิกคำสั่...
การสร้าง  Post  ใหม่ <ul><li>คลิก  Posts, Add New  </li></ul><ul><li>หรือคลิกรายการ  New Post </li></ul>
1)  ป้อนชื่อเรื่อง 2)  พิมพ์เนื้อหา 3)  พิมพ์เนื้อหาสรุป 4)  สร้าง / เลือกหมวดหมู่ 5)  พิมพ์ป้ายกำกับ 6)  ระบุ  URL  เพื่อ...
การแสดงผล  Post <ul><li>Post  ที่เผยแพร่แล้วจะแสดงผลผ่านหน้าแรกของเว็บ </li></ul><ul><li>Post  ที่สร้างล่าสุด จะแสดงบนสุด ...
เขียนอะไร / อย่างไร <ul><li>เรื่องราวใกล้ตัว ที่ชอบและถนัด </li></ul><ul><li>เขียนแบบเบาๆ </li></ul><ul><li>เล่าเรื่อง </l...
Slideshare  ผ่าน  Wordpress <ul><li>Slideshare.net  เป็นแหล่งรวมสไลด์ / เอกสารแหล่งใหญ่บนโลกอินเทอร์เน็ต </li></ul><ul><ul...
Code  ของ  Slideshare 1 2
Slideshare  ผ่าน  Wordpress 1 2
Slideshare  ผ่าน  Wordpress
Youtube  ผ่าน  Slideshare 1 2 3 4
เพิ่มความสามารถด้วย โปรแกรมเสริม  : Plug-ins <ul><li>http :// wordpress . org / extend / </li></ul>
ค้นหา  Plug-ins
ค้นหา / ดาวน์โหลด  Plug-ins
ติดตั้ง  Plug-ins   # 1 <ul><li>เลือก  Dashboard, Plugins, Add New, Upload </li></ul><ul><li>Browse  เลือกไฟล์  (.zip)  แล...
ติดตั้ง  Plug-ins   # 2 <ul><li>การติดตั้งเสร็จสมบูรณ์ </li></ul><ul><li>คลิกรายการ  Activate Plugin  เพื่อให้  Plug-in  ท...
การยกเลิก  Plug-ins <ul><li>เลือก  Dashboard, Plugins </li></ul><ul><li>คลิก  Deactivate  รายการ  Plug-in  ที่ไม่ต้องการ <...
การจัดการตาราง  (Table) # 1 <ul><li>ติดตั้ง  Plug-in  ชื่อ  WP - Table </li></ul><ul><li>สร้างแม่แบบตารางจากคำสั่ง  Dashbo...
การจัดการตาราง  (Table) # 2 <ul><li>เมื่อสร้างแม่แบบตารางแล้ว สามารถเข้าไปแก้ไขรูปแบบการแสดงผลโดยคลิก  Edit </li></ul><ul>...
การจัดการตาราง  (Table) # 2
ใช้  Wordpress  ให้เต็มประสิทธิภาพต้องเตรียมพร้อมอย่างไร Server & Security การติดตั้ง ปรับแต่งโปรแกรม เนื้อหา System Admin...
แหล่งข้อมูล <ul><li>http://stks.or.th/wiki </li></ul><ul><li>http://slideshare.net/boonlert </li></ul>
Upcoming SlideShare
Loading in …5
×

wordpress-server2

769 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
769
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

wordpress-server2

  1. 1. Wordpress & Server2Go บุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ ( สวทช .) [email_address] http://stks.or.th http://slideshare.net/boonlert http://facebook.com/boonlert.aroonpiboon
  2. 2. บุญเลิศ อรุณพิบูลย์ <ul><li>2536 – 2551 </li></ul><ul><ul><li>NECTEC </li></ul></ul><ul><ul><ul><li>เจ้าหน้าที่ระบบคอมพิวเตอร์ </li></ul></ul></ul><ul><ul><ul><li>วิทยากร ศูนย์ฝึกอบรมคอมพิวเตอร์เนคเทค </li></ul></ul></ul><ul><ul><ul><li>รักษาการหัวหน้างานสนับสนุนทางเทคนิค </li></ul></ul></ul><ul><ul><ul><li>รักษาการหัวหน้างานวิชาการ </li></ul></ul></ul><ul><ul><ul><li>รักษาการหัวหน้างานพัฒนาสื่อสาระดิจิทัล </li></ul></ul></ul><ul><ul><ul><li>นักวิชาการ </li></ul></ul></ul><ul><li>2551 – ปัจจุบัน </li></ul><ul><ul><li>STKS / NSTDA </li></ul></ul><ul><ul><ul><li>นักวิชาการ </li></ul></ul></ul><ul><ul><ul><li>รักษาการหัวหน้างานพัฒนาและบริการสื่อสาระดิจิทัล </li></ul></ul></ul>
  3. 3. Wordpress <ul><li>ซอฟต์แวร์ / ฟรีบริการในกลุ่มโอเพนซอร์ส (Open Source Software) ที่ทำหน้าที่บริการจัดการเนื้อหาสำหรับเว็บ (CMS – Content Management System) </li></ul><ul><li>รูปแบบการนำเสนอเนื้อหาเว็บเป็นแบบ Blog </li></ul><ul><ul><li>weB + Log </li></ul></ul><ul><ul><li>การนำเสนอเนื้อหาที่เรียงตามวัน / ที่เวลาที่เผยแพร่ผลงาน </li></ul></ul><ul><ul><li>เนื้อหาล่าสุด แสดงเป็นลำดับแรก </li></ul></ul><ul><ul><li>จัดกลุ่มเนื้อหาตามวันที่ / เวลา , หมวดหมู่ (Category) และป้ายกำกับ (Tag) </li></ul></ul><ul><li>สามารถประยุกต์ใช้งานได้หลากหลาย </li></ul><ul><ul><li>เว็บส่วนตัว / หน่วยงาน / กิจกรรม </li></ul></ul><ul><ul><li>เว็บแลกเปลี่ยนเรียนรู้ผ่านชุมชนนักปฏิบัติ ( CoP) เพื่อการจัดการความรู้ </li></ul></ul><ul><ul><li>เว็บไซต์บริการวิชาการ ความรู้ – Online Learning </li></ul></ul><ul><ul><li>เว็บเพื่อการค้าขาย / พาณิชย์อิเล็กทรอนิกส์ (e-Commerce) </li></ul></ul>
  4. 4. เหตุผลที่เลือกใช้ Wordpress <ul><li>ฟรี </li></ul><ul><li>ได้ Source Code และปรับแต่งแก้ไขได้ </li></ul><ul><li>มีผู้ใช้งานและนักพัฒนาจำนวนมาก </li></ul><ul><ul><li>เกิด Community ผู้ใช้และผู้พัฒนา </li></ul></ul><ul><li>ประยุกต์ใช้งานได้หลากหลาย </li></ul><ul><li>มีโปรแกรมเสริมความสามารถหลากหลาย และฟรี </li></ul><ul><li>เป็นมิตรที่ดีกับ Google (Search Engine Friendly & SEO – Search Engine Optimizer) </li></ul><ul><li>สอดรับกับเทคโนโลยีเว็บ 2.0 (Web 2.0) </li></ul>
  5. 5. http://trends.google.com
  6. 6. http://cmsmatrix.org
  7. 7. Web 2.0 <ul><li>ทุกคน ( ตามเงื่อนไข / ข้อกำหนด ) มีสิทธิ์จัดการเนื้อหาในเว็บ </li></ul><ul><ul><li>ไม่ใช่ผู้ชมเว็บแต่เพียงอย่างเดียว </li></ul></ul><ul><ul><li>ควรให้ความสำคัญกับ พรบ . การกระทำความผิดทางคอมพิวเตอร์ , พรบ . ลิขสิทธิ์ และ พรบ . อื่นๆ ที่เกี่ยวข้องด้วย </li></ul></ul><ul><li>เนื้อหาเป็นมากกว่าข้อความ – รูปภาพ ภาพเคลื่อนไหว Flash Animation Online Slide i-Paper Sound/Audio Video … </li></ul><ul><li>ทำงานกันเป็นชุมชน (Communities) ผสานเทคโนโลยีร่วมกัน (Mash-up) </li></ul><ul><li>ไม่ถูกจำกัดด้วยอุปกรณ์ </li></ul><ul><li>ติดตาม ศึกษา วิเคราะห์พฤติกรรมผู้ชมเว็บได้มากขึ้น </li></ul>
  8. 8. Mash-up
  9. 9.
  10. 10. ความสำคัญของ Web 2.0 การมีส่วนร่วม (Participation) คือ หัวใจ สำคัญ
  11. 11. การให้บริการของ Wordpress <ul><li>http://www.wordpress.com </li></ul><ul><ul><li>บริการฟรีออนไลน์ </li></ul></ul><ul><li>http://www.wordpress.org </li></ul><ul><ul><li>บริการดาวน์โหลดซอฟต์แวร์ต้นฉบับ Wordpress เพื่อการติดตั้งบนเครื่องแม่ข่ายเว็บของตนเอง / หน่วยงาน </li></ul></ul><ul><li>http :// mu . wordpress . org / </li></ul><ul><ul><li>บริการดาวน์โหลดซอฟต์แวร์ต้นฉบับ Wordpress Mu เพื่อการติดตั้งบนเครื่องแม่ข่ายเว็บของตนเอง / หน่วยงาน </li></ul></ul><ul><ul><li>มีลักษณะการทำงานแบบกลุ่ม Blog </li></ul></ul>
  12. 12. http://www.wordpress.com
  13. 13. http://www.wordpress.org
  14. 14. http :// mu . wordpress . org /
  15. 15. ใช้จริง ทำอย่างไร <ul><li>องค์กร </li></ul><ul><li>เตรียม Server </li></ul><ul><ul><li>ติดตั้ง Linux </li></ul></ul><ul><ul><li>ฐานข้อมูล MySQL </li></ul></ul><ul><ul><li>โปรแกรมภาษา PHP </li></ul></ul><ul><li>สิทธิ์ในการเข้าถึง Server </li></ul><ul><li>ส่วนตัว </li></ul><ul><li>หน่วยงานเตรียมพื้นที่ให้ </li></ul><ul><ul><li>สิทธิ์ในการเข้าถึง Server </li></ul></ul><ul><li>เช่าพื้นที่ ISP </li></ul>
  16. 16.
  17. 17. Server2Go <ul><li>ซอฟต์แวร์จำลองเครื่องแม่ข่ายเว็บ (Web Server) แบบพกพา </li></ul><ul><ul><li>Apache </li></ul></ul><ul><ul><li>PHP </li></ul></ul><ul><ul><li>MySQL </li></ul></ul><ul><ul><li>PHPMyAdmin </li></ul></ul><ul><ul><li>Perl </li></ul></ul><ul><li>ไม่ต้องเสียเวลาติดตั้ง </li></ul><ul><ul><li>ดาวน์โหลด แล้ว unzip ก็ใช้งานได้ทันที </li></ul></ul><ul><li>คัดลอก (Copy) ระบบที่พัฒนาใส่ Thumb Drive & CD-ROM ไปใช้งานที่ใดก็ได้ </li></ul>
  18. 18. http://www.server2go-web.de
  19. 19. การเรียกใช้งาน Server2Go ดับเบิลคลิกไอคอน Serve2Go.exe รอสักครู่ โปรแกรมจะเปิด IE Web Browser
  20. 20. สร้างตารางข้อมูล MySQL # 1 <ul><li>พิมพ์ http://127.0.0.1:4001/phpmyadmin </li></ul>
  21. 21. สร้างตารางข้อมูล MySQL # 2 <ul><li>คลิกในรายการ “สร้างฐานข้อมูลใหม่” </li></ul><ul><li>ป้อนชื่อ เช่น wordpress </li></ul><ul><li>เลือกตัวเลือกถัดไปเป็น utf8_unicode_ci </li></ul><ul><li>จากนั้นคลิกปุ่ม “สร้าง” </li></ul>1 2 3 4
  22. 22. ติดตั้ง Wordpress # 1 <ul><li>พิมพ์ URL http://127.0.0.1:4001/ </li></ul>
  23. 23. ติดตั้ง Wordpress # 2 <ul><li>คลิกปุ่ม Create a Configuration File </li></ul>1
  24. 24. ติดตั้ง Wordpress # 3 <ul><li>เข้าสู่จอภาพเริ่มต้นการติดตั้ง คลิกปุ่ม Let’s go! </li></ul>1
  25. 25. ติดตั้ง Wordpress # 4 <ul><li>ป้อนข้อมูลการติดตั้งดังนี้ </li></ul><ul><ul><li>Database Name : wordpress </li></ul></ul><ul><ul><li>User Name : root </li></ul></ul><ul><ul><li>Password : ไม่ต้องระบุ </li></ul></ul><ul><ul><li>Database Host : localhost </li></ul></ul><ul><ul><li>Table Prefix : wp_ </li></ul></ul><ul><ul><li>คลิกปุ่ม submit </li></ul></ul>
  26. 26. ติดตั้ง Wordpress # 5 <ul><li>หากโปรแกรมตรวจสอบแล้วข้อมูลตามขั้นตอนที่ 4 ถูกต้อง จะปรากฎข้อมูลดังภาพ ให้คลิกปุ่ม Run the install </li></ul>
  27. 27. ติดตั้ง Wordpress # 6 <ul><li>ป้อนข้อมูลเกี่ยวกับเว็บไซต์ </li></ul><ul><li>Site Title: ชื่อเว็บไซต์ </li></ul><ul><li>User name: บัญชีชื่อผู้ควบคุมเว็บ เช่น admin </li></ul><ul><li>Password: รหัสผ่านของ ผู้ควบคุมเว็บ </li></ul><ul><li>Your e-Mail: e-Mail Address ของผู้ควบคุมเว็บ </li></ul><ul><li>จากนั้นคลิกปุ่ม Install WordPress </li></ul>
  28. 28. ข้อแนะนำการสร้างรหัสผ่าน <ul><li>กำหนดเกณฑ์การสร้างรหัสผ่านให้ตนเอง </li></ul><ul><ul><li>ให้ความสำคัญกับการสร้างรหัสผ่าน </li></ul></ul><ul><ul><li>หมั่นเปลี่ยนรหัสผ่าน </li></ul></ul><ul><li>เช่น กำหนดอักขระพิเศษให้สระ หรือปิดท้ายด้วย # </li></ul><ul><ul><li>A $ </li></ul></ul><ul><ul><li>E + </li></ul></ul><ul><ul><li>I ^ </li></ul></ul><ul><ul><li>O @ </li></ul></ul><ul><ul><li>U ! </li></ul></ul>kampaengsaen k$mp$+ngs$+n KamPaengSaen#
  29. 29. ติดตั้ง Wordpress # 7 <ul><li>การติดตั้งสมบูรณ์ </li></ul>
  30. 30. การเรียกชมเว็บไซต์ <ul><li>เปิดใช้งาน Server2Go </li></ul>
  31. 31. ชื่อเว็บไซต์ สโลแกนเว็บ เมนูจาก Pages เนื้อเรื่อง (Post) กลุ่มวิตเจ็ต
  32. 32. การเข้าสู่ระบบเว็บไซต์ – Log in <ul><li>เข้าสู่เว็บไซต์ เลื่อนหาคำสั่ง Log in จากกลุ่มรายการ Meta </li></ul><ul><li>ป้อนบัญชี Admin เพื่อเข้าสู่ระบบ </li></ul>
  33. 33. จอภาพ ในส่วน ควบคุม ระบบ
  34. 34. ปรับแต่งระบบเว็บไซต์ - Config <ul><li>คลิกคำสั่ง Settings จากรายการเมนูด้านซ้าย </li></ul>1
  35. 35. ปรับแต่งระบบเว็บไซต์ - Config <ul><li>Site Title </li></ul><ul><ul><li>ชื่อเว็บไซต์ควรเป็นภาษาอังกฤษ ตามด้วยภาษาไทยได้ มีความหมายชัดเจน ผู้ใช้นึกถึงได้ง่าย ( คำค้น ) มีความยาวรวมไม่เกิน 64 ตัวอักษร </li></ul></ul><ul><li>Tagline </li></ul><ul><ul><li>สโลแกนของเว็บ </li></ul></ul><ul><li>Membership </li></ul><ul><ul><li>อนุญาตให้ผู้ชมเว็บสมัครสมาชิกได้หรือไม่ </li></ul></ul><ul><li>Time Zone </li></ul><ul><ul><li>ให้เลือกเป็น UTC+7 </li></ul></ul><ul><li>คลิกปุ่ม Save Change </li></ul>
  36. 36. หน้าควบคุมหลัก – Dashboard <ul><li>เมื่อปรับแต่ง / ทำงานใด สามารถกลับสู่หน้าควบคุมหลัก ได้โดยคลิกคำสั่ง Dashboard </li></ul>1
  37. 37. ปรับแก้ไขข้อมูลสมาชิก <ul><li>คลิกที่ชื่อสมาชิก (user name) ที่มุมบนขวาของจอภาพ </li></ul>1
  38. 38. ปรับแก้ไขข้อมูลสมาชิก
  39. 39. ชมเว็บไซต์ที่ปรับแต่ง <ul><li>เมื่อปรับแต่ง / ทำงานใด สามารถชมหน้าเว็บได้โดยคลิกที่ชื่อเว็บไซต์ </li></ul>1
  40. 40. จากหน้าเว็บสู่หน้าควบคุม <ul><li>จากหน้าเว็บกลับสู่หน้าควบคุมได้โดย </li></ul><ul><ul><li>Log in ใหม่ หรือคลิกคำสั่ง Site Admin </li></ul></ul>
  41. 41. เปลี่ยนกราฟิกหัวเรื่องเว็บ # 1
  42. 42. เปลี่ยนกราฟิกหัวเรื่องเว็บ # 2 <ul><li>เข้าสู่ส่วนทำงาน Dashboard </li></ul><ul><li>คลิกคำสั่ง Appearance, Header </li></ul>
  43. 43. เปลี่ยนกราฟิกหัวเรื่องเว็บ # 3 <ul><li>เลือกรูปแบบกราฟิกที่ต้องการ แล้ว Save Change </li></ul>
  44. 44. เปลี่ยนกราฟิกหัวเรื่องเว็บ # 4 <ul><li>สามารถนำภาพที่สร้าง / จัดเตรียมเป็นภาพหัวเรื่องเว็บได้โดยคลิกปุ่ม Browse แล้วเลือกภาพ จากนั้นคลิกปุ่ม Upload </li></ul><ul><li>โปรแกรมจะให้ตัดส่วนของภาพตามขนาดที่โปรแกรมกำหนด แล้วคลิกปุ่ม Crop and Publish </li></ul>
  45. 45. ใส่รายละเอียดเว็บ – About # 1 <ul><li>Wordpress เตรียมเมนูควบคุมหลักให้ 2 เมนู ได้แก่ </li></ul><ul><ul><li>Home สำหรับการกลับสู่หน้าหลัก </li></ul></ul><ul><ul><li>About สำหรับนำเสนอรายละเอียดของเว็บ </li></ul></ul><ul><li>ในแต่ละเว็บควรมีการแสดงรายละเอียดต่างๆ ของเว็บ ที่เหมาะสมโดยปรับแก้ไขได้ดังนี้ </li></ul><ul><ul><li>ทำงานในโหมด Dashboard </li></ul></ul><ul><ul><li>เลือกเมนู Pages </li></ul></ul>Page เป็นเนื้อหา ประเภทหนึ่ง ของ Wordpress มักจะเรียกว่า Static Content
  46. 46. ใส่รายละเอียดเว็บ – About # 2 <ul><li>คลิกที่ชื่อหน้า About เพื่อเข้าสู่การแก้ไข </li></ul><ul><li>เมื่อแก้ไขแล้วให้คลิกปุ่ม Update เพื่อปรับปรุงข้อมูล </li></ul>
  47. 47. เครื่องมือแก้ไขเนื้อหา
  48. 48. คัดลอกเนื้อหาจากแหล่งอื่นๆ <ul><li>ไม่ควรคัดลอก (Copy) เนื้อหาจาก Word หรือแหล่งอื่นๆ มาวางใน Editor ของ Wordpress เพราะจะส่งผลให้เกิดปัญหาการแสดงผลที่ผิดพลาด ปรับแก้ไขยาก </li></ul><ul><ul><li>เพราะมี special code จากโปรแกรมต้นทางส่งมายัง Editor ของ Wordpress </li></ul></ul><ul><li>หากจำเป็นต้องคัดลอกข้อมูล ให้นำข้อมูลดังกล่าวไปวาง (Paste) บน NotePad ก่อนแล้วจึงคัดลอกจาก NotePad มาวางใน Editor ของ Wordpress </li></ul>
  49. 49. นำเข้ารูปภาพ # 1 <ul><li>รูปภาพที่นำมาประกอบเนื้อหาของ Wordpress จะต้องเตรียมดังนี้ </li></ul><ul><ul><li>กำหนดชื่อแฟ้มภาพ (File name) ให้เป็นภาษาอังกฤษ และ / หรือผสมตัวเลข ห้ามใช้ภาษาไทย </li></ul></ul><ul><ul><li>ฟอร์แมตภาพ </li></ul></ul><ul><ul><ul><li>.gif สำหรับภาพวาด ภาพลายเส้น ภาพที่มีสีไม่มาก </li></ul></ul></ul><ul><ul><ul><li>.jpg/.png สำหรับภาพสีมาก </li></ul></ul></ul><ul><ul><ul><li>.png สำหรับภาพสีมากที่ต้องการพื้นโปร่งใส (Transparent) </li></ul></ul></ul><ul><ul><li>ควรย่อภาพให้มีขนาดที่เหมาะสม และ / หรือลดความละเอียดของภาพ (Resolution) ระหว่าง 72 – 96 dpi </li></ul></ul><ul><li>รูปภาพ / แบบอักษร / ข้อความไม่ควรละเมิดลิขสิทธิ์ </li></ul><ul><ul><li>http://openclipart.org </li></ul></ul><ul><ul><li>ค้นหาภาพจาก Google, Flickr ด้วยเงื่อนไข CreativeCommons </li></ul></ul><ul><li>ระบุ Metadata ของภาพให้เหมาะสมในระดับดิจิทัล </li></ul>
  50. 50.
  51. 51. Progressive & Interlaced รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ Interlaced การแสดงผลภาพ แบบ Progressive
  52. 52. PNG & GIF Transparent
  53. 53. ปัญหาลิขสิทธิ์ของเมืองไทย
  54. 54.
  55. 55. (cc)
  56. 56. การสืบค้นภาพที่เป็น (cc) (cc)
  57. 57. วัน / เวลากล้องถ่ายภาพดิจิทัล / อุปกรณ์ดิจิทัล <ul><li>พรบ . การกระทำความผิดทางคอมพิวเตอร์ </li></ul>
  58. 58.
  59. 59. Image Metadata : EXIF : IPTC
  60. 60.
  61. 61. นำเข้ารูปภาพ # 2 <ul><li>จากหน้าจอสร้าง / แก้ไขเนื้อหา คลิกเมาส์ ณ ตำแหน่งที่ต้องการวางภาพ คลิกปุ่ม ใส่รูปภาพ </li></ul><ul><li>คลิกเลือกภาพจากปุ่ม Select Files </li></ul>
  62. 62. นำเข้ารูปภาพ # 3 <ul><li>ป้อนชื่อภาพในรายการ Title ใช้ภาษาไทยได้ </li></ul><ul><li>ป้อนคำบรรยายภาพใน รายการ Caption/Descriptions </li></ul><ul><li>หากต้องการให้คลิกที่ภาพ เพื่อคลิกไปยังภาพขนาดต้นฉบับ ให้คลิกปุ่ม File URL แต่ถ้า ไม่ต้องการให้คลิกภาพ คลิกปุ่ม None </li></ul><ul><li>กำหนดตำแหน่งการวางภาพ จากรายการ Alignment </li></ul><ul><li>กำหนดขนาดภาพจาก Size </li></ul><ul><li>คลิก Insert into Post </li></ul>
  63. 63. การสร้างหน้าใหม่ (New Page) <ul><li>การสร้างหน้าใหม่ ทำได้ 2 วิธี </li></ul><ul><ul><li>คลิกคำสั่ง Pages, Add New </li></ul></ul><ul><ul><li>คลิกรายการ New Page </li></ul></ul>
  64. 64. การสร้างหน้าใหม่ (New Page) 1) ป้อนชื่อเรื่อง 2) พิมพ์เนื้อหา 4) เลือกรูปแบบ และลำดับ การนำเสนอ 5) Publish 3) เลือกเงื่อนไข Comment
  65. 65. ปรับแต่งค่าควบคุมของ Page <ul><li>อนุญาต / ไม่อนุญาตการแสดงความคิดเห็น </li></ul><ul><li>การแสดงผล Page </li></ul>ปรับเปลี่ยนลำดับด้วยค่า Order
  66. 66. การเผยแพร่เนื้อหาแบบ Blog <ul><li>การเผยแพร่เนื้อหาแบบ Blog จะมีลักษณะที่ควบคุมด้วยวันที่ / เวลาที่เผยแพร่ (Published Date) โดยเรียกเนื้อหาลักษณะนี้ว่า Post </li></ul><ul><ul><li>สามารถระบุหมวดหมู่ (Category) และป้ายกำกับ (Tag) ได้ </li></ul></ul><ul><li>การทำงานกับ Post ทำได้โดยเลือกคำสั่ง Posts </li></ul>1
  67. 67. การลบ Post <ul><li>เลือกคำสั่ง Posts จาก Dashboard </li></ul><ul><li>นำเมาส์ชี้ที่รายการ Post ที่ต้องการลบ คลิกคำสั่ง Trash </li></ul>1 2
  68. 68. การสร้าง Post ใหม่ <ul><li>คลิก Posts, Add New </li></ul><ul><li>หรือคลิกรายการ New Post </li></ul>
  69. 69. 1) ป้อนชื่อเรื่อง 2) พิมพ์เนื้อหา 3) พิมพ์เนื้อหาสรุป 4) สร้าง / เลือกหมวดหมู่ 5) พิมพ์ป้ายกำกับ 6) ระบุ URL เพื่ออ้างอิง 7) กำหนดเงื่อนไข การเผยแพร่และ Publish
  70. 70. การแสดงผล Post <ul><li>Post ที่เผยแพร่แล้วจะแสดงผลผ่านหน้าแรกของเว็บ </li></ul><ul><li>Post ที่สร้างล่าสุด จะแสดงบนสุด </li></ul><ul><li>แต่ละ Post จะถูกจัดกลุ่มด้วย </li></ul><ul><ul><li>วันที่ / เวลาเผยแพร่ (Archives) </li></ul></ul><ul><ul><li>หมวดหมู่ (Categories) </li></ul></ul><ul><ul><li>ป้ายกำกับ (Tagged) </li></ul></ul>
  71. 71. เขียนอะไร / อย่างไร <ul><li>เรื่องราวใกล้ตัว ที่ชอบและถนัด </li></ul><ul><li>เขียนแบบเบาๆ </li></ul><ul><li>เล่าเรื่อง </li></ul><ul><li>นำเสนอภาพ พร้อมเรื่องประกอบ </li></ul><ul><li>เรียนรู้ร่วมกัน </li></ul><ul><li>เขียนตามเป้าหมายที่วางไว้ </li></ul>
  72. 72. Slideshare ผ่าน Wordpress <ul><li>Slideshare.net เป็นแหล่งรวมสไลด์ / เอกสารแหล่งใหญ่บนโลกอินเทอร์เน็ต </li></ul><ul><ul><li>นำ PPT, PDF, DOC ไปจัดเก็บและแปลงเป็น Online Slide, i-Paper อัตโนมัติในรูปแบบ Flash-based </li></ul></ul><ul><li>ค้นสื่อจาก slideshare.net แล้วคลิกเลือกสื่อที่ต้องการ </li></ul><ul><li>คลิกรายการ Embed </li></ul><ul><li>คัดลอกคำสั่งจากรายการ Embed this presentation มาวางใน Post ผ่านโหมดการทำงาน HTML </li></ul>
  73. 73. Code ของ Slideshare 1 2
  74. 74. Slideshare ผ่าน Wordpress 1 2
  75. 75. Slideshare ผ่าน Wordpress
  76. 76. Youtube ผ่าน Slideshare 1 2 3 4
  77. 77. เพิ่มความสามารถด้วย โปรแกรมเสริม : Plug-ins <ul><li>http :// wordpress . org / extend / </li></ul>
  78. 78. ค้นหา Plug-ins
  79. 79. ค้นหา / ดาวน์โหลด Plug-ins
  80. 80. ติดตั้ง Plug-ins # 1 <ul><li>เลือก Dashboard, Plugins, Add New, Upload </li></ul><ul><li>Browse เลือกไฟล์ (.zip) แล้ว Install Now </li></ul>1 2 3 4 5 6
  81. 81. ติดตั้ง Plug-ins # 2 <ul><li>การติดตั้งเสร็จสมบูรณ์ </li></ul><ul><li>คลิกรายการ Activate Plugin เพื่อให้ Plug-in ที่ติดตั้งทำงาน </li></ul>1
  82. 82. การยกเลิก Plug-ins <ul><li>เลือก Dashboard, Plugins </li></ul><ul><li>คลิก Deactivate รายการ Plug-in ที่ไม่ต้องการ </li></ul>
  83. 83. การจัดการตาราง (Table) # 1 <ul><li>ติดตั้ง Plug-in ชื่อ WP - Table </li></ul><ul><li>สร้างแม่แบบตารางจากคำสั่ง Dashboard, Posts, Tables </li></ul>
  84. 84. การจัดการตาราง (Table) # 2 <ul><li>เมื่อสร้างแม่แบบตารางแล้ว สามารถเข้าไปแก้ไขรูปแบบการแสดงผลโดยคลิก Edit </li></ul><ul><li>ป้อนข้อมูล ปรับแต่งรูปแบบการแสดงผล แล้ว Updated </li></ul><ul><li>ป้อนคำสั่ง [ table = ลำดับที่ของตาราง ] ใน Post เพื่อใช้งาน </li></ul>
  85. 85. การจัดการตาราง (Table) # 2
  86. 86. ใช้ Wordpress ให้เต็มประสิทธิภาพต้องเตรียมพร้อมอย่างไร Server & Security การติดตั้ง ปรับแต่งโปรแกรม เนื้อหา System Administrator การบริหารจัดการ Server ระบบรักษาความปลอดภัย การจัดการฐานข้อมูล การจัดการ Log file การจัดการสิทธิ์ของการเข้าถึงระบบ - Web Master การติดตั้งและปรับแต่ง การจัดการสมาชิก การจัดการหมวดเนื้อหา การติดตั้ง Plug-ins และเปิดใช้งาน การแก้ไขแม่แบบเว็บไซต์ด้วยเทคนิคแทนที่ - Web Master การแก้ไข CSS, HTML, PHP ระดับที่ 1 - Web Master & Web Programmer การแก้ไข CSS, HTML, PHP ระดับสูง - Web Programmer การพัฒนาต่อยอดด้วย web programming ต่างๆ ทุกคน ภายใต้ข้อกำหนดร่วมกัน ( มาตรฐานสื่อดิจิทัลต่างๆ )
  87. 87. แหล่งข้อมูล <ul><li>http://stks.or.th/wiki </li></ul><ul><li>http://slideshare.net/boonlert </li></ul>

×