【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連THE THOR

【THE THOR】ページ送り戻りボタン(ページネーション)スタイル3

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約6分で読めます。
スポンサーリンク

WordPressテーマ THE THOR(ザ・トール)

別ブログのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト
ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト
MASAa.blog│パズドラ好きのmasaaが情報発信する1st WordPressブログサイト
パズドラ好きのmasaaが情報発信する1st WordPressブログサイト

今回は、WordPressテーマ THE THOR(ザ・トール)での「ページ送り戻りボタン(ページネーション)のスタイル」3回目のカスタマイズ についてまとめてみました。

WordPressテーマ THE THOR(ザ・トール)ページ送り戻りボタン(ページネーション)

これまで「ページ送り戻りボタン(ページネーション)」のスタイルに関するカスタマイズは、過去2回実施してきました。

【THE THOR】ページ送り戻りボタンのカスタマイズ2
WordPressテーマ THE THOR(ザ・トール)の「ページ送り戻りボタン」のカスタマイズ2についてまとめてみました。今回の「ページ送り戻りボタン」のカスタマイズでは、ページ送り戻りボタンのデザインを丸く変更してみました。
【THE THOR】ページ送り戻りボタンのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)の「ページ送り戻りボタン」のカスタマイズについてまとめてみました。今回の「ページ送り戻りボタン」のカスタマイズでは、これまでのカスタマイズの影響により見難くなっていたのを改善してみました。

また、「ページ送り戻りボタン(ページネーション)」の表示変更に関するカスタマイズは、過去2回実施しました。

【THE THOR】ページネーション(ページ送り)のカスタマイズ修正
WordPressテーマ THE THORの「ページネーション(ページ送り)」の修正カスタマイズを行いました。以前行った「ページネーション(ページ送り)」のカスタマイズについて、とある条件で表示がおかしくなる症状を確認し修正しました。
【THE THOR】ページネーション(ページ送り)のカスタマイズ
WordPressテーマ THE THORでの「ページネーション(ページ送り)」のカスタマイズについてまとめてみました。今回WordPressテーマCocoon同様、最終ページが表示されるページネーション(ページ送り)のスタイルにしました。

また、「ページ送り戻りボタン(ページネーション)」をトップページの一番上のエントリー記事カード上に表示するカスタマイズを実施しました。

【THE THOR】ページネーション(ページ送り)追加のカスタマイズ
WordPressテーマ THE THORでの「ページネーション(ページ送り)追加」のカスタマイズについてまとめてみました。今回のカスタマイズは一番上のエントリー記事カードの上側にもページネーション(ページ送り)を追加しました。

現在の「ページ送り戻りボタン(ページネーション)」のスタイルは、次の様になっています。

【THE THOR】ページ送り戻りボタン(ページネーション)スタイル3

WordPressテーマ THE THOR(ザ・トール)のデフォルトの「ページ送り戻りボタン(ページネーション)」スタイルとは大きく変わっています。

この「ページ送り戻りボタン(ページネーション)」の問題として、【<】【>】上でクリックしてもページを切り替えることができません。

これはWordPressテーマ THE THOR(ザ・トール)の元からの仕様なので、デフォルトの「ページ送り戻りボタン(ページネーション)」でも同現象が発生します。

と言うことで、【<】【>】上でクリックしてもページを切り替えることが出来ない現象を、今回「ページ送り戻りボタン(ページネーション)」のスタイル変更によって改善したいと思います。

今回のエントリー記事では「ページ送り戻りボタン(ページネーション)のスタイル」3回目のカスタマイズについてまとめてみました。

ページ送り戻りボタン(ページネーション)のスタイル 3回目のカスタマイズ

WordPressテーマ THE THOR(ザ・トール)での「ページ送り戻りボタン(ページネーション)のスタイル」3回目のカスタマイズを行います。

今回のカスタマイズを行う前の準備

今回はPHPファイルの「pagination.php」をカスタマイズしていきます。

「pagination.php」ファイルは、通常親テーマフォルダである「the-thor」内の「inc」フォルダ内の「front」内にアップロードされています。

先ずは最初に、親テーマフォルダ「the-thor」-「inc」-「front」内の「pagination.php」ファイルを、FTPソフトで自分のパソコンにダウンロードします。

但し、これまで「pagination.php」をカスタマイズしていたことがあって、子テーマフォルダ「the-thor」-「inc」-「front」内にアップロードされている場合は、その子テーマフォルダ内の「pagination.php」を編集する必要があります。

その場合は、子テーマフォルダ「the-thor」-「inc」-「front」内の「pagination.php」ファイルを、FTPソフトで自分のパソコンにダウンロードします。

なお、今回のカスタマイズはサイト全体が表示されなくなる可能性があるので、カスタマイズに自信が無い方は、実施しないで下さい。

今回のカスタマイズを実施の際には、必ずカスタマイズするファイルをバックアップ保存して下さい。

pagination.php カスタマイズ内容

ダウンロードした「pagination.php」ファイルをエディタソフトで編集します。

「pagination.php」ファイルをエディタソフト上で、

  1. テキスト「Next」を検索して、「Next」を「>」に置換
  2. テキスト「Prev」を検索して、「Prev」を「<」に置換

の2点を行います。

通常は各1箇所ずつなのですが、過去の「【THE THOR】ページネーション(ページ送り)追加のカスタマイズ」を行っている場合には各2箇所ずつになります。

以上で編集が終わりました。

「pagination.php」ファイルを保存し、子テーマフォルダ「the-thor」-「inc」-「front」内にFTPソフトを使ってアップロードします。

「pagination.php」ファイルをアップロードする注意する点として、親テーマフォルダの「the-thor」-「inc」-「front」内にアップロードするのではなく、必ず、子テーマフォルダの「the-thor」-「inc」-「front」内にアップロードして下さい。

もし上手く表示されない場合は、バックアップしておいた「front-page.php」に戻して下さい。

スタイルシート(style-user.css) カスタマイズ内容

「スタイルシート(style-user.css)」ファイルをエディタソフトで編集します。

「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容を追記する形でOKです。

/************************************
** ■ページネーションカスタマイズ 【Prev】【Next】から【<】【>】に変更 ※pagination.php要カスタマイズ
************************************/
.pager .pager__item.pager__item-prev {
	padding-left: 0;
	padding-right: 0;
	right: 6px;
}
.pager .pager__item.pager__item-next {
	padding-left: 0;
	padding-right: 0;
	left: 6px;
}
.pager__item.pager__item-prev::before,
.pager__item.pager__item-next::before  {
	display: none;
}

カスタマイズ後のページ送り戻りボタン(ページネーション)

今回のカスタマイズによって、「ページ送り戻りボタン(ページネーション)」のスタイルは、次の様になりました。

【THE THOR】ページ送り戻りボタン(ページネーション)スタイル3

問題となっていた【<】【>】を削除し、その代わりに【Prev】を【<】に、【Next】を【>】に変更しました。

また、【<】の右側、【>】の左側に間隔を設けました。

最後に

【Prev <】【Next >】から【<】【>】に変更したことで、ページ送り戻りボタン(ページネーション)が短くなってスタイル的にも統一感が出て良くなったと思います。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

下記バナーからスマホゲームのインストールお願いします!
アルケミストガーデン
最強でんでん
れじぇくろ! ~レジェンド・クローバー~
イース6 オンライン〜ナピシュテムの匣〜
黒い砂漠 MOBILE
グランドサマナーズ
ロードモバイル
駅メモ!-ステーションメモリーズ!

オンラインくじ引き
オンラインくじ引き INAKUJI(いなくじ)INABA.TECH
MASAa.net

コメント