こんにちは、NAGAです。
今回は、WordPressのファビコンを設定する方法を解説します。
ファビコンは、ブラウザのタブやGoogleホーム画面で表示されるサイトの顔となりますので、ちゃんと設定したほうが良いですね。
それでは、行きましょう。
目次
アイコンを用意する
まずは、ファビコンに使用するサイズ「32×32」のアイコンを用意します。
自分のブログイメージにあったアイコンを用意すると良いでしょう。
私はWindowsペイントを使用して作成しました。
作成するのが面倒なら、ファビコン素材を探すのもアリかと思います。
メディアにアップロードする
次に用意したアイコンをWordPressにアップロードします。
WordPress管理画面の左メニューから「メディア」を開き、ドラッグ＆ドロップで作成したアイコンをアップロードします。
アップロードしたファビコンをクリックして、「リンクをコピー」のURLをメモ帳などにメモしておきます。
テーマヘッダー（header.php）を編集する
アップロードしたアイコンを設定します。
WordPressテーマヘッダー部分にコードを記載する必要があります。
WordPress左メニューの「外観 > テーマエディター」をクリックします。
右側のテーマファイルにある「テーマヘッダー」をクリックします。
</head>の１行上にアップロードしたアイコンURLをlinkタグで追加します。
<link rel="shortcut icon" href="http://localhost/wordpress/wp-content/uploads/2020/04/naga.png"> <\head>
しかし、URLが「http://localhost/wordpress/・・・」のままだと、サイトを移転したときURLのホスト部分が変わってしまいアイコンが読めなってしまいますので、WordPress関数「site_url()」を使って相対パスの指定するようにしましょう。
次のように指定します。
<link rel="shortcut icon" href="<?php echo site_url('wp-content/uploads/2020/04/naga.png'); ?>">
</head>
指定したWordPress管理画面イメージは次のようになります。
内容がOKであれば、「ファイル更新」ボタンをクリックします。
ファビコン設定後の確認方法
ブラウザタブの確認
WordPress一般のトップ画面を見ると、タブのアイコンが変更されていることを確認できます。
Googleホーム画面の確認
ブラウザに自分のサイトをお気に入りに登録するなどして、Googleホーム画面を表示したときに指定したアイコンが表示されることを確認できます。
まとめ
いかがだったでしょうか。
今回は、WordPressのファビコンを設定する方法を解説しました。
header.phpファイルを編集するので、少し設定が大変だったかと思います。
１歩ずつですが、ブログをあなた色に染めていきましょう。
それでは、以上です。