wordpress カスタムヘッダー

2013年6月7日

カスタムヘッダーを利用する際のメモ。

バージョン3.4以降、テーマは次のように、カスタムヘッダーをサポートするためにfunctions.phpファイルにadd_theme_support()を使用する必要がある。(add_custom_image_header の使用はバージョン 3.4 から非推奨)

カスタムヘッダーの利用

add_theme_support( 'custom-header', $args )
このオプションで、テーマでカスタムヘッダーがサポートされ、管理パネル → 外観 → ヘッダーが利用可能になる。
パラメータ:$args のデフォルトは下記参照。
戻り値: なし
パラメータの記述の後に、add_theme_support( 'custom-header', $args )を記述する。
$defaults = array(
    'default-image' => '',  //デフォルトヘッダー画像へのパスを指定
    'random-default' => false,  //ランダム表示するか
    'width' => 0,  //ヘッダー画像の幅
    'height' => 0,  //ヘッダー画像の高さ
    'flex-height' => false,  //高さをフレキシブルに(トリミングできるように)するか
    'flex-width' => false,  //幅をフレキシブルに(トリミングできるように)するか
    'default-text-color' => '',  //ヘッダーテキストの文字色の指定
    'header-text' => true,  //ヘッダーテキスト機能のオン・オフ
    'uploads' => true,  //他の画像をアップロードすることができるようにするかどうか
    'wp-head-callback' => '',  // ヘッダーをスタイリングするためのコールバックを指定
    'admin-head-callback' => '',  //管理画面でヘッダープレビューをスタイリングするためのコールバックを指定
    'admin-preview-callback' => '',  //管理画面でヘッダープレビューを表示するために使用するコールバックを指定
);

デフォルトヘッダー画像へのパスは「get_template_directory_uri()」を利用して指定するか、%s (テーマディレクトリのパス)を利用して指定する。

  • ‘default-image’ => get_template_directory_uri() . ‘/images/header.jpg’
  • ‘default-image’ => ‘%s/images/header.jpg’

アップロードが「true」で、flex-height’、’flex-width’が「false」の場合、アップロードした画像が指定した幅と高さと異なる場合、指定した幅と高さ(の割合で)でトリミングできる。

  • ‘flex-height’、’flex-width’を「true」に指定すると、指定した幅と高さに関係なくフレキシブルにトリミングできる。
  • ‘flex-height’、’flex-width’はどちらか片方のみを「true」に指定することも可能。

以下は functions.php への記述例。

デフォルトのヘッダー画像に900pxの幅と200pxの高さを設定し、サイトの所有者が他の画像をアップロードすることができるようにして、ヘッダーテキスト機能をオフ、高さをフレキシブルに指定

$args = array(
  'width' => 900,
  'height' => 200,
  'default-image' => get_template_directory_uri() . '/images/header.jpg',
  'uploads' => true,  //他の画像をアップロードすることができるようにする
  'header-text' => false,
  'flex-height' => true,  //高さをフレキシブルに(トリミングできるように)する
  'flex-width' => false,  //幅をフレキシブルに(トリミングできるように)しない
);
add_theme_support( 'custom-header', $args );

複数のデフォルトのカスタムヘッダー画像の登録(register_default_headers)

以下を記述すると複数のデフォルトヘッダー画像を登録できる。

register_default_headers(array(   //デフォルトのカスタムヘッダー画像を(複数)登録して選択肢を用意
  'city' => array(
    'url' => '%s/images/city.jpg',  //ヘッダー画像のアドレス
    'thumbnail_url' => '%s/images/city_thumbnail.jpg',  //ヘッダー画像のサムネイルのアドレス
    'description' => 'シティ:高層ビル'  //ヘッダー画像の説明や日本語名など(省略可)
  ),
  'flower' => array(
    'url' =>  get_template_directory_uri() . '/images/flower.jpg',  //'%s/images/flower.jpg'と同じこと
    'thumbnail_url' =>  get_template_directory_uri() . '/images/flower_thumbnail.jpg',
    'description' => '花:紫色の花'
  )
));

