WordPress カスタマイズ 10-2「Font Awesome 5.2」を「投稿日」「カテゴリー」「コメント」「編集」に表示してみる編 Webアイコン

ごけたです。「Font Awesome」。
「5.1」から「5.2」へのバージョンアップの期間が早いです。

はじめに

Twenty Sixteen カスタマイズ シリーズ その10-2
今回は「Font Awesome 5.2」の続きで、
Webアイコンを「投稿日」「カテゴリー」「コメント」「編集」の
箇所に表示してみます。

Webアイコンの表示で初めにやるべき設定だったかも知れませんが、
Webアイコンのソースコードを入力するファイルを見つけのに時間が掛かりました。

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

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

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

1:事前準備-1

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

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

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

1:事前準備-2

ここでの設定では「FTPソフト」、「テキストエディタ」を必ず使用します。

お好みの各ソフトを用意して下さい。

FTPソフト:FileZilla
テキストエディタ:Brackets
私が使用してる各ソフトは上記の2つになります。

2:「投稿日」のソースコードを探す


Google Chromeの「検証」で「ポインター」アイコンをクリックしてから
「投稿日」にマウスのポイントを合わせると
「<span class=”posted-on”>」と表示されます。
このソースコードがあるファイルを探します。


「Twenty Sixteen」フォルダをクリックすると表示される「inc」フォルダ内の
「template-tags.php」ファイル内の82行目前後に「<span class=”posted-on”>」が
ありました。

2-1:「template-tags.php」ファイルをFTPソフトを使ってダウンロードする

これまでのように「template-tags.php」ファイルを「子テーマ用」フォルダに
アップロードして、入力設定しても対応しません。


「template-tags.php」ファイルは「inc」フォルダに入っています。
FTPソフトを使用して「template-tags.php」ファイルをローカル(PC)側に
ダウンロードします。
ダウンロードした「template-tags.php」ファイルをローカル(PC)側で編集します。

※画像はサーバー側の「Twenty Sixteen」フォルダ内の「inc」フォルダから
ローカル(PC)側の「Twenty Sixteen」の「子テーマ用」フォルダに
ダウンロードを表示しています。

サーバー上の「inc」フォルダ内に編集した「template-tags.php」ファイルを
アップロードして「template-tags.php」ファイルを上書きします。

※「template-tags.php」ファイルは
「子テーマ用」フォルダに入れる「.php」ファイルと違って、
編集した「template-tags.php」ファイルのアップロードは
直に「inc」フォルダ内の「template-tags.php」ファイルを上書きします。言い方を変えれば初期設定の「template-tags.php」ファイルを上書きします。
もし失敗した場合、初期設定のファイルがないので参考にするファイルが無く、
戻すことは出来ません。

万が一に備えて、編集用の「template-tags.php」ファイルとは別に
初期設定保存用の「template-tags.php」ファイルをローカル(PC)側に
ダウンロードしておきます。ローカル(PC)側の「inc」フォルダにダウンロードするのが無難かと。

2-2:「投稿日」用のWebアイコンを決める

投稿日のWebアイコンのソースコードを入力する場所が分かったので
Font Aweseome」にアクセスして「投稿日」用のWebアイコンを決めます。

※サイトはまだ数点Webアイコンを決めるので、開いておきます。


一番下の右側のクリックボードをクリックして、Webアイコンの
ソースコードをコピーします。

<i class="far fa-clock"></i>

ここでは時計マークのアイコンを選択しました。

2-3:「template-tags.php」ファイルを編集する

※「template-tags.php」ファイルは「子テーマ用」フォルダ内に入っていないので、
Wordpress内の「テーマの編集」では入力設定は行えません。

「2-1:」でダウンロードしたローカル(PC)側で、入力設定を行います。


私が使用しているFTPソフト「FileZilla」での説明になります。
「template-tags.php」ファイルをローカル(PC)側にダウンロードして、
接続を一旦切った状態の画面上で、「template-tags.php」ファイルを
右クリックして「開く」を選択クリックします。

※接続は切らなくても編集は出来ますが、万が一失敗した状態で
アップロードするを避けるために一旦接続を切っています。


私が使用しているテキストエディタ「Brackets」で「template-tags.php」ファイルが
表示されます。


「2」で探した82行目前後に「<span class=”posted-on”>」の
「>」の後ろに投稿日のWebアイコンのソースコードを入力します。

			'<span class="posted-on"><i class="far fa-clock"></i><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',

Webアイコンのソースコードを入力した82-83行目前後を表示しています。
※テキストエディタの「(上書き)保存」をします。

2-4:編集した「template-tags.php」ファイルをアップロードする


Webアイコンのソースコードを入力した「template-tags.php」ファイルを
FTPソフトを使用してサーバー上にある「inc」フォルダにアップロードします。

※FTPソフトはまだ使用しますので、接続を切った状態で開いておきます。


アップロードが完了したら、投稿日の前に「時計マーク」の
Webアイコンが表示されているか確認します。

3:「カテゴリー」のソースコードを探す

