เม่น • บล็อก เม่น • บล็อก

ธีมข้าพเจ้าอ้วน (Wide Blog Happens)

อ่าน 5 นาที

ขณะนี้ธีมนี้มีการอัพเดทแล้วนะครับ กรุณาโหลดเวอร์ชั่นใหม่ที่ Blog Happens

ก่อนหน้านี้เคยบันทึกถึง ธีมข้าพเจ้า ไปแล้ว เป็นธีมแจกฟรีสำหรับใช้กับ WordPress นะครับ

ใช้ไปใช้มา พบว่า ความกว้างของรูปที่เคยตั้งไว้ 480 จุด (Pixel) ซึ่งเคยคิดว่าเหมาะทั้งรูปและวีดีโอนั้น เริ่มไม่พอเสียแล้ว

ลองไปทำให้กว้างซัก 640 แบบที่ทำให้ บล็อกคุณจ๋ง ก็พบว่า ไม่ค่อยเหมาะกับรูปแบบ 2 คอลัมน์นี้เท่าไหร่ (คือมี Sidebar และมี Content) เลยมาลงตัวที่ตั้งความกว้างรูปไว้ที่ 600 Pixel เหมาะสุด ไม่กว้างเกินจนอ่านแล้วต้องกวาดสายตาเยอะ และก็ไม่แคบเกินจนใส่รูปใหญ่ๆ ไม่ได้ แล้วก็เลยปรับขนาด Font ให้ใหญ่ซัก 13 px ระยะระหว่างบรรทัดซัก 1.5 em กำลังดี อ่านสบายตา ส่วนบาร์ด้านข้าง กว้าง 270px มีพื้นที่ใส่ตัวอักษรได้ถึง 240px นี่ นับว่าเพียงพอแล้ว (การทำ sidebar ของ blog นั้น ต้องกว้างกว่าออกแบบเมนูของหน้าทั่วไป เพราะมันมักจะมีเนื้อหา/ชื่อเรื่อง/คอมเม้นท์ ยาวๆ มาปะปน) ทำไปทำมาพบว่า บล็อกนี้กว้าง 960px พอดีเป๊ะ เลขสวยจริงเชียว 🙂

Wide Blog Happens - Free WordPress Theme

Wide Blog Happens - Free WordPress Theme

Wide Blog Happens: ธีมบล็อกอ้วน

เนื่องจากของเดิมมันผอมและตัวอักษรเล็กกว่านี้ เพื่อไม่ให้ซ้ำซ้อน ธีมนี้เลยเพิ่มคำอีกนิด จะได้ไม่ซ้ำกัน และก็แนะนำ Plugins มาให้พอประมาณ ถ้าชอบก็โหลดไปติดตั้งแล้ว Activate ได้เลยครับ ไม่ต้องแต่งธีมเพิ่มเรย 🙂

วิธีติดตั้ง

  1. ดาวน์โหลดไฟล์ธีมจาก [download#1]
  2. แตกไฟล์ แล้วนำไปไว้ที่ Folder สำหรับเก็บธีมของบล็อกตนเอง เช่น /wp-content/themes/widebloghappens
  3. ไปที่หน้า Admin เลือก Appearance -> Themes แล้ว Activate Theme ที่ติดตั้งไว้
  4. ควรตั้งให้รูปย่อ (Thumbnail) มีขนาด 80×80 px โดยไปที่ Setting -> Media -> Thumbnail 80×80 Crop
  5. ควรตั้งให้รูปขนาดกลาง (Medium) มีขนาดกว้าง 600 สูงเท่าไหร่ก็ได้ (เช่น 1200) โดยไปหน้าตามข้อ 4.
  6. หน้าแรกของธีม จะไปเอาส่วนเกริ่นนำ/ตัดทอน หรือกล่อง Excerpt มาใส่ ถ้าเราไม่ใส่ มันจะเอาเนื้อหาใน Blog มาใส่ ซึ่งอาจจะทำให้เยอะเกิน ไม่สวย

วิธีปรับแต่งส่วนกราฟฟิค

  1. ดาวน์โหลด PSD จาก [download#2]
  2. แก้ขนาด icon ของเราที่แสดงหน้า/โลโก้ ให้มีขนาดกว้าง 80px สูงเท่าไหร่ก็ได้
  3. หากต้องการเปลี่ยนสีหรือกรอบ ลองปรับแต่งดู แล้ว Save PNG ออกมา (8 bit ก็พอ) จะมี 3 ไฟล์คือ head.png, body.png และ foot.png
  4. สามารถลองเปิด test-home.html เพื่อดูภาพรวม แล้วลองแก้ CSS ดูได้ครับ
  5. ผมใช้ GPL คร่าวๆ คืออยากแก้อะไรก็ได้เต็มที่ครับ ไม่ต้องคง link ใน footer ก็ได้ครับ แต่เก็บไว้ซักที่ในโค้ด เผื่อคนอื่นจะได้หาเจอครับ

ปลั๊กอินที่ใช้

  1. Get The Image แสดงรูปประจำบันทึก *(ต้องมี)*
  2. Search Excerpt แสดงไฮไลท์ข้อความที่ค้นหา
  3. Subscribe To Comments ให้ผู้ทักทาย รับเมล์อัพเดทการคอมเม้นท์ได้
  4. WordPress Related Posts แสดงบันทึกที่คล้ายกัน
  5. WP-PostRatings ระบบเรตติ้งของบันทึก
  6. WP Page Numbers แสดงเลขหน้าด้านล่าง

ลองดูนะคร้าบ มีอะไรสอบถามมาได้ครับ 🙂