WORDPRESS THEME DESIGN-VIWAT-ARTI3319

Theme Design and Customisation forWordPress Thai Edition : Wordpress Thai Academy

BY Viwat Pornchalermchai 5111311840 CHANDRAKASEM RAJABHAT UNIVERSITY FACULTY OF HUMANITIES AND SOCIAL SCIENCES

VISAUL COMMUNICATION DESIGN ART

TECHNOLOGY FOR VISAUL COMMUNICATION DESIGN ART ARTI3319 101

ค น ร ยง นเลมนจดท ขนเพอ อธบ ยหลกและขนตอนวธท Web Theme โดย ร ยง นเลมน เลอกใช, โปรแกรมของ Wordpress ในก รออกแบบ Theme เพร ะ สะดวกและมคนใช,อย งแพรหล ย และเป4นสวนหนงในง นศกษ วจยในโครงก ร ก ร ศกษ พฒน สอและระบบสนบสน8นก รเรยนก รสอนออนไลน:ท งศลปกรรม ส ข วช ศลปกรรม มห วทย ลยร ชภฏจนทรเกษมได,มก รดดแปลงแก,ไขข,อม=ลในสวน Theme Design ม จ ก Prachid.wordpressthai.com โดยได,น Web Blog ดง กล วม จดท เป4นผลง น ในก รเรยนก รสอนชวงปล ยเทอม โดยหวงอย งยงว จะ ได,รบคว มร=,และวธก รทจะน ไปพฒน และตอยอดท งคว มคด โดยเนอห ดงกล วม ส,วนใดทผดพล ดหรอข ดไป ข, พเจ, กKขออภยไว, ณ ทนด,วย

ผ=,จดท น ยววฒน: พรเฉลมชย 5111311840 ศลปกรรมออกแบบนเทศน:ศลปN วช เทคโนโลยเพอก รออกแบบนเทศศลปN Arti3319 กล8มเรยน 101

ส รบญ แนวคด โปรแกรมส หรบจดท ผลง นโจทย:และวตถ8ประสงค: ขนตอนและเทคนค สร8ปผลง นก รออกแบบ อ, งอง

1-2 3 4-11 12 12

1

