同じカテゴリ内で「次のページへ」移動ページャーを設置する方法

4

次のページへというページャーはとても大事ですよね。

私のテンプレートには標準でついていなかったので、思考錯誤してつけてみました。

当初ページャーの背景に色をつけずにただ設置していただけだったのですが、どうもスマホで見た際見落とすようで、「タラコのブログ、FC2じゃなくなって見にくくなった」と大不評。オイ、2万円越えのテンプレート買ったのにそりゃないぜｗｗ

どう見づらいのかお聞きしたら、
・背景にうっすら色がついててみにくい
・次のページへがない
・全体的に文字が小さい

全体的に文字が小さいってのは、私がFC2の時あえてでかくしてたからそう思う訳で、今は至って標準サイズなので無視ｗ

ページャーに背景色をつけ目立たせると、良い感じになってるって喜んでくれました。

あと、背景は白にしましたところ、ぼんやりしなくなったようでこちらも大好評。#fffff1と#ffffffって視覚的にそんなに違うか？老眼になる歳じゃないのに、なんだよもー

まあでも、２人に言われたので、大人しく白にしました。長いものには巻かれよう。

そして、問題のページャー。

普通に次のページへっていう全体的なページャーと、同カテゴリで進退するカテゴリ内移動ページャーをつけてみました。

まずは、一般的なページャー

<ul id="pagination" class="post">
<?php
// postが無い場合は文字列""が返ってくる
$prev_post = get_previous_post();
$next_post = get_next_post();

if ( !empty( $prev_post ) ):
?>
<li class="prev"><?php previous_post_link(‘「%link」前の記事→’); ?></li>
<?php
endif;
if( !empty( $next_post ) ): ?>
<li class="next"><?php next_post_link(‘←次の記事「%link」’); ?></li>
<?php endif; ?>
</ul>

次はカテゴリページ内を動いてくれるページャー

<ul id="pagination" class="post">
<?php
// postが無い場合は文字列""が返ってくる
$prev_post = get_previous_post();
$next_post = get_next_post();

if ( !empty( $prev_post ) ):
?>
<li class="prev"><?php previous_post_link(‘「%link」 同カテゴリ内の前の記事→’,’ %title’, true,’4′); ?></li>
<?php
endif;
if( !empty( $next_post ) ): ?>
<li class="next"><?php next_post_link(‘←同カテゴリ内の次の記事 「%link」’,’%title’, true,’4′); ?></li>
<?php endif; ?>
</ul>

この例はカテゴリID4のカテゴリを除外するっていう設定です。

カテゴリ編集ページのところを開けばアドレスバーに表示されているIDを調べられるので、それで親カテゴリであるID4を除外する設定にしました。親カテゴリなどの除外したいカテゴリが無い人は・・

(‘「%link」 同カテゴリ内の前の記事→’,’%title’, true,’4′)を
(‘「%link」 同カテゴリ内の前の記事→’,’%title’, true)にするだけです。

,’4′　がカテゴリIDを指定する項目になります。

複数指定したい場合は、,’4&7′　とすれば、カテゴリID4とID7が除外設定されます。

&で追加すれば良いようです。

たとえば、親カテはこれで除外したとしても子カテというか、同一レベルのカテゴリを複数指定しているページでは１番左が適応されてしまうので、同一レベルのカテゴリは複数指定しない方が良さそうですね。

もし、カテゴリ子３を回っていて、カテゴリ子１とカテゴリ子３を含むページを表示した場合、次のページへがカテゴリ子１になっちゃうから。

これは読者さんも紛らわしいですよね。でも、複数指定したい場合もあるし、難しい問題だ。

ちなみにデザインCSSは↓こちら↓を使ってます。

ul#pagination {
list-style-type: none;
overflow: hidden;
padding: 0 10px;
margin: 15px 0;
}
ul#pagination.posts li {

}
ul#pagination.posts li a {
display: block;
padding: 3px 5px;
border: 1px solid #aaa;
border-radius: 3px;
background-color: #556b2f;
color: #fff;
}
ul#pagination.posts li a:hover {
background-color: #99C348;
}
ul#pagination.post li.next,
ul#pagination.posts li.prev {
float: left;
}
ul#pagination.post li.prev,
ul#pagination.posts li.next {
float: right;
}

これに背景やラウンドやマージンなどをちょいちょいと設定してこんな感じ

ページネーションの作り方同カテゴリ内次のページへ

前々から気付いていたいけど、私がつける適当すぎる記事名をなんとかしないと、記事名一覧も、このページネーションの良さも全く発揮できていないｗｗ

でもブログ村からの流入は、適当すぎる題名の方が効果あるから考えどころ。

Googleニュースでフォローする

COMMENTS & TRACKBACKS

  • Comments ( 4 )
  • Trackbacks ( 0 )
  1. By 水村亜里
    2014年11月25日 at 6:23 PM返信

    ジャンプ先の記事タイトルがフルテキストで表示されていて素晴らしいですね。
    そのSEO効果はKAETENで実証済みです。

    • By taraco18
      2014年11月26日 at 8:48 AM返信

      水村さん
      「」の位置が変だったので、ちょっと改変しましたが、これで完璧です！
      てか、SEO効果のあることだったんたんですねー
      記事名が入っている方が、これも読んでみるかって思ってもらえるかなって思ったけど、それが大切なんでしょうね。
      KAETENに出会ってから、テンプレートを意識するようになりました。紹介してくれた水村さんには感謝してます～

  2. By 水村亜里
    2014年11月26日 at 5:21 PM返信

    KAETENを使っていると、キーワードが入っていないはずの前後の記事もヒットしてしまいます。
    どこかに検索されたキーワードが入っているか探したら、ページャーに記載されている前後の記事タイトルがヒットしていたようです。

    • By taraco18
      2014年11月27日 at 11:06 AM返信

      水村さん
      へー！そうなんですね！！！
      だったら、このカテゴリ内移動のページャーはとっても効果がありそうですね！
      勉強になりますー

LEAVE A REPLY TO taraco18 CANCEL REPLY

*
*
* (公開されません)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。