คานา รายงานเล่มนี้จดั ทาขึ้นเพื่อเป็ นส่วนหนึ่งของรายวิชา เทคโนโลยีเพื่อการออกแบบ นิเทศศิลป์ ARTI 3319 เป็ นวิชาที่เกี่ยวข้องกับการนาเอาเทคโนโลยีเข้ามาประกอบกับ การออกแบบ ในการออกแบบและจักการทาหน้าเว็บบล็อกหรื อเว็บไซด์ WOordpress เราสามารถบันทึกเรื่ องราวต่างๆลงในบล็อกของเราและตกแต่งได้ตามที่ตอ้ งการ ผูส้ อนในรายวิชา เทคโนโลยีเพื่อการออกแบบนิเทศศิลป์ ผศ. ประชิด ทิณบุตร หากข้อมูลผิดพลาดประการใด ขออภัยไว้ ณ ที่น้ ีดว้ ยครับ
ผูจ้ ดั ทา นาย คทา เขนทอง
สารบัญ เรื่อง
หน้ า
1. ขั้นตอนการดาวน์ โหลดและติดตั้ง Wordpressthai3.6
1-3
2. ขั้นตอนการออกแบบพัฒนาเว็บ Themes แบบเดิม
3-4
3. ขั้นตอนการออกแบบพัฒนาเว็บ Themes ทีต่ ิดตั้งใหม่
5-7
4. ขั้นตอนการแก้ไขรู ปแบบ ( รู ปภาพ,พืน้ หลัง ) หน้ าเว็บ Theme
7-12
5. การออกแบบหน้ า Admin ( เข้ าสู่ ระบบ )
13-15
6. ขั้นตอนการจัดเรียงและออกแบบการเพิม่ เมนูบล็อกด้ านหลัง Widgets
16-19
7. ขั้นตอนการใส่ เนือ้ หาหน้ าบล็อก Wordpressthai
19-20
8. ขั้นตอนการใช้ โปรแกรม Notepad
21-25
ขั้นตอนการดาวน์ โหลดและติดตั้ง Wordpressthai 3.6 1.
เข้าไปที่เว็บ sourceforge.net แล้วเลือก WordPressThai 3.6 เลือกดาวน์โหลดลงเครื่ อง 1
2
2. เมื่อเราโหลดโปรแกรมเรี ยบร้อยแล้ว ให้แตกไฟร์โปรแกรม Wordpressthai 3.6 เพื่อจะเข้าใช้งาน ในขั้นตอนต่อไป 4
3
3. เมื่อเราจะเข้าไปใช้งานระบบให้เข้าที่ตวั usbwebserverจะเห็นหน้าต่างเล็กๆขึ้นมา ให้เลือกคาว่า Localhost
6
5
7
4. เราจะเห็นหน้าเว็บปรากฏขึ้น ให้เลือกคาว่า เข้าสู่ ระบบ
8
5. เมื่อคลิ้กเข้าสู่ ระบบจะปรากฏหน้าที่ให้ Log in ให้เราใส่ ชื่อ adminรหัสผ่าน admin แล้วเลือกคา ว่าเข้าสู่ ระบบ
9 10 0
11
0
1 1
ขั้นตอนการออกแบบพัฒนาเว็บ Themes แบบเดิม 1. แก้ไข Themesแบบเดิมที่มีจาก WordpressThaiโดยเข้าไปที่ Root dir ->wordpressthaiedition->wpcontent -> themes ->WorpressThai-Academy ->images จะปรากฏดังรู ปข้างล่างนี้
2. พอเราได้ทาการแก้ไขรู ้ในโปรแกรม Photoshop เสร็ จแล้ว ให้บนั ทึกทับรู ปภาพเดิมเลย จะปรากฏ ดังรู ปด้านล่างนี้
3. เมื่อติดตั้งเสร็ จพอเปิ ดหน้าเว็บ WordpressThaiจะปรากฏดังรู ปด้านล่างนี้
ขั้นตอนการออกแบบพัฒนาเว็บ Themes ทีต่ ิดตั้งใหม่ 1. เมื่อเข้ามาหน้าศูนย์จดั การระบบ ให้เลือก รู ปลักษณ์หน้าเว็บแล้วให้ ติ๊ก ในหมวดที่เราต้องการ แล้ว กดคาว่า ค้นหา
3 1
2
2. เราจะเจอหน้าที่ปรากฏ คือ มี Theme หลากหลายให้เลือกใช้งาน
4
3. จากนั้นเราก็คน้ หา Theme ที่เราต้องการ
5
4. เมื่อเราได้ Theme ที่เราเลือกแล้ว ก็คลิกเข้าไปแล้วจะปรากฏดังรู ปด้านล่าง ให้เลือกคาว่า ติดตั้ง
5. เมื่อติดตั้งเสร็ จแล้ว จะมีขอ้ ความให้เลือก คือ ดูแบบเสมือนจริ ง , เปิ ดใช้งาน และกลับไปที่ตวั ติดตั้งชุดรู ปแบบกราฟิ ก
6. เมื่อเราเลือกคาว่า เปิ ดใช้งาน จะปรากฏดังรู ปด้านล่างนี้
ขั้นตอนการแก้ไขรู ปแบบ ( รู ปภาพ,พืน้ หลัง ) หน้ าเว็บ Theme 1. เมื่อเปิ ดหน้านี้ข้ ึนมาแล้วให้เลือกคาว่า Root dir
1
2. เมื่อดับเบิ้ลคลิกเข้ามาแล้ว ให้เลือกคาว่า wordpressthaiedition
2
3. เมื่อดับเบิล้ คลิกเข้ามาแล้ว ให้เลือกคาว่าwp-content
3
4. เมื่อดับเบิ้ลคลิกเข้ามาแล้ว ให้เลือกคาว่า Theme
4
5. เมื่อดับเบิ้ลคลิกเข้ามาแล้ว ให้เลือกคาว่า Pandora
5
6. เมื่อดับเบิ้ลคลิกเข้ามาแล้ว ให้เลือกคาว่า Images
6
7. เมื่อดับเบิ้ลคลิกเข้ามาแล้ว จะเจอรู ปภาพต่างๆที่เราสามารถแก้ไข เพื่อจะเปลี่ยนรู ปให้เข้ากับความ ต้องการของเราได้เองตามสัดส่ วนของรู ปภาพเดิม
8. เปิ ดโปรแกรม Photoshop ขึ้นมา ไปที่ File > Place >WordPressThai 3.6 Portable-AcademyVersion > Root >wordpressthaiedition>wp-content > themes > Pandora > images > ban1
9. เมื่อเราแก้ไขภาพที่ตอ้ งการโชว์จากโปรแกรม Photoshop แล้ว บันทึกทับแทนภาพเดิมของ Features ที่ละรู ปดังภาพด้านล่าง
10. ก่อนจะเข้าเว็บ WordpressThaiจะปรากฏตัว Anti-Virus ให้เราเลือกคาว่า Unblock เพื่อป้ องกันไวรัส
11. เมื่อเราเปิ ดเข้ามาที่หน้าเว็บ WordpressThaiแล้ว จะปรากฏดังรู ปด้านล่างซึ่งเป็ นภาพสไลด์สมบูรณ์
การออกแบบหน้ า Admin ( เข้ าสู่ ระบบ )
1. ก่อนเข้าใช้งาน WordpressThaiต้องทาการเข้าสู่ ระบบ เราจึงได้ทาการเปลี่ยนแปลงปรับแต่งพื้นหลัง ให้เส้นของเราเอง
1
2. การจะแก้เราจะเข้าไปที่ Root die ->wordpressthaiedition ->wp-admin -> images
2
3. เปิ ดโปรแกรม Photoshop เพื่อแก้ไข รู ปภาพ
3
4. ทาการแก้ไขภาพตามความต้องการ
4
5. เมื่อแก้ไขเสร็ จแล้ว ให้ทาการบันทึกทับรู ปภาพพื้นหลังเดิม
5
6. เมื่อแก้ไขรู ปภาพเสร็ จและบันทึกเรี ยบร้อยแล้ว พอเปิ ดหน้าเว็บเพื่อจะเข้าไปยัง WordpressThaiจะ ปรากฏดังรู ปด้านล่างนี้
6
ขั้นตอนการจัดเรียงและออกแบบเมนูบล็อกด้ านข้ าง 1. เลือกทีค่ าว่ า รู ปลักษณ์ หน้ าเว็บ ->บล็อกเมนูข้าง Widgets
1 2
2. เลือกเมนู widgets เพิ่มเติมได้จากทางด้านซ้าย เมื่อเลือกรายการแล้วเมนูที่เลือกจะปรากฏอยูใ่ น แถวด้านข้างทางขวามือ
4
3
3. เมื่อเราเลือกเมนูที่ตอ้ งการแล้ว ก็จะได้หน้าเว็บที่เราเพิ่มเมนูดา้ นข้างที่สมบูรณ์ ดังภาพ
ขั้นตอนการใส่ เนือ้ หาหน้ าบล็อก WordPressThai 1. เข้าไปที่เนื้อหาบล็อก ->สร้างเนื้อหา:เรื่ องที่จะส่ งใหม่
1
2
2. สร้างเนื้อหาใหม่ตามที่เราต้องการแสดงให้หน้าบล็อกหลัก ดังรู ปด้านล่าง
3
3. เมื่อเราใส่ เนื้อหาบล็อกที่ตอ้ งการแล้วจะปรากฏหน้าตาที่สมบูรณ์ ดังรู ปด้านล่างนี้
ขั้นตอนการใช้ โปรแกรม Notepad 1. เริ่ มจากการเปิ ดโปแรม Notepad
2. ไปที่ File >>> เปิ ด Folder
3. คลิกที่ Folder ที่เราจะทาการแก้ไข
4. จากนั้นไปที่ Folder apache
5. เมือ่เปิ ดที่ Folder apache แล้วจากนั้นให้คลิกที่ Folder wordpressthaiedition
6. เลือกที่ Folder wp-content
7. เมื่อเข้ามาแล้ว ให้คลิกเลือกที่ Folder themes
8. เลือกไฟล์ themes ที่เราจะทาการแก้ไข
9. เมื่อเปิ ดไฟล์ themes เข้ามาแล้ว คลิกที่ style
10. จากนั้นจึงทาการแก้ไขงานที่เราต้องการ