arti 3319-manoch-wordpress theme design

11

Upload: pirachat-petchdee

Post on 17-Feb-2016

224 views

Category:

Documents


7 download

DESCRIPTION

รายงานเล่มนี้เป็นส่วนหนึ่งของวิชาเทคโนโลยีออกแบบนิเทศศิลป์ARTI3319จัดทำเพื่อบอกส่วนประกอบการทำเซิร์ฟเวอร์จำลองแบบเคลื่อนที่สามารถแก้ไขและปรับแต่งข้อมูลและจัดระบบศิลป์ได้โดยWordpressThaiเป็นเวอร์ชั่นภาษาไทยที่สะดวกต่อการจำลองการสร้างสรรค์ บล็อค และระบุขั้นตอนในการสร้างสรรค์ ข้อมูลการใช้คำสั่งต่างๆภายใน เซิร์เวอร์จำลอง

TRANSCRIPT

Page 1: Arti 3319-Manoch-Wordpress Theme Design
Page 2: Arti 3319-Manoch-Wordpress Theme Design
Page 3: Arti 3319-Manoch-Wordpress Theme Design

WordPress คืออะไร

เวิรดเพรสเปนระบบแพลตฟอรมที่เหมือนดั่งงานศิลปชั้นเอกที่ใชในการเผยแพรเรื่องราว

สวนตัวของคุณเพราะเวิรดเพรสนั้นมีทั ้งความสวยงามถูกสรางตามมาตรฐานเวบและความ

สามารถในการใชงานมากมายคุณสามารถใชงานเวิรดเพรสไดโดยไมตองจายเงินซื ้อเลย

เวิรดเพรสยังเปนระบบที่คุณสามารถใชงานไดงายเพราะวาคุณตองการเขียนบล็อกตางหาก!

ไมไดตองการมางงกับ คำสั่งและ code มากมายของระบบเขียนบล็อก

ที่มา http://www.google.com/9supawat.com%2F10%2Fwhat-is-wordpress.html

ขั้นตอนการติดตั้งและการออกแบบ

- เขาไปดาวนโหลด ดาวนโหลดเวิรดเพรส 3.2.1 ที่ http://sourceforge.net/projects/

wordpressthaied/ แตกซิปไฟลติดตั้งลงในไดเรคทอรีที่ตองการติดตั้ง

- เมื่อเขามาใน Floder ที่เรา Download มาแลวให Double Click ที่ usbwebserver.exe

เพื่อเปนการจำลอง Sever ของ Wordpress ขึ้นมา

Page 4: Arti 3319-Manoch-Wordpress Theme Design

- คลิกที่ตัวโปรแกรมจะขึ้นเปนหนาตางตามนี้จากนั้นคลิ๊กเขาไปที Localhost เพื่อเขาสู

หนาเว็บจำลอง สวน Root dir คือสวนที่เอาไวสำหรับเก็บไฟลตางๆ

บริการเว็บไซตแบบเคลื่อนที่

เวิรดเพรสบล็อกฉบับภาษาไทย

:WordPressThai Edition.

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

Thai Customisation by

Assistant Professor Prachid Tinnabutr

- เมื่อเขาLocalhost จะไดหนาตางดั้งนี้

แลวไปคลิกที่ http://localhost:8080/wordpressthaiedition เพื่อเชื่อมตอไปยังหนา login

ใหคล๊ิกท่ีเปน link ดังกลาวจะเปนการเช่ือมตอไปยังหนา log in ของ www.wordpressthai.com

Page 5: Arti 3319-Manoch-Wordpress Theme Design

- เมื่อทำการล็อกอินแลวคลิ๊กเขาไปจะปรากฎหนาตางดังรูปจากนั้นเลือกธีมที่จะทำการ แกไข

โดยในวิธีการทำชุด theme จะทำการเลือก theme WordpressThai:Academy by Assis-

tant Professor Prachid Tinnabutr ออกมาทำการพัฒนาในรูปของการออกแบบ

design-theme graphene

- รูปแบบ Theme ที่จะใชในการออกแบบชื่อวา”Graphene”

Page 6: Arti 3319-Manoch-Wordpress Theme Design

- เริ่มที่การสรางสวนหัวโดยใช Adobeilustrator และ adobephotoshop เทาขนาดจริงโดย

จะใชแกไขและลงสีในสวนหนึ่งจากนั้นใหเซฟเปนไฟลเทาขนาดจริงโดยเซฟไปที่

wordpresspt\root\wordpressthaiedition\wp-content\themes\WorpressThai-

Academy\images (เวลาเซฟใหเซฟเปนชื่อเดียวกับตนฉบับเพื่อที่จะแทนที่ตนฉบับ)

โดยสามารถดูขนาดไดจากไฟลภาพที่อยูในตำแหนงโฟลเดอรเดิม

*การทำ theme design นั้นตองคำนึงถึงขนาดเปนสิ่งสำคัญเพื่อใหเนื้อ theme

