水瓶座列車

どこまで行けるか、とりあえず発車します。

WordPressのモバイルでのページネーションの表示方法

f:id:aquarius999:20180903222813j:plain

 

WordPressの記事数が増えてきたので、記事一覧で表示する記事数を制御するために、

paginate_links()を使用しています。

paginate_links()の使い方は、WordPress Codex日本語版サイトに載っていますが、

サンプルコードは、こんな感じです。

 

<?php
$big = 999999999; // need an unlikely integer
echo paginate_links(
  array( 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ), 
         'format' => '?paged=%#%',
      'current' => max( 1, get_query_var('paged') ),
      'total' => $query->max_num_pages, 'prev_next' => false, )
);
?>

 

ローカル環境で動作確認して問題なかったので、サーバーにアップしたのですが、

モバイル表示で確認するのを忘れていました。

そして確認したところ、案の定、正確に表示できていませんでした。

私が想像していたイメージは、PCと同じように、

   「 1 2 3 ・・・ 5 」

こんな感じで、ページ数分のリンクが表示されるのを期待していましたが、

   「 1 」

しか表示されません。

PC上では正確に表示されているのに、モバイル上ではうまくいかない。

同じPHPコードを使っているのに・・・。

で、気づいたのですが、モバイルの場合、paginate_links()のarray()の引数に、

 

'prev_next' => false,

 

をしてはダメな仕様なのかもしれません。

これを入れなければ、「次へ」というリンクが表示されるので、

この「次へ」リンクだけでページ数分移動できました。

動きというより表示の問題でした。

 

しかし、なんか私は画面デザイン的に「次へ」リンクは嫌なので、 

もうこうなったら、自分で作るしかない!!

作るといっても、0からではなくて以下のような順番で作っていきます。

  

 

 

  

1.paginate_links()の戻り値を配列で受け取る。

 

WordPress Codexの参考コードは、

 

echo paginate_links( array(・・・

 

のようにpaginate_links()の戻り値を直接、echoで表示していました。

それをやめて配列で受け取るように修正します。

パラメータのtypeにarrayを設定して、このように戻り値を変数で受け取るようにします。

 

$pagination = paginate_links( 
  array( 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
         'format' => '?paged=%#%',
         'current' => max( 1, get_query_var('paged') ),
         'total' => $query->max_num_pages,
         'prev_next' => false,
         'type' => 'array', 
         ) );

 

私は、他の言語も知っているのですが、この変数の型宣言をせずに、

いきなり使えるのが少し違和感がありました。

 

2.paginate_links()から返される文字列の中身を確認する。

 

受け取った文字列がどのようなHTMLコードになっているか全体を確認します。

確認の仕方ですが、表示しているブラウザでソース表示にします。

表示したソースと表示している画面を比較しながらページネーションの 部分を特定します。

ページネーションの部分は、class名がpage-numbersが含まれている箇所になります。

例えばこんな感じです。

 

<a class="prev page-numbers" href="http://192.168.11.4:81/wordpress/page/2/">&laquo; 前へ</a>
<a class='page-numbers' href='http://192.168.11.4:81/wordpress/page/1/'>1</a>
<a class='page-numbers' href='http://192.168.11.4:81/wordpress/page/2/'>2</a>
<span aria-current='page' class='page-numbers current'>3</span>
<a class='page-numbers' href='http://192.168.11.4:81/wordpress/page/4/'>4</a>
<a class='page-numbers' href='http://192.168.11.4:81/wordpress/page/5/'>5</a>
<a class="next page-numbers" href="http://192.168.11.4:81/wordpress/page/4/">次へ &raquo;</a>

 

含まれていると言ったのは、「前へ」と「次へ」リンクもあるからで、 これらがpaginate_links()から返されるコードになります。

 

3.自分でCSSでカスタマイズする。

 

全体を確認できたら、修正する方法を考えます。

ページネーションを構成する<a>タグのクラス名には、全てpage-numbersが含まれています。

自分でCSSでカスタマイズしたいので、これを全てmy-page-numbersに置き換えます

そして、文字列配列をPHPの関数のimplode()で連結してechoで表示させました。

文字列配列で受け取ると、1行が1要素になっているみたいなので、

全体を一気にechoで表示させるために連結します。

そのコードは、こんな感じです。

 

$chg = str_replace('page-numbers', 'my-page-numbers', $pagination );
echo implode($chg);

 

そして、次にCSSを書いていきます。

 ページネーション表示のアラインをセンターにしたいので、私の場合は、

<div>タグで囲みクラス名をhome-paginationにしています。

例としては、こんな感じです。

 

.home-pagination {
  text-align: center;
  color: #33aa88;
}
.my-page-numbers { 
  padding: 0.5em 0.75em;
}
.prev.my-page-numbers,
.next.my-page-numbers {
  color: #33aa88; 
  background-color: #ffffcc;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  display: inline-block;
  font-size: 24px;
  font-size: 1.0rem;
  line-height: 1;
  padding: 0.25em 0.5em 0.4em;
}
.prev.my-page-numbers {
  float: left;
}
.next.my-page-numbers {
  float: right;
}

 

もうここまでくると、自由に設定できるので、モバイルでもなんでも、簡単に表示できます。

 

4.最後に

 

私がWordPressでブログを始めた時は、プラグインばかりを使っていました。

ページネーションも最初プラグインを探してインストールしましたが、

使い方を理解するのに時間がかかるものばかりでした。

というかなんか設定が面倒だったので、こんなものに時間かけるならPHPを理解した方が早いし、

更に自分で作るので後で修正するのも楽になるはずと思ったのです。

やっぱり自分でコードを作るということは楽しいですね。

 

 

<関連・おすすめ記事>

HTML/CSSを独学で勉強するための始め方 - 水瓶座列車

WordPressループの書き方の解説 - 水瓶座列車

WordPressでモバイル対応のためのCSS作成方法の解説 - 水瓶座列車

レンタルサーバー上のWordPressデータをローカル環境にインポートする手順 - 水瓶座列車

WordPressのトップページに記事一覧を表示する方法 - 水瓶座列車

XAMPPでWordPressをレンタルサーバー無しで使用する手順 - 水瓶座列車