WordPress カスタマイズ 10「Font Awesome 5.2」を「前後の記事」に表示してみる編 Webアイコン

ごけたです。カスタマイズシリーズ、やっと10。

はじめに

WordPress Twenty Sixteen カスタマイズ その10
「その9-1」の「Font Awesome」(Webアイコン)の続きでありますが、
コピーライトの続きではないので「その10」としています。
今回は「前の記事」、「次の記事」にWebアイコンを追加表示してみました。

※文中に「親」という言葉が度々出てきます。
ここでの「親」とは「子テーマ」ではない、
元々のTwenty Sixteenの各ファイルのことです。
カスタマイズは「子テーマ」で行っているので、
その対比として「親」、「親テーマ」と呼んでいます。

ページ構成
OSはWindows、ブラウザーはchrome、レンタルサーバーはエックスサーバーです。
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。

1:事前準備

ここではWebアイコンを表示させるための「カスタマイズ 9-1」内の

「1-1:事前準備-2」の「header.php」ファイルを子テーマ用フォルダに
アップロードする。

「1-2:事前準備-3」の「Font Awesome 5.2」のソースコードを
「header.php」ファイルにコピペする」が既に済んだ状態で進めていきます。

1-1:「前の記事」、「次の記事」のソースコードを探す

このページで設定したいのは「前の記事」、「後の記事」の前後に
Webアイコンを表示することです。

Webアイコンのソースコードを入力する場所を探します。

「前の記事」、「次の記事」は投稿記事が1ページ単位で表示された時に
ページ下に表示されます。

親のTwenty Sixteenフォルダ内の各ファイルで「1ページ単位」に
該当する「.phpファイル」は？「single.php」かな？

「single.php」ファイルを開いて「前の記事」、「次の記事」に
該当するソースコードを探します。

[code]
the_post_navigation( array(
‘next_text’ => ‘<span class="meta-nav" aria-hidden="true">’ . __( ‘Next’, ‘twentysixteen’ ) . ‘</span> ‘ .
‘<span class="screen-reader-text">’ . __( ‘Next post:’, ‘twentysixteen’ ) . ‘</span> ‘ .
‘<span class="post-title">%title</span>’,
‘prev_text’ => ‘<span class="meta-nav" aria-hidden="true">’ . __( ‘Previous’, ‘twentysixteen’ ) . ‘</span> ‘ .
‘<span class="screen-reader-text">’ . __( ‘Previous post:’, ‘twentysixteen’ ) . ‘</span> ‘ .
‘<span class="post-title">%title</span>’,
) );
}

[/code]

親の「single.php」ファイルの33-41行目前後に
「’next_text’ =>」、「’prev_text’ =>」の表示がありました。

「’＜span class=”post-title”>%title＜/span＞’,」の「%title」が
実際に「前の記事」、「次の記事」の箇所に表示されるページタイトルに該当すると思い、
「%title」の前後にWebアイコンのソースコードをコピペすることにしました。

1-2:「single.php」ファイルを子テーマフォルダに。

「%title」の前後にWebアイコンのソースコードをコピペすることにしました。」を
実行するには「single.php」ファイルが必要です。

現段階では「single.php」ファイルは子テーマフォルダに入っていません。
なので用意します。

FTPソフトを使って、親の「Twenty Sixteen」から「single.php」ファイルを
PC側の任意の場所にダウンロードします。ここではデスクトップ上です。

ダウンロードしたファイルの中身を
書き換えたり、削除したりは一切有りません。このままです。

次にデスクトップにダウンロードした「single.php」ファイルを
FTPソフトを使ってTwenty Sixteenの「子テーマフォルダ」にアップロードします。
アップロードが終わったらFTPソフトは閉じます。

WordPressの管理画面のメニューから「外観」→「テーマの編集」の
右列に「個別投稿(single.php)」が追加表示されていれば完了です。
WordPressはログイン表示した状態で進めます。

2:Font AwesomeからWebアイコンを選択する

