วิธีการเพิ่มระดับแม้ / รายการแปลกของคุณ WordPress

คุณต้องการเพิ่มคลาสคี่และแม้กระทั่งบทความเกี่ยวกับหัวข้อของคุณ บล็อก WordPress ? การเพิ่มคลาสจะช่วยให้คุณแสดงสไตล์เฉพาะสำหรับแต่ละบทความ

ในบทช่วยสอนนี้เราจะแสดงให้คุณเห็นถึงวิธีการแสดงคลาสหรือแม้กระทั่งคี่บน WordPress

เพิ่มคลาสทำไม คู่ "หรือ" แปลก » ในธีมของคุณ บล็อก WordPress ?

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

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

ที่กล่าวว่าเราจะดูวิธีการเพิ่มชั้นเรียนในบทความของคุณ บล็อก WordPress.

วิธีการเพิ่มคลาสแม้แต่ / แปลกใน WordPress

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

WordPress ยังมีฟังก์ชั่นที่เรียกว่า " post_class ซึ่งนักพัฒนาธีมใช้เพื่อเพิ่มคลาสให้กับบทความ

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

เพียงเพิ่มโค้ดนี้ลงในไฟล์ functions.php ของคุณ ธีม WordPress.

ฟังก์ชั่น oddeven_post_class ($ classes) {global $ current_class; $ ชั้นเรียน [] = $ current_class; $ Current_class = ($ current_class == 'คี่') หรือไม่? 'Even': 'แปลก'; กลับ $ ชั้น; } Add_filter ('post_class', 'oddeven_post_class'); โกลบอล current_class $; $ Current_class = 'คี่';

ฟังก์ชันนี้จะเพิ่มคลาสให้กับรายการที่แปลกและแปลก ๆ

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

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

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

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

นี่คือผลที่ได้:

คุณจะต้องฝึกฝนเล็กน้อยเพื่อให้ได้ผลลัพธ์ที่ดี แต่สำหรับสิ่งนี้คุณจะต้องเชี่ยวชาญ CSS หรือใช้เครื่องมือเช่น CSS ฮีโร่.

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