WORDPRESS THEME DESING-JIRAPONG-ARTI3319
-
Upload
jirapong-chuenchom -
Category
Documents
-
view
221 -
download
0
description
Transcript of WORDPRESS THEME DESING-JIRAPONG-ARTI3319
![Page 1: WORDPRESS THEME DESING-JIRAPONG-ARTI3319](https://reader030.fdocuments.net/reader030/viewer/2022020420/568bdf401a28ab2034bc6723/html5/thumbnails/1.jpg)
![Page 2: WORDPRESS THEME DESING-JIRAPONG-ARTI3319](https://reader030.fdocuments.net/reader030/viewer/2022020420/568bdf401a28ab2034bc6723/html5/thumbnails/2.jpg)
คำ�นำ�
รายงานเล่มนี้จัดทำาขึ้นเพื่ออธิบายหลักและขั้นตอนวิธีทำาWebThemeโดย
รายงานเล่มนี้เลือกใช้โปรแกรมของWordpressในการออกแบบThemeเพราะ
สะดวกและมีคนใช้อย่างแพร่หลายผู้จัดทำามีความหวังอย่างยิ่งว่าผู้อ่านจะได้
ประโยชน์จากรายงานเล่มนี้ไม่มากก็น้อยและหากผิดพลาดประการใดผู้จัดทำา
ขออภัยไว้ณที่นี้ด้วย
จิระพงษ์สมบูรณ์ทรัพย์
ผู้จัดทำา
![Page 3: WORDPRESS THEME DESING-JIRAPONG-ARTI3319](https://reader030.fdocuments.net/reader030/viewer/2022020420/568bdf401a28ab2034bc6723/html5/thumbnails/3.jpg)
ส�รบัญ
เรื่อง หน้า
ประวัติผู้จัดทำา 1
แนวคิดในการออกแบบ 2
โจทย์และวัตถุประสงค์ 2
โปรแกรมที่ใช้งาน 2
ขั้นตอนการออกแบบ2-7
สรุปผลการออกแบบและปัญหาที่พบ8
อ้างอิง9
![Page 4: WORDPRESS THEME DESING-JIRAPONG-ARTI3319](https://reader030.fdocuments.net/reader030/viewer/2022020420/568bdf401a28ab2034bc6723/html5/thumbnails/4.jpg)
1
นายจิระพงษ์สมบูรณ์ทรัพย์
รหัสนักศึกษา5111302211
สาขาวิชาศิลปกรรม(ออกแบบนิเทศศิลป์)
คณะมนุษยศาสตร์และสังคมศาสตร์
มหาวิทยาลัยราชภัฏจันทรเกษม
Tel:086-5652836
GoogleEmail:[email protected]
Website
http://www.facebook.com/hazji
http://jirapongjs.wordpress.com
https://sites.google.com/site/jirapongarti3319/
![Page 5: WORDPRESS THEME DESING-JIRAPONG-ARTI3319](https://reader030.fdocuments.net/reader030/viewer/2022020420/568bdf401a28ab2034bc6723/html5/thumbnails/5.jpg)
2
แนวคิดในก�รออกแบบ :
ชื่อTheme:SneakerManiac
การออกแบบธีมนี้เลือกใช้ธีมที่มีสีเรียบง่ายเพื่อที่จะ
ไม่แย่งความเด่น
จากตัวเนื้อหาซึ่งเป็นรองเท้าที่มีสีฉุดฉาดเป็นส่วน
ใหญ่และใส่รองเท้าผ้าใบด้านข้างเพื่อจะได้มีความ
หลากหลายอีกด้วย
โจทย์ และวัตถุประสงค์ :
1.เพื่อเรียนรู้การจัดการกับ
WordPressThai3.0.4Portable
2.เพื่อฝึกฝนการออกแบบเว็บไซต์
โปรแกรมที่ใช้ง�น:AdobePhotoshop,
WordPressThai3.0.4Portable
![Page 6: WORDPRESS THEME DESING-JIRAPONG-ARTI3319](https://reader030.fdocuments.net/reader030/viewer/2022020420/568bdf401a28ab2034bc6723/html5/thumbnails/6.jpg)
3
ขั้นตอนก�รออกแบบ Wordpress Theme
1.เริ่มต้นการดาวน์โหลดดาวน์โหลดโปรแกรมติดตั้ง
เวิร์ดเพรสภาษาไทยฉบับอคาเดมี่เพื่อการศึกษาเรียนรู้
ของคนไทยเวอร์ชั่น3.0.4จากเว็บwordpressthai.org
เมื่อได้ไฟล์Zipให้ทำาการแตกไฟล์
![Page 7: WORDPRESS THEME DESING-JIRAPONG-ARTI3319](https://reader030.fdocuments.net/reader030/viewer/2022020420/568bdf401a28ab2034bc6723/html5/thumbnails/7.jpg)
4
2.เมื่อแตกไฟล์แล้วให้เปิดเข้าไปที่โฟลเดอร์เมื่อเข้าไป
แล้วให้คลิ๊กที่ตัวโปรแกรมจะขึ้นเป็นหน้าต่างตาม
นี้จากนั้นคลิ๊กเข้าไปที่Localhostเพื่อเข้าสู่หน้าเว็บจำาลอง
ส่วนRootdirคือส่วนที่เอาไว้สำาหรับเก็บไฟล์ต่างๆ
เมื่อทำาการอัพโหลด
3.เมื่อเข้าLocalhostแล้วจะได้หน้าต่างนี้ขึ้นมาให้คลิ๊กที่ลิ้ง
สีแดง
![Page 8: WORDPRESS THEME DESING-JIRAPONG-ARTI3319](https://reader030.fdocuments.net/reader030/viewer/2022020420/568bdf401a28ab2034bc6723/html5/thumbnails/8.jpg)
5
4.คลิ๊กเข้าสู่ระบบชื่อล็อกอินคือadminและรหัสadmin
5.เมื่อทำาการล็อกอินแล้วคลิ๊กเข้าไปจะปรากฎหน้าต่าง
ดังรูปจากนั้นเลือกธีมที่จะทำาการแก้ไข
![Page 9: WORDPRESS THEME DESING-JIRAPONG-ARTI3319](https://reader030.fdocuments.net/reader030/viewer/2022020420/568bdf401a28ab2034bc6723/html5/thumbnails/9.jpg)
6
6.เริ่มที่การสร้างส่วนหัสโดยใช้โปรแกรมAdobe
Photoshopขนาด940x198Resolution72เมื่อ
สร้างเสร็จแล้วให้เซฟเป็นไฟล์JPEGขนาดจริง1
อันและเซฟเป็นขนาด230x48อีก1อันโดยเซฟ
ไปที่wordpressthaiedition>wp-content>themes>
twentyten>images>headers(เวลาเซฟให้เซฟเป็นชื่อ
เดียวกับต้นฉบับเพื่อที่จะแทนที่ต้นฉบับ)
![Page 10: WORDPRESS THEME DESING-JIRAPONG-ARTI3319](https://reader030.fdocuments.net/reader030/viewer/2022020420/568bdf401a28ab2034bc6723/html5/thumbnails/10.jpg)
7
7.เมื่อเซฟเสร็จให้มาเปิดดูที่หน้าเว็บกดBrowse
เพื่อเรียกไฟล์ที่เราเซฟไว้แล้วกดส่งไฟล์
8.หากต้องการเปลี่ยนสีพื้นหลังให้กดที่สีพื้นหลังแล้ว
เลือกสีพื่นหลังหรือกดกดBrowseเพื่อเรียกไฟล์ที่
เราเซฟไว้แล้วกดส่งไฟล์หากต้องการใช้รูปเป็นพื้นหลัง
![Page 11: WORDPRESS THEME DESING-JIRAPONG-ARTI3319](https://reader030.fdocuments.net/reader030/viewer/2022020420/568bdf401a28ab2034bc6723/html5/thumbnails/11.jpg)
8
9.แก้ไขเมนูด้านข้างโดยกดที่บล็อกเมนู
ข้าง:Widgetsแล้วลากเมนูที่เราต้องการไปวางไว้
ที่แถบด้านขวาตามที่เราต้องการไม่ว่าจะเป็นแถบ
ด้านซ้ายหรือแถบด้านขวา
![Page 12: WORDPRESS THEME DESING-JIRAPONG-ARTI3319](https://reader030.fdocuments.net/reader030/viewer/2022020420/568bdf401a28ab2034bc6723/html5/thumbnails/12.jpg)
9
สรุปผลก�รออกแบบ
จากการออกแบบสมมารถสรุปได้ว่าการออก
แบบตีมในครั้งนี้เน้นสีขาวเป็นหลักเพื่อจะได้
มองดูสบายตาแต่เพื่อไม่ให้เรียบจนเกินไปจึง
ใส่รองเท้าผ้าใบหลากหลายสีไว้ด้านข้างของหน้า
เวป
ปัญห�ที่พบ
เนื้องจากผู้จัดทำาไม่มีความรู้เรื่องโค้ดในการ
เขียนเวปทำาให้การเปลี่ยนแปลงสีและรูปแบบ
มีอย่างจำากัดจึงควรศึกษาภาษาและโค้ดในการ
เขียนเวปเพิ่มเพื่อประสิทธิภาพในการบริหารเวป
ไซด์และจัดตีมต่อไป
![Page 13: WORDPRESS THEME DESING-JIRAPONG-ARTI3319](https://reader030.fdocuments.net/reader030/viewer/2022020420/568bdf401a28ab2034bc6723/html5/thumbnails/13.jpg)
10
อ้�งอิง
1.http://sneakermaniac.com/
2.http://www.wordpressthai.com/download-word-
press-thai-edition/