Webサイト

WordPressでヘッダー画像をカスタマイズをする方法[カスタムヘッダー]

(2020/10/19更新)

みなさんこんにちは!ワトスンです。
今回は、、

ヘッダー画像をWordPressで管理できるようにするにはどうすればいい?カスタムヘッダーってどうやって作成すればいいの?

といった疑問に答えます。

WordPressでテーマを自作していると、様々な試練が立ちはだかります。

今回はヘッダーに画像を追加できるようにカスタマイズをする方法をご紹介します!

下↓の画像のようにWordPressのカスタマイズ画面から簡単にヘッダー画像を設置する方法をご紹介

WordPressのカスタムヘッダー機能を使用する

WordPressの管理画面からヘッダー画像を自由に変更できるようにカスタマイズするには、WordPressに元から備わっている「カスタムヘッダー」を使用することで簡単にカスタマイズできます。

WordPressはとても便利なCMSで、開発者のためにたくさんの機能を用意してくれています。
これからご紹介していきますが、「カスタムヘッダー」に限らず、ここはこんな感じでカスタマイズしてみたいな”と思った時は、「WordPress カスタマイズ」などで検索していくと簡単にカスタマイズできるものが見つかると思います。

カスタムヘッダー作成に必要なPHPファイル

さて、それでは「カスタムヘッダー」の作成をしていきます。
今回、ご用意していただくPHPファイルは2つあります。

・function.php
・header.php

の2つです。

この2つのファイルにそれぞれ記述していくだけで「カスタムヘッダー」の完成です。

function.php

まず、function.phpにはカスタムヘッダーを呼び出すためのコードを書いていきます。
WordPressには様々な機能が追加できる、「add_theme_support()」というコードが存在します。
このコードを使用することで、WordPressをより便利に使いこなすことができます。
今回はそのうちの1つ、「カスタムヘッダー」を作成していきます。
他にもたくさん機能が追加できるので、「WordPressのカスタマイズの使い方」からぜひ確認してみて下さい。

カスタムヘッダーを作成する場合は、function.phpに以下のコードを書いていきます。

カスタムヘッダーの詳細は「カスタムヘッダーの使い方」からご覧ください。

「$headerwidthpx」と「$heightpx」のためのプログラムも記述します。↓

以上の記述をfunction.phpに記述することで、とりあえず「カスタムヘッダー」の使用が可能になります。
ですが、これだけだと画像を表示させることができないので、header.phpに画像を表示させるためのコードを挿入していきます。

header.php

header.phpにはカスタムヘッダーで設定した画像を表示させるためのコードを記述していきます。
以下のコードをヘッダー画像を設置したい場所に記述して下さい。

以上をheader.phpに記述できれば完成です。

WordPressの管理画面の「外観→カスタマイズ→ヘッダー画像」から画像を自由に変更できるようになりました!

コードの意味がわからない場合は、コピペでも上手く表示されるのでお試しください。

なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください!

以上です。

コメントを残す

メールアドレスが公開されることはありません。

関連記事