AFFINGER5|記事一覧下のページネーションを増やす方法

コード実装後のページネーション

おのです。

WordPressテーマで、AFFINGER5・STINGER PROシリーズのページネーションを増やす方法です。

ページネーションは、投稿インデックス一覧の最下部に表示されているページ数の表示です。

デフォルトだと「3」のあとは「...」で省略されてしまうので、ページを順番にめくりたい場合は不便です。

そこで今回は、ページネーションをデフォルトより多く表示させる方法について解説します。

 


スポンサーリンク


AFFINGER5|記事一覧下のページネーションを増やす方法

AFFINGER5・STINGER PROでページネーションの表示数を増やす方法は、
親テーマの「st-pagenavi-php」で行います。

  1. 該当箇所を見つける
  2. コードを追加する

基本的にはコードを2行追加するだけなので、そこまで難しい作業ではありませんが、念のためバックアップを取ったり前後のコードをメモ帳にコピーしたりしておきましょう。

ちなみに、調べてないので確実なことは言えませんが、おそらくAFINGER・STINGERシリーズはほぼ共通だと思います。私はAFFINGER5ですが、EXやSTINGERの人も一応チェックしてみてください。

↓ちなみに、前提としてページネーションはこの部分です。

ページネーション

 

1. 該当箇所を見つける

まずはコードを書き込む該当を見つけます。

管理画左側メニューで「外観」→「テーマエディター」に進みます。

 

↓「編集するテーマを選択」で親テーマを選択してください。「選択」をクリックしないと切替わりませんので、親テーマを選択したらクリックしてください。

「編集するテーマを選択」の部分で「AFFINGER5」を選択します

 

↓右側にテーマファイルが出てくるので「st-pagenavi-php」を選択します。

st-pagenavi-php

54と55の間にコードを追加します。'current'と'prev text'の間に入る形にします。※テーマによって何行目か変わる可能性もあります。

 

2. コードを追加する

↓55行目、56行目に以下のコードを追加します。'current'と'prev text'の間に入る形にします。

/*記事一覧下のページネーションを増やす https://ono-code.com*/ 
'end_size' => 0, 
'mid_size' => 5,

 

↓コード追加後の上下は以下のような形になります。

/*コード追加後*/
'base'    => str_replace( $big, '%#%', get_pagenum_link( $big, false ) ),
'format'  => '?paged=%#%',
'current' => max( 1, get_query_var( 'paged' ) ),
'end_size' => 0,
'mid_size' => 5,
'prev_text'          => '« Prev',
'next_text'          => 'Next »',

 

コード追加後の上下

※37~38行目にも同じコードが書いてありますが、モバイルの設定となります。モバイルのページネーションも変更したい場合は、モバイルの数字を変更してください。

 

コードの説明

mid size とend sizeの説明

'end_size' =>0,は、ページネーションの最初と最後の両端にいくつ表示するかです。数字の部分だけを変更してください。1~3が無難です。

'mid_size' =>5,は、現在選択しているページの前後に表示させる数を変えることができます。デフォルトが1なので、通常はカラム幅に合わせて1~5の間で選ぶといいでしょう。

 

コードを書き込んだら保存をすれば完了です。

デフォルトより多く表示されるようになるので、使いやすくなります。

コード実装後のページネーション

※将来的に何か不具合が起きたときは、追加で書き込んだコードを削除すれば元に戻ります。

 

ちなみに、Googleのページネーションは10まで表示されるようになっていて、10以降は一つずつ増えていきます。

Googleのページネーション

 

 

おすすめ≫ペライチとは|無料可:ホームページ作成が簡単にできる【おすすめ】

おすすめ≫WordPress|おしゃれでSEOに強いおすすめの有料18テーマ【厳選】

 

 

あわせて読みたい

このエントリーをはてなブックマークに追加

 

 無料オンライン体験レッスン可・プログラミング学習でスキルアップ!

WebデザインやHTML、CSS、サイトカスタマイズに関するプログラミング学習は、
プログラミングのオンラインスクールCodeCampがおすすめです。

特に、初心者でもHTMLとCSSの基礎を学んでおくと、ブログやサイトのデザインカスタマイズが圧倒的に上達してスムーズにできるようになります。

無料オンライン体験レッスンが可能なので、興味のある人は受講してみるといいです。当然、完全に初めての人でも問題ありません。

やはり自分のブログやサイトのデザインを自由にコントロールスキルが身につくと、サイト運営がとても楽になます。スキルアップもできるし、とても勉強になりますよ。

≫CodeCamp

-AFFINGER・STINGER
-, ,

© 2020 OnoCode.