WordPressテーマ THE THOR（ザ・トール）
別ブログのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「ページ送り戻りボタン（ページネーション）のスタイル」3回目のカスタマイズ についてまとめてみました。
WordPressテーマ THE THOR（ザ・トール）ページ送り戻りボタン（ページネーション）
これまで「ページ送り戻りボタン（ページネーション）」のスタイルに関するカスタマイズは、過去2回実施してきました。
また、「ページ送り戻りボタン（ページネーション）」の表示変更に関するカスタマイズは、過去2回実施しました。
また、「ページ送り戻りボタン（ページネーション）」をトップページの一番上のエントリー記事カード上に表示するカスタマイズを実施しました。
現在の「ページ送り戻りボタン（ページネーション）」のスタイルは、次の様になっています。
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」ファイルをエディタソフト上で、
- テキスト「Next」を検索して、「Next」を「＞」に置換
- テキスト「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;
}
カスタマイズ後のページ送り戻りボタン（ページネーション）
今回のカスタマイズによって、「ページ送り戻りボタン（ページネーション）」のスタイルは、次の様になりました。
問題となっていた【<】【>】を削除し、その代わりに【Prev】を【＜】に、【Next】を【＞】に変更しました。
また、【＜】の右側、【＞】の左側に間隔を設けました。
最後に
【Prev <】【Next >】から【＜】【＞】に変更したことで、ページ送り戻りボタン（ページネーション）が短くなってスタイル的にも統一感が出て良くなったと思います。
コメント