WordPress

[WordPress] category.phpでのページ送りを設置する方法。

投稿日:

[WordPress] category.phpでのページ送りを設置する方法。

WordPressでカテゴリー一覧などのアーカイブページで「ページ送り」実装をする方法です。

フォーラムをみてもイマイチわからないのが残念。でも結構みんな同じところで悩んでいるんだなぁ、とちょっと安心。

「カテゴリーページでページ送りをしたいんだ!」という、同じお悩みをお持ちの方にサクッと説明します。

アーカイブページやカテゴリーページで、エントリー一覧を表示させるには、次のような流れになっていると思います。

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // 投稿のループ処理
    endwhile;
    // ページ送りの処理
else :
    // 投稿がない場合の処理
endif;
?>

このページ送りの処理に、

<?php posts_nav_link();?>

と記述するだけでも、「« 前ページへ — 次ページへ »」というふうに表示されますが、スタイルを変えたいときにちょっと厄介です。

そこで、以下のように記述するとクラスが指定できるので、スタイルをあてることができます。

<?php
    // リンクが無い場合はNULLが返ってくる
    $prev_link = get_previous_posts_link('前のページ');
    $next_link = get_next_posts_link('次のページ');

    if ( isset( $prev_link ) or isset( $next_link ) ) {
        echo '<ul id="pagination">', PHP_EOL;
        if( isset( $prev_link ) ) {
            echo '<li>',$prev_link,'</li>', PHP_EOL;
        }
        if( isset( $next_link ) ) {
            echo '<li>',$next_link,'</li>', PHP_EOL;
        }
        echo '</ul>', PHP_EOL;
    }
?>

はい、これでクラス指定ができるようになりました。あとは、お好みでスタイルを整えれば完成です。

例えば、こんな感じで。

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;
}

参考:category.phpでのページ送りができません / WordPressフォーラム

-WordPress
-

Copyright© キツネノシッポ , 2019 All Rights Reserved Powered by STINGER.