ポスト(投稿記事)に様々なクラスを付与するテンプレートタグ「post_class」

デフォルトテーマ「Twenty Eleven」は、Twenty Ten よりも大分テンプレートファイル数が多い。テンプレートが増えると、それだけ記事に付加される CSSクラスも多くなる。

WordPress には、テーマをより細かくスタイリングするために、テンプレートタグ「post_class」が用意されている。
ポスト(投稿記事)に様々なクラスを付与する「post_class」について調べてみた。


 
◆ テンプレートタグ「post_class()」の詳細は以下の通り。

Usage 利用方法

post_class を利用するには、下記のようにテンプレートファイルのコンテンツ領域に記入する。戻り値が必要な場合は、get_post_class() を使用する。

[PHP]

>[/PHP]

post_class は、表示されるページのクラス属性に次の値のいずれか、または複数を表示する。

  • .post-id (記事の通し番号)
  • .post (post-type)
  • .attachment (アタッチメント)
  • .sticky (固定ページ)
  • .hentry (Atomのmicroformatのページ)
  • .category-ID (カテゴリーID)
  • .category-name (カテゴリー名)
  • .tag-name (ダグ名)
  • .format-name (フォーマット名)

 
Default Values 規定値

post_class で付与される CSSクラスは、次のように条件分岐タグに基づいて表示される。

  • Front Page : post post-id hentry
  • Single Post : post post-id hentry
  • Sticky Post : sticky
  • Author : post post-id
  • Category : post post-id category-ID category-name
  • Tags : tag-name post post-id
  • Archives : post post-id
  • Search : post post-id
  • Attachment : attachment post post-id
  • Format : format-name

 
Parameters 引数

  • class
    クラス デフォルトでは指定なし。
    (一つ、もしくは複数のクラスの追加する場合は、シングルスペースで区切って記入)

 
Adding More Classes クラスの追加

クラスを追加する場合は、下記のように記入する。

[PHP]

Display Posts Outside of the Loop ループ外での使用

ループ外または代替ループ内の記事を表示するために、post_class の2番目のパラメータにポストID を指定できる。クラスはそのポストから決定される。

[PHP][/PHP]

 

「ポスト(投稿記事)に様々なクラスを付与するテンプレートタグ「post_class」」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>