スラッグをクラスとして付与する方法【WordPress】

「投稿ごとにスラッグをCSSのクラス名として付与して、記事単位で個別のスタイルを当てたい」という場面、実務でよくあります。post_class()やbody_class()を使えば自動でスラッグ入りのクラスが付く、という説明を見かけることがありますが、実際のWordPressコアのソースコードを確認したところ、これらの関数はスラッグをそのままクラス名として出力する機能を持っていません。この記事では、実際にどんなクラスが自動で付くのか、そしてスラッグをクラスとして使いたい場合にどう実装すればいいのかを解説します。

post_class()が実際に出力するクラス

ループ内で記事を囲むタグでよく使われるpost_class()は、投稿ID・投稿タイプ・ステータス・投稿フォーマット・所属するカテゴリやタグのスラッグなどをクラスとして出力しますが、投稿自体のスラッグは含まれません。

<article <?php post_class(); ?>>
  ...
</article>

例えばスラッグがmy-first-post、IDが123の通常の投稿であれば、実際に出力されるのは次のようなクラスです。

<article class="post-123 post type-post status-publish format-standard hentry category-news">

post-123はスラッグではなく投稿ID、category-newsはカテゴリのスラッグです。投稿そのもののスラッグ(my-first-post)を表すクラスは、どこにも含まれていません。

スラッグをクラスとして追加するには、フィルターフックを使う

スラッグをクラスとして本当に使いたい場合は、post_classフィルターフックを使って、functions.phpから自分で追加します。

function add_slug_to_post_class( $classes, $class, $post_id ) {
  $post = get_post( $post_id );
  if ( $post ) {
    $classes[] = 'post-slug-' . $post->post_name;
  }
  return $classes;
}
add_filter( 'post_class', 'add_slug_to_post_class', 10, 3 );

$post->post_nameが投稿のスラッグにあたるプロパティです。これでpost_class()の出力にpost-slug-my-first-postのようなクラスが追加され、CSS側で.post-slug-my-first-post { ... }のようにピンポイントでスタイルを当てられるようになります。

ページ全体(bodyタグ)にスラッグベースのクラスを付けたい場合は、同じ考え方でbody_classフィルターを使います。

function add_slug_to_body_class( $classes ) {
  if ( is_singular() ) {
    global $post;
    if ( $post ) {
      $classes[] = 'slug-' . $post->post_name;
    }
  }
  return $classes;
}
add_filter( 'body_class', 'add_slug_to_body_class' );

まとめ

• post_class()・body_class()は投稿ID・投稿タイプ・カテゴリ/タグのスラッグなどは出力するが、投稿自体のスラッグは自動では含まれない
• スラッグをクラスとして使いたい場合は、post_classフィルター(記事単位)またはbody_classフィルター(ページ全体)から、$post->post_nameを使って自分で追加する
• 追加したクラスは、CSS側で.post-slug-スラッグ名 { ... }のようにピンポイントでスタイルを当てるのに使える