Blog

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

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

131007 0018




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

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

131007 0019


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

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


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

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


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


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

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

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

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

Function Reference/get previous post « WordPress Codex

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



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


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


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



見た目もすっきりして満足です。
131007 0022


ただ、スタイルシートは一部のクライアントでは適用されないことがあるので、できればスタイルシートにあまり頼らない形にした方がいいのかな、なんてことも考えながら、今回はここまで。

以前の Stinger 3 関連のエントリもよろしかったらどうぞ




最後まで読んでいただきありがとうございます。

follow us in feedly 左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいです


Facebook ページでも情報を発信していますのでよろしかったら「いいね!」をお願いします

RSSリーダへの登録は こちら からどうぞ。

URL
TBURL

コメントとトラックバック

  • Comments ( 0 )
  • Trackbacks ( 1 )

No commented yet.

  1. […] ◆ [WP] Stinger 3のフッターで次の記事がきちんとリンクされない問題を修正する ( via 最近,気になったこと… ) […]

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

フェイスブックでのコメント

Return Top