คำ�นำ�

รายงานเล่มนี้จัดทำาขึ้นเพื่ออธิบายหลักและขั้นตอนวิธีทำาWebThemeโดย

รายงานเล่มนี้เลือกใช้โปรแกรมของWordpressในการออกแบบThemeเพราะ

สะดวกและมีคนใช้อย่างแพร่หลายผู้จัดทำามีความหวังอย่างยิ่งว่าผู้อ่านจะได้

ประโยชน์จากรายงานเล่มนี้ไม่มากก็น้อยและหากผิดพลาดประการใดผู้จัดทำา

ขออภัยไว้ณที่นี้ด้วย

จิระพงษ์สมบูรณ์ทรัพย์

ผู้จัดทำา

ส�รบัญ

เรื่อง หน้า

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

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

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

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

ขั้นตอนการออกแบบ2-7

สรุปผลการออกแบบและปัญหาที่พบ8

อ้างอิง9

1

นายจิระพงษ์สมบูรณ์ทรัพย์

รหัสนักศึกษา5111302211

สาขาวิชาศิลปกรรม(ออกแบบนิเทศศิลป์)

คณะมนุษยศาสตร์และสังคมศาสตร์

มหาวิทยาลัยราชภัฏจันทรเกษม

Tel:086-5652836

GoogleEmail:jirapong.js@gmail.com

Website

http://www.facebook.com/hazji

http://jirapongjs.wordpress.com

https://sites.google.com/site/jirapongarti3319/

2

แนวคิดในก�รออกแบบ :

ชื่อTheme:SneakerManiac

การออกแบบธีมนี้เลือกใช้ธีมที่มีสีเรียบง่ายเพื่อที่จะ

ไม่แย่งความเด่น

จากตัวเนื้อหาซึ่งเป็นรองเท้าที่มีสีฉุดฉาดเป็นส่วน

ใหญ่และใส่รองเท้าผ้าใบด้านข้างเพื่อจะได้มีความ

หลากหลายอีกด้วย

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

1.เพื่อเรียนรู้การจัดการกับ

WordPressThai3.0.4Portable

2.เพื่อฝึกฝนการออกแบบเว็บไซต์

โปรแกรมที่ใช้ง�น:AdobePhotoshop,

WordPressThai3.0.4Portable

3

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

1.เริ่มต้นการดาวน์โหลดดาวน์โหลดโปรแกรมติดตั้ง

เวิร์ดเพรสภาษาไทยฉบับอคาเดมี่เพื่อการศึกษาเรียนรู้

ของคนไทยเวอร์ชั่น3.0.4จากเว็บwordpressthai.org

เมื่อได้ไฟล์Zipให้ทำาการแตกไฟล์

4

2.เมื่อแตกไฟล์แล้วให้เปิดเข้าไปที่โฟลเดอร์เมื่อเข้าไป

แล้วให้คลิ๊กที่ตัวโปรแกรมจะขึ้นเป็นหน้าต่างตาม

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

ส่วนRootdirคือส่วนที่เอาไว้สำาหรับเก็บไฟล์ต่างๆ

เมื่อทำาการอัพโหลด

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

สีแดง

5

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

5.เมื่อทำาการล็อกอินแล้วคลิ๊กเข้าไปจะปรากฎหน้าต่าง

ดังรูปจากนั้นเลือกธีมที่จะทำาการแก้ไข

6

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

Photoshopขนาด940x198Resolution72เมื่อ

สร้างเสร็จแล้วให้เซฟเป็นไฟล์JPEGขนาดจริง1

อันและเซฟเป็นขนาด230x48อีก1อันโดยเซฟ

ไปที่wordpressthaiedition>wp-content>themes>

twentyten>images>headers(เวลาเซฟให้เซฟเป็นชื่อ

เดียวกับต้นฉบับเพื่อที่จะแทนที่ต้นฉบับ)

7

7.เมื่อเซฟเสร็จให้มาเปิดดูที่หน้าเว็บกดBrowse

เพื่อเรียกไฟล์ที่เราเซฟไว้แล้วกดส่งไฟล์

8.หากต้องการเปลี่ยนสีพื้นหลังให้กดที่สีพื้นหลังแล้ว

เลือกสีพื่นหลังหรือกดกดBrowseเพื่อเรียกไฟล์ที่

เราเซฟไว้แล้วกดส่งไฟล์หากต้องการใช้รูปเป็นพื้นหลัง

8

9.แก้ไขเมนูด้านข้างโดยกดที่บล็อกเมนู

ข้าง:Widgetsแล้วลากเมนูที่เราต้องการไปวางไว้

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

ด้านซ้ายหรือแถบด้านขวา

9

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

จากการออกแบบสมมารถสรุปได้ว่าการออก

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

มองดูสบายตาแต่เพื่อไม่ให้เรียบจนเกินไปจึง

ใส่รองเท้าผ้าใบหลากหลายสีไว้ด้านข้างของหน้า

เวป

ปัญห�ที่พบ

เนื้องจากผู้จัดทำาไม่มีความรู้เรื่องโค้ดในการ

เขียนเวปทำาให้การเปลี่ยนแปลงสีและรูปแบบ

มีอย่างจำากัดจึงควรศึกษาภาษาและโค้ดในการ

เขียนเวปเพิ่มเพื่อประสิทธิภาพในการบริหารเวป

ไซด์และจัดตีมต่อไป

10

อ้�งอิง

1.http://sneakermaniac.com/

2.http://www.wordpressthai.com/download-word-

press-thai-edition/