[WP] Stinger 3のフッターで次の記事がきちんとリンクされない問題を修正する

Stinger 3 のカスタマイズも一段落、と思っていたら、ふとみた時に課題を見つけてしまってバタバタと直した @azur256 です。今回は記事ページのフッタ部分にある前後の記事へのナビゲーションがうまく動作していないというものでした。

前後ページへのリンクがおかしい

これに気づいた時のエントリの構成は以下の写真のように

recolte Capsule Cutter でタマネギのみじん切りをしてみたの前の記事がパソリリーダ RC-S390 で接続エラーが出た時の対処方法で、さらに前が Bluetooth 接続のパソリリーダーライター RC-S390 を iPhone から使ってみたとなっています。

パソリリーダーのエラー対処のエントリを表示した時のフッタ。NEXT に recolte でのみじん切りのエントリが出て欲しいのに出ていません。

どうも表示されないパターンは予約投稿などで連番をスキップしたり変更したりした場合の模様。私は書きためている記事の公開タイミングを色々と変えていたりするので、サーバに登録された順とは全く違う順序で記事を公開しています。
こうした記事はどうも表示ができないことがあるようです。

原因が分かったので修正した

この表示をしているのは single.php の中の p-navi 部分。ここのソースを見ると、前後のエントリへのリンクを previous_post_link と next_post_link で作成しています。

  <div class="p-navi">
    <p> PREV :
      <?php previous_post_link('%link', '%title', TRUE, ''); ?>
      <br/>
      NEXT :
      <?php next_post_link('%link', '%title', TRUE, ''); ?>
    </p>
  </div>

116

117

118

119

120

121

122

123

<p> PREV :

<?php previous_post_link('%link', '%title', TRUE, ''); ?>

<br/>

<?php next_post_link('%link', '%title', TRUE, ''); ?>

</p>

</div>

これが一般的な書き方なので最初は疑わなかったのですが、念のため codex で関数の仕様を確認してみました

テンプレートタグ/previous post link – WordPress Codex 日本語版

すると「このタグはループ内で使用しなければなりません。」だそうです。これは盲点ですね。Stinger 3 の p-navi はループの外にあるのでうまく動いていなかったようです。

となれば、ループの外で使える関数に置き換えれば良いので get_previous_post を使って書き換えました。

Function Reference/get previous post « WordPress Codex

こちらが書き換え後のソース

  <div class="p-navi">
    <p>
      <?php
        $prev_post = get_previous_post();
        if (!empty( $prev_post )): ?>
          PREV : <a href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php echo $prev_post->post_title; ?></a><br />
      <?php endif; ?>
      <?php
        $next_post = get_next_post();
        if (!empty( $next_post )): ?>
          NEXT : <a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php echo $next_post->post_title; ?></a>
      <?php endif; ?>
    </p>
  </div>

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<p>

<?php

$prev_post = get_previous_post();

if (!empty( $prev_post )): ?>

PREV : <a href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php echo $prev_post->post_title; ?></a><br />

<?php endif; ?>

<?php

$next_post = get_next_post();

if (!empty( $next_post )): ?>

NEXT : <a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php echo $next_post->post_title; ?></a>

<?php endif; ?>

</p>

</div>

これで無事に表示できるようになりました。

2行に折り返されると見栄えが悪いので

ここまでやったら、今度はリンクが折り返されるのが見栄えが悪いなぁ〜、ということで、スタイルシートで省略することにしました。
先ほどのリンクを div タグで p-navi-link という id を指定しておいて、以下のスタイルを適用しただけ。smart.css にも同じように反映させておきましょう。

#p-navi-link {
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow:
  ellipsis;-o-text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  _display: inline;
}