[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 ของเราในการควบคุมได้มากขึ้นจากเดิม ลองไปประยุกต์ใช้งานดูนะครับ


Posted

in

by

Comments

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

  1. Pattaya Lh Upara Avatar

    แจ่มแมว กำลังอยากรู้เลย

  2.  Avatar
    Anonymous

    พี่ครับ แนะนำหน้าเว็บตัวอย่างที่มีการใช้ body class ไม่เห็นภาพ ก็เลยไม่เข้าใจว่า มันใช้ทำอะไร

    1.  Avatar
      Anonymous

      เว็บนี้ก็ใช้ครับ 555

      คือ จริง ๆ แล้วถ้าไม่เห็นภาพ ให้นึกถึงว่า ถ้าทำเว็บที่แต่ละหน้าเปลี่ยน background ก็ได้ครับ

Leave a Reply

Your email address will not be published. Required fields are marked *