LoginSignup
1

More than 5 years have passed since last update.

WordPressでbodyに任意のid名を指定する

Posted at

内容

各ページのCSS指定やグローバルナビゲーションでbodyのidを利用したり、
WordPressでbodyに任意のid名を指定したい。

解決コード1 各ページに任意のid名を指定

条件分岐で各テンプレートごとに任意のid名を指定する方法。
投稿カテゴリはスラッグ名を自動で取得しつつ任意のカスタマイズが可能です。

header.php
<?php
  // 親スラッグ取得
  function get_parent_slug() {
    global $post;
    if (is_page() && $post->post_parent) {
      $post_data = get_post($post->post_parent);
      return $post_data->post_name;
    }
  }
  if ( is_front_page() ) {
  //top
    $body_id = 'topPage';
  } else if ( is_single()) {
  //投稿ページ
    $body_id = 'singlePage';
  } else if ( is_page( array('hoge1', 'hoge2', 'hoge3') ) ) {
  //固定ページ複数
    $body_id = 'hogePage';
  } else if ( is_page('cat1') ) {
  //固定ページ
    $body_id = 'cat1Page';
  } else if ( is_page('fuga') || get_parent_slug() === 'fuga' ) { 
  //固定ページの親子
    $body_id = 'fuga Page';
  } else if ( is_page() ) {
    $body_id = ''.$post->post_name.'Page';
  } else if ( is_category() ) {
    $category = get_the_category();
    $body_id = 'category_'.$category[0]->category_nicename.'Page';
  }
?>

解決コード2 スラッグやカテゴリ名をid名で利用する

こちらはスラッグやカテゴリ名を使用するカスタマイズ
固定ページやカテゴリ名が多くてもスラッグやカテゴリ名を利用して、
任意のカスタマイズが可能です。

function.php
$body_id ="";
if ( is_single() || is_page() ) {
  $body_id = ' id="'.$post->post_name.'Page" ';
} else if ( is_category() ) {
  $category = get_the_category(); 
  $body_id = ' id="cat_'.$category[0]->category_nicename.'Page" ';
}
header.php
<body <?php echo $body_id; ?>>

参考サイト

WordPressでページ毎にbodyタグのidを振る | かちびと.net
http://kachibito.net/wordpress/body-id-width-post-name.html

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1