【WordPress】特定の投稿記事を常にトップページに表示「Sticky Posts」


”トップページや新着記事の投稿一覧”において、特定の投稿ページを常に先頭に表示したいことがありませんか。

通常、ブログなどのトップページや新着記事は、投稿日の新しい順に表示されます。

しかし、これではWebサイト製作者がサイト内で重要と考える記事や、閲覧者にぜひとも読んでもらいたい記事が、新たな記事で埋もれることに

WordPressには、特定の投稿記事を常に先頭に表示するために、「Sticky Posts」という機能が用意されています。

その設定をオンにした投稿記事は、常に投稿一覧の先頭に表示(出力)されます。

Sticky Postsは、カテゴリー一覧やタグ一覧などのアーカイブページにおいては、機能しません。

これは、トップページやサイドバーなどの新着一覧のみに対応しています。

以下で、このSticky Postsについて、ご紹介します。

Sticky Postsの設定方法

Sticky Postsを設定する方法は、非常に簡単♪

設定方法

WordPressの投稿の編集ページにおいて、『公開』をクリックした後に現れる「この投稿を先頭に固定表示」のチェックボックスをオンにするだけ。

もし、設定を解除するのであれば、チェックを外すだけで元に戻ります。

①『公開』をクリックします。

②すると、『公開』の下に、『この投稿を先端に固定表示』の項目が現れますので、クリックして”チェック”を入れて『OK』で確定後、『更新』ボタンを押してください。

複数の投稿ページを設定した場合

複数の投稿記事を、このSticky Postsに設定することができます。

この場合、通常であれば、日付の新しいSticky Postsから順に表示されます。

スポンサーリンク

「Sticky Postsを設定した投稿」と「一般の投稿」でデザインを変える

Sticky Postsは、先頭に表示されるだけで、一般の投稿と同じデザインで表示されます。

もし、投稿の一覧で、「Sticky Postsを設定した記事」と「その他の投稿記事」とで、デザインを変えたいのであれば、WordPressループの中で、PHPのif文is_sticky関数を使って、条件分岐させます。

WordPressループとは?

WordPressの投稿を表示するために、使われるPHPコードのこと。
以下のような記述がされます。


<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
ループ処理
<?php endwhile; ?>
<?php endif; ?>

「is_sticky」という関数は、Sticky Postsかどうかを判断するのに使われます

if文による条件分岐構文は、以下のようになります。

if文による条件分岐

<?php if(is_sticky()) : ?>
  Sticky Postsを出力している場合の処理
<?php else : ?>
  その他の場合の処理
<?php endif; ?>

スポンサーリンク

WordPressループの中に、条件分岐を行なう

WordPressループの中に、if文を入れて、以下のように使います。

WordPressループ内で、条件分岐
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php if(is_sticky()) : ?>
<div class="sticky">
  Sticky Postsを出力している場合の処理
</div>
<?php else : ?>
<div>
  その他の場合の処理
</div>
<?php endif; ?>

<?php endwhile; ?>
<?php endif; ?>

Sticky Postsで設定した投稿記事は、「sticky」のclass属性つけたdiv要素で囲み、その他の投稿記事は、class属性をつけていないdiv要素で囲みます。

あとは、CSSで、「widthやborder、background-color」などを変えれば、Sticky Postsで設定した投稿記事をより目立たせれます。

CSSの変更例
.sticky{
  border:5px solid #ff0000;
  background-color:#ccc;
}

ちなみに変更すべきPHPテンプレートは、トップページや新着記事なので、次のようなものになります。

  • home.php
  • index.php
  • new-entries.php(新着記事に関するテンプレート)
スポンサーリンク
ページ先頭へ