プラグイン不要!ショートコードを使いページネーションを設置…

プラグインを使わないでページネーションを設置する方法ですが、
WordPress 4.1からは簡単にページネーションを出力できる「the_posts_pagination();」というテンプレートタグがあります。
ショートコードを使った出力の方法、パラメータに設定できる値を紹介します。
1:functions.phpにショートコードの設定をする
function pagination() { ob_start(); get_template_part('inc/pagination'); return ob_get_clean(); } add_shortcode('pagination', 'pagination');
上記の記述ですと、テーマフォルダの中の’inc’というディレクトリの「pagination.php」というテンプレートファイルを読み込みます。
2:pagination.phpに関数の設定をする
<?php $args = array ( 'prev_text' => 'NEXT>', 'next_text' => '<PREV', 'show_all' => true, ); ?> <div class="pagination"> <?php the_posts_pagination( $args ); ?> </div>
上記のパラメータの設定ですと全ページ番号を表示’NEXT>’という次のページのリンクと'<PREV’という前のページへのリンクの表示します。
“投稿ナビゲーション”という見出しを非表示
screen_reader_textを設定しない場合に、デフォルトで表示されるh2見出しの文字列です。
邪魔なので消します。
.pagination h2.screen-reader-text { display: none; }
3:設定できるパラメータ、パラメータ値について
the_posts_pagination()に必要な引数は$argsの1つですが、任意に指定することもできます。
引数を指定するには配列である必要がありthe_posts_pagination()に指定できる配列には以下になります。
キー / 型 | 説明 | デフォルト値 |
---|---|---|
base [string] |
URLを参照し、ページ番号付きのリンクを生成する。 デフォルトと同じ場合、formatで置き換える |
%_% |
format [string] |
ページネーションのパーマリンク構造を指定 | ?page=%#% |
total [integer] |
全体のページ数 | 1 |
current [integer] |
現在のページ番号 | 0 |
show_all [boolean] |
すべてのページ番号を表示する。 falseの場合、end_size, mid_sizeで調節します。 |
false |
end_size [integer] |
ページ番号のリストの両端(最初と最後)にいくつの数字を表示するか | 1 |
mid_size [integer] |
現在ページの前後のページ番号をいくつ表示するか。 | 1 |
prev_next [boolean] |
リストの中に「前へ」「次へ」のリンクを含むかどうか。 trueの場合、prev_text, next_textを指定 |
true |
prev_text [string] |
前のページへ送る時のリンクの文言 | __( ‘Previous’ ) |
next_text [string] |
次のページへ送る時のリンクの文言 | __( ‘Next’ ) |
type [string] |
戻り値のコントロール。 指定できるのは、plainとlistのみ |
plain |
add_args [array] |
追加のクエリ引数の配列 | false |
add_fragment [string] |
それぞれのリンクに付け加える文字列 | false |
before_page_number [string] |
各ページ番号の前に入れる文字列 | “ |
after_page_number [string] |
各ページ番号の後に入れる文字列 | “ |
screen_reader_text [string] |
スクリーンリーダー用の文言 | __( ‘Posts navigation’ ) |
4:見た目を整える
.pagination a { padding: 1px 8px; display: inline-block; border: solid 1px #cccccc; color: #666666; background-color: #ffffff; font-size: 1em; text-decoration: none; } .pagination a:hover { background-color: #e8e8e8; } .pagination span { padding: 1px 8px; display: inline-block; } .pagination span.current { color: #ffffff; font-size: 1em; background-color: #fd5a79; border: 1px solid #fd5a79; } .pagination { position:relative !important; overflow: hidden; margin-top: 40px; margin-bottom: 20px; text-align: center; clear: both; background-color: transparent; } .pagination h2.screen-reader-text { display: none; } /* 768px以上 */ @media (min-width: 768px) { .pagination a { padding: 1px 10px; display: inline-block; border: solid 1px #cccccc; color: #666666; background-color: #ffffff; font-size: 1.19em; text-decoration: none; } .pagination span.current { color: #ffffff; font-size: 1.19em; background-color: #fd5a79; border: 1px solid #fd5a79; } .pagination span { padding: 1px 10px; display: inline-block; } }
レスポンシブデザインに対応します。
5:表示したい場所にショートコードを挿入
<?php echo do_shortcode('[pagination]'); ?>
表示したい場所(テンプレートファイル)にショートコードを挿入すれば設定完了です。
コピーして使用するときは全角大括弧を半角に直してください。
まとめ
余計なプラグインを入れずにページネーションを実装できるのはいいですね。
オリジナルのテーマを作成するときには是非導入したいテンプレートタグです。