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

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

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

1 body_class
2 post_class
3 the_ID
4 まとめ

body_class

用例

実際のHTML出力例

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

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

出力例

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

post_class

用例

実際のHTML出力例

二つ目は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同様に以下のように記述します。

出力

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

the_ID

用例

実際のHTML出力例

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

投稿ID:

まとめ

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

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

熊田賢太郎

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