WordPress テーマにカスタムヘッダーを設置する

カスタムヘッダーは、Webサイトに表示する画像を管理画面から変更できるようにする機能です。設置は1か所だけで、トップページのメイン画像によく使われます。使用しているWordPress テーマにカスタムヘッダーを設置する手順を解説します。

【記事執筆時の環境】
WordPress 3.9.1

カスタムヘッダーをサポートする記述をfunctions.phpに追加する

デフォルトで表示する画像ファイル、画像の幅と高さをパラメータとして、以下のコードをfunctions.phpに追加します。

※ '%s'は、テーマディレクトリのパスに置き換えられます。
※指定できるパラメータについては、Codexを参照してください。
 http://codex.wordpress.org/Custom_Headers

カスタムヘッダー機能が有効になると、外観メニューに[ヘッダー]が追加されます。

外観メニュー

管理画面から表示する画像を選択する

表示する画像の設定や切り替えは管理画面から行います。

カスタムヘッダー画像を設定する

[外観]-[ヘッダー]をクリックします。

自分のコンピューターから画像をアップロードする場合は、
[ファイルを選択]をクリックしてファイルを指定した後、[アップロード]をクリックします。

メディアライブラリに登録してある画像を選択する場合は、
[画像の選択]をクリックしてファイルを選択した後、[ヘッダーとして設定]をクリックします。

画像の設定画面

カスタムヘッダー画像を切り替える

過去に自分のコンピュータからアップロードした画像、あるいはメディアライブラリから選択した画像は、[アップロードした画像]のところに表示されます。
カスタムヘッダーを切り替える場合は、ラジオボタンにチェックを入れて、[変更を保存]をクリックします。

アップロードした画像の選択画面

カスタムヘッダーを表示したい部分にコードを記述する

以下のコードを記述します。

スポンサーリンク

特集記事

  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