1 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
คู่มือสรุปขั้นตอนการศึกษาเรียนรู้ใช้งาน Word Press รายงานนี้เป็นส่วนหนึ่งของรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์ ARTI3319 ภาควิชามนุษย์ศาสตร์ คณะมนุษย์ศาสตร์และสังคมศาสตร์ สาขาวิชาศิลปกรรม มหาวิทยาลัยราชภัฏจันทรเกษม ภาคเรียนที่ 1/2556
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
2 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
คานา Word press คือเว็บไซต์ที่เจ้าของสามารถบันทึกเรื่องราวของตนเองลง ในเว็บได้ตลอดเวลา การสร้างเว็บสามารถทาได้ง่ายไม่ซับซ้อน และภายระบบการจัดการบริหารเว็บไซต์พื้นฐานให้ เช่น เครื่องมือสาหรับเขียนเรื่อง โพสรูป จัดหมวดหมู่ ฯล รายงานเล่มนี้ จัดทาขึ้นเพื่อรวบรวมหลักฐาน กระบวนการศึกษาเรียนรู้การใช้งานและการ ตกแต่ง Word press อันเป็นเนื้อหาที่ผ่านกระบวนการเรียนการสอนในรายวิชาของ เทคโนโลยีเพื่อ การออกแบบนิเทศศิลป์ ( Arti3319 ) สอนโดย ผศ.ประชิด ทิณบุตร หากเนื้อหาในรายงานมีความ ผิดพลาดประการใดทางผู้จัดทาต้องขออภัยมา ณ ที่นี้ด้วย โดย นายวาที ศรีผิว 22 กันยายน 2556
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
3 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
ทาความรู้จักกับ Word Press 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 1. ติดตั้งง่าย ต้องบอกว่าแค่สมัครไม่ต้องติดตั้ง เพราะเมื่อสมัครแล้วทาตามกระบวนการ เสร็จแล้ว เราก็จะได้เว็บตามที่เราต้องการ ภายใต้ url xxxxx.wordpress.com แล้ว 2. ไม่ต้องเสียค่า hosting เพราะข้อมูลต่าง ๆ จะอยู่บน server ของ wordpress.com มี การอัพเดต wordpress ให้อยู่เสมอเมื่อมีเวอร์ชั่นใหม่ออกมา 3. ฟรี จะเสียค่าใช้จ่ายก็ต่อเมื่อเราต้องการอัพเกรดเพื่อให้เราฟังก์ชั่นที่มากขึ้นจากที่ทาง wordpress.com เตรียมไว้ให้
WordPress.org 1. อิสระในการใช้งาน เนื่องจากเราโหลดมาติดตั้งที่ server ของเราเอง ดังนั้นเราสามารถ ปรับแต่งได้ตามใจเรามากกว่าใช้งานบน wordpress.com 2. ปรับแต่ง theme ของเราได้ตามสะดวก และสามารถ download theme มาติดตั้งเอง ได้ โดยไม่ต้องเลือกเฉพาะที่ทาง wordpress.com จากัดไว้ให้ 3. ติดตั้ง plugin ได้ตามใจเรา อยากได้ตัวไหน download มาติดตั้งได้เลย 4. เลือก hosting ที่เราต้องการ ในราคาที่เราต้องการได้ ไม่ถูกจากัดอยู่เพียงที่เดียว ขอบคุณแหล่งที่มา http://www.wordpress.in.th/
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
4 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
การศึกษาเรียนรู้การใช้งาน Word Press Portable usb ขั้นตอนการใช้งาน Word Press Portable นั้น สิ่งสาคัญอันดับแรกต้องมีการดาวน์โหลด ไฟล์จากเว็บไซต์ http://wordpressthai.com/ โดยคลิกเข้าไปที่แถบดาวน์โหลด 1
2
ภาพที่ 1 แสดงหน้าเว็บของ www.wordpressthai.com ที่มา: www.wordpressthai.com, 2556
ขั้นตอนการเรียนรู้การใช้งาน Word Press Portable หมายเลข 1 แสดงแถบดาวน์โหลด Word Press Portable Usb หมายเลข 2 หลังจากดาวน์โหลด Word Press Portable เรียบร้อยแล้ว ให้ทาการแตกไฟล์ Rar ก่อน โดยคลิกเข้าไปที่ Extract Here
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
5 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
หลังจากแตกไฟล์เสร็จเรียบร้อยแล้ว ให้ทาการสร้างโฟลเดอร์จัดเก็บให้เรียบร้อย และเข้าไป ใช้งานโดยดับเบิ้ลคลิกที่ usbwebserver เพื่อเปิดระบบบริการฐานข้อมูล
3
4
5
ภาพที่ 2 แสดงภาพของ นายวาที ศรีผิว ที่มา: นายวาที ศรีผิว, 2556
ขั้นตอนการเรียนรู้การใช้งาน Word Press Portable หมายเลข 3 ดับเบิ้ลคลิกที่ Icon ของ usbwebserver หมายเลข 4 ภาพแสดงแถบคาสั่งเครืองมือใช้งานด้านซ้าย แต่ละปุ่มมีความหมายดังนี้ 4.1 ปุ่ม Root Dir ดูชื่อโฟลเดอร์ชื่อของแต่ละเว็บไซต์หรือโปรแกรมเว็บสาเร็จรูปที่ใช้ จัดการเนื้อหาเว็บไซต์ 4.2 ปุ่ม Localhost แสดงตาแหน่งที่อยู่หรือชื่อ URL 4.3 ปุ่ม PhpMyAdmin เป็นปุ่มเข้าใช้งานสร้างชื่อฐานข้อมูล (Database) ไว้รองรับการ ติดต่อเข้าใช้ / จัดเก็บ / ค้นคืนให้แก่โปรแกรมการจัดการเนื้อหาต่างๆ ซึ่งในที่นี้คือ MySOL หมายเลข 5 ภาพแสดงแถบคาสั่งเครื่องมือใช้งานด้านขวา หมายถึงแสดงสถานะการเปิด/ปิด ใช้งานโปรแกรมระบบบริการหลักของเครื่องแม่ข่าย เช่น หากมีปุ่มเครื่องหมายถูกสีเขียวหลัง Apache และ Mysql หมายถึง ได้เปิดระบบบริการ Internet ด้วยโปรแกรม Apache และ เปิดใช้งานโปรแกรม Mysql ให้รองรับการใช้งานเรียบร้อยแล้ว ปุ่ม Setting เป็นการตั้งค่า เปลี่ยนหมายเลขช่องพอร์ทในการติดต่อ (Connection) เข้าใช้ / เข้าถึง ฐานข้อมูลและหน้า เว็บไซต์ (ที่มา ผศ.ประชิด ทิณบุตร)
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
6 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
เมื่อทราบถึงรายละเอียดของคาสั่งในแต่ละปุ่มแล้ว เมื่อจะเริ่มต้นการใช้งานให้คลิกเข้าไปที่ ปุ่ม Localhost เพื่อเปิดระบบฐานข้อมูล และจะเข้าสู่หน้าของ http://localhost:8080/
6
ภาพที่ 3 แสดงภาพของ http://localhost:8080/ ที่มา: http://localhost:8080/, 2556
ขั้นตอนการเรียนรู้การใช้งาน Word Press Portable หมายเลข 6 แสดง URL ที่จะเข้าสู่ในหน้า Login ของ Word Press Portable เข้าใช้งานต้อง ทาการคลิกที่ส่วนนี้เพื่อเปิดระบบฐานข้อมูล
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
7 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
เมื่อเปิดเข้ามาสู่ส่วนนี้ได้แล้วให้ทาการ Login เข้าสู่ระบบฐานข้อมูล โดยใช้ admin เป็นชื่อ ผู้ใช้และรหัสผ่าน
7
8
ภาพที่ 4 แสดงภาพของ Word Press Portable นายวาที ศรีผิว ที่มา: Word Press Portable นายวาที ศรีผิว, 2556
ขั้นตอนการเรียนรู้การใช้งาน Word Press Portable หมายเลข 7 แสดงภาพเว็บไซต์จาลองใน Word Press Portable usb โดยมีการใช้งานที่ เสมือนจริง หมายเลข 8 หน้า Login เพื่อเข้าสู่ฐานระบบข้อมูล โดยใช้ชื่อผู้ใช้ และรหัสผ่านเป็น admin ในส่วนนี้สามารถปับเปลี่ยนรหัสผ่านได้
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
8 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
เมื่อทาการ Login เข้ามาแล้วจะเข้ามาสู่หน้าศุนย์จัดการระบบ โดยสามารถปรับเปลี่ยน Theme ได้ตามต้องการโดยเข้าไปดาวน์โหลดได้ที่ Theme Word Press 9 10 11
ภาพที่ 5 แสดงภาพของ Word Press Portable นายวาที ศรีผิว ที่มา: Word Press Portable นายวาที ศรีผิว, 2556
ขั้นตอนการเรียนรู้การใช้งาน Word Press Portable หมายเลข 9 ห้องสมุดสื่อคือฐานข้อมูลของสิ่งที่เราทาการอัพโหลดเข้าไป ไม่ว่าจะเป็น รูปภาพที่นามาแทรกในเนื้อหาของแต่ละบทความ จะอยู่ห้องสมุดสื่อนี้ หมายเลข 10 รูปลักษณ์หน้าเว็บ คือส่วนเครื่องมือที่ใช้ในการปรับแต่งกราฟิกบนเว็บ ไม่ว่า จะเป็น Theme ต่างๆ ที่สามารถปรับเปลี่ยนได้ แถบเมนูข้าง widgets ที่ปรับแต่งได้ง่ายๆ หมายเลข 11 โปรแกรมเสริม ในส่วนนี้เป็นส่วนที่จะทาให้เว็บไซต์มีลูดเล่นมากขึ้น เช่น การ ติดตั้งในส่วนของ Slideshow หรือ Plugin ต่างๆ ที่เอื้ออานวยในการออกแบบเว็บไซต์ให้ ง่ายมากขึ้นกว่าเดิม
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
9 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
ขั้นตอนเบื้องต้นคือการแนะนาให้รู้จักส่วนต่างๆ ที่จาเป็นในการตกแต่งเว็บไซต์ ในขั้นตอน ต่อไปนี้จะแนะนาในส่วนที่เป็นหัวใจหลักของ Word Press ที่สามารถสร้างสันเว็บไซต์ให้ได้ในแบบที่ ต้องการมากที่สุด 13
12 14
ภาพที่ 6 แสดงภาพของ Word Press Portable นายวาที ศรีผิว ที่มา: Word Press Portable นายวาที ศรีผิว, 2556
ขั้นตอนการเรียนรู้การใช้งาน Word Press Portable หมายเลข 12 รูปลักษณ์หน้าเว็บ คือส่วนเครื่องมือที่ใช้ในการปรับแต่งกราฟิกบนเว็บ ไม่ว่า จะเป็น Theme ต่างๆ ที่สามารถปรับเปลี่ยนได้ แถบเมนูข้าง widgets ที่ปรับแต่งได้ง่ายๆ หมายเลข 13 ปุ่มติดตั้งชุดรูปแบบกราฟิก โดยเราสามารถติดตั้ง Theme ต่างๆได้ตามที่เรา ต้องการ โดยในที่นี้ได้ใช้ชุดรูปแบบกราฟิกของ Fashionistas หมายเลข 14 บล็อกเมนูข้าง widgets สามารถปรับแต่งแถบเมนูด้านขวาโดยสามารถใส่สิ่งที่ เราต้องการได้เช่น นาฬิกา ภาพสไลด์โชว์ หรือลิงค์ต่างๆ
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
10 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
16 15 17
ภาพที่ 7 แสดงภาพของ Word Press Portable นายวาที ศรีผิว ที่มา: Word Press Portable นายวาที ศรีผิว, 2556
ขั้นตอนการเรียนรู้การใช้งาน Word Press Portable หมายเลข 15 ส่วนนี้คือ widgets ต่างๆ ที่สามารถดึงมาใช้งานได้ โดย widgets นี้อาจติดตั้ง เพิ่มเติมก็ได้ หมายเลข 16 แถบเมนูข้าง widgets โดยในแต่ละ Theme จะมีฟังค์ชั่นการใช้งานแตกต่าง กัน widgets เมนูด้านขวาก็ย่อมแตกต่างกัน สาหรับผุ้ที่ไม่ถนัดเขียนโค๊ด ก็สามารถปรับแก้ไข ภาพส่วนหัว footer ส่วนท้ายต่างๆได้ในส่วนนี้โดยที่ไม่ต้องเข้าไปแก้ไขรหัสโค๊ด หมายเลข 17 สร้าง widgets ในส่วนนี้สามารถแทรก Html ต่างๆได้ตามต้องการเช่นไฟล์ ภาพ ไฟล์วีดีโอ หรือลิงค์ต่างๆ ก็สามารถใช้งานในส่วนนี้ได้
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
11 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
ขั้นตอนการทาคือนาไฟล์ Html มาวางใส่ในเมนูข้าง widgets นั้นโดยขนาดของเมนูด้านข้าง ส่วนใหญ่จะอยู่ที่ 300 โดยประมาณ หลังจากนั้นให้เราคัดลอก Html ของภาพจาก Googlechrome โดยคลิกขวาแล้วตรวจสอบองค์ประกอบ แล้วเลือก Edit Html และจึงคัดลอกมาวางใน widgets
ภาพที่ 8 แสดงภาพของ Word Press Portable นายวาที ศรีผิว ที่มา: Word Press Portable นายวาที ศรีผิว, 2556
หลังจากนั้น Save และลอง Preview ดูเว็บไซต์ก็จะได้ขนาดรูปภาพสัดส่วนพอดีกับ Theme ของเว็บไซต์ที่เราดาวน์โหลดมา
ภาพที่ 9 แสดงภาพเมนูด้านข้างของ Word Press Portable นายวาที ศรีผิว ที่มา: Word Press Portable นายวาที ศรีผิว, 2556
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
12 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
18
19
ภาพที่ 10 แสดงภาพของ Word Press Portable นายวาที ศรีผิว ที่มา: Word Press Portable นายวาที ศรีผิว, 2556
ขั้นตอนการเรียนรู้การใช้งาน Word Press Portable หมายเลข 18 ส่วนนี้คือ widgets ของ Header โดยสามารใส่ภาพส่วนหัว ซึ่งของภาพขนาด อยู่ที่ 1000 x 450 หมายเลข 19 จากนั้นทาตามขั้นตอนเดิมของการใส่ภาพด้านข้างเมนู โดยนา Html มาวาง
ภาพที่ 11 แสดงภาพส่วนหัวของ Word Press Portable นายวาที ศรีผิว ที่มา: Word Press Portable นายวาที ศรีผิว, 2556
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
13 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
กรณีนี้สามารถใช้ได้กับทุกสัดส่วนของเว็บไซต์เพียงแต่ต้องทาการศึกษาเรียนรู้การใช้งานของ Theme ที่เราดาวน์โหลดมาให้ดี เพื่อจะได้เว็บไวต์ในแบบที่เราต้องการ ในส่วนต่อไปนี้จะเป็นในส่วน การอธิบายการเขียนบทความเนื้อหาเว็บไซต์ 21 20 22
ภาพที่ 12 แสดงภาพของ Word Press Portable นายวาที ศรีผิว ที่มา: Word Press Portable นายวาที ศรีผิว, 2556
ขั้นตอนการเรียนรู้การใช้งาน Word Press Portable หมายเลข 20 เนื้อหาบล็อก สามารถเพิ่มเรื่องราวในส่วนที่เราต้องการนาเสนอในเว็บไซต์ได้ หมายเลข 21 ปุ่มเพิ่มบทความใหม่ โดยสามารถคลิกได้ที่ปุ่มนี้เวลาต้องการสร้างเนื้อหา เรื่องราวใหม่ในหน้าเว็บไซต์ หมายเลข 22 แสดงรายชื่อบทความทั้งหมดของเว็บไซต์ของเรา สามารถทาการลบหรือเข้า ไปแก้ไขได้เสมอ
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
14 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
เนื้อหาบทความส่วนใหญ่จะอยู่ที่ขนาด 600 โดยประมาณ ฉะนั้นเมื่อเราต้องการแทรก รูปภาพเข้าไปในบทความ เราต้องทาขนาดรูปภาพให้ได้ตาม Theme ที่เราดาวน์โหลดมา
ภาพที่ 13 แสดงภาพบทความของ Word Press Portable นายวาที ศรีผิว ที่มา: Word Press Portable นายวาที ศรีผิว, 2556
ถ้าต้องการปรับแต่งแก้ไขในส่วนที่อยู่นอกเหนือจาก Theme ที่มีมาสามารเข้าไปแก้ไขได้ที่ root – wordpressthaiedition - wp-content – themes - เลือก theme แล้วทาการปรับแก้ไขใน ส่วนต่างๆได้ หรือถ้าต้องการปรับแก้ไขทั้งตัวอักษรที่ใช้ หรือขนาดตัวอักษร สามารถเข้าไปได้ที่ root – style โดยจะเป็นการใส่โค๊ดในส่วนต่างๆ ได้ง่ายขึ้น ทั้งนี้ขึ้นอยู่กับการศึกษาวิธีการเขียนโค๊ด และปรับเปลี่ยนขนาดอักษรต่างๆ ให้แม่นยามากขึ้นจึงจะได้เว็บไซต์ในแบบที่เราต้องการ
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
15 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
ภาพที่ 14 แสดงภาพ Word Press Portable นายวาที ศรีผิว ที่มา: Word Press Portable นายวาที ศรีผิว, 2556
ทั้งนี้คือการแนะแนวการใช้งานเบื้องต้นของ word press portable usb โดยสังเขป อาจมี บางส่วนที่ไม่ได้แนะนา หากผิดพลาดประการใดขออภัยมา ณ ที่นี้ด้วย
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556
16 เอกสารรายงานสรุปการใช้งาน Word press ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์
รายงานสรุปวิชา : ARTI3319 เทคโนโลยีเพื่อการออกแบบนิเทศศิลป์ รายงาน : การเรียนรู้การใช้งาน Word Press Portable USB จัดทาโดย นายวาที ศรีผิว รหัสนักศึกษา 5211308241 กลุ่มเรียน 201 คณะมนุษยศาสตร์และสังคมศาสตร์ สาขาวิชาออกแบบนิเทศศิลป์ Contact E-mail: wateesripwe@gmail.com Publish Google plus: https://plus.google.com/107205725546907893337/posts โดย นายวาที ศรีผิว 22 กันยายน 2556
จัดทาโดย นายวาที ศรีผิว วันอาทิตย์ 22 กันยายน 2556