ThaiTeam WordPress Theme

อ้างว่าธีมนี้ไม่สมบูรณ์มานานจนละอายเกินกว่าจะอ้าง ธีมนี้เนื่องมาจากงาน Barcamp Bangkok ที่ผ่านไปซะนานนั่นแหละ

ใส่ว่าเป็นเวอร์ชั่น 0.5 ก่อนแล้วกัน ขอเฉพาะคนที่เคยลงธีมของ WordPress มาทดสอบละกันนะครับ

ตัวอย่างอยู่ที่ Thaiteam.Vaivaisoft.com

ส่วนขั้นตอนการลง

วิธีติดตั้ง

1. ดาวน์โหลดไฟล์ธีมจาก ThaiTeam Theme - (ดาวน์โหลด: 758)
2. แตกไฟล์ แล้วนำไปไว้ที่ Folder สำหรับเก็บธีมของบล็อกตนเอง เช่น /wp-content/themes/thaiteam
3. ไปที่หน้า Admin เลือก Appearance -> Themes แล้ว Activate Theme ที่ติดตั้งไว้
4. ควรตั้งให้รูปย่อ (Thumbnail) มีขนาด 200×150 px โดยไปที่ Setting -> Media -> Thumbnail 200×150 Crop เพื่อใช้แสดงในหน้า Catalog ได้พอดี
5. รูปที่ใช้ใน Blog / Post ควรกว้างสุด 600px แนะนำให้ตั้งให้รูปขนาดกลาง (Medium) มีขนาดกว้าง 600px สูงเท่าไหร่ก็ได้ (เช่น 600px)
6. รูปที่ใช้ใน Product Detail / Page ควรกว้างสุด 640px แนะนำให้ตั้งให้รูปขนาดใหญ่ (Large) มีขนาด 640px สูงเท่าไหร่ก็ได้ (เช่น 640px)
7. ถ้าอยากได้ Catalog ให้สร้าง Page เลือก Page Template เป็น Catalog แล้วสร้างหน้าย่อย (Child Page) ที่ต้องการ ระบบจะเอาหน้าที่เป็นหน้าย่อยมาทำเป็นรายการ Catalog ให้
8. ควรสร้าง Page ชื่อ Home ไว้เป็นหน้าแรก และสร้าง Page ชื่อ Blog ไว้รวมข่าว เมื่อสร้าง Page แล้วไปที่ Setting -> Reading เลือก A static page แล้วตั้งให้ Front Page = Home, Posts Page = Blog
9. ระบบจะสร้าง Sidebar ให้เท่ากับจำนวน Page ที่อยู่สูงสุด (ติด Root เช่น About – พยายามอย่าให้ Slug เป็นชื่อภาษาไทย เดี๋ยวงง) อยากได้อะไรใน Sidebar ก็ไปที่ Appearance -> Widgets แล้วลากไปใส่
10. แน่นอนว่ามี Sidebar สำหรับ Home ด้วย คือก้อน Widget ที่อยู่ใต้ Banner นั่นแหละ แนะนำว่า ควรมีแค่ 2-4 Widgets พอ

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

1. ดาวน์โหลด PSD จาก ThaiTeam PSD - (ดาวน์โหลด: 575)
2. แนะนำให้แก้แค่ Logo/Banner แล้ว Save ทับไป
3. สามารถลองเปิดไฟล์ Html เพื่อดูภาพรวม แล้วลองแก้ CSS ดูได้ครับ
4. ผมใช้สัญญาอนุญาตแบบ GPL คร่าวๆ คืออยากแก้อะไรก็ได้เต็มที่ครับ ไม่ต้องคง link ใน footer ก็ได้ครับ แต่เก็บไว้ซักที่ในโค้ด เผื่อคนอื่นจะได้หาเจอครับ

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

1. Get The Image แสดงรูปในหน้า Catalog (ต้องมีถ้าจะใช้ Catalog)
2. PJW Query Child Of สำหรับดึงหน้าย่อยมาเป็น Catalog (ต้องมีถ้าจะใช้ Catalog)
3. simple Section Navigation Widget สำหรับแสดงหน้าย่อยใน Sidebar ด้านข้าง (ต้องมีถ้าต้องการแสดงหน้าย่อย)
4. pageMash > Page Management สำหรับช่วยเรียง Page (หน้า) กรณีหน้าเยอะๆ ติดตั้งแล้วจะอยู่ในเมนู Page ของ Admin
5. WP Page Numbers แสดงเลขหน้าด้านล่างในส่วนของ Blog และ Product
6. Live Search Popup ระบบค้นหา อยู่ตรงเมนูด้านขวา
7. Lightbox Gallery การทำให้ Gallery ใน WordPress แสดงรูปแบบ LightBox (สร้างกล่อง Modal Dialog ขึ้นมา แล้วทำให้หน้าเว็บมืดลง)
8. ILC Folding ทำให้การแสดงหน้าย่อยลำดับที่ 2 เป็นต้นไป ค่อยๆ เลื่อนโชว์ (ลองคลิกเมนูด้านซ้ายในหน้าหลักสูตรกราฟฟิค I ใน ITValley)

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

