カスタムヘッダの作成 | IT工房｜AI入門とWeb開発

カスタムヘッダとは

カスタムヘッダとはサイトのヘッダー部分のいわゆるメインビジュアルを管理画面から簡単に変更できる仕組みのことをいいます。
管理画面の「外観」の中の「ヘッダー」というメニューから設定を行いますが、新規でテーマを作成した場合「外観」に「ヘッダー」メニューは存在しません。
このメニューはfunctions.phpにコードを記述することで使用できるようになります。カスタムヘッダの画像はimg
タグを使用して表示する方法とCSSのbackgroundプロパティを使用して表示する方法と２通りの方法を選択できます。通常の参考書などはimgタグを使用する方法が簡単に書かれている場合が多いようです。ここでは両方の表示方法を見ていきます。

「ヘッダー」メニューを有効化する

functions.phpに下記のコードを記述します。

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

widthとheightで幅と高さが決まります。flex-heightとflex-widthで柔軟な画像加工として切り抜きができるようになります。random-defaultは複数の画像を用意してページごとに画像を変更して表示できます。header-textはfalseならimgタグを使用して画像のみ表示する時に使用します。trueはCSSのbackgroundプロパティを使用して表示させます。その際にヘッダーテキストを表示させたり非表示にさせたりできます。更にヘッダーテキストの文字色を簡単に変更できます。

imgタグを使用してカスタムヘッダを設定する

header.phpなどのヘッダー画像を表示させたいテンプレート内に以下のタグを入れます。

<header id="header-image">
<p><img src="<?php header_image(); ?>" 
width="<?php echo get_custom_header()->width; ?>" 
height="<?php echo get_custom_header()->height; ?>" alt="" /></p>
</header>

ポイントはphpで書かれた部分のheader_image();関数になります。

手順

ダッシュボードの「外観」の「ヘッダー」メニューからカスタムヘッダー設定画面に入ります
「画像を選択」で画像を選択します
「アップロード」ボタンでアップロードします
「変更を保存」ボタンをクリックすればOKです。

CSSのbackgroundプロパティを使用した方法

メインビジュアル部分の画像をCSSのbackgroundプロパティを使用して表示する方法もよく見られるパターンです。

この場合はfunctions.phpに記述する内容で「’header-text’ => true」にするのがポイントです。

trueにすることで「ヘッダー」メニューに「ヘッダー画像上にテキストを表示する」というチェックボックスでできた設定項目と文字色の設定項目が表示されるようになります。ただ、「ヘッダー画像上にテキストを表示する」というチェックボックスのチェックで文字が表示されたり消えたりはしません。その仕組みを自分でfunctions.phpに記述しなければなりません。ここのところはあまり解説がされてないところです。
ということで、文字の表示の有無部分は作ってみました。

手順

functions.phpの記述内容

<?php
// カスタムヘッダー 
add_theme_support(
     'custom-header',
     array(
         'width' => 950,
         'height' => 295,
         'flex-height' => false,
         'flex-width' => false,
         'default-text-color' => '#999999', 
         'header-text' => true,
         'default-image' => get_template_directory_uri() . '/images/default.png',
         'wp-head-callback' => 'header_style',
         'admin-preview-callback' => 'admin_header_image',
         'admin-head-callback' => 'admin_header_style'
     ) );
function header_style(){
    ?>
    <style>
    #header-image{
        background: url(<?php header_image(); ?>);
        color:#<?php header_textcolor(); ?>;
        width: <?php echo get_custom_header()->width; ?>px;
        height:<?php echo get_custom_header()->height; ?>px;
    }
    #header-image p{
        padding: 1em 1em;
        text-indent: 0;
     <?php   if ( !display_header_text() ) :?>
        text-indent:-9999px;
    }
</style>
<?php
endif;
}
function admin_header_image(){
    $style = 'style="background-image:url(' . get_header_image() .');
             max-width:' . get_custom_header()->width . 'px;
             height:' .get_custom_header() ->height.'px;"';
    $color = 'style="color:#' . get_header_textcolor() . ';"';
?>
        <div id="headimg" <?php echo $style; ?>>
        <?php   if ( display_header_text() ) :?>
            <p <?php echo $color; ?>><?php bloginfo('description');?></p>
        </div>
<?php
endif;
} 
function admin_header_style() { 
?>
        <style type="text/css">
        #headimg{
           max-width: <?php echo get_custom_header()->width; ?> px;
           height: <?php echo get_custom_header()->height; ?> px;
        }
        #headimg p{
          padding: 1em 1em;
        }
        </style>
<?php
}

この方法は高橋のりさんの本を参考にしていますが、テキストの表示、非表示については言及がありませんでしたので独自に作成しています。
header_style()で背景画像としてヘッダー画像を表示させています。
display_header_text()関数がどうやらテキストの表示、非表示でtrue,falseを返しているようなのでif文で判定し、テキストなしならtext-indent:-9999pxとしたわけです。
admin_header_image()とadmin_header_style()はプレビュー画面の表示の設定を行っているもので実際のサイトの表示には関係ないものです。

header.php側の設定

こちらの記述は簡単です。bloginfo(‘description’)でキャッチフレーズのテキストを表示させただけです。

<header id="header-image">
  <p><?php bloginfo('description');?></p>
</header>