STINGER

STINGER PLUS2のページ送りボタンをちょっとオシャレにするカスタマイズ

投稿日:

STINGER PLUS2カスタマイズシリーズは基本的に予約投稿で朝6時にアップしているでででーさん(@d3_dayo) です!

 
コツコツとテスト環境でカスタマイズを検証することで、このシリーズも少しずつ記事が充実してきました。
 
前回はSTINGER PLUS2のデフォルトでは表示されていない「トップへ戻るボタン」を表示させる方法を紹介しました。

この記事では、記事一覧の下などに表示されるページ送りボタン(ページネーション)をデフォルトのものよりもオシャレにする?カスタマイズを紹介したいと思います!ページネーションのカスタマイズにはプラグインが使われることが多いですが、今回のこのカスタマイズはプラグイン不要でできます。
 
 

スポンサーリンク

STINGER PLUS2

ダウンロード及び規約
STINGER PLUS2は上記のリンクからダウンロードすることができます。
 
 

完成図

今回紹介するカスタマイズを実際にテスト環境で施してみたので、まずは完成図としてスクリーンショットをお見せしたいと思います。
 
・PCの表示

 
・スマホの表示

 
画像の赤枠で囲っている部分ですね。デフォルトの状態だとかなり簡素な作りになっていますが、今回のカスタマイズを施すことでサイト全体のデザインやカラーにあったページ送りボタンにすることができるのではないかと思います。
 
 

ページ送りボタンのカスタマイズ手順

作業としては全てこの記事の内容をコピペで完了することができるのですが、今回の手順にはfunction.phpの編集が含まれます。
 
貼り付ける内容や手順に失敗があると、真っ白な画面になってしまい管理画面にすらアクセスできない状態になるので、作業の前に元の状態へ戻せるようにバックアップをとること、それからFTPでサーバー上のファイルに直接アクセスできる環境にしておくことを強くオススメします。
 
なお、WordPressの最新バージョン4.9ではテーマの編集→エディター周りの機能が強化されており編集ミスを防ぎやすくなっているので、事前にWordPressを最新の状態へとアップデートしてから作業するのも有効な手立てになるかと思います。
 


スポンサーリンク


function.phpに以下のコードを追記する

早速、慎重さを要する作業からしていきます。
 
重ねて書きますが、くれぐれも作業の前にはバックアップを!そして作業は自己責任でお願いします(^_^;)
 
以下のコードをfunction.php内に追記します。ファイルへのアクセスはWordPressの管理画面から外観→テーマの編集です。

貼っても真っ白にならない場所を念のため指定すると、function.php内に以下のコードがあるので、この下あたりに貼り付ければ問題ないかと思います。

function.phpの編集作業は以上です。
 

ページ送りボタンを表示するページのPHPファイルを書き換える

次にカスタマイズしたページ送りボタンを所定の箇所へと表示させるために、以下4つのPHPファイルを編集します。ファイルへのアクセスはWordPressの管理画面から外観→テーマの編集です。
 
archive.php
category.php
home.php
search.php

 
上記PHPファイルの中にある以下のコードを…

全て、以下のコードへと書き換えます。

以上で4つのPHPに編集を加える作業は完了です。この状態でデフォルトのページ送りボタンがカスタマイズ後のページ送りボタンへとすり替わったかと思います。
 

仕上げにCSSで見た目調整


最後に見た目調整用のCSSを貼っておきます。必要に応じてご自身のstyle.cssへと追記してください。ファイルへのアクセスはWordPressの管理画面から外観→テーマの編集です。

コメントアウトで説明を記載している箇所は、カラーコードを変えれば色を変えられるのでお好きな色にして使ってください!
 
また、もし上記の手順でページ送りボタンをカスタマイズした後、スマホで表示した時にフッターとの間隔が狭いと感じた場合には以下のCSSも記述してください。

以上で全ての作業が完了しました。お疲れ様でした!
 
 

おわりに

今回のカスタマイズは以下の海外サイトに掲載されているカスタマイズコードを参考に、STINGER PLUS2で試してみたものです。
 
How to Add WordPress Pagination without a Plugin [Enhanced] - Sparklette Studio
STINGER PLUS2以外の旧バージョンや他のテーマでも施すことができるカスタマイズとなります。是非お試しください!
 
 
以下の記事ではこれまでにブログで紹介したSTINGER PLUS2カスタマイズ記事をまとめています!今回の記事で紹介したカスタマイズ以外にもいろいろと弄れる部分はありますので、こちらもどうぞご覧ください!
 
【誰でも簡単】これまでに書いたSTINGER PLUS2のカスタマイズ記事まとめ | カキタクナッタラ

でででーさん
2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。
あなたにオススメ