View
222
Download
3
Category
Preview:
DESCRIPTION
Final project for Visual communication design class by Naruepon Chumsoongnern 5111302294
Citation preview
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
ภาพตวอยางหลงแกไขโคดสในสวนของ 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
Recommended