「投稿日」の次は「カテゴリー」のWebアイコンの表示です。
「投稿日」のソースコードを探した時と同じで


Google Chromeの「検証」で「ポインター」をクリックしてから
「カテゴリー」にマウスのポイントを合わせると
「<span class=”cat-links”>」と表示されます。
このソースコードがあるファイルを探します。

こちらも「inc」フォルダ内の「template-tags.php」ファイル内の
102行目前後に「<span class=”cat-links”>」がありました。

3-1:「カテゴリー」用のWebアイコンを決める

「カテゴリー」用のWebアイコンも「template-tags.php」ファイルに入力するので、
「Font Aweseome」にアクセスして「カテゴリー」用のWebアイコンを決めます。


一番下の右側のクリックボードをクリックして、Webアイコンの
ソースコードをコピーします。

<i class="far fa-folder-open"></i>

ここでは「フォルダが開いた」アイコンを選択しました。

3-2:「template-tags.php」ファイルを編集する

「2-3:」で編集した「template-tags.php」ファイルを「2-3:」の時と同様に、
FTPソフトのローカル(PC側)上で右クリックして「開く」を選択クリックします。


テキストエディタ「Brackets」で「template-tags.php」ファイルが表示されます。


「3」で探した102行目前後に「<span class=”cat-links”>」の
「>」の後ろに「カテゴリー」のWebアイコンのソースコードを入力します。

'<span class="cat-links"><i class="far fa-folder-open"></i> <span class="screen-reader-text">%1$s </span>%2$s</span>',

Webアイコンのソースコードを入力した102-103行目前後を表示しています。
※テキストエディタの「(上書き)保存」をします。

3-3:編集した「template-tags.php」ファイルをアップロードする

Webアイコンのソースコードを入力した「template-tags.php」ファイルを
FTPソフトを使用してサーバー上にある「inc」フォルダにアップロードします。


アップロードが完了したら、カテゴリーの前に
「フォルダが開いた」Webアイコンが表示されているか確認します。

4:「コメント」のソースコードを探す

次は「コメント」のWebアイコンの表示です。


これまで同様にGoogle Chromeの「検証」で「ポインター」をクリックしてから
「コメント」にマウスのポイントを合わせると
「<span class=”comments-link”>」と表示されます。
このソースコードがあるファイルを探します。

こちらも「inc」フォルダ内の「template-tags.php」ファイル内の
51行目前後に「<span class=”comments-link”>」がありました。

4-1:「コメント」用のWebアイコンを決める

「コメント」用のWebアイコンも「template-tags.php」ファイルに入力するので、
「Font Aweseome」にアクセスして「カテゴリー」用のWebアイコンを決めます。


一番下の右側のクリックボードをクリックして、Webアイコンの
ソースコードをコピーします。

<i class="far fa-comment"></i> 

ここでは「コメント」アイコンを選択しました。

4-2:「template-tags.php」ファイルを編集する

「3-2:」で編集した「template-tags.php」ファイルを「2-3:」の時と同様に、
FTPソフトのローカル(PC側)上で右クリックして「開く」を選択クリックします。


テキストエディタ「Brackets」で「template-tags.php」ファイルが表示されます。


「4」で探した51行目前後に「<span class=”comments-link”>」の
「>」の後ろに「コメント」のWebアイコンのソースコードを入力します。

echo '<span class="comments-link"><i class="far fa-comment"></i>';

Webアイコンのソースコードを入力した51行目前後を表示しています。
※テキストエディタの「(上書き)保存」をします。

4-3:編集した「template-tags.php」ファイルをアップロードする

Webアイコンのソースコードを入力した「template-tags.php」ファイルを
FTPソフトを使用してサーバー上にある「inc」フォルダにアップロードします。

アップロードが完了したら、コメントの前に
「コメント」のWebアイコンが表示されているか確認します。

5:スマホ、タブレット画面サイズ「/(スラッシュ)」を非表示に

これまではPC画面サイズで設定を行ってきました。


「スマホ、タブレット画面サイズ」でも表示確認してみると、
各名称の間に「/(スラッシュ)」が表示されています。

このままも問題なければ、飛ばして下さい。
中には「/(スラッシュ)」非表示にしたいなぁ~~。と思う方も。


ここでもGoogle Chromeの「検証」で「ポインター」をクリックしてから
「/(スラッシュ)」にマウスのポイントを合わせると
「:: after」と表示されます。

.entry-footer > span:not(:last-child):after {
	content: "\002f";
	display: inline-block;
	opacity: 0.7;
	padding: 0 0.538461538em;
}

右側の「style」には2009-2014行目前後のソースコードの中に
初期設定でWordpressに導入されているWebアイコンの
「/(スラッシュ)」に該当するソースコード「content: “\002f”;」が
表示されています。

「style.css」ファイル内のソースコードを編集して
「/(スラッシュ)」を非表示します。
ここでは「opacity:」=透明度設定で「/(スラッシュ)」を
表示してるようなので、数値を「0.7」から「0」に変更します。
	content: "\002f";
	display: inline-block;
	padding: 0 0.538461538em;