「Font Awesome」のサイトから「前の記事」、「次の記事」に合う
Webアイコンを探します。

「icons」をクリックして、左列の「Free」をクリック、
さらに左列の「Aroows」をクリックして左右があるアイコンを選択します。
ここでは
「arrow-alt-circle-left」の「REGULAR」
＜i class=”far fa-arrow-alt-circle-left”＞＜/i＞
「arrow-alt-circle-right」の「REGULAR」
＜i class=”far fa-arrow-alt-circle-left”＞＜/i＞を選択しました。

3:「前の記事」にWebアイコンを追加表示してみる

大変お待たせ致しました。
「前の記事」の前にWebアイコンを追加表示してみました。

[code]
‘prev_text’ => ‘<span class="meta-nav" aria-hidden="true">’ . __( ‘Previous’, ‘twentysixteen’ ) . ‘</span> ‘ .
‘<span class="screen-reader-text">’ . __( ‘Previous post:’, ‘twentysixteen’ ) . ‘</span> ‘ .
‘<span class="post-title">%title</span>’,
[/code]

「single.php」ファイル内の41-43行目前後の最後尾にある
「’＜span class=”post-title＞>%title＜/span＞’,」内の「%title」の前に
「arrow-alt-circle-left」の「REGULAR」のソースコードをコピペします。
「前のページ」は左方向と設定するので「left」です。

[code]
‘<span class="post-title"><i class="far fa-arrow-alt-circle-left"></i> %title</span>’,
[/code]

こちらの「%title」の前に「arrow-alt-circle-left」の「REGULAR」の
ソースコードを既にあるソースコードと入れ替えます。
「%title」の前に半角英数のスペースを入れて前後の文字間を調整します。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

記事タイトルの前(左側)にWebアイコンが表示されているか確認します。

表示出来た。という事は、
「1-1:「前の記事」、「次の記事」のソースコードを探す」で推測した
Webアイコンのソースコードの入力先は
「single.php」ファイルで間違いなし。となりました。

3-1:「次の記事」にWebアイコンを追加表示してみる

「前の記事」の応用編です。

[code]
‘next_text’ => ‘<span class="meta-nav" aria-hidden="true">’ . __( ‘Next’, ‘twentysixteen’ ) . ‘</span> ‘ .
‘<span class="screen-reader-text">’ . __( ‘Next post:’, ‘twentysixteen’ ) . ‘</span> ‘ .
‘<span class="post-title">%title</span>’,
[/code]

「次の記事」のソースコードの
「single.php」ファイル内の38-40行目前後の最後尾にある
「’＜span class=”post-title＞>%title＜/span＞’,」内の「%title」の後ろに
「arrow-alt-circle-right」の「REGULAR」のソースコードをコピペします。
「次のページ」は右方向と設定するので「right」です。

[code]
‘<span class="post-title">%title <i class="far fa-arrow-alt-circle-right"></i> </span>’,
[/code]

こちらの「%title」の後ろに左方法の矢印Webアイコンを追加した
ソースコードを既にあるソースコードと入れ替えます。
「%title」の前に半角英数のスペースを入れて前後の文字間を調整します。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

記事タイトルの後ろ(右側)にWebアイコンが表示されているか確認します。
矢印にもリンクの設定が

4:Webアイコンの色を変更してみる-説明編

「その9-1」ではコピーライトの設定が「footer.php」ファイル内にあったので
「footer.php」ファイル内でコピーライト用のWebアイコンの設定や
色指定のソースコードを追加しました。

「前の記事」、「次の記事」の設定は「single.php」ファイル内のあるので、
「single.php」ファイル内で左右の矢印用のWebアイコンの設定や
色指定のソースコードを追加します。

ここでは色指定の設定を追加します。

4-1:「前の記事」のWebアイコンの色を変更してみる-「single.php」

矢印のWebアイコンを「前の記事」、「次の記事」の前後に表示しましたが、
アイコンの色は初期設定のままです。アイコンだけ別途に色指定します。

