By Mr.Boonyakorn Jirapong 5213000457 CHANDRAKASEM RAJABHAT UNIVERSITY Communication .Design ART Technology For ARTI3319

For wordpress thai edition :

wordpress thaiacademy

1

จดท ำโดย

นำย บณยกร จรำพงษ

5213000457 ศลปกรรม

แขนงออกแบบนเทศศลป

วชำเทคโนโลยเพอกำร

ออกแบบนเทศศลป

ARTI3319

ค ำน ำ

2

สำรบญ

ค ำน ำ 1

แนวคดในกำรออกแบบ Theme : WordPress Thai Edition 3

WordPress thai คอ อะไร 3-4

ข นตอนและวธกำรตดต ง WordPress that v3.51 5

อธบำยกำรปรบคำชดรปแบบกรำฟฟก Theme 6-7

อธบำยข นตอนกำรเพมแทบเมนดำนขำง Add Widget 8-9

3

WordPress เปน open source web software ทเราสามารถตดตงบนเวบ server ของเราเพอสรางเวบไซต,

blog หรอ community ตอนเรมแรก WordPress เปนเครองมอไวส าหรบสราง blog แตไดรบการพฒนามา

เรอย ๆ จนสามารถสรางเปนเวบไซต หรอ เวบ community ไดแลว โดยมระบบจดการบทความ หรอ

Content Management System (CMS) ท าใหงายตอการใชงาน ซง WordPress สรางขนโดย Matt

Mullenweg และ Mike Little ในป 2003 นบวามการพฒนามาถง 9 ป เวรดเพรส เปนระบบเพลต

ฟอรมทเหมอนดงงานศลปชนเอกทใชในการเผยแพรเรองราวสวนตวของคณเพราะเวรดเพรสนนมทงความ

สวยงามถกสรางตามมาตรฐานเวบและความสามารถในการใชงานมากมาย คณสามารถใชงานเวรดเพรสได

โดยไมตองเสยคาใชจาย แถมยงเปนระบบทคณสามารถเรยนรการใชไดงายๆ

1. เขาสเวบไซค www.wordpressthai.com

เลอนลงมาดานลางสดจะมคลกใหดาวน

โหลด Wordpressthai v3.51

2.เรมตนจากการดาวโหลดขอมล

Wordpressthai v3.51 Portable ลงใน

เครอง

Wordpressthai คอ อะไร

ขนตอนและวธการตดตง Wordpressthai v3.51

4

3. เมอเขามาใน Floder ทเราท า

การดาวน โหลดมาให Double

cick ท Usbwebserver.exe เพอ

เปนการจ าลอง Server

Wordpress ขน

4. คลกทตวโปรแกรมจะขนเปน

หนาตางตามภาพจากนนใหคลก

เขาไปท Localhost เพอเขาส

โปรแกรมหนาเวบจ าลอง สวน

Root dir คอสวนทเอาไวส าหรบ

เกบไฟลตางๆ

5. เมอคลกเขา Localhost แลวลงค

ตอมาคอหนาชแจงโปรแกรมแลว

ไปคลกท

http://localhost:8080/wordpress

thaiedition เพอเชอมตอไปทหนา

Login

5

6.บรการเวบไซคแบบเคลอนทเวรดเพรส

บลอกฉบบภาษาไทย WordPressThai

Edition โดย ผศ.ประชด ทณบตร

Thai Comtomisation by Asistant

Professor Prachid Tinnabutr

เมอท าการ Login แลวคลกเขาไปจะปรากฏหนาตางดงรปภาพจากนนเลอกธมทจะท าการ แกไขโดยวธการ

ท าชด theme จะท าการเลอก Theme Wordpressthai : Academy by Assistant Professor

Prachid tinnabutr ออกมาท าการพฒนาในรปแบบของการออกแบบ Design Theme

6

7. จากนนกจะเขาสระบบการจดการ

ระบบการจดการกจะคลาย ๆ Blogspots

ใหเขาไปตงคาขอมลตางๆ ลองทดลองใช

ตวผมไดเขาไปปรบเปลยนขอมลและตง

คาอนๆ

ขนตอนและวธการปรบแตง Theme พนหลง,ขอความสวนหวไซต,อฟโหลดไฟลภาพพนหลง

1.คลกตรงแทบสวนควบคมชดรปแบบ

กราฟฟกเลอกเตรยมทตองการ ธมท

ผมใชคอ Twenty Ten เพราะธมดแลว

เรยบรอยเปนทางการแทบลงคตางๆ

สามารถกดเขางาย

2.หนาลงคตอไดเขามาอพโหลดภาพ

พนหลงของธม เขาไปอฟโหลดเอา

ไฟลภาพพนหลงทตองการจาก

Open File

อธบายวธการปรบตงคาชดรปแบบกราฟก Theme

7

3.ตอมาเขามาปรบตงคาภาพสวนหว

ไซตอพโหลดภาพจากไฟลคลกท

Choose File เลอกภาพจากไฟลของเรา

ทตองการ

4.ลงคตอมาระบบจะใหท าการครอปตง

คาขนาดภาพสวนหวของไซตปรบ

ความกวาง-ความสงตามกรอบ

ภาพตวอยางของการปรบตงคชดรปแบบกราฟก Theme ทเสรจสมบรณ

8

ขนตอนวธการเพม เมนขางบลอก “Wigget”

1.คลกทแทบสวนควบคม เมนคลก

บลอกเมนขาง Widget

เพอทจะเพม Widget เขาไป

2.ลงคภาพถดมาจะเปนแทบเครองมอ

ส าหรบลากตงคาขอมลในสวนตางๆ

น าไปใสใน Primary Widget Area

3.ใสขอมลลงใน Widget สราง

Widgetขนเองใน 2 หวขอ

-About Blogger :ชอเจาของบลอก

-Blogs & Sites.google : เวบบลอก

และกรเกลไซต

อธบายวธการเพมแทบดานขาง Wigget

9

4.ลาก Widgets ไปยงดานขางทางขาว

เพอเปดใชงานพวกมน ลากกลบมาทเดม

เพอเลกใชงานและลบการตงคาพวกมน

ภาพตวอยางทท าการเพมเมนขางบลอก Widget เสรจสมบรณ

เวบบลอกและกรเกลไซต สามารถคลกทรปภาพตวอยางของบลอกกจะลงคไปยงหนาเวบไซต

บลอกของผใชได

10

แนวคดในการออกแบบ Theme :WordPressThai Edition

ในการออกแบบ Theme นเลอกใช Theme ทดแลวสอถงความ

เปนไทยจงน าลวดลายไทยมาใชในการออกแบบโดยน ามาปรบ

และจดวางใหเหมาะสม สวนพนหลงจะใชเปนลายรดน า เพอใหด

ไมกลนกบสวนขอสวนขอโพสขอความ พนหลงสวนหวไซต ใช

เปนลวดลายไทยกราฟฟกประยกต ท าใหดออกมาเปนเอกลกษณ

มากขนเปนสากล

ABOUT

BLOGGER

Mr. Boonyrkorn Jirapong