รายงานสรุปขั้นตอนการเรียนรู้การใช้งาน word press by NATTAWUT NUCHANA

เอกสารรายงานสรุปการใช้งาน Word Press ในรายวิชาเทคโนโลยีเพื่อการอออกแบบนิเทศศิลป์

––

Installation & Theme Design

จัดทาโดย : นายณัฐวุฒิ นุชนา รหัสนักศึกษา 5211300552 คณะมนุษยศาสตร์และสังคมศาสตร์ สาขาศิลปกรรม แขนงออกแบบนิเทศศิลป์

มหาวิทยาลัยราชภัฏจันทรเกษม

Chandrakasem Rajabhat University จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

รายงานสรุปขั้นตอนการเรียนรู้การใช้งาน Word Press รายงานนี้เป็นส่วนหนึ่งของรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์ ARTI3319 คณะมนุษยศาสตร์และสังคมศาสตร์ สาขาศิลปกรรม แขนงออกแบบนิเทศศิลป์ มหาวิทยาลัยราชภัฏจันทรเกษม ภาคเรียนที่ 1/2556

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

คานา Word Press เป็นเว็บไซต์ที่ใช้ในการการบันทึกบทความของตนเองลงบนเว็บไซต์ โดยเนื้อหา นั้นจะครอบคลุมได้ทุกเรื่อง ไม่ว่าจะเป็นเรื่องราวส่วนตัว หรือเป็นบทความเฉพาะด้านต่าง ๆ เช่น เรื่องการเมือง เรื่องกล้องถ่ายรูป เรื่องกีฬา เรื่องธุรกิจ เป็น การสร้าง Word Press ทาได้ง่าย ทุกคน สามารถสร้างเพื่อไว้เป็นประโยชน์ต่อตัวเองและผู้อื่นได้ Word Press จะมีเครื่องมือสาหรับเขียน บทความ โพสรูป และเครื่องมือการตกแต่งกราฟิก ฯลฯ รายงานเล่มนี้จัดขึ้นมาเพื่อให้ผู้ที่สนใจในการที่จะเริ่มสร้าง Word Press ของตัวเองได้เข้ามา ศึกษา และเพื่อรวบรวมข้อมูล หลักฐาน กระบวนการศึกษาขั้นตอนการ Word Press อันเป็นเนื้อหาที่ ผ่านกระบวนการเรียนการสอนในรายวิชา เทคโนโลยีเพื่อการออกแบบนิเทศศิลป์ ( arti3319 ) สอน โดย ผศ.ประชิด ทิณบุตร เขียนโดย นายณัฐวุฒิ นุชนา 22 กันยายน 2556

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

WordPress คืออะไร WordPress เป็น open source web software ที่เราสามารถติดตั้งบนเว็บ server ของเราเพื่อสร้างเว็บไซต์, blog หรือ community ตอนเริ่มแรก WordPress เป็นเครื่องมือไว้ สาหรับสร้าง blog แต่ได้รับการพัฒนามาเรื่อย ๆ จนสามารถสร้างเป็นเว็บไซต์ หรือ เว็บ community ได้แล้ว โดยมีระบบจัดกา รบทความ หรือ Content Management System (CMS) ทาให้ง่ายต่อการใช้งาน ซึ่ง WordPress สร้างขึ้นโดย Matt Mullenweg และ Mike Little ในปี 2003 นับว่ามีการพัฒนามาถึง 9 ปีแล้ว WordPress.com 

  



ติดตั้งง่าย ต้องบอกว่าแค่สมัครไม่ต้องติดตั้ง เพราะเมื่อสมัครแล้วทาตามกระบวนการเสร็จแล้ว เราก็จะได้เว็บตามที่เราต้องการ ภายใต้ url xxxxx.wordpress.com แล้ว ไม่ต้องเสียค่า hosting เพราะข้อมูลต่าง ๆ จะอยู่บน server ของ wordpress.com มีการอัพเดต wordpress ให้อยู่เสมอเมื่อมีเวอร์ชั่นใหม่ออกมา มี plugin ที่จาเป็นสาหรับเว็บทั่ว ๆ ไปติดตั้ งไว้ให้แล้ว โดยเป็นทาง wordpress.com เลือกไว้ ให้เราใช้งาน แน่นอนว่า ฟรี จะเสียค่าใช้จ่ายก็ต่อเมื่อเราต้องการอัพเกรดเพื่อให้เราฟังก์ชั่นที่มากขึ้นจากที่ ทาง wordpress.com เตรียมไว้ให้

