sticky_class()

sticky_class()
目次

sticky_class()とは?

sticky_class() は、WordPressの関数のひとつで、「注目記事(いわゆる “先頭固定投稿”)」に対して、HTMLクラス属性を出力する関数です。

この関数は、通常の投稿ループ内で使用することで、固定された投稿(=「先頭に表示」設定された投稿)に特別なCSSクラス sticky を付加し、装飾や表示制御を簡単に行えるようにします。

Sticky Posts(先頭固定投稿)とは?

WordPressでは、投稿編集画面の「公開」オプションから
「この投稿を先頭に固定表示」 にチェックを入れることで、通常の投稿順(新しい順)とは関係なく、トップに固定表示させることができます。

これが「Sticky Post(先頭固定投稿)」と呼ばれます。

sticky_class()の管理画面での設定方法

  1. 投稿を編集
  2. 公開オプション内の「ステータスと公開状態」
  3. 「先頭に固定表示」にチェック
  4. 更新

sticky_class() の基本構文

sticky_class();

この関数は戻り値を持たず、class="sticky" を直接出力します。主に以下のように使います:

<article <?php sticky_class(); ?>>

実際の使用例(post_class()と併用)

WordPressテーマのループ内でよく見かける書き方です:

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

このように書くことで、固定投稿であれば以下のように出力されます:

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

※通常投稿であれば sticky クラスは追加されません。

sticky_class() の裏側

内部では以下のようなシンプルな処理が行われています:

function sticky_class() {
    if ( is_sticky() && is_home() && ! is_paged() ) {
        echo 'class="sticky"';
    }
}

ポイント

  • is_sticky():その投稿が「先頭固定投稿」かどうか
  • is_home():現在のページがブログのトップページ(投稿一覧)かどうか
  • !is_paged():1ページ目のみ(2ページ目以降では表示しない)

sticky_class() の条件と制限

条件内容
固定投稿である投稿が sticky(先頭に固定)設定されている
トップページ(is_home)固定投稿が表示されている場所がトップページである
1ページ目のみ(!is_paged)2ページ目以降では無効

sticky_class() の出力結果(固定投稿の場合)

class="sticky"

これは <article><div> など、HTML要素のクラスとして使うのが一般的です。

post_class() との比較

WordPressには post_class() という、投稿に複数の状態に応じたクラスを自動で付加する関数があります。

実は post_class() を使うと、sticky投稿には自動的に sticky クラスが含まれるため、通常は sticky_class() を使う必要はありません

post_class()の出力例(固定投稿)

<article <?php post_class(); ?>>
<article class="post sticky type-post status-publish ...">

そのため、多くのテーマでは sticky_class() を使わず、post_class() だけで済ませています。

sticky_class() を使うメリット

以下のような場合には、sticky_class() の使用が有効です:

  • post_class() を使っていない、または使えない場合
  • 自分で class 属性を定義している要素に追加するだけの簡単な制御をしたいとき
  • 明示的に sticky かどうかだけを判定し、スタイルを当てたいとき

CSSとの組み合わせ例

article.sticky {
  background-color: #fff9d7;
  border-left: 5px solid #f7c600;
}

このようにすれば、固定投稿にだけ背景色やマークをつけることができます。

フックとの組み合わせ例(高度)

フィルターで sticky 投稿にバッジを追加したい場合:

add_filter('the_title', function($title, $id){
    if ( is_sticky($id) && is_home() && !is_paged() ) {
        $title = '📌 ' . $title;
    }
    return $title;
}, 10, 2);

sticky_class()のまとめ

項目内容
関数名sticky_class()
用途固定投稿に class="sticky" を出力する
出力形式echo(戻り値なし)
主な使用場所<article> などHTML要素の属性内
出力条件先頭固定投稿かつトップページの1ページ目でのみ
post_class()との違いpost_class()にもstickyクラスが自動で含まれるため併用の必要は少ない

sticky_class() は機能的には非常にシンプルですが、固定投稿の存在をCSSやJavaScriptで明確に分けるための小さな仕掛けとして活用できます。
テーマによっては post_class() に含まれる sticky クラスだけで十分な場合もありますが、意図的にクラスを付加したいときには役立つ存在です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

初めてホームページを作成したのは1996年。
2000年よりフリーランスで主に中小企業、学校、各種公的団体、個人事業主のWordPressを活用したホームページ制作を行っています。WordPressテーマはそれぞれのクライアントに合わせて作成しています。
WordPressを活用したサイト運営のための情報発信をしていきます。

目次