登録した画像は、管理パネル → 外観 → ヘッダーの画面で「デフォルト画像」に表示される。

add_theme_support( ) の default-image として指定した画像は管理画面に表示されないが「画像をリセット」の「デフォルトのヘッダー画像に戻す」をクリックすると選択される。

ヘッダー画像の出力(header_image)

header_image()
パラメータ:なし
戻り値: なし
利用可能箇所:どこでも可能

例えば、img 要素を使ってヘッダー画像を出力する際、テンプレート内でヘッダー画像を出力したい位置に以下のように記述する。

<?php if(get_header_image()): ?>  //テーマがヘッダ用イメージをサポートしていれば
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
<?php endif; ?>
  • 画像 URL:header_image();
  • 画像の幅:echo get_custom_header()->width;
  • 画像の高さ:echo get_custom_header()->height;
get_header_image()
パラメータ:なし
戻り値: ヘッダ用イメージのURLを返す。テーマがヘッダ用イメージをサポートしていない場合はfalseを返す。
利用可能箇所:どこでも可能

CSS の background-image を使用して表示する例

‘wp-head-callback’ => ‘header_style’ でヘッダーをスタイリングするためのコールバックを使用して background-image を使用。

‘admin-head-callback’ => ‘admin_header_style’ で管理画面でのプレビューにもそのデザインが反映されるように管理画面用の CSS も適用させる。

$args = array(
    'default-image' => get_template_directory_uri() . '/images/header.jpg',
    'width' => 800,
    'height' => 200,
    'default-text-color' => '666666',    //ヘッダー画像の左上に表示されるブログ名の文字色の指定
    'header-text' => true,    //ヘッダーテキスト機能を有効に
    'uploads' => true,    //他の画像をアップロードすることができるようにする
    'wp-head-callback' => 'header_style',    // ヘッダーをスタイリングするためのコールバック
    'admin-head-callback' => 'admin_header_style',    //管理画面でヘッダープレビューをスタイリングするためのコールバック
);
add_theme_support('custom-header', $args );

function admin_header_style(){    //管理画面でヘッダープレビューをスタイリングするためのコールバック
?>
    <style type="text/css">
    #headimg h1 {
      margin: 0;
      padding-top: 20px;
      padding-left: 30px;
      font-size: 30px;
      font-family: Arial, "Times New Roman", Times, serif;
    }
    #headimg h1 a {
      text-decoration: none;
    }
    #headimg #desc {
      padding-left: 30px;
      padding-top: 8px;
      font-size: 14px;
    }
</style>
<?php
}

function header_style(){    // ヘッダーをスタイリングするためのコールバック
?>
    <style type="text/css">
    #head {
      background-image: url(<?php header_image(); ?>);
    }
    #head h1 a, #head p {
      color: #<?php header_textcolor(); ?>;
    }
    </style>
<?php
}
&#91;/code&#93;

&#91;dlf&#93;  header_textcolor() |
カスタムヘッダーの文字色を出力する
パラメータ:なし
戻り値: なし
出力される値に「#」は付いていないので、自分で記述する必要がある。
&#91;/dlf&#93;

<h3>カスタムヘッダーにヘッダーテキストを表示する</h3>