ここでの設定に関係無いソースコードは削除できます。

/* 10-1:続きを読むのWebアイコンの色指定 */
.fa-tudukihaorenge {
    color: #dd8500;
}

/* 10-2:投稿日-カテゴリー-スラッシュ非表示 */
.entry-footer > span:not(:last-child):after {
	opacity: 0;
}

こちらのソースコードを「style.css」ファイルの一番下にコピぺします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。
「その10-1」の続きで行っている場合は上記のようになります。

ここではソースコードの上に
「/* 10-2:投稿日-カテゴリー-スラッシュ非表示 */」とタイトルを付けました。


スマホ、タブレット画面サイズで「/(スラッシュ)」が
非表示になっているか確認します。

6:「編集」のソースコードを探す

「編集」はログインして時だけPC画面サイズでは「コメント」の下に。
スマホ、タブレット画面サイズでは「コメント」の右側に表示されます。


ここでも同様にGoogle Chromeの「検証」で「ポインター」をクリックしてから
「編集」にマウスのポイントを合わせると
「<span class=”edit-link”>」と表示されます。
このソースコードがあるファイルを探します。

「Twenty Sixteen」フォルダをクリックすると表示される
「template-parts」フォルダ内の「content.php」ファイル内の
56行目前後に「<span class=”edit-link”>」がありました。

6-1:「content.php」ファイルをFTPソフトを使ってダウンロードする

これまでの「inc」フォルダ内のファイル同様、「content.php」ファイルも
「子テーマ用」フォルダにアップロードして、入力設定しても対応しません。


FTPソフトを使用して「content.php」ファイルをローカル(PC)側にダウンロードします。
ダウンロードした「content.php」ファイルをローカル(PC)側で編集します。

※画像はサーバー側の「Twenty Sixteen」フォルダ内の
「template-parts」フォルダからローカル(PC)側の「Twenty Sixteen」の
「子テーマ用」フォルダにダウンロードを表示しています。

サーバー上の「inc」フォルダ内に編集した「content.php」ファイルを
アップロードして「content.php」ファイルを上書きします。

※「content.php」ファイルは
「子テーマ用」フォルダに入れる「.php」ファイルと違って、
編集した「content.php」ファイルのアップロードは
直に「inc」フォルダ内の「content.php」ファイルを上書きします。言い方を変えれば初期設定の「content.php」ファイルを上書きします。
もし失敗した場合、初期設定のファイルがないので参考にするファイルが無く、
戻すことは出来ません。

万が一に備えて、編集用の「content.php」ファイルとは別に
初期設定保存用の「content.php」ファイルをローカル(PC)側に
ダウンロードしておきます。ローカル(PC)側の「template-parts」にダウンロードするのが無難かと。

6-2:「編集」用のWebアイコンを決める

「編集」のWebアイコンのソースコードを入力する場所が分かったので
「Font Aweseome」にアクセスして「編集」用のWebアイコンを決めます。


一番下の右側のクリックボードをクリックして、Webアイコンの
ソースコードをコピーします。

<i class="far fa-edit"></i>

ここでは「編集」アイコンを選択しました。

6-3:「content.php」ファイルを編集する


「6-1」でダウンロードした「content.php」ファイルを
FTPソフトのローカル(PC側)上で右クリックして「開く」を選択クリックします。


テキストエディタ「Brackets」で「content.php」ファイルが表示されます。


「6」で探した56行目前後に「<span class=”edit-link”>」の
「>」の後ろに「カテゴリー」のWebアイコンのソースコードを入力します。

				'<span class="edit-link"></i><i class="far fa-edit"></i>',
				'</span>'
			);

Webアイコンのソースコードを入力した56-58行目前後を表示しています。
※テキストエディタの「(上書き)保存」をします。

6-4:編集した「content.php」ファイルをアップロードする


Webアイコンのソースコードを入力した「content.php」ファイルを
FTPソフトを使用してサーバー上にある「template-parts」フォルダにアップロードします。


アップロードが完了したら、「編集」の前に
「編集」用のWebアイコンが表示されているか確認します。
※ログアウトした状態では「編集」は表示されません。

さいごに

Google Chromeの「検証」で「ポインター」アイコンをクリックして、
各名称の「inc」フォルダ内の「template-tags.php」ファイル、
「template-parts」フォルダ内の「content.php」ファイルを探す際、

まず「functions.php」「single.php」「index.php」「page.php」辺りから探して、
「template-parts」フォルダに。
「inc」フォルダにはなかなか行きつかなったです。

どのファイルもテキストエディタで表示してから
Google Chromeの「検証」が表示したタグをテキストエディタ内で検索して、
該当タグを探すの繰り返しです。

WordPressのページ構成をもっと理解してれば、どのフィルか推測できると思いますが、
初心者はちまちま探して行くしか方法が有りません。

該当箇所が見つからないと設定が進みません。
設定内容も書けないので更新が遅くなります。
今後も同様のペースだと思います。

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

スポンサーリンク

シェアする

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

フォローする

スポンサーリンク