WordPressで現在閲覧しているページのスラッグを<body>タグのクラスに追加表示する方法のご紹介です。
body_class()で出力されるクラスについて
まずはWordPress のテンプレートタグのbody_class()ですが、Twenty Fourteenテーマを利用している場合、トップページであれば、
|
1 |
<body class="home blog logged-in masthead-fixed list-view grid"> |
投稿の詳細ページであれば、
|
1 |
<body class="single single-post postid-3 single-format-standard logged-in masthead-fixed singular"> |
固定ページであれば、
|
1 |
<body class="page page-id-2 page-parent page-template-default logged-in masthead-fixed singular"> |
カスタム投稿タイプのアーカイブページであれば、
|
1 |
<body class="archive post-type-archive post-type-archive-sample logged-in masthead-fixed list-view"> |
のようなクラスが出力されます。
出力されるクラス名をCSSでスタイル指定してあげれば、ページ別にデザインを変更することができます。
参考ページ
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/body_class
body_class() にスラッグを追加表示
ページ別に出力されるクラスに加えて、現在閲覧中のページのスラッグも追加表示したい場合は、ご利用のテーマフォルダ内のfunctions.phpを開いて、以下のコードを追加します。|
1 2 3 4 5 6 7 8 |
function pagename_class($classes = '') { if (is_page()) { $page = get_page(get_the_ID()); $classes[] = $page->post_name; } return $classes; } add_filter('body_class','pagename_class'); |
「about」というスラッグ名の固定ページであれば、
|
1 |
<body class="page page-id-2 page-parent page-template-default logged-in masthead-fixed singular about"> |
と、<body class=””>の最後にスラッグ名が追加で表示されます。
コメント