<ul>
<li>カスタムヘッダー画像を CSS で背景に指定して、テキストを表示させる。</li>
<li>'header-text' =&gt; true でヘッダーテキスト機能のオンにする。</li>
<li>'default-text-color' => 'ffffff' で文字色を指定。(# は付けない)</li>
<li>'wp-head-callback' でヘッダーをスタイリングするためのコールバックを指定</li>
<li>'admin-head-callback'で管理画面でヘッダープレビューをスタイリングするためのコールバックを指定</li>
<li>'admin-preview-callback'で管理画面でヘッダープレビューを表示するために使用するコールバックを指定</li>
</ul>

以下はカスタムヘッダーを表示する領域の記述。

<ul>
<li>div 要素(id="header_img" )の背景としてカスタムヘッダーの画像を表示させる。</li>
<li>h2 要素の内容をヘッダーテキストとして表示させる。</li>
</ul>

<div id="header_img"> <h2>Blog Title</h2> </div><!-- end of #header_img -->

以下を functions.php に記述。

$args = array(
  'width' => 900,
  'height' => 200,
  'default-image' => get_template_directory_uri() . '/images/header.jpg',
  'uploads' => true,
  'header-text' => true,  //ヘッダーテキスト機能をオンに
  'default-text-color' => 'ffffff',   //ヘッダーテキストの文字色の指定
  'wp-head-callback' => 'header_style',  // ヘッダーをスタイリングするためのコールバックを指定
  'admin-head-callback' => 'admin_header_style',  //管理画面でヘッダープレビューをスタイリングするためのコールバックを指定
  'admin-preview-callback' => 'admin_header_image'   //管理画面でヘッダープレビューを表示するために使用するコールバックを指定
);
add_theme_support( 'custom-header', $args );

// ヘッダーをスタイリング(表示)するためのコールバック
function header_style(){
  ?>
    <style type="text/css">
      #header_img {
        background-image: url(<?php header_image(); ?>);
      }
      #header_img h2{
        color: #<?php header_textcolor(); ?>;
      }
    </style>
  <?php
}

//管理画面でヘッダープレビューをスタイリングするためのコールバック
function admin_header_style(){ 
  ?>
    <style type="text/css">
        #header_img {
            background-image: url(<?php header_image(); ?>);
            background-repeat: no-repeat;
            height: 200px;
        }
        #header_img h2{
            color: #<?php header_textcolor(); ?>;
        }
    </style>
  <?php
}

//管理画面でヘッダープレビューを表示するために使用するコールバック
function admin_header_image() { ?>
    <div id="header_img">
      <h2>Blog <?php echo header_textcolor(); ?></h2>
    </div><?php
}
&#91;/code&#93;

<ul>
<li>div 要素の背景として CSS で画像を表示させるが、CSS では background-image: url(&lt;?php header_image(); ?&gt;); が機能しないので、 ヘッダーをスタイリングするためのコールバックで指定する。</li>
<li>'header-text' =&gt; true でヘッダーテキスト機能のオンにすると管理画面ではヘッダーテキストが表示されるが、実際のページでは表示されない。</li>
<li>管理画面で表示されるヘッダーテキストは「bloginfo('name')」と「bloginfo('description')」の値になっているみたいなので、これはヘッダープレビューを表示するために使用するコールバックで指定して実際の値を表示させる。</li>
<li>管理画面で表示されるヘッダーテキストの見栄えは、管理画面でヘッダープレビューをスタイリングするためのコールバックで指定する。</li>
</ul>

<dl>
<dt>ヘッダーをスタイリング(表示)するためのコールバック(header_style())</dt>
<dd>CSS では  header_image(); や header_textcolor(); は使用できないのでこの関数で指定する。他の要素にも header_textcolor(); を適用したい場合は、それもここに記述する。</dd>
</dl>

<dl>
<dt>管理画面でヘッダープレビューをスタイリングするためのコールバック(admin_header_style())</dt>
<dd>管理画面で表示されるカスタムヘッダーの見栄えを指定する。</dd>
</dl>

<dl>
<dt>管理画面でヘッダープレビューを表示するために使用するコールバック(admin_header_image())</dt>
<dd>管理画面で実際のカスタムヘッダーの内容を表示させるために指定する関数。これを指定しないと、デフォルトの内容が表示されるみたい。</dd>
</dl>

その他にカスタムヘッダーのスタイルは通常の CSS に記述することができる。(ヘッダーをスタイリング(表示)するためのコールバックに記述することも可能)

#header #header_img { clear: both; margin-top: 10px; background-repeat: no-repeat; height: 200px; }