WordPressのテーマにカスタムヘッダー機能を実装する手順

WordPressのテーマにカスタムヘッダー機能を実装する手順

WordPressのテーマにカスタムヘッダー機能を実装する手順

カスタムヘッダーが実装されていないテーマに、カスタムヘッダー機能を実装した時の手順を記録しておきたいと思います。カスタムヘッダーというのは、管理画面上からヘッダー画像を指定できる機能のことです。

ほとんどのテーマでは、管理画面に[外観] – [ヘッダー]が表示されていると思います。ここからヘッダー画像を指定することができますね。

でも、カスタムヘッダーが実装されていないテーマの場合は、管理画面上に[外観] – [ヘッダー]のメニュー自体が存在しません。

カスタムヘッダーを使えるようにするためには、functions.phpでカスタムヘッダーを実装することを宣言する必要があります。また、header.php内にカスタムヘッダー画像を表示するためのコードを記述する必要もあります。

ということで、カスタムヘッダーが実装されていないテーマに、機能を追加した時の手順を紹介いたします。

テーマにカスタムヘッダー機能を実装する

まずは、functions.phpでデフォルト画像やヘッダー画像のサイズなどを指定します。とりあえず、以下のコードを記述しましょう。

$custom_header = array(
 'default-image' => get_bloginfo('template_url').'/images/header_image.png',
 'random-default' => false,
 'width' => 300,
 'height' => 80,
 'flex-height' => false,
 'flex-width' => false,
 'default-text-color' => '',
 'header-text' => false,
 'uploads' => true,
);
add_theme_support( 'custom-header', $custom_header );

それぞれの指定内容は以下の通りです。

default-image:デフォルト画像のパスを指定します。get_bloginfo(‘template_url’)は使用しているテーマのディレクトリです。上記では、/テーマディレクトリ/images/header_image.pngがデフォルト画像です。
random-default:ヘッダー画像をランダム表示するかどうかを指定します。trueはランダム表示
width:ヘッダー画像の横幅を指定します。
height:ヘッダー画像の高さを指定します。
flex-height:高さのフレキシブル対応をするかどうか指定します。trueは対応
flex-width:横幅のフレキシブル対応をするかどうか指定します。trueは対応
default-text-color:デフォルトのテキストの色を指定します。
header-text:ヘッダー画像の上にテキストを表示するかどうか指定します。trueは表示
uploads:ファイルのアップロードを許可するかどうか指定します。trueは許可

例えば、デフォルト画像など、指定したくないものは除外しても大丈夫です。

それぞれの値を指定してあげると、カスタムヘッダーが利用できるようになり、管理画面の[外観]の下に[ヘッダー]というメニューが追加されます。

カスタムヘッダーメニュー

ここからヘッダー画像をアップロードすることができます。指定したサイズに合わせたヘッダー画像を作成してアップロードしましょう。

外観⇒ヘッダー

アップロードしたヘッダー画像を表示する

functions.phpにカスタムヘッダーの内容を追加したら、今度はアップロードしたヘッダー画像を表示するための記述が必要です。

header.php内の画像を表示させたい場所に、以下のようなコードを記述します。

<?php if(get_header_image()): ?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
</a>
<?php else: ?>
<a href="<?php echo home_url('/'); ?>">
<?php bloginfo('name'); ?>
</a>
<?php endif; ?>

上記コードは、「ヘッダー画像が存在すれば画像を表示し、ヘッダー画像が存在しなければサイト名をテキストで表示する」という内容になっています。

functions.phpでデフォルト画像を指定しなかった場合は、最初はヘッダー画像が存在しないのでサイト名が表示されることになります。

表示する画像やテキストには、トップページへのリンクをつけるようになっているので、必要ない場合はaタグを外してください。

あとがき

サイトのヘッダー画像やロゴは、imgタグでheader.php内に直接記述してもいいですが、カスタムヘッダーを実装しておいた方が後々管理が楽になります。

自作テーマ制作時などの参考になれば幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

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