ファビコンって聞いたことありますか?
知らない人は知らないですよね。
今回の記事ではちょっとだけWordPressをおしゃれにすることのできる『ファビコン』についてご紹介していきたいと思います。
ファビコンとは?
ファビコン(favicon)は favorite icon の略でウェブサイト用のアイコンのことです。
ウェブサイトのアドレンの横にあるアイコンのことです。
ファビコンを自作しよう
ファビコンの拡張子は見慣れない「.ico」という画像ファイルのフォーマットです。
用意する画像は何であれ、拡張子は変換しなくてはなりません。まぁ興味のある方はググってください。ここでは自作すること目標にします!
googleで検索すれば、ファビコンの画像もたくさんフリーなのがあり、ダウンロードして使用することも可能です。でも、簡単であれば作ることができます。
ちなみに、私がファビコンを作ったサイトは「https://www.favicon-generator.org/editor/」ここで作ることができます。
作ったファビコンをWordPressに設定
ワードプレスのダッシュボードから、メディアの新規追加でファビコンをアップロードしてください。
アップロードしたら、図の赤線で囲ってあるファビコンの「URL」を後で使うので、コピーしておいてください。
「コピーしたURLはどこに使うの?」ですが、子テーマのheader.phpで使います。
「子テーマ?なんじゃらほい」ってお方は、記事を参考にしてください。「子テーマについて」
親テーマフォルダから「header.php」をコピーし、子テーマフォルダ内に貼り付けしてください。
ワードプレスのダッシュボード→外観→テーマの編集を選び、header.phpを編集していきます。
46行目付近(テーマによって違うかも)に編集するコードがあります。
(Advanced Code Editorというプラグインをインストール、有効化しておくことで、探しやすくなります。)
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" />
上のコードが見つかるので次のように書き換えてください。
<link rel="shortcut icon" href="ここをファビコンのURLに変更してね" />
「ここをファビコンのURLに変更してね」のところに先ほどコピーしたURLを貼り付けてください。
これにてファビコンの設定は完了です。
まとめ
いかがだったでしょうか。
今回の記事では『ファビコン』について書いてきました。
簡単に作業をまとめると、ファビコンを簡単に自作→親テーマフォルダのheader.phpを子テーマフォルダにコピーして貼り付け→46行目のコードを編集→完了
ちなみに、header.phpを編集しなくてもプラグインでファビコンを設定することは可能です。
『Favicon Rotator』というプラグインを使用すれば、header.phpの編集なんかしなくてもファビコンの設定ができるんですね。
めんどくさいって方はプラグインを使用したほうがいいですね。
ただ、プラグインはできるだけ少なくシンプルにしているほうが、ウェブページの読み込みも早いので、私はheader.phpの編集をお勧めします。