แนวคดในก รออกแบบ : ชอ Theme : all-solidcolor การออกแบบ theme นเลอกใช!theme ทมหลากหลายโดยน(ามาจ*ดวางในร-ปของพนผ2วช3อง สเหลยมและพนผ2วทมล*กคล!ายเศษผ!าต3างสมาต2ดก*น และปร*บสให!ด-ทบ : ลงเพอความสว3างของ เฉดสจะได!ไม3ไปรบกวนสายตามากจนเก2นไปเลอกเฉดสทต3างก*นไป โดยหล*กๆแล!วสทเลอกใช! ก>มาจากการการผสมผมของสทใช!ทาก*น ในชว2ตประจ(าว*น และก>เฉดสทมากจาก ตาราง code ส ใน สอ online ท*วไป สบอกอะไรหลายๆอย3างในการออกแบบของ theme ช@ดน ผสมผสาน หลากหลายอารมณB ท(าให!ร-!ส:กต3างอารมณB ไม3ซ(าก*นจ(าเจ ไม3เบอหน3าย เเต3เมอส*งเกตแล!วด!วย เฉดสทหลากหลายก>ท(าให!ดไ - ม3สบายตาด-ย@3งเย2งได!เช3นก*นด*งน*น จ:งแก!ไขโดยการปร*บเฉดสให! ท:บลง เพอให!ดก - ลมกลนไม3ด-แตกแยกและไม3สบายตาจนเก2นไป ลดความหนาแน3นและความ สว3างเก2นไปของแต3ละเฉดส

2

ทมาของแนวความคด : จะสามารถสงเกตไดจากการเรยงระดบของเฉดสตางๆ เราจงนาเอารปดงกลาวมาจด วางและออกแบบ theme ของ wordpress โดยใชลกษณะการของสมาจดวางใหมลกษณะเป(นแถบสท*เป(o รป รางสเหล*ยมและเศษผามาวางต-ดกนสตาง ๆ จะเปลยนไปตามสภาพแวดลอมของส และยงขนอยสภาพของแสง ดวย โดยท ในทมแสงวางจด ๆ สจะดออนลง ในททมแสงสวางนอยลง สก$จะเขมขนดวย และในทไมมแสงสวาง เลยเราจะมองเห$นสตาง ๆ เป'นสด(า ถงแมจะมความเขมของแสงเหม+อนกน แตถามสภาพแวดลอมของสแตกตาง กน เชน สแสดทอยบนพ+นสด(า จะดออนกวาสแสดทอยบนพ+นสขาวและสทอยบนพ+นสตาง ๆ กนก$จะดมความ เขมตางกน สทบนพ+นสเขมจะมองเห$นเดนชดกวาส ทอยบนพ+นสสวาง เน+องจากสด(าไมสะทอนแสงสตาง ๆ ท(าใหไมรบกวนการมองเห$น การมองเห$นของสตรงขาม การใชสตรงขามกนมาใชรวมกนโดยน(ามาวางอยเคยงค กน ทงสองสจะสงผลตอคสอกสหนง เราจะเห$นวา สเขยวท อยบนสแดงจะดมขนาดใหญกวาสแดง ทอยบนสเขยวทง สองสตางหกลางคาความเขมของสซงกนและกน จะท(าให ไมดสดใสเทาทควร ปรากฎการณ3อกอยางหนงของสตรงขาม ค+อ ภาพต4ดตา ( After Image )โดยการจองมองสใด สหนงทสดจด ในทมแสงสวางจาสกคร จากนนไปจองมองทกระดาษสขาว จะปรากฎสตรงขาม ของสนน ๆ ขนทกระดาษสขาวซงเก4ด จากอ4ทธ4พลความแรงของส ความเขมของส(Intensity)เก4ดจาก สแท ค+อสทเก4ดจากการผสมกนในวงจรส เป'นสหลกทผสมขน ตามกกฎเกณฑ3และไมถกผสมดวยสกลางหร+อสอ+น ๆ จะมคา ความเขมสงสGด หร+อแรงจดทสGด เป'นคาความแทของสทไมถก เจ+อปน เม+อสเหลาน อยทามกลางสอ+น ๆ ทถกผสมใหเขมขน หร+อออนลง ใหม+ด หมน หร+อเปลยนคาไปแลว สแทจะแสดงความแรงของสปรากฎออกมาใหเห$น อยางชดเจน ซงจะท(าใหเก4ดจGดสนใจขนในผลงานลกษณะเชนน เหม+อนกบ ดอกเฟIJองฟKาสชมพสด ๆ หร+อบานเย$น ทอยทาม กลางใบเฟIJองฟKาทเขยวจด ๆ หร+อ พลGทถกจGดสองสวางในยามเทศกาล ตดกบสม+ด ๆ ทบ ๆ ทมๆ ของทองผายาม ค(าค+น เป'นตน

3

โจทย: และวตถ8ประสงค: 1.เพอเรยนร-!การจ*ดการก*บ WordPressThai3.0.4Portable ในส3วนของการจ*ดท(าข*นตอน รวบรวมข!อม-ลของการ ออกแบบ ควบค-3ไปก*บการวางแผนทด 2.ด*ดแปลงแก!ไขข!อม-ลในส3วน Theme Design พร!อมท*งการพ*ฒนาแก!ไขอย3างต3อเนองและ บ*นท:กผลและแสวงหาแหล3งความร-!ใหม3ๆ เพอเปEดโลกกว!างอย-3เสมอ 3.เรยนร-!และฝGกฝนการออกแบบ theme web และท(าการจดบ*นท:กข!อม-ลอย-3เสมอเพอเปHน ข!อม-ลในการปร*บปร@งแก!ไขหล*งการน(าเสนอต3อไป 4.เพอการน(าเสนอและเผยแพร3ในส2งทได!ศก : ษามาตลอดท*งเทอมของว2ชา เทคโนโลย เพอ การออกแบบน2เทศนBศ2ลปK ARTI3319 กล@3มเรยน 101 อาจารยBผ-!สอน ผศ.ประช2ด ท2ณบ@ตร

โปรแกรมทใช!ในข*นตอนการออกแบบ : Adobe ilustrator cs2,Adobe photoshop cs4

4

ข.นตอนการออกแบบ Wordpress Theme 1. เร2ม ต!นจากการดาวนBโหลดโปรแกรมต2ดต*งเว2รBดเพรสภาษาไทย ฉบ*บอคาเดม เพอการศ:กษา เรยนร-!ของคนไทย เวอรBช*น 3.0.4 จากเว>บ wordpressthai.org เมอได!ไฟลB Zip ให!ท(าการแตก ไฟลBออกมา จะได! folder wordpressthai3.0.4portable ออก จากน*นท(าการเปEด folder ด*ง กล3าวข:นมา

5

2. เมอแตกไฟลB แล!วให!เปEดเข!าไปทโฟลเดอรB เมอเข!าไปแล!วให!คล2^กทต*วโปรแกรม จะข:นเปHน หน!าต3างตามน จากน*นคล2^กเข!าไปท Localhost เพอเข!าส-3หน!าเว>บจ(าลอง ส3วน Root dir คอ ส3วนทเอาไว!ส(าหร*บเก>บไฟลBต3างๆ เมอท(าการอ*พโหลด ช@ดการตกแต3งต3างๆเข!าไปใน folder น*นก>คอช@ด theme ต3างๆของ www.wordpressthai3.0.4 ทพ*ฒนาข:นโดย ผศ.ประช2ด ท2ณบ@ตร

6

3. เมอเข!า Localhost แล!วจะได!หน!าต3างนข:นมาน*นคอโปรแกรมระบบจ(าลองแม3ข3าย บร2การเว>บไซตBแบบเคลอนท เว2รBดเพรสบล>อก ฉบ*บภาษาไทย: WordPressThai Edition. โดย ผศ.ประช2ด ท2ณบ@ตร . Thai Customisation by Assistant Professor Prachid Tinnabutr ให!คล2^กทเปHน link ด*งกล3าวจะเปHนการเชอมต3อไปย*งหน!า log in ของ www.wordpressthai.com

7

4. คล2ก ^ เข!าส-3ระบบชอล>อกอ2นคอ admin และรห*ส admin ทางช3อง log in ในกรอบสแดงด*ง กล3าว

5. เมอท(าการล>อกอ2นแล!วคล2^กเข!าไป จะปรากฎหน!าต3างด*งร-ป จากน*นเลอกธมทจะท(า การ แก!ไข โดยในว2ธการท(าช@ด theme จะท(าการเลอก theme WordpressThai:Academy

by Assistant Professor Prachid Tinnabutr ออกมาท(าการ พ*ฒนาในร-ปของการ design-theme All-Solidcolor

8

6.เร2มทการสร!างส3วนห*วโดยใช! Adobe ilustrator และ adobe photoshop เท3าขนาดจร2ง โดยจะ ใช!แก!ไขและลงสในส3วนหน:งจากน*นให!เซฟเปHนไฟลBเท3าขนาดจร2งโดย เซฟไปท wordpresspt\root\wordpressthaiedition\wp-content\themes\WorpressThaiAcademy\images (เวลาเซฟให!เซฟเปHนชอเดยวก*บต!นฉบ*บเพอทจะแทนทต!นฉบ*บ ) โดย สามารถด-ขนาดได!จากไฟลBภาพทอย-3ในต(าแหน3ง โฟลเดอรBเด2ม *ก รท theme design นนต,องค นงถงขน ดเป4นส คญเพอให,เนอ theme โดย รวม นนส ม รถแสดงผลและ concept ของชนง นออกม ได,อย งชดเจนโดยไมม แถบ ข,อม=ล หรอสวนใดของ web site ม ป[ดทบ

9

-ปร*บสให!ด-ท:บลงด!วยเข!าท image-adjectments-hue/satulation ปร*บสและแสงท*นทเพอ เปHนการลดความเด3นของสจนด-ย@3งเย2งจนเก2นไปให!ด-กลมกลนมากย2งข:นท*งนเราอาจเพ2มหรอลด ได!ใจต!องการข:นอย-3ก*บว3า theme design concept น*นต!องการความเข!มสเฉดสมากแค3ไหน ถ!า ต!องการเข!มมากความเด3นช*ดของแต3ละเฉดสก>จะด-ท:บลงไป แต3ถ!าเข!มน!อยความสว3างและเด3น ช*ดของเต3ละเฉดสก>จะด-เพ2มข:นมาจนบดบ*งต*วอ*กษรของข!อม-ลเนอหาต3างๆภายใน blog -รวมไปถ:งต*ว sitebar ด!านข!างของ theme โดยการใช!ว2ธเดยวก*น โดยต!องส*งเกตความท:บของ ส theme ด!วยว3าเท3าก*นก*บ แถบ sidemenu bar ด!านข!างหรอไม3 -ท(าการ save ช2นงานด*งกล3าวไว!ใน folder เด2มท theme ด*งกล3าวน*นถ-กจ*ดเก>บไว!ท wordpresspt\root\wordpressthaiedition\wp-content\themes\WorpressThaiAcademy\images ท(าการ login เข!าส-3ระบบใหม3

10

7.เมอท(าการ login ใหม3ก>จะพบว3าไฟลBทเราได!ไป save ท*บน*นได!มการเปลยนแปลงไปจากเด2ม โดยการ save ท*บ ไฟลBขนาดจร2งลงไป ม*นก>จะแสดงผลออกมาท*นทเมอ login กล*บเข!าไปอก รอบ

ภาพท1 แสดงในส3วนของหน!า log in ทมการเปลยนแปลง ช@ด theme ใหม3ใน www.wordpressthai.com

ภาพท2 แสดงในส3วนของภายใน ของช@ด theme ทมการเปลยนแปลงช@ด theme allsolidcolor เข!าไป

11

8.แก!ไขเมน-ด!านข!างโดยกดท บล>อกเมน-ข!าง:Widgets แล!วลากเมน-ทเราต!องการไปวางไว!ท แถบด!านขวา ตามทเราต!องการไม3ว3าจะเปHน แถบด!านซ!ายหรอแถบด!านขวา ภายใน widget น*น สามารถปร*บแต3งข!อความทแสดงข:นมาได!โดยการแก!ไขและท(าการบ*นท:ก สามารถปร*บต(าแหน3ง ได! รวมไปถ:งเมอท(าการบ*นท:กแล!วสามารถเพ2ม widget ต3างๆ เข!าไปได!อกเช3นก*น

12

===================================================

สร8ปผลก รออกแบบ จากการออกแบบสามารถสร@ปได!ว3าการออกแบบ theme ในคร*งนใช3สทเยอะและสามารถ ลดความสว3างของแสงลงได!ท(าให!มความกลมกลนก*บ สของต*วษรทเปHนเหลองและสขาว ท(าให! ต*วอ*กษร เด3นช*ดข:น ล*กษณะด-ล:กล*บหน*กแน3นภายใต!ความหลากหลายของเฉดสสตาง ๆ จะเปลยนไป ตามสภาพแวดล!อมของส และย*งข:นอย-3สภาพของแสงด!วยโดยททมแสงว3างจ*ด ๆ สจะด-อ3อนลง ในททมแสงสว3างน!อยลง สก>จะเข!มข:นด!วย และในทไม3มแสงสว3างเลยเราจะมองเห>นสต3าง ๆเปHน สด(าถ:งแม!จะมความเข!มของแสงเหมอนก*น แต3ถ!ามสภาพแวดล!อมของสแตกต3างก*น เช3น สแสด ทอย-3บนพนสด(า จะด-อ3อนกว3าสแสดทอย-3บนพนสขาวและสทอย-3บนพนสต3าง ๆ ก*นก>จะด-มความ เข!มต3างก*น สทบนพนสเข!มจะมองเห>นเด3นช*ดกว3าสทอย-3บนพนสสว3าง เนองจากสด(าไม3สะท!อน แสงสต3าง ๆ ท(าให!ไม3รบกวนการมองเห>น ซ:ง Theme ช@ดนจะมเฉดสไม3รบกวนสายตาผ-!เข!าชม เลย

ป_ญห ทพบ -ผ-จ ! *ดท(าไม3สามารถเปลยน code html ต3างๆ ภายใน เว>บได!เนองจากย*งไม3ม ประสบการณBและ ความร-!ทเพยงพอ ซ:งคาดว3า ถ!าสามารถเรยนร-!ความร-!และระบบว2ธการเพ2มเต2ม แล!วน*นจะสามารถแก!ไขปpญหาในส3วนนได!

-การวางเฉดสในระหว3างออกแบบ theme น*นมการท*บซ!อนและสอดคล!องก*นของสเด2ม อย-3เสมอท(าให!สด-ซ(าก*นหรออาจจะด-เหมอนก*นจ:งท(าให!การออกแบบ theme design allsolidcolor น*นค3อนข!างใช!เวลาในการปร*บเฉดสพอสมควร ===================================================

อ, งอง 1.http://www.wordpressthai.com/download-wordpress-thai-edition 2. http://nanotech.sc.mahidol.ac.th/comlab/image/wheel.htm 3. http://sukumal.brinkster.net/meaploy/angel/color2.html 4. http://th.wikipedia.org/wiki/ 5.http://www.hometophit.com/hometh/interresting

13

ผ-!จ*ดท(า : นาย ว2ว*ฒนB พรเฉล2มช*ย รห*สน*กศ:กษา : 5111311840 สาขาว2ชา : ศ2ลปกรรมออกแบบน2เทศนBศ2ลปK คณะ : มน@ษยBศาสตรBและส*งคมศาสตรB สถานศ:กษา : มหาว2ทยาล*ยราชภ*ฏจ*นทรเกษม email : viwatj4ck@gmail.com vermillionthesubminalofverses@hotmail.com Website: https://sites.google.com/site/viwatarti3319template/ http://viwatj4ck.wordpress.com/ http://www.facebook.com/Viwat-Pornchalermchai http://www.issuu.com/viwatj4ck

กล วตอนท, ย เวร:ดเพรสมระบบแมข ยแบบเวKบด,วยก รใช,หนวยประมวลผลแบบ ผ=,ใช,ส ม รถจด เตรยมเครองมออกครงโดยไมต,องแก,ไขโค,ด HTML PHP และยงส ม รถตดตงและ สลบระหว งช8ดร=ปแบบ โค,ด PHP และ HTML ในร=ปแบบนอกจ กนยงส ม รถแก,ไขได, ส หรบก รปรบแตงขนส=ง เวร:ดเพรสยงมก รจดก รก รเชอมโยงแบบบ=รณ ก รเครอง มอค,นห ผ=,ตดตออนๆโครงสร, ง Permalink สะอ ดคว มส ม รถในก รก หนดซ,อน กน, ประเภทหล ยบทคว มและก รสนบสน8นส หรบก รตดแทKกก รโพสต:และบทคว ม ตวกรองอตโนมตจะรวมให,ได,ม ตรฐ นก รจดร=ปแบบและสไตล:ของข,อคว มใน บทคว ม (ตวอย งเชนก รแปลงร ค ปกตในก รเสนอร ค สม ร:ท ) เวร:ดเพรสยง สนบสน8น Trackback และม ตรฐ น Pingback ส หรบก รแสดงผลเชอมโยงไปยง เวKบไซต:อน ๆ ทมตวเชอมโยงกบก รโพสต:หรอบทคว ม ในทส8ด WordPress มอ8ดมไป ด,วยสถ ป_ตยกรรมปลjกอนทชวยให,ผ=,ใช,และนกพฒน ส ม รถขย ยขดคว มส ม รถ ของมนเกนกว ค8ณสมบตทม เป4นสวนหนงของฐ นตดตงแอพพลเคชนอย=ส หรบ Android, iPhone / iPod Touch, และ BlackBerry ทให,ส ม รถเข, ถงบ งสวนของ ค8ณลกษณะในแผง WordPress Admin และท ง นกบ WordPress.com และบลKอก หล ย WordPress.org

ขอบค8ณท8กท นม กครบส หรบข,อตชมและก รเข, ชม

น ย ววฒน: พรเฉลมชย