WordPress[Stinger3用 子テーマ]favicon(ファビコン）を変更する方法
少し前にWordPressのテーマStinger3の親テーマでのファビコンを変更する備忘録を投稿させて頂きました。
今回はStinger3の子テーマを使用した場合のファビコンの変更方法を備忘録として残します。前回は、DeGraeve.comさんのFavicon Generatorを使ってオリジナルファビコンを作りました。写真を使ったファビコンだったのですが、予想より全然良い仕上がりになりました。オリジナルのファビコンを作りたい方は是非試してみてください。
今回も、OSXローカル環境にwordpressをインストールする方法で構築したローカル環境のWordPressで作業したいと思います。子テーマはroom9さんの「CANDY CRAZY」
を使用させて頂いています。
ファビコンを探す
フリーでFaviconを配布しているウェブサイトが結構あるので、今回はそちらから貰ってくる事にします。FreeFaviconさんのファビコンがクオリティーが高く好きなので何か探してみます。
色々探してみましたが、今回はこのTのページにある「Truck Red」を使って設置したいと思います。
「Download this favicon」からファビコンをダウンロードします。
ファビコンを設置
親テーマのheadr.phpに直接設置する事も可能ですが、今回は子テーマの利点を生かし子テーマ内にheader.phpをコピーしてそちらで作業したいと思います。何かの拍子にデータがおかしくなった場合は子テーマ内のheader.phpを消すだけで元に戻るので緊急時にとても助かります。
まずお持ちのFTPアプリで親テーマ入っているStinger3のフォルダからheader.phpをコピーして子テーマ内にペーストします。親テーマ内のheader.phpは残して置いてください。自分はtransmit4で作業を行っています。自分のやり方だと親テーマ内のheader.phpをデュプリケイトして、生成された「header copy.php」と云う名前のファイルを子テーマ内にコピーして、名前を「header.php」に戻しています。
子テーマのフォルダの中にheader.phpがコピー出来ました。
favicon（ファビコン）をサーバーにアップします
イメージフォルダに直接アップする方法もありますが、前回同様WordPressのメディアアップローダーを使ってアップしたいと思います。管理画面 → メディア → 新規追加 → 先程ダウンロードしたファビコンを選択してアップします。アップロード後、右下にある「編集」ボタンを押します。
「メディアの編集」画面の右側に「ファイルのURL」があるので、そこに出ているURLをコピーします。
ファイルのURLをコピー！
子テーマ内のheader.phpにペースト
子テーマ内のheader.phpを開きます。デフォルトの状態はこちら
３８行目の色が変わっている部分に先程アップしたファビコンのURLをペーストします。
最終的にこのようになればOKです。
これで完成です。ブログを確認しましょう。
変更方法は基本的に親テーマを変更していた時と変わりません。ただ、子テーマ内のファイルでカスタマイズを行う方が、後々どのファイルを変更したか？など分かり易くトラブルも回避しやすいので安心だと思います。読んで頂いてありがとうございました。