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