WordPressで選べるテーマの多くはヘッダー画像をアップロードして切り替えられる「カスタムヘッダー」に対応していますが、対応しておらず「ヘッダー」メニューが使えないテーマもあります。

この場合の対策は、

1. カスタムヘッダー対応のテーマに切り替える
2. このテーマをカスタムヘッダー対応にする

のいずれかです。

慣れていない方はカスタムヘッダー対応のテーマに切り替えた方が無難だと思いますが、どうしても使用中のテーマをカスタムヘッダーに対応させたいこともあるでしょうから、使用中のテーマをカスタムヘッダー対応にする手順を紹介します。

「外観」-「ヘッダー」メニューを使用可能にする（functions.phpの修正）

まずは、「外観」-「ヘッダー」メニューを使用可能にするために、次のコードをfunctions.php（できれば子テーマですが親テーマでも可）に入力してみましょう。

// カスタムヘッダーを追加する（幅950px、高さ250px）
$defaults = array(
    'default-image'          => '',
    'random-default'         => false,
    'width'                  => 950,
    'height'                 => 250,
    'flex-height'            => false,
    'flex-width'             => false,
    'default-text-color'     => '',
    'header-text'            => true,
    'uploads'                => true,
);
add_theme_support( 'custom-header', $defaults );

（WordPress Codex日本語：関数リファレンス/add_theme_supportより一部加工して引用）

これで、「外観」-「ヘッダー」メニューが使用可能になります。

「ヘッダー」メニューから画像をアップロードするとプレビューに表示されます。

ヘッダー画像をサイトに表示（header.phpの修正）

このヘッダー画像をサイトに表示するにはテンプレートファイルを修正する必要があります。header.phpにコードを追加するのが一般的です。

最低限、次のコードを追加すればヘッダー画像が表示されます。header_imageはヘッダー画像のURLを返す関数です。

<img src="<?php header_image(); ?>">

これだけでサイトにヘッダー画像は表示されますが、実用的ではないので少し加工します。

<?php if(is_front_page() || is_home()) : ?>
    <?php if ( get_header_image() ) : ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
        <img src="<?php header_image(); ?>" class="header-image"
         alt="<?php bloginfo( 'name' ); ?>" /></a>
    <?php endif; ?>
<?php endif ?>

コードの内容は、

• 1行目：フロントページ（is_front_page）または投稿トップ（is_home）のみでヘッダー画像を表示するように条件を組み立てています。
• 2行目：ヘッダー画像が存在するかどうかget_header_imageで調べています。存在する場合のみにimgタグを表示するためです。
• 3行目：表示する画像にトップページ（home_url）へのリンクを追加しています。
• 4行目：header_imageで画像のURLを出力して、この画像にheader-imageというclass名を付加しています｡
• 5行目：画像のalt属性にサイト名（bloginfo( 'name' )）を設定しています｡

テーマによって異なるので具体的にheader.phpの「どこに」追加するのかは書きませんが、header.phpでbodyタグから後の任意の場所に入力してみて、表示結果を見て調整してください。

表示結果は次のようになります。

ヘッダー画像のスタイル設定

ヘッダー画像のスタイル設定は必須ではありませんが、次のようなCSSをstyle.cssに入力しておくとスマホなどでの表示に役立ちます。

/* ヘッダー画像の最大サイズを画面幅に */
img.header-image {
    max-width: 100%;
    height: auto;
}

「max-width: 100%;」で画像の最大幅を画面いっぱいに制限することで、スマホなどの画面幅が狭い端末では画像が縮小されます。