Theme Design and Customisation forWordPress Thai Edition : Wordpress Thai Academy

BY Viwat Pornchalermchai 5111311840 CHANDRAKASEM RAJABHAT UNIVERSITYFACULTY OF HUMANITIES AND SOCIAL SCIENCESVISAUL COMMUNICATION DESIGN ARTTECHNOLOGY FOR VISAUL COMMUNICATION DESIGN ARTARTI3319 101

ค��น��

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

ผ=,จ�ดท��น�ยว�ว�ฒน: พรเฉล�มช�ย

5111311840ศ�ลปกรรมออกแบบน�เทศน:ศ�ลปN

ว�ช�เทคโนโลย�เพ��อก�รออกแบบน�เทศศ�ลปNArti3319 กล8มเร�ยน 101

ส�รบ�ญ

แนวค�ด 1-2โปรแกรมส��หร�บจ�ดท��ผลง�นโจทย:และว�ตถ8ประสงค: 3 ข� นตอนและเทคน�ค 4-11สร8ปผลง�นก�รออกแบบ 12อ,�งอ�ง 12

แนวค�ดในก�รออกแบบ :

ช��อ 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ละเฉดส�

1

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

2

โจทย: และว�ตถ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

3

ข.นตอนการออกแบบ Wordpress Theme

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

4

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ณบ@ตร

5

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

6

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

7

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

8

-ปร*บส�ให!ด-ท:บลงด!วยเข!าท�� 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\WorpressThai-Academy\images ท(าการ login เข!าส-3ระบบใหม3

9

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

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

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

10

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

11

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

สร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 all-solidcolor น*�นค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

12

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

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

13