Rabbitinblack

Tag: body_class

  • [WordPress] ใส่ class ให้ tag body เพื่อใช้ในการปรับแต่ง

    [WordPress] ใส่ class ให้ tag body เพื่อใช้ในการปรับแต่ง

    ในการเขียนเว็บนั้น ตัว 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 : ถ้าเป็นหน้า home
    • search : ถ้าเป็นหน้า search
    • postid-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 ของเราในการควบคุมได้มากขึ้นจากเดิม ลองไปประยุกต์ใช้งานดูนะครับ