カスタムヘッダーでメインイメージを表示させるには？

トップページにメインイメージを表示します。また、メインイメージを管理画面で設定できるようにします。wordpressのカスタムヘッダー機能を利用します。

画面のトップに、イメージを表示します。

手順

①function.phpファイルにコードを記述し、カスタムヘッダー機能を有効にします。

↓

②header.phpファイルで、「header_image();」を記述します。imageを呼び出します。

↓

③管理画面に「外観」→「ヘッダー」が表示されますのでクリックします。

↓

④「画像を選択」行の「ファイルを選択」をクリックします。選択したら、アップロードをクリックします。

変更するコード

①function.phpファイルにコードを記述し、カスタムヘッダー機能を有効にします。

②header.phpファイルで、「header_image();」を記述し、imageを呼び出します。

推奨コード

「add_theme_support」を利用します。

function.php

// カスタムヘッダー
$args = array(
    'width' => 950,
    'height' => 295,
    'header-text' => false,
    'default-image' => '%s/images/top/main_image.png',
    'admin-head-callback' => '__return_false',
);

add_theme_support( 'custom-header', $args );

• add_theme_support：テーマの機能を設定。
• 「'custom-header'」でカスタムヘッダーを指定。
• width：イメージの横幅を指定。
• height：イメージの縦幅を指定。
• header-text：ヘッダーにテキストを表示させるかさせないか。
• デフォルトイメージのURLを指定。%sはテーマディレクトリ。

header.php

<section id="branding">
      <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
    </section><!-- #branding end -->

• header_image()：カスタムヘッダー機能で指定したイメージのURLを出力。

非推奨となったコード

「add_custom_image_header」、「add_custom_background」は、WordPress 3.4日本語版から非推奨となりました。WordPress 3.4日本語版で使用しても、特に問題なく動作します。ただ、デバッグモード等にしていると「非推奨」の旨が表示されます。

function.php

// カスタムヘッダー
add_custom_image_header('', '__return_false');

define('NO_HEADER_TEXT', true);
define('HEADER_TEXTCOLOR', '');
define('HEADER_IMAGE', '%s/images/top/main_image.png');
define('HEADER_IMAGE_WIDTH', 950);
define('HEADER_IMAGE_HEIGHT', 295);

header.php

    <section id="branding">
      <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
    </section><!-- #branding end -->