佐賀でふらふり

佐賀をうろつくWebデザイナーのブログ

WordPress よく使う

WordPressでプラグインいらずなファビコン表示方法


今日は歯医者に行きまして。
つくづく歯の大切さを思い知らされています。

さて、今日はほぼやってるカスタマイズ。
ファビコンの設定です。

ファビコンご存知ですよね?
ブラウザ開いた時にタイトルタグの横についてるあれです。
MovableTypeの時にはつけていたんですが、WordPressになってつけてなかったので、このブログにもつけてみました。

その方法、意外と簡単です。

目次

  1. ファビコンを用意
  2. ファビコンを設定
  3. まとめ

ファビコンを用意

まずはファビコンを用意しましょう。
サイズは 16px ✕ 16px と 32px ✕ 32px の2つをマルチアイコン化します。

もう何も恐くない…綺麗なfavicon作成の基本的なコツ・アイデアまとめ | 株式会社LIG

ファビコンのもととなる2つの画像を作ったら、『半透過マルチアイコンfavicon.icoを作ろう!』でファビコンを作成しましょう。
透過アイコンじゃなければ、『複数マルチアイコンをつくろう!』でも作れますよ。

ファビコンを設定

できあがったファビコンを設定していきましょう。
ファビコンはHTMLタグの<head>から</head>内に

<link rel="shortcut icon" type="image/x-icon"  href="https://www.sriproot.net/blog/favicon.ico">

という形でサーバーにアップロードしたファビコンファイルを指定してあげると表示されます。

functions.phpを編集

よく使うのがfunctions.phpに書く方法。
一度使ってしまえば、後は使い回しできるので楽ちんですよ。

function set_myfavicon() {
  echo '<link rel="shortcut icon" type="image/x-icon" href="' . home_url() . '/favicon.ico">' . "\n";
}
add_action('wp_head', 'set_myfavicon');

この書き方だと、サーバーのルートにファビコンをおいた設定になります。
テンプレートファイルに入れたりする場合は、「home_url()」の部分を「get_template_directory_uri()」とかに書き換えたらうまくいくと思います。

header.phpを編集

僕がfunctions.phpに書くのは、headタグ内に極力ものを書かないようにするのがブームだから。
なので、別にheader.phpに直接書いても問題ありません。

header.phpを開いて<head>から</head>の間に

<link rel="shortcut icon" type="image/x-icon" href="<?php echo home_url();?>/favicon.ico">

と書きましょう。

まとめ

functions.phpもheader.phpも長くて3行なので、簡単に設定ができると思います。

特に企業サイトなんか作る場合は、ロゴマークからファビコンを設定してあげるといいんじゃないでしょうかね。
ただあんまり複雑だったりすると、ブラウザに表示されても何が何だかわからなくなるので、注意が必要です。

改めてファビコン設定してみたけど、『さ』ってファビコンよりも、もっとこう『このサイトだよ』ってのが欲しくなってしまいました。なんか考えないと。
そいぎ~。


返信する

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA