Theme Design and Customisation For WordPress Thai Edition Wordpress Thai Academy
By Naruepon Chumsoongnern
การออกแบบปรับแต่งชุดรูปแบบกราฟิกสาหรับโปรแกรม ระบบล๊อกเวิร์ดเพลส ไทยอิดิชั่น : ชุดเวิร์ดเพลสไทย อคาเดมี่ Theme Design and Customisation for WordPress Thai Edition : Wordpress Thai Academy นาเสนอโดย นาย นฤพนธ์ ฉ่าสูงเนิน รหัส 5111302294 กลุ่มเรียน 101 e-mail narueponchumsoongnern@gmail.com websites https://sites.google.com/site/narueponarti3319/
คานา รายงานเล่มนี้จัดทาเพื่อ อธิบายหลักและขั้นตอนการทา Web Theme โดยรายงานเล่มนี้ เลือกใช้ โปรแกรมของ Wordpress ในขั้นตอนการออกแบบ Theme เพราะสะดวกและมีคนใช้ อย่างแพร่หลาย ผู้จัดทามีความหวังอย่างยิ่งว่า ผู้อ่านได้ประโยชน์จากรายงานเล่มนี้ไม่มากก็น้อย และหากผิดพลาดประการใด ผู้จัดทาขออภัยไว้ ณ.ที่นี้ด้วย
นาย นฤพนธ์ ฉ่าสูงเนิน ผู้จดั ทา
สารบัญ เนื้อเรื่อง
หน้า
แนวคิดในการออกแบบ
1
วิธีการใช้งานเบื้อต้น
1
- 1.เปิดโปรแกรมระบบจาลองแม่ขา่ ยบริการเว็บไซด์แบบเคลื่อนที่
1
- 2 เข้าสู่หน้าเว็ปไซด์ของ USBWeb server
2
- 4.จะเข้าสูห่ น้าจอ Log in
3
- 5. เข้าสู่ระบบไซด์ของ WordPress
4
- 6. เข้าสู่หน้าจอการจัดการระบบของ USB Word Press
4
- 7 ส่วนของการแก้ไข Theme
5
สรุปการออกแบบ Theme
6-7
ภาพตัวอย่างต้นแบบเว็บไซด์ออกแบบเองและได้เสร็จเรียบร้อย
8
ที่มาในการออกแบบ,ประโยชน์ที่ได้รบั ,โจทย์และวัตถุประสงค์
9
เนื้อหา,สรุปผลการออกแบบ,ปัญหาทีพ่ บ
10
Theme Design แนวคิดในการออกแบบ ชื่นชอบความเรียบง่ายดูสบายตา จึงอยากให้ Head มีความเรียบง่ายดูแล้วเกิดความสบาย สายตาและออกแบบพื้นสี Blackground เป็นสีขาวเพื่อทาให้ front มองเห็นได้ชัดเจนและ เนื้อที่ Page Content เพื่อใส่บทความและเนื้อหา ข้อมูลต่างๆให้ตรงกับรูปแบบ Theme ที่ใช้
วิธีการใช้งานเบื้อต้น 1.เปิดโปรแกรมระบบจาลองแม่ข่ายบริการเว็บไซด์แบบเคลื่อนที่ WordPress Thai 3.0.4 Portable โดย ผศ.ประชิด ทิณบุตร ดับเบิ้ลคลิกไฟล์ชื่อ USB Webserver เพื่อเปิด ระบบบริการฐานข้อมูลก่อนเมื่อปรากฏหน้าต่างของระบบ USB Webserver 8.0 แล้วให้คลิก ปุ๋มคาสั่งต่างๆ ตามที่ท่านต้องการใช้งานหรือจัดการระบบปุ๋มด้านซ้าย ความหมายการใช้งานคือ
1
1.1ปุ๋ม Root dir กรอบสีเขียว – เปิดโฟร์เดอร์ที่จัดเก็บฐานข้อมูลรูปภาพของเว็บไซค์ 1.2ปุ๋ม Localhost กรอบสีเหลือง – ความหมายของ Localhost คือใช้ชื่อเรียกเครื่องคอมพิวเตอร์ ของเราหรือ ip คือ 127.0.0.1 คลิกเข้าสู่ตาแหน่งที่อยู่หรือชื่อ URL เป็นหน้าแรกของส่วนที่เราจะ เข้าไปจัดการหน้าเว็บไซด์โดยผ่านทางพอร์ท 8080 (Port : 8080) โดยแสดงชื่อในเว็บบราวเซอร์ คือ http://localhost : 8080 หรือ http://12.0.0.1.8080 ก็สามารถเข้าได้เข้าได้เช่นกัน
2.เมื่อกดปุ๋ม Localhost จะเข้าสู่หน้าเว็ปไซด์ของ USBWeb server : WordPress Thai Edition และกดสั่งทีแ่ สดงไว้ในกรอบสีสัน ด้านล่างเพื่อเข้าสู่การจัดการเว็บไซด์ของ WordPress ดังภาพด้านล่าง (ต่อหน้าที่ 3 )
2
4.จะเข้าสู่หน้าจอ Log in เข้าสู้ระบบโดยการใส่ User Name คือ admin และ Password คือ admin เช่นเดียวกันดังภาพด้านล่าง
3
5. เข้าสู่ระบบไซด์ของ WordPress กดเข้าไปที่ศูนย์จัดการระบบเพื่อแก้ไขส่วนต่างๆ ของบล๊อก ดังภาพด้านล่าง
6. เข้าสู่หน้าจอการจัดการระบบของ USB Word Press การจัดการบล๊อกของเราทาเหมือน กับ USB Word Online เพียงแต่การออกแบบธีม การลงรูป Header ส่วนหัวการลงรูปด้าน หลังรูปต่างๆของเรานั้น
4
จะต้องเซฟรูปนั้นไว้ใน Foler root เช่น C://WordPressThai 3.0.4 Postble\root\ Images หรือ Folder เดียวกันกับ Folder USB Webserver ของเราก่อนจึงจะสามารถ อัพโหลดรูปลงบล๊อกได้
7 ส่วนของการแก้ไข Theme ต่างๆสามารถทาได้ด้วยการเปลี่ยนโค๊ดเช่นเดียวกับการใช้ DreamWeaver หรือ Notepad หรือสามารถใช้ Google Chrome ดูโค้ดได้ เช่นกัน ดังภาพด้านล่าง - ในส่วนหัว Header มีขนาด 940x198 px - ในส่วนพื้นหลัง Background มีขนาด 1265x930 px -ในส่วนของพื้นหลังของ Page Content เปลี่ยนโดยการแก้ไขโค้ด
5
6
ภาพตัวอย่างหลังแก้ไขโค้ดสีในส่วนของ Page Confent ที่เป็นสีขาว
สรุปการออกแบบ Theme นี่คือต้องการให้ดูเรียบง่ายสบายตาและเน้นความเรียบง่ายและชัดเจน
7
การออกแบบปรับแต่งชุดรูปแบบกราฟิกสาหรับโปรแกรม ระบบล๊อกเวิร์ดเพลส ไทยอิดิชนั่ : ชุดเวิรด์ เพลสไทย อคาเดมี่ นาเสนอโดย นาย นฤพนธ์ ฉ่าสูงเนิน รหัสนักศึกษา 5111302294 กลุ่มเรียน 101 ภาพตัวอย่างต้นแบบเว็บไซด์ออกแบบเองและได้เสร็จเรียบร้อย
ชื่นชอบความเรียบง่ายดูสบายตา จึงอยากให้ Head มีความเรียบง่ายดูแล้วเกิดความสบาย สายตาและออกแบบพืน้ สี Blackground เป็นสีขาวเพื่อทาให้ front มองเห็นได้ชัดเจนและ เนื้อที่ Page Content เพื่อใส่บทความและเนื้อหา ข้อมูลต่างๆให้ตรงกับรูปแบบ Theme ที่ใช้
8
ที่มาในการออกแบบ ปัจจุบันการออกแบบมีผู้ใช้อินเตอร์เน็ต มากมายและแพร่หลายแต่ไม่มีความรู้เรื่องการทา เว็บไซด์หรือทา Sites นี้จึงเป็นแรงผลักดันให้ทา WordPress ขึ้นมาเพื่อให้บุคคลภายนอก ทีไ่ ม่เข้าใจในการทา หรือทาไม่เป็นได้ลองทา Sites ของตัวเองดู
โจทย์และวัตถุประสงค์ 1.เพื่อการเรียนรู้วิธีการใช้โปรแกรม WordPressThai 3.0.4 Postble 2.เพื่อได้เรียนรู้ในการออกแบบหน้าเว็บบล๊อก WordPressThai 3.เพื่อได้พัฒนาการออกแบบของตนเองในการใช้งานโปรแกรม Adobe Photoshop
ประโยชน์ที่ได้รับ 1.ได้ความรู้เพิ่มเติมในการใช้โปรแกรม WordPressThai 3.0.4 Postble 2.ได้พฒ ั นาการเรียนรู้ในการออกแบบหน้าเว็บบล๊อก WordPressThai 3.ได้พฒ ั นาการออกแบบของตนเองในการใช้งานโปรแกรม Adobe Photoshop
9
เนื้อหา ยินดีตอ้ นรับสู่เวิร์ดเพรสเว็บบล๊อก My Blog of Art นาย นฤพนธ์ ฉ่าสูงเนิน รหัส 5111302294 นักศึกษาชั้นปีที่ 3 สาขาวิชา ศิลปกรรม (ออกแบบนิเทศศิลป์) มหาวิทยาลัยราชภัฏจันทรเกษม เวิร์ดเพรสเว็บบล๊อกนีอ้ ยู่ในวิชา เทคโนโลยีเพือ่ การออกแบบนิเทศศิลป์ รหัสวิชา ARTI 3319 อาจารย์ผู้สอน ผศ.ประชิด ทิณบุตร นาย นฤพนธ์ ฉ่าสูงเนิน (Naruepon Chumsoongnern) สรุปผลการออกแบบ ชื่นชอบความเรียบง่ายดูสบายตา จึงอยากให้ Head มีความเรียบง่ายดูแล้วเกิดความสบาย สายตาและออกแบบพืน้ สี Blackground เป็นสีขาวเพื่อทาให้ front มองเห็นได้ชัดเจนและ เนื้อที่ Page Content เพื่อใส่บทความและเนื้อหา ข้อมูลต่างๆให้ตรงกับรูปแบบ Theme ที่ใช้ ปัญหาที่พบ เนื่องจากเป็นโปรแกรมการทางานครั้งแรกกับโปรแกรม WordPressThai 3.0.4 Postble
การใช้เวลาศึกษานั้นใช้เวลานานพอสมควร และยังมีปัญหาเรื่องการใช้โค้ดเพระต้องหาโค้ดและลอง ผิดลองถูก นานพอสมควรกว่าจะเข้าใจ 10