Radiate ธีมฟรี เรียบง่าย

Radiate ธีมฟรี เรียบง่าย


 

Radiate จัดเป็นธีมยอดนิยมตัวหนึ่ง เป็นธีมในแนว business ที่เรียบง่าย โทนสีขาว-เทา เป็น responsive และยังมีการปรับปรุงอยู่ ปัจจุบันคือเวอร์ชัน 1.1.1 แต่มีข้อเสียอยู่ตรงภาพ header ที่ปรับเปลี่ยนไปตามขนาดของเบราเซอร์แล้วไปซ้อนกับเมนู นอกนั้นก็ถือว่าดี น่าจะเหมาะกับธุรกิจที่เป็น office

โดยรวมๆเป็น theme ที่เอา content ไว้ทางด้านซ้าย พวก widget หรือ sidebar เอาไว้ทางขวา เป็น responsive คือดูบนมือถือได้

จุดที่ customize ได้

ดังที่ได้บอกไปแล้วว่า theme ตัวนี้เป็นแบบเรียบง่าย จึงไม่มีอะไรที่ปรับแต่งได้มาก จุดแรกคือสีของ Text ส่วนที่เป็น header, background ซึ่งสำหรับผู้ที่คุ้นเคยกับ CSS อยู่แล้วอาจจะไม่มีความจำเป็นอะไร

radiate-wordpress-theme

ต่อไปก็คือภาพที่ส่วนหัว ซึ่งก็สามารถแก้ไขได้

radiate-header

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

อีกอย่างหนึ่งคือ theme ตัวนี้ตัวเมนูหลักจะเป็นแบบลอย คือเวลาเราเลื่อนไปข้างล่าง เมนูก็ยังคงอยู่ด้านบน แต่ข้อเสียคือภาพ header จะถูกเมนูทับตลอดเวลา

ส่วนเมนูก็มีเมนูเดียวดังที่บอกไว้ตอนต้น สำหรับคนที่รู้มีวิธีแก้ไข theme คงจะสามารถเพิ่มเมนูได้เอง หรือใช้เป็น widget – custom menu

radiate-menu

ข้อดีง่ายๆที่ฟรีธีมดีๆหลายตัวมักไม่ค่อยใส่มาให้คือช่องสำหรับใส่ custom css ซึ่งจะสะดวกกว่าไปแก้ในเมนู Edit ของ Appearance

radiate-custom-css

การเซต Featured Post

โดยทั่วไป Featured Post หมายถึง โพสต์ที่เรา fix เอาไว้นานๆเพื่อให้คนเข้าดูเห็นตลอด ไม่ต้องการให้ถูกเลื่อนหลายไปเมื่อมีโพสต์ใหม่มาแทน

radiate-featured-page

สำหรับ theme ตัวนี้ก็คือกล่องข้อความสามกล่องในแนวนอนในหน้า home แต่ theme ตัวนี้จะเรียกว่า featured page เพราะเขาให้เซตเป็น page แทนที่จะเป็น post (ใน WordPress การทำ page กับ post แทบไม่ต่างกัน)

ดังนั้นถ้าเรามี featured post ก็ให้สร้างเพจขึ้นมา 3 เพจ แล้วใส่ featured image (ซึ่งควรมี) แล้วเซตเชื่อมโยงก็เป็นอันเสร็จ แต่จะต้องใส่ให้ครบสามเพจ ถ้าใส่ไม่ครบจะมีช่องว่างตามรูป

radiate-featured-page

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

แก้ปัญหาภาพ header ที่กวนใจ

ดังได้กล่าวไว้ตอนต้นว่า theme นี้มีปัญหาที่ภาพ header ซ้อนกับเมนู เพราะเมนูเป็นแบบลอย(เพื่อเวลาเลื่อนเมาส์ก็ยังคงอยู่) และเมื่อดูบนมือถือภาพ header จะไม่หดตามขนาดจอ แต่จะเอาเฉพาะภาพตรงกลางมาแสดง คนที่ชอบก็แล้วไป ไม่ชอบก็ต้องแก้ไข

ที่ยากก็คือ theme ตัวนี้ใช้ Inline CSS ในการจัดตำแหน่งภาพไว้ตรงกลางเพื่อให้เวลาบีบจอหรือดูบนมือถือแล้วเห็นภาพที่อยู่ตรงกลาง ซึ่งโค้ดอยู่ในไฟล์ radiate\inc\extras.php การเข้าไปแก้ไขที่ไฟล์นี้เป็นเรื่องยุ่งยาก วิธีที่ง่ายที่สุดคือตัดเอา header เดิมออกแล้วเอา header ใหม่ใส่แทน

เข้าไปที่ Appearance->Theme->Editor เลือกไฟล์ header.php แล้วแก้โค๊ดตรงส่วนหัว body ใส่แท็ก img แบบธรรมดาเข้าไป

radiate-modify1

สังเกตบรรทัดที่ 23 แก้จาก parallax-bg เป็น _parallax-bg เพื่อไม่ให้ javaScript หรือ CSS ที่อ้างอิงถึง div ตัวนี้ทำงาน (จริงๆต้องลบออก แต่เก็บเอาไว้เผื่อเปลี่ยนใจ)

แล้วไปใส่ใน custom css ตามรูป เพื่อแก้ side effect บางอย่าง

radiate-modify2

อีกจุดหนึ่งรู้สึกว่าขนาดฟอนต์ของไตเติ้ลจะใหญ่เกินไป ถ้าอยากจะลดขนาดลงก็เพิ่มโค๊ดนี้เข้าไปใน custom css

.entry-title {font-size:2.3rem}

(ของเดิมเซตไว้ที่ 3rem)

สรุป

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

คราวหน้าจะแนะนำแนวๆนี้อีกตัวแต่สามารถ customize ได้มากกว่าและมี slide show ด้วย

Close Menu