Change Log

• 0.5 – 1st time preview
• 0.6 – change Catalog Page Template to disable excerpt. Change link of logo and site name

เรื่องอื่นๆ ที่เกี่ยวข้อง

• ประชันเหล่า CMS ณ บาร์แคมป์
• ธีมข้าพเจ้าอ้วน (Wide Blog Happens)
• ธีมข้าพเจ้า: Blog Happens
• WordCamp Bangkok 2008
• ออกรายการช่างคุย เรื่อง Web Design

ก่อนหน้านี้เคยบันทึกถึง ธีมข้าพเจ้า ไปแล้ว เป็นธีมแจกฟรีสำหรับใช้กับ 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: ธีมบล็อกอ้วน

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

วิธีติดตั้ง

1. ดาวน์โหลดไฟล์ธีมจาก Wide Blog Happens Theme (491)
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 จาก Wide Blog Happens PSD (367)
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 แสดงเลขหน้าด้านล่าง

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

เรื่องอื่นๆ ที่เกี่ยวข้อง

• ประชันเหล่า CMS ณ บาร์แคมป์
• ออกรายการช่างคุย เรื่อง Web Design
• เปิดสอนเวิร์ดเพรสเบื้องต้น, ออกแบบเว็บ, CSS+XHTML และสร้างธีม
• ผันตัวเองมาเป็นไพร่ขายแรงงาน
• ก่อตั้งสำนัก Small Valley และโครงการ Small Books

เริ่มจากการแซวกันไปมา จบลงที่เอากันจริงๆ เลยละกัน (เฮ้ย อย่าคิดลึก) นั่นคือ งานบาร์แคมป์คราวนี้ จะมีการจัดประชัน CMS กันด้วย รายละเอียดที่ CMS Showdown ใน BarCamp Bangkok 3

และกระผมก็นำทีม WordPress สุดที่รักสู้ศึก

ตอนนี้มีแนวร่วมกล้าตายดังนี้

1. @iMenn
2. @ripmilla
3. @thangman22
4. @kajeaw
5. @warong
6. @aumpradya
7. @MP3WizarD

บอกว่าจะทำธีมให้ดูคร่าวๆ วันนี้ ตอนนี้ยังไม่ได้เริ่มเลย อ๊าค ไปปั่นงานต่อก่อนก่า…

ออกแบบมีติดกรอบและกริดเต็มที่ ใครที่ขี้เกียจคงเดาได้ทันทีว่าใช้ 960.gs แน่นอน :p

Thai Team Theme

เรื่องอื่นๆ ที่เกี่ยวข้อง

• ไทยทีม – ธีมเวิร์ดเพรส
• ธีมข้าพเจ้าอ้วน (Wide Blog Happens)
• ออกรายการช่างคุย เรื่อง Web Design
• เปิดสอนเวิร์ดเพรสเบื้องต้น, ออกแบบเว็บ, CSS+XHTML และสร้างธีม
• ผันตัวเองมาเป็นไพร่ขายแรงงาน

Blog Happens: Free WordPress Theme

แจก WordPress Theme ของกระผมนะขอรับ เผื่อใครสนใจ

Download ที่เว็บฝรั่งของกระผมละกันนะครับ Blog Happens by Chris Happens
หรือที่เว็บทางการของ WordPress เอง ที่ Blog Happens at Theme Directory

ภาพถ่ายตุ๊กตาควาย โดยคุณ lk นะครับ ส่วนภาพหลังมาจากธีม Leopard ของ Mac

เรื่องอื่นๆ ที่เกี่ยวข้อง

• ไทยทีม – ธีมเวิร์ดเพรส
• ธีมข้าพเจ้าอ้วน (Wide Blog Happens)
• ประชันเหล่า CMS ณ บาร์แคมป์
• WordCamp Bangkok 2008
• ออกรายการช่างคุย เรื่อง Web Design

Presentation ครับ (เพิ่มเติม: วันที่ 20 ทาง Slideshare.net นำไปขึ้นเป็น สไลด์แนะนำ ด้วยล่ะ ดีใจ )

WordPress Bangkok Theme

ส่วน Free WordPress Theme เชิญที่ หน้า WordPress Bangkok Theme

เรื่องอื่นๆ ที่เกี่ยวข้อง

• ไทยทีม – ธีมเวิร์ดเพรส
• ธีมข้าพเจ้าอ้วน (Wide Blog Happens)
• ประชันเหล่า CMS ณ บาร์แคมป์
• ธีมข้าพเจ้า: Blog Happens
• ออกรายการช่างคุย เรื่อง Web Design