Panida Wordpress themes Design

ARTI3319

Visual Communication Design Technology

Wordpress themes Design การออกแบบชุดกราฟิ กเว็บบล็อกเวิร์ดเพรส

คํานํา รายงานเล่มนี้เป็ นส่วนหนึงของรายวิชา arti3319 เพื่อเป็ นการสรุปการเรียนรู้เกี่ยวกับ การศึกษาการพัฒนา ชุดกราฟฟิ กเวิร์ดเพลสบล๊อก แก้ ไขโดย น.ส. ภณิดา บุญมี

ขั้นตอนการทํา Theme Design - เมื่อดาวน์โหลด และ ติดตั้ง “Wordpress-ThaiEdition-V3.51-Portable” เส็จเรียบร้ อย แตกไฟล์ลง ในแฟลชไดร์ฟ เพื่อที่จะสามารถพกพาไปทําได้ ทุกที่

--

- จากนั้นคลิกที่ USB Webserver จะมีหนต่างสีนาํ้ เงินขึ้นมา จากนั้นคลิก Localhost

-จากนั้นจะปรากฏหน้ าเวปขึ้นมา คลิก

http://localhost:8080/wordpressthaiedition

- เข้ าสู่ระบบโดยการใช้ username/password คําว่า admin

-เริ่มต้ นการทํางานโดยการโหลด theme ที่ต้องการ มาเพื่อ ออกแบบพัฒนาให้ เป็ นของเรา ซึ่งดิฉันเลือกใช้ Theme ที่มชี ่ ือว่า texture-art -frame ที่มาจาก:http://webcache.googleusercontent.com/search?q=cache:9f5muiS8t18J:wparchive.com/ texture-art-frame/+&cd=3&hl=th&ct=clnk&gl=th&client=firefox-a

-ไฟล์ท่ดี าวน์โหลดมาจะเป็ นไฟล์ .Zip ทําการแตกไฟล์ไปไว้ ท่ี

G:\Wordpress-Thai-Edition-V3.51-Portable\root\wordpressthaiedition\wpcontent\themes

- จากนั้นจึงเปลี่ยนมาใช้ Theme โหลดมา

-เปิ ดเข้ าไปในแฟ้ มตรีมของเรา ที่ G:\Wordpress-Thai-

Edition-V3.51-Portable\root\wordpressthaiedition\wpcontent\themes\texture-art\texture-art

จากนั้นคลิกเข้ าไปใน images ภายในจะเป็ นสิ่งที่เราต้ องนํามา ปรับเปลี่ยน ให้ เป็ นแบบของเรา

- ส่วนแรกมาที่จะเปลี่ยนคือส่วนหัว “bg_top” ดึงไฟล์มา เปิ ดใน photoshop ในที่น้ ีต้องการให้ เป็ นสี่เดียวกันหมด เมื่อได้ แล้ ว saveชื่อซํา้ ชื่อเดิม จะได้ ผลดังนี้

- ส่วนต่อมาที่จะเปลี่ยนคือส่วนหัว “bg_header” และ “bg_container_top”ซึ่งมีความต่อเนื่องกัน โดยการ ดึงไฟล์มาเปิ ดใน photoshop จากนั้นออกแบบใหม่ โดย illutator แล้ วจึงนํามาทับกับไฟล์เก่า และsaveชื่อ ซํา้ ชื่อเดิม จะได้ ผลดังนี้

ล

-ต่อมาเปลี่ยนขนาดของไอคอน twitter โดยการลดขนาด และเปลี่ยนตําแหน่ง

-ลดขนาดลงเพื่อให้ สอดคล้ อF งกับส่วนหัวเวป เมื่อได้ ตาม ต้ องการ save ทับไฟล์เก่า

-เปลี่ยนตําแหน่งของคําว่า “follow us on twitter” โดยการเข้ าไปใน รูปลักษณ์ หน้ าเวป>แทรก-ชุดแก้ ไขรหัสคําสั่ง ดังภาพ

-เปลี่ยนสีของ bg_search ให้ เข้ ากับรูปแบบthemeใหม่

- เปลี่ยนส่วนพื้นหลังเนื้อหา ให้ เข้ ากับส่วนหัว

- เปลี่ยนส่วน bg_post_title และ bg_sb_head

-เปลี่ยนสีตวั อักษรของ RRS จากสีดาํ เป็ นสีขาวเพื่อให้ ตัวอักษรไม่กลืนกับพื้นหลังจนมองไม่เห็น

- เปลี่ยนส่วนท้ าย ให้ เข้ ากับส่วนหัว

-เปลี่ยนสีของคอลัมส่วนบนให้ ไม่กนื กับพื้นหลัง โดยการเข้ าไปใน รูปลักษณ์หน้ า เวป>แทรก-ชุดแก้ ไขรหัสคําสั่ง ดังภาพ

-ปรับเปลี่ยนขนาด สี และตําแหน่งของชื่อเวป

Original Theme

Modified Theme

สรุป

จัดทําโดย น.ส. ภณิดา บุญมี รหัส 5213000499 กลุ่มเรียน 101 ภาคเรียนที่ 3/2555 สาขาวิชา ศิลปกรรม แขนง ออกแบบนิเทศศิลป์ มหาวิทยาลัยราชภัฎจันทรเกษม