Arti 3319-Manoch-Wordpress Theme Design

Page 1



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 ขึ้นมา


- คลิกที่ตัวโปรแกรมจะขึ้นเปนหนาตางตามนี้จากนั้นคลิ๊กเขาไปที Localhost เพื่อเขาสู หนาเว็บจำลอง สวน Root dir คือสวนที่เอาไวสำหรับเก็บไฟลตางๆ

- เมื่อเขาLocalhost จะไดหนาตางดั้งนี้ แลวไปคลิกที่ http://localhost:8080/wordpressthaiedition เพื่อเชื่อมตอไปยังหนา login

บริการเว็บไซตแบบเคลื่อนที่ เวิรดเพรสบล็อกฉบับภาษาไทย :WordPressThai Edition. โดย ผศ.ประชิด ทิณบุตร Thai Customisation by Assistant Professor Prachid Tinnabutr

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


- เมื่อทำการล็อกอินแลวคลิ๊กเขาไปจะปรากฎหนาตางดังรูปจากนั้นเลือกธีมที่จะทำการ แกไข โดยในวิธีการทำชุด theme จะทำการเลือก theme WordpressThai:Academy by Assistant Professor Prachid Tinnabutr ออกมาทำการพัฒนาในรูปของการออกแบบ design-theme graphene

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


- เริ่มที่การสรางสวนหัวโดยใช Adobeilustrator และ adobephotoshop เทาขนาดจริงโดย จะใชแกไขและลงสีในสวนหนึ่งจากนั้นใหเซฟเปนไฟลเทาขนาดจริงโดยเซฟไปที่ wordpresspt\root\wordpressthaiedition\wp-content\themes\WorpressThaiAcademy\images (เวลาเซฟใหเซฟเปนชื่อเดียวกับตนฉบับเพื่อที่จะแทนที่ตนฉบับ) โดยสามารถดูขนาดไดจากไฟลภาพที่อยูในตำแหนงโฟลเดอรเดิม

*การทำ theme design นั้นตองคำนึงถึงขนาดเปนสิ่งสำคัญเพื่อใหเนื้อ theme โดยรวมนั้นสามารถแสดงผลและ concept ของชิ้นงานออกมาไดอยางชัดเจนโดยไมมีแถบ ขอมูลหรือสวนใดของ web site มาปดทับ


- การทำงานนี้ไมเพียงแตใชโปรแกรม Adobe Illustrator และ Adobe Photoshop อยางเดียวเทานั้น เราจำเปนตองมีโปรแกรมสำหรับไวแกจำพวก Code PHP ดวย เพราะจุดบางจุด เราไมสามารถแกจากเครื่องมือในรูปลักษณะหนาเวปได จึงจำเปนตองมา แกขางนอก โดยคำสั่งที่จะใชแก Code สวนใหญ จะอยูใน Style.css เปนสวนใหญ และใชโปรแกรม EditPlus อาจจะเปน Adobe Dreamweaver ก็ได โดยที่เวลาที่จะดู Code ตรงไหน ก็กดคลิ๊กขวา แลวเลือกคำสั่ง Inspect Element แลวเราก็ดูวาเราดู Code ที่ตรงไหน ก็คลิ๊กขวาที่ตรงนั้น แลวมาดูวาตัว Code อยูที่ไหน บรรทัดที่เทาไหรทางขวามือสุดของหนาจอ แลวจึงไปแกไข


แนวคิดในการออกแบบ : ชื่อ Theme Graphene ที่เลือกใช Theme นี้เพราะวาเปน Theme ที่ดูเรียบๆ และตัว Theme ยังสามารถที่จะทำเปน Slide ได เมื่อเราโพสขอความไป ซึ่งเราสามารถกำหนดไดวา จะเอารูป หรือขอความ มาทำเปน Slide หรือจะใสทั้งรูปและขอความก็สามารถทำได ซึ่งจะเปนเหมือนการเกริ่นนำ บทความที่เราโพสลงไปใน Wordpress ทำให Theme ตัวนี้ดูนาสนใจอยางมาก โดยการนำเอา Layout Theme ที่เคยออกแบบไวมาพัฒนาตอ

- แกไขขอมูลที่บล็อกและแกไขเมนูดานขาง : Widgets แลวลากเมนูที่เราตองการไปวางไว ที่แถบดานขวา ตามที่เราตองการไมวาจะเปน แถบดานซาย ภายใน widgetนั้นสามารถปรับ แตงขอความที่แสดงขึ้นมาไดโดยแกไข และการบันทึก สามารถปรับแตงได รวมไปถึง เมื่อทำการบันทึกแลวสามารถเพิ่ม widget ตางๆ เขาไปไดอีกเชนกัน


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


สรุปผลของการออกแบบ โดย 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 ความสามารถในการกำหนดซอนกัน,ประเภทหลายบทความ และการสนับสนุนสำหรับการติดแท็กการโพสตและบทความ ตัวกรองอัตโนมัติจะรวมใหได มาตรฐานการจัดรูปแบบและสไตลของขอความในบทความ



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.