WordPressの親テーマの「header.php」を変更せずに子テーマにFaviconを追加する方法

WordPressでは、無料・有料問わず多数のテーマが公開されています。公開されているテーマでそのまま運用することも可能ですが、テーマをカスタマイズして使用したい場合があります。しかし、カスタマイズするために、公開されているテーマのファイルを直接編集してしまうと、テーマのアップデートを行う都度、カスタマイズした内容が元テーマの内容に上書きされてしまいます。そのため、公開されているテーマをカスタマイズするためには子テーマを作成しましょう。今回は、子テーマの作成方法については割愛しますが、子テーマのカスタマイズ例として、子テーマに独自の「Favicon」を追加する方法をご紹介します。

WordPressの子テーマに「Favicon」を追加する方法

「Favicon」は<head></head>タグ内に追加する必要がありますが、WordPressの場合、同タグは通常header.php内に記述します。よく、WordPressのカスタマイズ例で「Favicon」を追加する方法として、<head></head>タグ内に、以下のタグを追加する方法が紹介されています。

<link rel="shortcut icon" href="https://<Domain Name>/wp-content/themes/<Theme Name>/favicon.ico">

しかし、子テーマで<head></head>タグ内に上記タグを追加しようとすると、親テーマのheader.phpを修正するか、子テーマに新規にheader.phpファイルを作成し、親テーマの内容をそのまま転記し、<head></head>タグ内に上記のタグを追加することです。

しかし、どちらの方法も一長一短です。前者の方法は楽ですが、冒頭でご紹介した通り、テーマのアップデートが配信されるたびにファイルを修正する必要があり、カスタマイズしたことを忘れてしまう可能性があります。後者の方法は、親テーマのアップデートに影響は受けませんが、親テーマのアップデート時に合わせて子テーマ側のheader.phpファイルを修正しないと、アップデートで不整合が生じる可能性があります(header.phpファイルを子テーマに作成した場合、親テーマの同ファイルは読み込まれません)。

そこで、親テーマのアップデートの影響も受けず、子テーマに親テーマの内容を転記することなく、独自に「Favicon」を追加するためには、子テーマのfunctions.phpに以下を追記します。functions.phpは、親テーマ、子テーマで独立しているため(厳密には、子テーマのfunctions.phpが読み込まれた後に、親テーマの同ファイルが読み込まれます)、影響を受けません。

add_action(
	'wp_head', function() {
		echo '<link rel="shortcut icon" href="' . get_stylesheet_directory_uri() . '/favicon.ico"/>';
	}
);

ポイントは、wp_head()関数をフックすることと、get_stylesheet_directory_uri()関数を使用することです。使用しているテーマのパスを取得するためには、通常get_template_directory_uri()関数を使用しますが、子テーマで同関数を使用してしまうと、親テーマのパスが取得されてしまいます。そのため、子テーマでは、get_stylesheet_directory_uri()関数を使用しましょう。これで、親テーマのheader.phpを修正することなく、かつ親テーマに影響を受けず子テーマをカスタマイズすることができます。

この記事が気に入ったら
いいね ! しよう

Twitter で