WordPress.org 



  

อิสระในการใช้งาน เนื่องจากเราโหลดมาติดตั้งที่ server ของเราเอง ดังนั้นเราสามารถ ปรับแต่งได้ตามใจเรามากกว่าใช้งานบน wordpress.com ปรับแต่ง theme ของเราได้ตามสะดวก และสามารถ download theme มาติดตั้งเองได้ โดยไม่ต้องเลือกเฉพาะที่ทาง wordpress.com จากัดไว้ให้ ติดตั้ง plugin ได้ตามใจเรา อยากได้ตัวไหน download มาติดตั้งได้เลย ปรับแต่ง code ได้ตามที่เราต้องการ และทาง wordpress.org เองก็มีคู่มือไว้รองรับอยู่แล้ว เลือก hosting ที่เราต้องการ ในราคาที่เราต้องการได้ ไม่ถูกจากัดอยู่เพียงที่เดียว

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

ขั้นตอนการเรียนรู้การใช้งาน Word Press ขั้นแรกให้ทาการดาวน์โหลด Word Press จาก http://www.wordpressthai.com/

ภาพที่ 1 - 2 แสดงภาพของเว็บไซต์ http://www.wordpressthai.com/ ที่มา http://www.wordpressthai.com/,2556

ขั้นตอนการเรียนรู้การใช้งาน Word Press หมายเลข 1 แสดงแถบดาวน์โหลด Word Press หมายเลข 2 คลิกปุ่มเพื่อทาการโหลดไฟล์ลงเครื่อง

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

หลังจากดาวน์โหลดเสร็จเรียบร้อยแล้วก็จะได้ไฟล์ WordPressThai 3.6 Portable-AcademyVersion.rar มาดังนี้

ภาพที่ 3 แสดงภาพของ WordPressThai 3.6 Portable-Academy-Version ที่มา นายณัฐวุฒิ นุชนา,2556

หมายเลข 3 แสดงการแตกไฟล์ WordPressThai 3.6 Portable-Academy-Version.rar

ภาพที่ 4 แสดงภาพของ WordPressThai 3.6 Portable-Academy-Version ที่มา นายณัฐวุฒิ นุชนา,2556

หมายเลข 4 เมื่อแตกไฟล์เสร็จก็จะมีรูปร่างตามรูป จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

หลังจากแตกไฟล์เรียบร้อยแล้วก็เข้าไปใช้งานที่ตัว usbwebserver.exe

ภาพที่ 5 แสดงภาพของ WordPressThai 3.6 Portable-Academy-Version ที่มา นายณัฐวุฒิ นุชนา,2556

ขั้นตอนการเรียนรู้การใช้งาน Word Press หมายเลข 5 คลิกเข้าใช้งานที่ usbwebserver.exe หมายเลข 6 ปุ่ม Root dir ดูชื่อโฟลเดอร์ชื่อของแต่ละเว็บไซต์หรือโปรแกรมสาเร็จรูปที่ใช้ จัดการ เนื้อหาเว็บ

6 7

9 ภาพที่ 6 แสดงภาพของ WordPressThai 3.6 Portable-Academy-Version ที่มา นายณัฐวุฒิ นุชนา,2556

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

หมายเลข 7 Localhost แสดงตาแหน่งที่อยู่หรือชื่อ URL หมายเลข 8 PHPMyAdmin เป็นปุ่มเข้าใช้งานสร้างชื่อฐานข้อมูล (Database) หมายเลข 9 www.USBWebserver.com ลิ้งเข้าสู่ http://www.usbwebserver.net/en/ หมายเลข 10 แสดงสถานะเปิด/ปิดระบบบริการหลักของเครื่องแม่ข่าย เมื่อเราได้รู้ถึงปุ่มคาสั่งต่างๆ ของ WordPressThai 3.6 Portable-Academy-Version. แล้ว ต่อไปนี้ จะเป็นขั้นตอนของการเข้าใช้โปรแกรม โดยคลิกที่ปุ่ม Localhost

