y.o.designers-works

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

プラグインを使わないでページネーションを設置する方法ですが、
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&gt;',
		'next_text'          => '&lt;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]'); ?> 

表示したい場所(テンプレートファイル)にショートコードを挿入すれば設定完了です。
コピーして使用するときは全角大括弧を半角に直してください。

まとめ

余計なプラグインを入れずにページネーションを実装できるのはいいですね。
オリジナルのテーマを作成するときには是非導入したいテンプレートタグです。

スポンサーリンク

他にオススメな記事