記事をトップに固定表示する方法と先頭固定表示のカスタマイズに必要なテンプレートタグ

  • 更新日:
  • 公開日:

WordPressにいつの間にか記事を先頭固定表示にする機能が付いてたんですね。調べるとどうやらWordPressのバージョン2.8から実装されてたっぽいです。

そんな機能に気付いてしまい、使い方やら先頭固定表示のカスタマイズに必要なテンプレートタグを調べたのでメモします。

記事を先頭固定表示にする方法

記事を先頭固定表示にする手順は至って簡単。

記事の編集ページを開いて、右側にある「公開状態」の「編集」をクリック。

sticky-post01

すると公開状態の設定が開くので、「この投稿を先頭に固定表示」にチェックを入れてOKボタンを押して保存しましょう。この状態で公開をすると、設定した記事が常時アーカイブの一番上に表示されるようになります。

sticky-post02

先頭固定表示のカスタマイズに必要なテンプレートタグ

先頭固定表示に対応したい時に「これらは必要かな」と思う関数を2つメモしておきます。

先頭固定表示のクラスを吐き出すテンプレートタグ

投稿情報に合わせたクラスを吐き出してくれるテンプレートタグpost_class()があります。

<?php post_class(); ?>

記事の公開設定が先頭固定表示だった場合、「sticky」というクラスを吐き出します。もし先頭固定表示の記事のみデザインを変えたい場合に使えますね。

このテンプレートタグはその他の固定ページや単一記事ページなどでも専用のクラスを吐き出してくれるので、もし使っていない方はなるべく記述した方が良いです。ループ内での記事を囲っているHTMLタグに埋め込んでおきましょう。例えば以下のように。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<!-- ↓こんな感じでループ内の記事を囲っているHTMLタグに埋め込む -->
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <h2><?php the_title(); ?></h2>
    <div><?php the_content(); ?></div>
</div>

<?php endwhile; endif; ?>

 先頭固定表示かどうか判定するテンプレートタグ

先頭固定表示かどうかを調べてくれる、判定用のテンプレートタグis_sticky()が用意されています。コレを使えばHTMLを一括で変更出来ます。

<?php if ( is_sticky() ) : ?>
    <p>先頭固定表示の場合</p>
<?php else : ?>
    <p>それ以外の場合</p>
<?php endif; ?>

例えば私はこのテンプレートタグで条件分岐をしてHTMLを書き換えています。

先頭固定表示をするということは日付との関係を無視して目立たせたい、ということなので日付の他「Pick Up!」という文字を用意して目立たせるようにしてみました。(トップページやその他アーカイブページのみ)

このように条件分岐を使って見栄えを変更します

大体これら2つのテンプレートタグを使って先頭固定表示に対応する形になると思います。


他のブログサービスでは記事の日付を物凄い未来に設定してトップに表示したりしますよね。それをWordPressでは先頭固定表示の機能を使うだけで実現できます。

photo credit: TeryKats via photopincc

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone