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

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

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

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

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

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

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

外観メニュー

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

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

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

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

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

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

画像の設定画面

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

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

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

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

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

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

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

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