[WP]WordPress でbody_class() にスラッグを追加表示する方法｜WordPress｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[WP]WordPress でbody_class() にスラッグを追加表示する方法

スポンサード

WordPress で、現在閲覧しているページのスラッグを<body>タグのクラスに追加表示する方法のご紹介です。

body_class() で出力されるクラスについて

まずはWordPress のテンプレートタグのbody_class() ですが、

Twenty Fourteen テーマを利用している場合、トップページであれば、

<body class="home blog logged-in masthead-fixed list-view grid">

1	<body class="home blog logged-in masthead-fixed list-view grid">

投稿の詳細ページであれば、

<body class="single single-post postid-3 single-format-standard logged-in masthead-fixed singular">

1	<body class="single single-post postid-3 single-format-standard logged-in masthead-fixed singular">

固定ページであれば、

<body class="page page-id-2 page-parent page-template-default logged-in masthead-fixed singular">

1	<body class="page page-id-2 page-parent page-template-default logged-in masthead-fixed singular">

カスタム投稿タイプのアーカイブページであれば、

<body class="archive post-type-archive post-type-archive-sample logged-in masthead-fixed list-view">

1	<body class="archive post-type-archive post-type-archive-sample logged-in masthead-fixed list-view">

のようなクラスが出力されます。

出力されるクラス名をCSS でスタイル指定してあげれば、ページ別にデザインを変更することができます。

参考ページ
テンプレートタグ/body class

body_class() にスラッグを追加表示

ページ別に出力されるクラスに加えて、現在閲覧中のページのスラッグも追加表示したい場合は、
ご利用のテーマフォルダ内のfunctions.php を開いて、以下のコードを追加します。

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');

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」というスラッグ名の固定ページであれば、

<body class="page page-id-2 page-parent page-template-default logged-in masthead-fixed singular about">

1	<body class="page page-id-2 page-parent page-template-default logged-in masthead-fixed singular about">

と、<body class=””>の最後にスラッグ名が追加で表示されます。

スポンサード