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


Posted:2015/01/07 9:00:01 AM|Category : WordPress

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

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

手順

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

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

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

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

コード

①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 -->

トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告