วิธีเพิ่มคลาสคี่/คู่ในโพสต์ของคุณในธีม WordPress

คุณต้องการเพิ่มคลาสคี่และคู่ให้กับโพสต์ในธีม WordPress ของคุณหรือไม่?

การเพิ่มคลาสคี่และคลาสคู่ทำให้คุณสามารถจัดสไตล์โพสต์อื่นๆ ที่แตกต่างกันได้

ในบทความนี้ เราจะแสดงวิธีเพิ่มคลาสคี่/คู่ให้กับโพสต์ของคุณในธีม WordPress

เหตุใดจึงเพิ่มคลาสคี่/คู่ในโพสต์ของคุณในธีม WordPress?

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

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

ที่กล่าวว่าเรามาดูวิธีเพิ่มคลาสคี่และคลาสให้กับโพสต์ของคุณในธีม WordPress

การเพิ่มคลาสคี่/คู่ให้กับโพสต์ในธีม WordPress

WordPress สร้างคลาส CSS เริ่มต้นและเพิ่มลงในรายการต่างๆ บนเว็บไซต์ของคุณได้ทันที คลาส CSS เหล่านี้ช่วยให้นักพัฒนาปลั๊กอินและธีมเพิ่มสไตล์ของตนเองสำหรับรายการต่างๆ

WordPress ยังมาพร้อมกับฟังก์ชันที่เรียกว่า post_class ซึ่งนักพัฒนาธีมใช้เพื่อเพิ่มคลาสในการโพสต์รายการ ดูคำแนะนำของเราเกี่ยวกับวิธีจัดสไตล์โพสต์ WordPress แต่ละรายการให้แตกต่างกัน

post_class ยังเป็นตัวกรอง ซึ่งหมายความว่าคุณสามารถเชื่อมโยงฟังก์ชันของคุณเองเข้ากับตัวกรองได้ นี่คือสิ่งที่เราจะทำที่นี่

เพียงเพิ่มโค้ดนี้ลงในไฟล์ Functions.php ของธีมของคุณ ในปลั๊กอินเฉพาะไซต์ หรือในปลั๊กอินส่วนย่อยโค้ด

function oddeven_post_class ( $classes ) {
   global $current_class;
   $classes[] = $current_class;
   $current_class = ($current_class == 'odd') ? 'even' : 'odd';
   return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class = 'odd';

เราขอแนะนำให้เพิ่มโค้ดนี้โดยใช้ปลั๊กอิน WPCode เป็นปลั๊กอินตัวอย่างโค้ดที่ดีที่สุดที่ทำให้การเพิ่มโค้ดที่กำหนดเองใน WordPress ปลอดภัยและง่ายดาย

ในการเริ่มต้น คุณต้องติดตั้งและเปิดใช้งานปลั๊กอิน WPCode ฟรี สำหรับคำแนะนำ โปรดดูคำแนะนำในการติดตั้งปลั๊กอิน WordPress

เมื่อเปิดใช้งาน ให้ไปที่หน้า Code Snippets » + Add Snippet จากแดชบอร์ด WordPress จากนั้นคลิกปุ่ม 'ใช้ตัวอย่างข้อมูล' ใต้ตัวเลือก 'เพิ่มโค้ดที่กำหนดเองของคุณ (ตัวอย่างข้อมูลใหม่)'

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

จากนั้น วางโค้ดจากด้านบนลงในช่อง "ดูตัวอย่างโค้ด" และเลือก "PHP Snippet" เป็นประเภทโค้ดจากรายการแบบเลื่อนลงทางด้านขวา

หลังจากนั้น เพียงสลับสลับจาก 'ไม่ใช้งาน' เป็น 'ใช้งานอยู่' แล้วคลิกปุ่ม 'บันทึกตัวอย่าง'

ฟังก์ชันนี้จะเพิ่มเลขคี่ลงในโพสต์แรก จากนั้นเลขคู่ และอื่นๆ

คุณสามารถค้นหาคลาสคี่และคู่ได้ในซอร์สโค้ดของไซต์ของคุณ เพียงใช้เมาส์ไปที่ชื่อโพสต์ จากนั้นคลิกขวาเพื่อเลือก Inspect หรือ Inspect Element

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

นี่คือตัวอย่าง CSS ที่คุณสามารถใช้เป็นจุดเริ่มต้นได้:

.even {
background:#f0f8ff;  
} 
.odd {
 background:#f4f4fb;
}

นี่คือลักษณะที่ปรากฏบนไซต์ทดสอบของเรา:

หากคุณไม่ทราบวิธีใช้ CSS คุณอาจต้องการดูคำแนะนำของเราเกี่ยวกับวิธีเพิ่ม CSS ที่กำหนดเองลงในไซต์ WordPress ของคุณอย่างง่ายดาย

เราหวังว่าบทความนี้จะช่วยให้คุณเรียนรู้วิธีเพิ่มคลาสคี่หรือคู่ให้กับโพสต์ของคุณในธีม WordPress คุณอาจต้องการดูคำแนะนำของเราเกี่ยวกับวิธีจัดรูปแบบเค้าโครงความคิดเห็น WordPress ของคุณและผู้เชี่ยวชาญของเราคัดสรรเครื่องมือสร้างเพจ WordPress ที่ดีที่สุด

หากคุณชอบบทความนี้ โปรดสมัครรับวิดีโอบทแนะนำช่อง YouTube สำหรับ WordPress ของเรา คุณยังพบกับเราได้บน Twitter และ Facebook