熊本県でWeb、EC、IoTなら株式会社クロコロール

Kuroko Blog

クロコブログ

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

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

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を出力することもできます。(あまりやらないと思いますが…)

まとめ

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


The following two tabs change content below.

クロコのケン

株式会社クロコロールで主にコーディングを担当しています。 まだまだ見習いの身です…

«

»

CATEGORY

Google Photography MakeShop NEWS CSS/HTML Wordpress Amazon Yahoo!ショッピング Other