公開日: 2017年11月10日
更新日: 2021年12月18日

WordPressで作ったホームページを効率よく装飾するために記述した方がいいテンプレートタグ３つ

こんにちは、クロコロールの熊田です。
本日はWordPress初心者向けに必須ではないですけれど記述しておけばコーディングが捗るテンプレートタグを紹介したいと思います。

1 body_class
2 post_class
3 the_ID
4 まとめ

body_class

用例

<body <?php body_class(); ?>>

1	<body <?php body_class(); ?>>

実際のHTML出力例

<body class="page page-id-34 page-template page-template-default logged-in">

1	<body class="page page-id-34 page-template page-template-default logged-in">

一つ目はbodyタグ用のテンプレートタグbody_classです。
これを記述しておけば固定ページの場合は上記のように「page」「page-id-○○」、トップページの場合は「home」、アーカイブページの場合は「archive」、個別投稿ページの場合は「single」などのページに応じたclass名を出力してくれます。
ページごとにデザインを変えたい時には重宝しますね。

また独自のclass名を付加する場合は以下のように記述します。

<body <?php body_class('class-name'); ?>>

1	<body <?php body_class('class-name'); ?>>

出力例

<body class="page page-id-34 page-template page-template-default logged-in class-name">

1	<body class="page page-id-34 page-template page-template-default logged-in class-name">

classを複数付加したい場合は以下のように記述します。

<body <?php body_class('class-name01 class-name02 class-name03'); ?>>

1	<body <?php body_class('class-name01 class-name02 class-name03'); ?>>

post_class

用例

<div <?php post_class(); ?>>

1	<div <?php post_class(); ?>>

実際のHTML出力例

<div class="post post-123 category-news">

1	<div class="post post-123 category-news">

二つ目はpost_classです。
このテンプレートタグは index.php や single.php・archive.php などの投稿を表示するテンプレートで使用します。
必ずWordPressループ内で使用して下さい。
表示する投稿の状態によって以下のようなクラス名を出力します。

post-(投稿 ID)
post または attachment またはカスタム投稿タイプ
type-カスタム投稿タイプ
status-公開状態
format-standard または format-ページのフォーマット名
post-password-required （パスワード保護されている）
has-post-thumbnail （アイキャッチ画像付き）
sticky （先頭に固定表示）
hentry （hAtom microformat との互換性を持たせる)
category-カテゴリーのスラッグまたは category-(カテゴリー ID)
tag-投稿タグのスラッグまたは tag-(投稿タグ ID)

カテゴリーやタグごと、あるいはカスタム投稿タイプごとにデザインを変える時には便利です。

また独自のclass名を付加する場合はbody_class同様に以下のように記述します。

<div <?php post_class('class-name'); ?>>

1	<div <?php post_class('class-name'); ?>>

出力

<div class="post post-123 category-news class-name">

1	<div class="post post-123 category-news class-name">

classを複数追加するのも同様です。

<div <?php post_class('class-name01 class-name02 class-name03'); ?>>

1	<div <?php post_class('class-name01 class-name02 class-name03'); ?>>

the_ID

用例

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

1	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

実際のHTML出力例

<article id="post-123" class="post post-4564 category-news">

1	<article id="post-123" class="post post-4564 category-news">

三つ目はthe_IDです。
現在の投稿のIDを表示します。
特定の投稿にCSSを指定したい時に使えますね。
以下のように書いて画面上に投稿IDを出力することもできます。（あまりやらないと思いますが…）

<p>投稿ID: <?php the_ID(); ?></p>

1	<p>投稿ID: <?php the_ID(); ?></p>

まとめ

上記のテンプレートタグを使えばWordPressが自動でclassやidを出力してくれます。
他にもページの一部分でプラグインを使った時に出力されるclassやidなど「Wordpressが自動出力するclass・id」を積極活用することでいちいち独自にclass名・id名を考えて付与する手間が省けます。
勝手に出力されるのであればそれを使用しない手はないでしょう。

この記事を書いた人
最新の記事

熊田賢太郎

株式会社クロコロールのコーディングを担当。デジタルハリウッドを卒業後、クロコロールに入社。HTML、CSS、JavaScript、Jquery、PHPの言語を使用。現在は、WordPressエンジニアとして、Webサイト制作、既存サイトのカスタマイズやリニューアル、テーマの制作、サイトのWordPress化、カスタム投稿作成、保守などを担当。