เป้าหมายที่เราจะทำ

ภาพที่ 1 หน้าจอ Default Theme ปกติ

ภาพที่ 2 หน้าจอหลังการแก้ไขธีมตามบทความนี้

สิ่งที่จะทำในบทความนี้คือ

1. เปลี่ยน banner ให้เป็นในแบบที่คุณต้องการ

ซึ่งเมื่อการแก้ไขเรียบร้อยแล้ว เว็บไซต์ของคุณจะเปลี่ยนไปดังภาพด้านบน

สิ่งที่ต้องเตรียมการสำหรับการแปลงร่างครั้งนี้

ก่อนอื่นใด คุณจะต้องเตรียมไฟล์ภาพในแบบที่คุณต้องการเสียก่อน ถ้าคุณใช้พวกธีมสำเร็จรูปเค้าจะมีไฟล์ภาพให้คุณอยู่แล้ว แต่ถ้าไม่มี ก็หาได้จากเว็บไซต์ทั่วไป (ที่ไม่ละเมิดลิขสิทธิ์นะ) หรือไม่ก็สร้างเองได้เลย

สำหรับงานนี้ เราใช้แค่เพียง 1 ไฟล์เท่านั้นคือ

1. ไฟล์ banner สำหรับเว็ปไซต์ของคุณเอง (bannerTest.png)

ลงมือทำตามขั้นตอนกันเถอะ!

เมื่อเตรียมไฟล์เรียบร้อยแล้ว ก็มาเริ่มกันเลยนะคะ/p>

1. สร้างธีมใหม่ของคุณเองก่อนผ่าน shopadmin

   ให้คุณเข้าไปยัง https://shopadmin.thaiepay.com แล้ว Login เข้าไปยังเมนู "มุมนักพัฒนา / สร้างธีมของตนเอง" แล้วเลือกธีมต้นแบบ จากนั้นกรอกข้อมูลเกี่ยวกับธีมใหม่ที่คุณจะสร้าง ในที่นี้ ขอตั้งชื่อง่ายๆ ว่า "pinktheme" คลิกปุ่ม Submit ระบบจะสร้างธีมให้คุณในชื่อใหม่ และสามารถแก้ไขได้ทันที

   ภาพที่ 4 สร้างธีมใหม่ของคุณผ่าน shopadmin

2. อัปโหลดไฟล์ภาพที่เตรียมไว้

   เมื่อสร้างธีมในข้อ 1 เสร็จแล้ว ระบบจะแสดงลิงค์ให้เข้าไปแก้ไขธีม คลิกเข้าไป ซึ่งระบบจะแสดงข้อมูล CSS ของธีม และรูปภาพทั้งหมด (ซึ่งคัดลอกมาจากธีมต้นแบบนั้นแหละ) ให้เลื่อน Schroll Bar ลงมาล่างสุด เพื่ออัปโหลดรูปภาพที่เตรียมไว้ ใส่เข้าไป

   ภาพที่ 5 เลือกไฟล์ที่เตรียมไว้ อัปโหลดขึ้นเซิร์ฟเวอร์

3. แก้ไข CSS ให้โหลดไฟล์ภาพใหม่ (ไฟล์ที่เราเพิ่งใส่ไปเมื่อกี้)

   เมื่ออัปโหลดภาพเสร็จแล้ว คุณจะเห็นไฟล์ภาพปรากฎอยู่ในระบบ ทีนี้ ก็ลงมือแก้ไข CSS กัน โดยเพิ่มแท็กคำสั่งดังนี้

   แท็กคำสั่งโหลดภาพเป็น banner ของเว็ปไซต์

   โดยเพิ่มเข้าไปในแท็กคำสั่งของ #page ดังที่แสดงในรูปค่ะ
   background: url('images/bannerTest.png') no-repeat top center;
   ภาพที่ 6 แก้ไข CSS ใส่แท็กเพิ่มภาพ banner

   แก้ไขเสร็จแล้ว คลิกปุ่ม Update

4. Preview ตรวจดูให้แน่ใจว่าการแก้ไขมีผลหรือไม่

   หลังจากอัปเดทข้อมูล CSS ไปแล้ว ให้ไปยังเมนู "หน้าตาการแสดงผล / เลือกธีม" แล้วคลิกที่ปุ่ม Preview ใต้ ธีมที่เราสร้างขึ้นนี้ ก็จะเห็นว่า การแก้ไขมีผลเรียบร้อยแล้ว ดังภาพที่ 7 นี้

   ภาพที่ 7 หน้าเว็บหลังแก้ไข CSS แล้ว

   ในภาพที่ 7 เราจะเห็นว่า แถบเมนูยังบดบัง banner ของคุณอยู่ เราสามารถแก้ไขได้โดยการปรับค่า height ในแท็ก #header ใน css ได้

   ภาพที่ 8 แก้ไขค่า height ใน #header

   ในภาพที่ 8 นั้นเราได้ทำการแก้ไขค่า height จาก 100px เป็น 180px เพื่อความสูงที่เหมาะสมกับ banner และจะเห็นว่ายังมีโลโก้หรือข้อความต่างๆ ที่ยังไม่เรียบร้อย ดังนั้น เราต้องเก็บงานในขั้นตอนสุดท้าย

5. เก็บงานสุดท้าย ปิดโลโก้ และแถบอื่นๆ

   ให้เข้าไปยังเมนู "หน้าตาการแสดงผล / โลโก้และไตเติ้ล" เลือก

   • โลโก้: ไม่ต้องการให้แสดงโลโก้
   • สโลแกน: (ลบทิ้งทั้งหมด)

   คลิกปุ่ม Update และไปยังเมนู "หน้าตาการแสดงผล / หัวและท้ายเว็บเพจ" เลือก

   • Top Menu (H3): (คลิกเอาเครื่องหมายถูกออกทั้งหมด = ปิดการใช้งาน)
   • Welcome (H4): (คลิกเอาเครื่องหมายถูกออก = ปิดการใช้งาน)

   เมนูต่างๆ ก็จะอันตรธานหายไปทั้งหมด และได้ผลลัพธ์ที่เราต้องการดังนี้

   ภาพที่ 9 ผลลัพธ์หลังจากการปิดโลโก้และเมนูต่างๆ

เป็นอันเสร็จเรียบร้อย!!! แล้วถ้าคุณปรับธีมจนพอใจเสร็จแล้ว คุณสามารถเปลี่ยนไปใช้ธีมใหม่ของคุณเองได้ จากเมนู "หน้าตาการแสดงผล / เลือกธีม" แล้วก็เลือกธีมที่คุณสร้างนะคะ

เขียนโดย
กัญจรัตน์ แจ่มศรี (กัน) | Web Developer/Programmer
เมื่อ 15 ก.พ. 2553 16:10:47