Page 1

Theme Design and Customisation for WordPress Thai Edition : Wordpress Thai Academy

By Kanyapron Donmon

ARTI : 3319 Technology for Visual Communication Design


คานา รายงานเล่มนี้จดั ทาขึ้นเพื่อ อธิบายหลักการทางานและขั้นตอนการทา Web Theme โดยรายงานเล่มนี้เลือกใช้โปรแกรมของ Wordpress ในการออกแบบ Theme เพราะสะดวกและมีคนใช้งานอย่างแพร่หลาย ผู้จัดทามีความหวังอย่างยิ่งว่า ผู้อ่านจะได้รบั ประโยชน์จากรายงานเล่มนี้

ไม่มากก็น้อยและหากผิดพลาดประการใด ผู้จัดทาขออภัยไว้ ณ ที่นี้ด้วย

นางสาว กัญญภรณ์ ดอนมอญ ผู้จดั ทา


สารบัญ เนื้อเรื่อง

หน้า

ประวัติผู้จัดทา

1

แนวคิดในการออกแบบ

2

โจทย์และวัตถุประสงค์

2

โปรแกรมที่ใช้งาน

2

ขั้นตอนการออกแบบ

2-8

สรุปผลจากการออกแบบที่พบ

9

อ้างอิง

10


นางสาว กัญญภรณ์ ดอนมอญ รหัสนักศึกษา 5111312004 สาขาวิชา ศิลปกรรม (ออกแบบนิเทศศิลป์) คณะมนุษยศาสตร์และสังคมศาสตร์ มหาวิทยาลัยราชภัฏจันทรเกษม

e-mail kanyaprondonmon@gmail.com Website http://kanyapron.wordpress.com/ https://sites.google.com/site/kanyapronarti3319/wordpress https://sites.google.com/site/kanyapronarti3319/home 1


แนวความคิดในการออกแบบ การออกแบบธีมนี้เลือกใช้ธีมที่มสี ีเรียบง่าย เพื่อที่จะไม่แย่งความโดดเด่นจากตัวเนื้อหาซึ่ง เป็นการนาเสนอผลงานของการออกแบบเพื่อจะได้โชว์ผลงานที่ทางานไว้ในบล๊อก โจทย์และวัตถุประสงค์ 1. เพื่อเรียนรู้การจัดการกับ WordPress Thai 3.0.4 Portablo 2. เพื่อฝึกฝนการออกแบบเว็บไซด์ โปรแกรมที่ใช้งาน Adobe Photoshop WordPress Thai 3.0.4 Portablo

2


ขั้นตอนการออกแบบ Wordpress Theme

1. เริ่มต้นการดาวน์โหลดโปรแกรมติดตั้ง เวิร์ดเพรสภาษาไทย ฉบับอคาเดมี เพื่อเป็นการศึกษาเรียนรู้ของ คนไทยเวอร์ชั่น 3.0.4 จากว็บ Wordpressthai.org เมื่อได้ ไฟล์ Zip ให้ทาการแตกไฟล์ 3


2. เมื่อแตกไฟล์ แล้วให้เปิดที่โฟร์เดอร์ เมื่อเข้าไป แล้วให้คลิกที่ตัวโปรแกรม จะขึ้นเป็นหน้าต่างตามนี้ จากนัน้

คลิกเข้าไปที่ Localhost เพื่อเข้าสู้หน้าเว็บจาลองส่วน

Root dir คือ ส่วนที่เอาไว้ สาหรับเก็บไฟล์ ต่างๆเมื่อโหลด

3 เมื่อเข้า Localhost แล้วจะมีหน้าต่างขึ้นมาให้คลิกที่ ลิ้งค์สีแดง

4


4.คลิกเพื่อเข้าสู่ระบบล๊อกอิน admin และรหัส admin


5.เมื่อทาการล๊อกอินบล๊อกเข้าไป จะปรากฏหน้าต่าง ดังรูปจากนั้นเลือกธีมที่จะทาการแก้ไข

6. เริ่มสร้างส่วนหัสโดยโปรแกรม Adobe Photoshop

ขนาด 940x198 Resolution 72 เมื่อสร้างเสร็จแล้วให้เซฟเป็น ขนาด 230x48 อีก 1 อันโดยเซฟ ไปที่ Wordpressthai>wpContent>thems>twentyten>images>headers (เวลาเซฟให้เซฟชื่อเดียวกับต้นฉบับเพื่อที่จะแทนต้นฉบับ 6


7เมื่อเซฟเสร็จแล้วให้เปิดดูที่หน้าเว็บ Browse เพื่อเรียก ไฟล์ที่เราเซฟไว้ แล้วกดส่งไฟล์ 8.หากต้องการเปลี่ยนพื้นหลังให้กดที่ สีพื้นหลังแล้วเลือกสี พื้นหลังหรือกด Browse เพื่อเรียกไฟล์ที่เราเซฟไว้แล้ว กดส่งไฟล์หากต้องการใช้รูปพื้นหลัง 9.แก้ไขเมนูด้านข้างโดยกดที่ บล๊อกเมนูด้านข้าง Widgets

แล้วลากเมนูที่เราต้องการไปวางไว้แทบด้านขวาตามที่เราต้องการ ไม่ว่าจะเป็นแถบ ด้านซ้ายหรือแถบด้านขวา

7


สรุปผลการออกแบบ

จากการออกแบบสามารถสรุปได้ว่าการออกแบบตีมในครั้งนี้ เน้นสีขาวเป็นหลักเพื่อจะได้มองดูสบายตา แต่เพื่อไม่ให้เรียบ จนเกินไป จึงนาหัวที่มีสีสันสดุดตาเล็กน้อย


ปัญหาที่พบ

เนื่องจากผู้ทาไม่มีความรู้เรื่องโค๊ดในการเขียนเว็บ ทาให้การเปลี่ยนแปลงสีและรูปแบบมีอย่างจากัด จึงต้องควรศึกษาเพิ่มเติมในการเขียนเว็ปเพื่อประสิทธิ ถาพในการทางานครั้งต่อๆไป ในการบริหารเว็บไซด์และตีม

อ้างอ้าง

http://kanyapron.wordpress.com/ https://sites.google.com/site/kanyapronarti3319/wordpress https://sites.google.com/site/kanyapronarti3319/home


9.แก้ไขเมนูด้านข้างโดยกดที่ บล๊อกเมนูด้านข้าง Widgets แล้วลากเมนูที่เราต้องการไปวางไว้แทบด้านขวาตามที่เราต้องการ ไม่ว่าจะเป็นแถบ ด้านซ้ายหรือแถบด้านขวา

WORDPRESS THEME DESING-Kanyapron-ARTI3319  

Final project for Visual communication design class by Kanyapron Donmon 5111312004

Read more
Read more
Similar to
Popular now
Just for you