ภาพที่ 7 แสดงภาพของ http://localhost:8080/ ที่มา http://localhost:8080/,2556

ขั้นตอนการเรียนรู้การใช้งาน Word Press หมายเลข 11 คลิกที่ http://localhost:8080/wordpressthaiedition เพื่อเข้าสู่หน้า Login ของ Word Press

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

เมื่อคลิกเข้ามาแล้วจะเข้าสู่หน้า login ให้ทาการ login เข้าสู่ระบบโดยใช้ admin เป็นชื่อและ รหัสผ่าน

ภาพที่ 8 แสดงภาพของ หน้า login ของ Word Press ที่มา นายณัฐวุฒิ นุชนา,2556

ขั้นตอนการเรียนรู้การใช้งาน Word Press หมายเลข 12 หน้า Login เพื่อเข้าสู่ระบบฐานข้อมูล โดยใช้ admin เป็นชื่อและรหัส หมายเลข 13 แสดงภาพเว็บไซต์จาลองของ Word Press

ภาพที่ 9 แสดงภาพของ WordPressThai ของนายณัฐวุฒิ นุชนา ที่มา นายณัฐวุฒิ นุชนา,2556

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

เมื่อ Login เข้ามาแล้วจะเข้าสู่ศูนย์จัดการระบบ โดยสามารถปรับแต่งได้ตามต้องการ

16 17

ภาพที่ 10 แสดงภาพของ WordPressThai ของนายณัฐวุฒิ นุชนา ที่มา นายณัฐวุฒิ นุชนา,2556

ขั้นตอนการเรียนรู้การใช้งาน Word Press หมายเลข 14 ปุ่มแสดงเนื้อหาบล็อก คือข้อมูลทั้งหมดที่เราทากาสโพส เราสามารถเข้าไปเขียน บทความ หรือแก้ไขบทความที่เคยเผยแพร่ไปแล้วได้ที่นี่ หมายเลข 15 ห้องสมุดสื่อเป็นฐานข้อมูลที่รวบรวมสิ่งที่เราอัพโหลดเข้ามา เช่นรูปภาพที่แทรกมาในบทความ หมายเลข 16 รูปลักษณ์หน้าเว็บ คือเครื่องมือที่ใช้ปรับแต่งกราฟิกต่างๆ ใน Word Press เช่น Theme ต่างๆ หมายเลข 17 โปรแกรมเสริม เป็นการติดตั้งลูกเล่มให้เพิ่มมากขึ้น เช่น Sideshow หรือ Plugin ต่างๆ เพื่อให้ Word Press สวยงามและอานวยความสะดวกสบายมากขึ้น

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

ขั้นตอนต่อไปนี้แสดงให้เห็นถึงการปรับแต่ง Theme ซึ่ง Theme มีให้เลือกโหลดเยอะมาก

19 18

21 20

ภาพที่ 11 แสดงภาพของ WordPressThai ของนายณัฐวุฒิ นุชนา ที่มา นายณัฐวุฒิ นุชนา,2556

ขั้นตอนการเรียนรู้การใช้งาน Word Press หมายเลข 18 ปุ่มแสดงรูปลักษณหน้าเว็บ หมายเลข 19 ปุ่มติดตั้งชุดรูปแบบกราฟิกบล็อกเพิ่ม สามารถติดตั้ง Theme ได้หลากหลายรูปแบบ มี ให้โหลดแบบฟรีๆ ในที่นี้ใช้ Theme WaterSide หมายเลข 20 บล็อกเมนูข้าง Widgets เราสามารถปรับแต่งเมนูทางด้านขวาได้ตามต้องการ หมายเลข 21 สีพื้นหลัง เราสามารถเปลี่ยนสี หรือรูปภาพตามที่ต้องการได้

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