โดยรวมนั้นสามารถแสดงผลและ concept ของชิ้นงานออกมาไดอยางชัดเจนโดยไมมีแถบ

ขอมูลหรือสวนใดของ web site มาปดทับ

Page 7: Arti 3319-Manoch-Wordpress Theme Design

- การทำงานนี้ไมเพียงแตใชโปรแกรม Adobe Illustrator และ Adobe Photoshop

อยางเดียวเทานั้น เราจำเปนตองมีโปรแกรมสำหรับไวแกจำพวก Code PHP ดวย

เพราะจุดบางจุด เราไมสามารถแกจากเครื่องมือในรูปลักษณะหนาเวปได จึงจำเปนตองมา

แกขางนอก โดยคำสั่งที่จะใชแก Code สวนใหญ จะอยูใน Style.css เปนสวนใหญ

และใชโปรแกรม EditPlus อาจจะเปน Adobe Dreamweaver ก็ได โดยที่เวลาที่จะดู Code

ตรงไหน ก็กดคลิ๊กขวา แลวเลือกคำสั่ง Inspect Element แลวเราก็ดูวาเราดู Code ที่ตรงไหน

ก็คลิ๊กขวาที่ตรงนั้น แลวมาดูวาตัว Code อยูที่ไหน บรรทัดที่เทาไหรทางขวามือสุดของหนาจอ

แลวจึงไปแกไข

Page 8: Arti 3319-Manoch-Wordpress Theme Design

แนวคิดในการออกแบบ :

ชื่อ Theme Graphene

ที่เลือกใช Theme นี้เพราะวาเปน Theme ที่ดูเรียบๆ และตัว Theme ยังสามารถที่จะทำเปน

Slide ได เมื่อเราโพสขอความไป ซึ่งเราสามารถกำหนดไดวา จะเอารูป หรือขอความ

มาทำเปน Slide หรือจะใสทั้งรูปและขอความก็สามารถทำได ซึ่งจะเปนเหมือนการเกริ่นนำ

บทความที่เราโพสลงไปใน Wordpress ทำให Theme ตัวนี้ดูนาสนใจอยางมาก

โดยการนำเอา Layout Theme ที่เคยออกแบบไวมาพัฒนาตอ

- แกไขขอมูลที่บล็อกและแกไขเมนูดานขาง :

Widgets แลวลากเมนูที่เราตองการไปวางไว

ที่แถบดานขวา ตามที่เราตองการไมวาจะเปน

แถบดานซาย ภายใน widgetนั้นสามารถปรับ

แตงขอความที่แสดงขึ้นมาไดโดยแกไข

และการบันทึก สามารถปรับแตงได รวมไปถึง

เมื่อทำการบันทึกแลวสามารถเพิ่ม widget ตางๆ เขาไปไดอีกเชนกัน

Page 9: Arti 3319-Manoch-Wordpress Theme Design

หลังจากที่พัฒนาเรียบรอยแลว

Page 10: Arti 3319-Manoch-Wordpress Theme Design

สรุปผลของการออกแบบ

โดย Wordpress อันนี้เปนทำเกี่ยวกับเรื่องการนำเสนอประวัติความเปนมา Logo

และผลิตภัณฑตางๆ ของทาง Apple. รวมถึงประวัติสวนตัวของผูบุกเบิกของ Apple คือ

STEVE JOBS. ซ่ึงปญาหาตางๆไมไดอยูท่ีการ Design เปนเปนสวนของการแก Code ของพวก

PHP,HTML ซะมากกวา เพราะตองทำความเขาใจ และความชำนาญพอสมควรและเครื่องมือ

จัดรูปแบบของแตละ Theme ก็ไมเหมือนกัน จึงทำใหชวงแรกๆ อาจจะยังไมเขาใจ จึงทำงาน

ไดยากขึ้น

อางอิง http://www.wordpressthai.com/download-wordpress-thai-edition

กลาวตอนทาย

เวิรดเพรสระบบแมขายแบบเว็บดวยการใชหนวยประมวลผลแบบผูใชสามารถจัด

เตรียมเครื่องมืออีกครั้งโดยไมตองแกไข Coed,HTML PHP และยังสามารถติดตั้งและสลับ

ชุดรูปแบบ Code จำพวก PHP และ HTMLใ นรูปแบบนอกจากนั้นยังสามารถแกไขได

สำหรับการปรับแตงขั้นสูงเวิรดเพรสยังมีการจัดการการเชื่อมโยงแบบบูรณาการเครื่องมือคนหา

ผูติด ตออ่ืน ๆโครงสราง Permalink ความสามารถในการกำหนดซอนกัน,ประเภทหลายบทความ

และการสนับสนุนสำหรับการติดแท็กการโพสตและบทความ ตัวกรองอัตโนมัติจะรวมใหได

มาตรฐานการจัดรูปแบบและสไตลของขอความในบทความ

Page 11: Arti 3319-Manoch-Wordpress Theme Design