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 สาขาวิชา ศิลปกรรม แขนง ออกแบบนิเทศศิลป์ มหาวิทยาลัยราชภัฎจันทรเกษม