ここでは左右の矢印Webアイコンを「赤」に設定したいので、
「fa-sayuuyajirusihaaka」(左右矢印は赤)と、
色指定用のソースコードを作成しました。

こちらの色指定用のソースコードを
左右の矢印Webアイコンのソースコードに追加します。

「前の記事」の設定は
「＜i class=”far fa-arrow-alt-circle-left”＞＜/i＞」の
「left」の後ろに「fa-sayuuyajirusihaaka」を追加します。

[code]
‘<span class="post-title"><i class="far fa-arrow-alt-circle-left fa-sayuuyajirusihaaka"></i> %title</span>’,
[/code]

こちらの「fa-sayuuyajirusihaaka」の色指定を追加したソースコードを
「single.php」ファイル内の43行目前後にあるソースコードと入れ替えます。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

4-2:「前の記事」のWebアイコンの色を変更してみる-「style.css」

「single.php」ファイル内での色を変更するための下準備は終わったので、
次は実際にカラーコードを入力して色を変更します。

「テーマの編集」画面右列の「style.css」ファイルを選択クリックして表示ます。
「single.php」ファイルに入力した「fa-sayuuyajirusihaaka」を
色変更を実行するソースコードとして「style.css」ファイルに入力します。

ここでは矢印の色を「グレー系」から「赤系」=「#ff0000;」に変更します。

[code]
/* 9-1:コピーライトのwpアイコン色指定 */
.fa-wadopuresuhaao {
color: #007acc;
}

/* 10:左右矢印のWebアイコンの色指定 */
.fa-sayuuyajirusihaaka {
color: #ff0000;
}
[/code]

こちらのソースコードを「style.css」ファイルの一番下にコピぺします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。
※「9-1』の続きで設定した場合は
「/* 9-1:コピーライトのwpアイコン色指定 */」の下にコピペします。

ここでは色指定のソースコードの上に
「/* 10:左右矢印のWebアイコンの色指定 */」とタイトルを付けました。

「前の記事(左向き)」のWebアイコンがグレー系から赤系になっているか確認します。

リンク自体の設定には対応していますが、色は変化していません。

4-3:「次の記事」のWebアイコンの色を変更してみる-「single.php」

続きまして「次の記事」のWebアイコンの色の変更です。

設定方法は「前の記事」と同じです。

「fa-sayuuyajirusihaaka」(左右矢印は赤)
ここでは左右の矢印を赤にする指示をWebアイコン「right」に追加入力します。

「＜i class=”far fa-arrow-alt-circle-right”＞＜/i＞」の
「right」の後ろに「fa-sayuuyajirusihaaka」を追加します。

[code]
‘<span class="post-title"><i class="far fa-arrow-alt-circle-right fa-sayuuyajirusihaaka"></i> %title</span>’,
[/code]

こちらの「fa-sayuuyajirusihaaka」の色指定を追加したソースコードを
「single.php」ファイル内の40行目前後にあるソースコードと入れ替えます。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

4-4:「次の記事」のWebアイコンの色を変更してみる-「style.css」

[code]
/* 左右矢印のWebアイコンの色指定 */
.fa-sayuuyajirusihaaka: {
color: #ff0000;
}
[/code]

「style.css」ファイル内での赤の色指定を実行するソースコードは
既に「4-2:」で入力済みなので新規入力する必要はありません。

「次の記事(右向き)」のWebアイコンがグレー系から赤系になっているか確認します。

「style.css」ファイル内の「前の記事」「次の記事」のリンクの色指定に
該当するソースコードに何かしらを入力するとリンクの色変更も
可能かも知れませんが今のところ成功していません。

さいごに

「関連記事」や「読まれている記事」の設定がある中で
今回の矢印のWebアイコンがどれほどの効果かがあるのか？
デザインの一環や小さなこだわり位がいいのでしょうか？
「Font Asewome」の設定ページは続きます。

最後までお合い下さいまして有難うございました。