ในการเขียนเว็บนั้น ตัว tag body ถือว่าเป็น tag ที่คลุมตัวเนื้อหาของเราไว้ ดังนั้นการที่เราใส่ class ให้กับตัว body ก็จะทำให้เราสามารถใช้ CSS ในการควบคุมการแสดงผลได้หลากหลายมากขึ้น โดย WordPress เองได้เตรียมคำสั่งที่ใช้สำหรับใส่ class ให้กับตัว tag body อยู่แล้ว นั่นก็คือ body_class เรามาดูวิธีการใช้งาน body_class กันนะครับ
body_class
วิธีใช้ง่าย ๆ ครับ ก็แค่ใส่ body_class ไปใน tag body เลยครับ
[php gutter=”false”]
<body <?php body_class(); ?>>
[/php]
แล้ว WordPress จะสร้าง class มาให้เราเอง โดยตัวอย่าง class ที่สร้างขึ้นให้ เช่น
home: ถ้าเป็นหน้า homesearch: ถ้าเป็นหน้า searchpostid-XXX: ถ้าเป็นหน้า post จะใส่ postid- ตามด้วยเลข ID ของ post นั้นlogged-in: ถ้าเราทำการ login ไว้อยู่page-id-XXX: ถ้าเป็นหน้า page จะใส่ page-id- ตามด้วยเลข ID ของ page นั้น
เป็นต้น
ตัวอย่าง class ที่ WordPress สร้างขึ้น
[php gutter=”false”]
<body class="page page-id-18 page-template page-template-page-tools-php logged-in admin-bar">
[/php]
จะเห็นว่า มันได้สร้าง class ต่าง ๆ ขึ้นมา โดย class ที่สร้างขึ้นมานั้นก็บอกได้ว่า นี่เป็นหน้า page โดยเป็น id เลขที่ 18 ใช้ template คือ page-tools.php และ login อยู่ รวมถึง admin-bar ปรากฎอยู่ แต่ class ที่ WordPress สร้างขึ้นนั้น จะไม่มีเกี่ยวกับ category เลย เราจะมีวิธียังไง ให้มันมี class เกี่ยวกับ category ละ
เพิ่ม class เกี่ยวกับ category ลงใน body_class
ให้นำ code นี้ไปแปะใน functions.php
[php]
// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
add_filter(‘body_class’, ‘category_id_class’);
[/php]
โดยเราสามารถนำไปประยุกต์ใช้งานได้ ว่าอยากจะให้เป็น class อย่างไรบ้าง อย่าง code ที่ยกตัวอย่างนั้น จะมี class เป็นชื่อของ category ผสมไปใน body_class ปรกติด้วย
วิธีใช้งาน body_class เพิ่มเติม
เราสามารถเพิ่ม class ที่เราต้องการได้ในคำสั่ง body_class ได้ง่าย ๆ โดย
[php gutter=”false”]
<body <?php body_class( ‘rabbitinblack’ ); ?>>
[/php]
คือ การใส่ class ชื่อ rabbitinblack เข้าไปเพิ่มเติมจาก body_class เดิม
นำ body_class ไปประยุกต์ใช้กับ CSS
การที่เราใส่ class ให้ tag body นั้น จะทำให้เราสามารถควบคุมการแสดงผลได้มากขึ้น โดยสมมติว่า ปรกติ div ที่มี id ชื่อ content กว้าง 900px แต่ในหน้า page ที่มี id เป็น 18 จะให้กว้างแค่ 500px เราก็สร้าง CSS แบบนี้ครับ
[css]
#content { width:900px; }
.page-id-18 #content { width:500px; }
[/css]
ซึ่ง class ที่สร้างมาก็มีอยู่หลากหลาย ดังนั้นเราก็ทำ CSS ของเราในการควบคุมได้มากขึ้นจากเดิม ลองไปประยุกต์ใช้งานดูนะครับ
Leave a Reply