Page 1
Page 2
คำนำ บล็อก (BLOG) คือเว็บไซต์ที่เจ้าของ หรือ admin สามารถบันทึกเรื่องราวของตนเองลง ใน เว็บได้ตลอดเวลา การสร้างเว็บบล็อก สามารถทำได้ง่ายๆด้วยตัวเอง ไม่ซับซ้อน และภายระบบการ จัดการบริหารเว็บไซต์พื้นฐานให้ เช่นเครื่องมือสำหรับเขียนเรื่อง โพสรูป จัดหมวดมู่ และลูกเล่นอื่นๆ รายงานเล่มนี้ จัดทำขึ้นเพื่อรวบรวมหลักฐาน กระบวนการศึกษาและการตกแต่งเว็บบล็อก Wordpress อันเป็นเนื้อหาที่ผ่านกระบวนการเรียนการ สอนในรายวิชา เทคโนโลยีเพื่อการออกแบบ นิเทศศิลป์ ( Arti3319 ) สอนโดย ผศ.ประชิด ทิณบุตร หากเนื้อหาในรายงาน มีความผิดพลาดประ การใด ทางผู้จัดทำ ต้องขอ อภัย มา ณ ที่นี้ด้วย นางสาวจารุรัตน์ น่าเยี่ยม ผู้จัดทำ
Page 3
สารบัญ หน้า 1. รู้จักกับ Wordpress 2. การศึกษาจัดการ และปรับแต่ง Wordpress - การสมัครใช้งาน wordpress - วิธีเปลี่ยนภาษาใน wordpress - วิธีตัดหน้าข้อความที่โชว์ - วิธีเปลี่ยน Header - การจัดรูปภาพและเพิ่มขนาดของภาพ - วิธีเพิ่ม widget ใน wordpress - การทำภาพเคลื่อนไหวสำหรับตกแต่ง 3. สรุปการเรียนรู้ Wordpress
4 5 5 7 10 11 13 15 16 19
Page 4
รู้จักกับ Wordpress WordPress คืออะไร WordPress เป็น open source web software ที่เราสามารถติดตั้งบนเว็บ server ของ เราเพื่อสร้างเว็บไซต์, blog หรือ community ตอนเริ่มแรก WordPress เป็นเครื่องมือไว้สำหรับ สร้าง blog แต่ได้รับการพัฒนามาเรื่อย ๆ จนสามารถสร้างเป็นเว็บไซต์ หรือ เว็บ community ได้ แล้ว โดยมีระบบจัดการบทความ หรือ Content Management System (CMS) ทำให้ง่ายต่อการใช้ งาน ซึ่ง WordPress สร้างขึ้นโดย Matt Mullenweg และ Mike Little ในปี 2003 นับว่ามีการพัฒ นามาถึง 9 ปีแล้ว และเมื่อเริ่ม search หาคำว่า WordPress ก็จะทำให้หลายคนที่เริ่มต้นงงต่ออีกว่า ทำไมมันมี WordPress.com กับ WordPress.org ละ สองอย่างนี้แตกต่างกันอย่างไร 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 ที่เราต้อง การ ในราคาที่เราต้องการได้ ไม่ถูกจำกัดอยู่เพียงที่เดียว ข้อมูลจาก http://www.wordpress.in.th/ เข้าถึงเมื่อ กุมภาพันธ์ 2556
Page 5
การศึกษาจัดการและปรับแต่ง Wordpress วิธีการสมัครใช้งาน Wordpress 1.คลิก Get Started
2.กรอกข้อมูลรายละเอียดให้ครบถ้วน
Page 6
3.เมื่อกรอกข้อมูลเสร็จสิ้น เลือก Sign up for Basic เป็นการเปิดใช้งานในรูปแบบไม่เสียเงิน หลังจากนั้นรอรับ email ที่ทางระบบจะส่งมาให้ เพื่อยืนยันการใช้งาน
4. คลิกยืนยันการใช้งานใน email ที่ได้รับ เป็นอันเสร็จขั้นตอน
ภาพ 1-4 แสดงขั้นตอนวิธีการสมัครใช้งาน Wordpress ที่มา : จารุรัตน์ น่าเยี่ยม,2556
Page 7
วิธีการเปลี่ยนภาษาใน Wordpress ให้เป็นภาษาไทย เพื่อสะดวกต่อการเริ่มใช้งานเบื้องต้น ขั้นตอนที่ 1 คลิกไอคอน W บนหน้า Wp-admin หรือหน้าควบคุมของ Wordpress
ขั้นตอนที่ 2 จากขั้นตอนแรก ่ที่หน้าหนักของ Wordpress.com ให้คลิกสัญลักษณ์ รูปเฟือง
Page 8
หลังจากทำการคลิกเข้ามา การแสดงผลของหน้าจอ Website จะเป็นดังนี้
ขั้นตอนที่ 3 คลิกเลือกภาษาในช่อง Language กด Save เป็นอันเสร็จสมบูรณ์
Page 9
ภาพ 5-10 แสดงขั้นตอนวิธีเปลี่ยนภาษาใน wordpress เบื้องต้น ที่มา : จารุรัตน์ น่าเยี่ยม,2556
Page 10
วิธีตัดหน้าข้อความที่โชว์ เพื่อไม่ให้ข้อความยาวจนเกินไปบนหน้า Blog
ภาพที่ 11-12 วิธีตัดหน้าข้อความที่โชว์ใน Blog ที่มา : จารุรัตน์ น่าเยี่ยม , 2556
Page 11
วิธีเปลี่ยน Header การเปลี่ยน header นั้น สิ่งที่จำเป็นคือต้องทราบขนาดของ header ที่เราจะใช้บนหน้า blog ของเรา ให้มีขนาดพอดี จึงจะดูสวยงาม โดยการเปลี่ยน header บน wordpress นั้น สามารถทำได้โดย
Page 12
ภาพที่ 13 – 15 แสดงขั้นตอนการเปลี่ยน Header ของ Blog หมายเหตุ ** ขนาดของ header ต้องดูจากข้อความตรงแถบด้านล่างของรูปภาพ หลังจากนั้น เมื่อเราจะทำการเพิ่ม widget ให้กับหน้า blog ของเรา สามารถทำได้โดย ที่มา : จารุรัตน์ น่าเยี่ยม , 2556
Page 13
การจัดรูปภาพและเพิ่มขนาดของภาพ ขั้นตอนที่ 1 คลิกที่รูปภาพ แล้วเลือกไอคอนแก้ไขรูปภาพบนมุมซ้ายบน
ขั้นตอนที่ 2 เลือกปรับการจัดหน้าของรูปภาพ
Page 14
ขั้นตอนที่ 3 เลือกการตั้งค่าขั้นสูง แล้วสามารถปรับขนาดของภาพได้ ตามความสมดุล
การแสดงผล
ภาพที่ 16 - 19 แสดงวิธีการจัดรูปภาพและเปลี่ยนขนาดของภาพ ที่มา : จารุรัตน์ น่าเยี่ยม , 2556
Page 15
วิธีเพิ่ม widgets ใน wordpress
ภาพ 20 – 21 แสดงขั้นตอนการเพิ่ม widgets สำหรับ wordpress ที่มา : จารุรัตน์ น่าเยี่ยม , 2556
Page 16
การทำภาพเคลื่อนไหวสำหรับตกแต่งBlog ขั้นตอนที่ 1 เตรียมภาพสำหรับการเคลื่อนไหว ** เป็นภาพ inbetween ที่ปรับเปลี่ยนทิศทางของภาพไปทีละช็อตตามต้องการ
สังเกตการหมุนของกลีบดอกไม้ แล้วนำรูปทั้งหมดมาเรียงรูปไว้ใน Layer ของ photoshop
Page 17
ขั้นตอนที่ 2 ไปที่ Window เลือก Animation จะปรากฏหน้าต่างเหมือในภาพ
ขั้นตอนที่ 3 3.1 การใช้แถบ timeline สามารถลาก ยืด หรือหดได้ ตามความต้องการที่จะแสดงผลคิดเป็นวินาที 3.2 ** สังเกตกรอบด้านบนของ timeline จะมีกรอบเวลาครอบอยู่ สามารถเลื่อน เพิ่ม ลด ระยะเวลาของการแสดงผลได้ตามต้องการ
Page 18
ขั้นตอนที่ 4 การเซฟไฟล์ ให้ไปที่ File เลือก Save for web & devices
ขั้นตอนที่ 5 (สำคัญ) เลือกไฟล์นามสกุล = .gif จากนั้นปรับค่า Looping options ให้เป็น Forever เพื่อให้ภาพเคลื่อนไหวต่อเนื่องตลอด
ภาพที่ 22 – 27 แสดงขั้นตอนการทำภาพเคลื่อนไหวสำหรับแต่ง wordpress ที่มา : จารุรัตน์ น่าเยี่ยม , 2556
Page 19
สรุปการเรียนรู้ Wordpress Url : http://arti3319jarurat.wordpress.com/
Page 20
ภาพที่ 28 -30 แสดงภาพ สรุปรูปแบบหน้า Webblog ของ Wordpress ที่ตกแต่งตามการศึกษา ที่มา : จารุรัตน์ , 2556
Page 21
Page 22