2026.05.14

WordPressで先頭固定表示の記事にピン留めアイコンを表示する方法｜is_sticky

MARKLEAPS

WordPress

WordPressには、特定の記事を一覧の先頭に固定表示できる「先頭に固定表示」機能があります。

ただし、デフォルトの状態では「どの記事が固定表示されているのか」が分かりづらい場合があります。

そこでおすすめなのが、固定記事に「ピン留めアイコン」を表示する方法です。

この記事では、WordPressで先頭固定表示した記事にピンアイコンを表示する方法を、サンプルコード付きで解説します。

WordPressの「先頭に固定表示」とは

WordPressには、特定の記事を投稿一覧の先頭へ固定できる「先頭に固定表示」機能があります。

重要なお知らせやキャンペーン情報など、常に目立たせたい記事を上部に表示できる便利な機能です。

ただし、見た目だけでは固定記事と分かりにくい場合があります。

そのため、ピン留めアイコンを表示することで、

重要記事が分かりやすくなる
UI/UXが向上する
デザインのアクセントになる

といった効果が期待できます。

記事を先頭に固定表示する方法については以下の記事で紹介しています。

WordPressで記事を先頭に固定表示する方法｜クイック編集・ブロック・クラシック対応

WordPressでは、特定の記事を常に一覧の先頭に表示する「先頭固定表示」という機能があります。例えば「重要なお知らせ」や「キャンペーン情報」など、常にユーザーの目に触れさせたい記事に便利な機能です。本記事では、ク […]

markleaps.com

ピン留めアイコン表示サンプルコード

基本コード

ピンを表示したい箇所に、以下のコードを記述します。

<?php if ( is_sticky() ) : ?>
  <span class="post_sticky_pin">
    <img src="<?php echo get_template_directory_uri(); ?>/images/pin.png" alt="固定記事">
  </span>
<?php endif; ?>

<?php if ( is_sticky() ) : ?>

<img src="<?php echo get_template_directory_uri(); ?>/images/pin.png" alt="固定記事">

<?php endif; ?>

例えば、以下のような場所に設置するケースが一般的です。

サムネイルの上
カード型レイアウトの右上
記事タイトルの前後

コードの意味

is_sticky() は、対象の記事が「先頭に固定表示」に設定されているかを判定するWordPress関数です。

記事が「先頭に固定表示」に設定されている場合のみ、ピンアイコンを表示します。

<?php if ( is_sticky() ) : ?>

1	<?php if ( is_sticky() ) : ?>

そのため、通常記事には影響せず、固定記事だけにアイコンを表示できます。

Font Awesomeでピンアイコンを表示し、CSS調整するサンプル

<?php if ( is_sticky() ) : ?>
  <span class="post_sticky_pin">
    <i class="fa-solid fa-thumbtack"></i>
  </span>
<?php endif; ?>

<?php if ( is_sticky() ) : ?>

<?php endif; ?>

CSS例

.post_sticky_pin {
  position: absolute;
  top: 12px;
  right: 12px;
}
.post_sticky_pin i {
  transform: rotate(30deg);
  filter: drop-shadow(0px 4px 12px rgba(0,0,0,0.2));
}