WordPressでWP-PageNaviの設定をサクッと行う

2690.org

4年前

自分用スニペットになりますが、WP-PageNaviを自分好みに設定するのって地味に面倒で毎回細かい部分を過去サイトで確認したいたので、この機会にまとめておこうと思います。

確認環境

WordPress 5.4.2
WP-PageNavi 2.93.3

1.プラグインを入れる

まぁここは省略しますw　WP-PageNaviを検索してインストールしてください。

2.WP-PageNaviの設定

以下の画像のように設定します。

3.pagenavi設置

PageNaviを設定したい箇所に以下のコードを貼り付けます。余計な文字を入れずにシンプルにするのがポイント。

<?php
if( function_exists('wp_pagenavi') ):
wp_pagenavi();
endif;
?>

4. ナビゲーションのSCSS

SCSSファイルを貼り付けておきます。

.wp-pagenavi {
    clear: both;
    line-height: 2rem;
    font-size: 1.1rem;
    text-align: center;
    padding: 1.5rem;
    a{
            text-decoration: none;
            background-color: #f1f1f1;
            color: #333;
            padding: 0.5em 0.8em;
            margin: 0 0.1rem;
            &:hover{
                    background-color: #333;
                    color: #fff
            }
    }
    span.current{
            background-color: #333;
            color: #fff;
            padding: 0.5em 0.8em;
            margin: 0 0.1rem;
    }
}//wp-pagenavi

[itemlink post_id=”1951″]