ワードプレス(WP)でプラグインを使わずにサイトタイトルをロゴ画像に変更&faviconを設定

プログを個性的にする第一歩として、サイトタイトルをテキストから画像に変更します。全てのページの一番目立つ場所に燦然と輝くので、少し時間がかかってもお気に入りのロゴを作りましょう。

 

テンプレート編集で実現

今回は一緒にファビコンも設定します。今回の2つの変更をプラグインで実現しようとすると、それぞれ2つのプラグインが必要になりますが、テンプレートでなら header.php という1つのファイルを編集するだけでOKです。なので今回はプラグインを使わずに直接テンプレートを編集します。

まずロゴ画像とファビコンを準備します。ちなみにファビコンのファイル名は特に理由がない限り、「favicon.ico」とした方が互換性が高いと思います。※HTMLにファビコンの記載がなくても、ブラウザによってはルートフォルダにある「favicon.ico」を読みます。

アップ先ですが、ロゴ画像はテーマ内の imagesフォルダ内(名前は logo.png にしました)。ファビコンはサイトに依存するものでテーマに依存するものではないし、先ほどの理由もあるのでルートフォルダにしました。もしテーマ毎にファビコンを管理したい場合はテーマフォルダの中に入れましょう。

さて、header.php を編集します。wp-content/themes/フォルダ内のテンプレートを直接いじっても良いですが、ダッシュボードの外観→テーマ編集からも行えます。

 

ファビコンの記述

以下の一行を<head></head>のどこかに挿入します。

ルートフォルダの場合
<link rel="shortcut icon" href="/favicon.ico" />
テーマフォルダの場合
<link rel="shortcut icon" href="wp-content/themes/テーマ名/favicon名.ico" />

 

サイトタイトルを画像に変更

ロゴ画像の記述 header.phpの中間あたりにある、

<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>

の中の <?php bloginfo( ‘name’ ); ?> の部分を、

<img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>">

に変更します。

 

広告