ต่อไปมาดูส่วนต่างๆ ที่อยู่ในบล็อกเมนูข้าง Widgets

23 22 24

ภาพที่ 12 แสดงภาพของ WordPressThai ของนายณัฐวุฒิ นุชนา ที่มา นายณัฐวุฒิ นุชนา,2556

ขั้นตอนการเรียนรู้การใช้งาน Word Press หมายเลข 22 คือ Widgets ต่างๆทั้งหมดนี้สามารถดึงมาวางทางขวาได้ หมายเลข 23 แถบเมนูข้างที่เราดึงมาจากทางซ้ายมือ แต่ละอันจะมีฟังชั่นแตกต่างกันออกไป หมายเลข 24 การสร้างเมนูข้าง Widgets ขึ้นเอง เราสามารถ html,cgi,javascript มาแทรกได้

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

ขั้นตอนการนาไฟล์ html มาแทรกที่ Widgets ข้าง เมื่อเราได้รูปตามที่ต้องการแล้ว ให้คลิกขวาที่รูป เลือกที่ Inspect element แล้วทาการ copy html ในส่วนของภาพ

25 26

ขั้นตอนการเรียนรู้การใช้งาน Word Press หมายเลข 25 คลิกขวาที่รูปที่เราต้องการ แล้วเลือก Inspect element หมายเลข 26 เมื่อคลิก Inspect element แล้วจะเห็น html ของภาพ ให้ทาการ copy หมายเลข 27 นา html ที่ copy มาวางที่แถบ Widgets ที่สร้างขึ้นเองเมื่อเสร็จกดบันทึก

ภาพที่ 13-14 แสดงภาพของ WordPressThai ของนายณัฐวุฒิ นุชนา ที่มา นายณัฐวุฒิ นุชนา,2556

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

เมื่อทาการกดบันทึกเมนู Widgets ค้านข้างเป็นที่เรียบร้อยก็จะได้ดังรูป

ภาพที่ 15 แสดงภาพของ WordPressThai ของนายณัฐวุฒิ นุชนา ที่มา นายณัฐวุฒิ นุชนา,2556

ขั้นตอนการเรียนรู้การใช้งาน Word Press หมายเลข 28 ภาพแสดงผมสาเร็จในการแทรกภาพด้วย html

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

ต่อไปเป็นการ สร้างเนื้อหา:เรื่องที่จะส่งเผยแพร่ใหม่

29 30

33 31 ภาพที่ 16 แสดงภาพของ WordPressThai ของนายณัฐวุฒิ นุชนา ที่มา นายณัฐวุฒิ นุชนา,2556

ขั้นตอนการเรียนรู้การใช้งาน Word Press หมายเลข 29 ช่องสาหรับตั้งชื่อหัวข้อบทความ หมายเลข 30 ปุ่มอัพโหลดไฟล์ภาพต่างๆที่เราต้องการนามาแทรกกับบทความ หมายเลข 31 หน้าต่างแสดงการอัพโหลดรูปภาพ หมายเลข 32 หน้ากระดาษที่ใช้เขียนบทความ หมายเลข 33 ปุ่มส่งเผยแพร่เนื้อหา เมื่อทาการเขียนบทความเสร็จเป็นที่เรียบร้อยก็ทาการกดเพื่อ เผยแพร่บทความ

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556

รายงานสรุปวิชา : ARIT3319 เทคโนโลยีเพื่อการออกแบบนิเทศศิลป์ รายงาน : การปรับแต่งขนาด กราฟิกและพื้นหลัง Blogger จัดทาโดย : นายณัฐวุฒิ นุชนา รหัสประจาตัว 5211300552 กลุ่มเรียน 201 คณะมนุษยศาสตร์และสังคมศาสตร์ สาขาศิลปกรรม แขนงออกแบบนิเทศศิลป์ Tel. 081-441-2334 E-mail : nattawut.nuchanaa@gmail.com Blogspot : http://artd3319-nattawutnuchana.blogspot.com/

จัดทาโดย นายณัฐวุฒิ นุชนา วันอาทิตย์ที่ 22 กันยายน 2556