WordPressにカスタムヘッダーの機能を追加して画像を表示する

WordPressでカスタムヘッダーの機能を追加すると、サイトのヘッダーなどに使用する画像を管理画面の外観からアップロードして表示することができるようになります。

わざわざテーマのテンプレートを開いて画像のパスを編集する必要がなくヘッダー画像などの表示ができるため、WordPressにカスタムヘッダーの機能がない場合には、追加して画像を表示できるようにしておくと便利です。

1. WordPressのカスタムヘッダー機能を追加する
- 1.1. オプションもカスタムヘッダーに追加
- 1.2. カスタムヘッダーがWordPressの外観に表示
2. カスタムヘッダーの画像をWordPressに表示
3. まとめ

WordPressのカスタムヘッダー機能を追加する

WordPressのカスタムヘッダーを追加する場合には、WordPressに特定の機能をテーマで使えるようにするための関数add_theme_suppor()を使います。

カスタムヘッダーの設定で画像のアップロードをするだけの機能だけでいいなら、以下のadd_theme_suppor()の記述方法で簡単にWordPressの管理画面に追加できます。

add_theme_support('custom-header');

add_theme_suppor()のカッコ内の引数に’custom-header’を記述してテーマのfunctions.phpに記述します。

追加したカスタムヘッダーで画像のアップロードができるだけの機能追加とはいえ、テーマテンプレートで画像を表示したい場所に以下の記述をすれば、きちんと画像表示ができます。

<?php if(get_header_image()): ?>
    <div class="smple">
        <img src="<?php header_image(); ?>" alt="">
    </div>
<?php endif; ?>

オプションもカスタムヘッダーに追加

add_theme_support(‘custom-header’);の記述で簡単に機能を追加するのではなく、カスタムヘッダーに機能を増やしたい場合は、add_theme_support()の引数で追加するオプションを配列で渡せるようにしてカスタムヘッダーをWordPressに追加します。

$custom_header = array(
    'default-image' => get_template_directory_uri().'/images/header-img.jpg',
    'width' => 1000,
    'height' => 400,
    'flex-height' => true,
    'flex-width' => false,
    'uploads' => true,
);
add_theme_support( 'custom-header', $custom_header );

配列にはキーと値のペアを記述して以下の機能を登録します。

default-image

カスタムヘッダーでデフォルトの画像を登録しておくことができます。

default-imageの画像を登録するには、あらかじめテーマの画像フォルダにカスタムヘッダーのデフォルト画像として表示したい画像を入れておきます。

そして画像フォルダに入れた画像はget_template_directory_uri()で画像フォルダまでのパスを指定することでデフォルト画像として表示できます。

widhtとheight

画像の縦横のサイズを指定します。

flex-widthとflex-height

flex-heightとflex-widthをfalseで指定した場合、widthとheightの比率のみで切り抜きが可能になります。

trueでflex-heightとflex-widthの機能を追加した場合は、自由に切り抜き可能にできます。フレキシブルな画像の切り抜きが可能といものですね。

uploads

uploadsはtrueにするとカスタムヘッダーの「新規画像を追加」からアップロードが可能になります。逆にfalseにするとアップロードした画像を切り抜いてリサイズした画像をWordPressが自動生成するときにエラーになってしまうことに注意です。

カスタムヘッダーがWordPressの外観に表示

テーマのfunctions.phpに記述したadd_theme_support(‘custom-header’);によって、カスタムヘッダーの機能が追加される場所は管理画面の「外観」に「ヘッダー」メニューが追加されます。

ヘッダーを開くと「ヘッダー画像」のメニューが追加されて表示されているのが分かります。

「ヘッダー画像」をクリックしてカスタムヘッダーに進むと、「新規画像を追加」で画像のアップロードができ、「選択して切り抜く」のボタンで進むと、「画像切り抜き」「切り抜かない」の選択表示があります。

画像の切り抜きができるのは、flex-heightとflex-widthの記述によって機能を追加したため。

uploadsの機能をtrueで記述した追加もしているので、カスタムヘッダーでアップロードして画像を切り抜いた画像も自動生成され使用できるようになります。

カスタムヘッダーの画像をWordPressに表示

WordPressのカスタムヘッダー機能を管理画面のメニューに追加することができたら、カスタムヘッダーの画像をWordPressを使用するテーマのページに出力して表示できるようにします。

カスタムヘッダーの設定から画像を表示したいテーマのテンプレートの場所に以下の記述をしてカスタムヘッダーからの画像を表示できます。

<?php if(get_header_image()): ?>
    <div class="smple">
        <img src="<?php header_image(); ?>" alt="">
    </div>
<?php endif; ?>

記述してることは、if文のget_header_image()で画像が登録されているかどうか判定をしてから、もし表示できる画像があれば、if文の下からendifまでの中に記述しているdivの親要素の出力とimgタグに記述のheader_image()が画像のパスを出力します。

カスタムヘッダーを表示する親要素からまとめて条件分岐してるので、カスタムヘッダーで画像を表示しないときはHTMLが出力しないようになります。

widthやheightの値を取得したい場合もあるかと思います。

その場合は、<?php echo get_custom_header()->width ?>と、<?php echo get_custom_header()->height ?>をimgタグで使います。

<?php if(get_header_image()): ?>
    <div class="hero">
        <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
    </div>
<?php endif; ?>

これによりWordPressのカスタムヘッダーで表示する画像のwidthとheightのサイズを出力できます。

WordPressの外観から画像を表示

テーマのテンプレートにカスタムヘッダーの画像をWordPressに表示するために記述したheader_image()で画像を出力できるようにすると、WordPressの外観から画像をアップロードしてWordPressに表示できます。

サンプルとして私がテーマを自作して遊んでいる「Pon-Kotuテーマ」にヘッダー画像を表示させてみました。

上の画像例ではヘッダー画像というより、ヘッダー下で追加したカスタムヘッダーを表示させたのでヒーロー画像という感じですかね。まぁヘッダー画像ということにします。

カスタムヘッダーで画像をアップロードしてプレビューに表示されたら「公開」で保存するだけです。テンプレート側に記述したheader_image()でカスタムヘッダーでアップロードした画像を出力して表示してくれます。

上のサンプル画像を見ると分かりますが、カスタムヘッダーのヘッダー画像に載ったテキストが表示されています。

このテキストはカスタムヘッダーからアップロードした画像を出力して表示するテンプレート側での記述の中にHTMLで表示するのですが、カスタムヘッダーのオプションをさらに追加することで、外観に追加したヘッダー画像メニューから自由にテキストカラーを変更できるような機能の追加もできます。

カスタムヘッダーの画像にテキストを表示

ここからの内容はWordPressにカスタムヘッダーの機能を追加して画像を表示するときにカスタムヘッダーにテキストを表示、そしてテキストの色を自由に変更する１つの例として記事に残しておきます。

WordPressの外観から画像を表示したら、カスタムヘッダー画像のテキストをブログのキャッチフレーズとして表示します。

<div class="hero">
    <?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="" />
        <span><?php bloginfo('description'); ?></span><!--キャッチフレーズ出力-->
    <?php endif; ?>
</div>

カスタムヘッダーの画像を表示させるためにテンプレートファイルに記述したget_header_image()やheader_image()を囲む親要素の内部に、spanタグで囲んだbloginfo(‘description’)でキャッチフレーズを出力してテキスト表示しておきます。

'wp-head-callback' => 'header_style',
'default-text-color' => '006182',
'header-text' => true,

次にfunctions.phpでカスタムヘッダーの機能を追加するための記述をしたオプションに上記の機能を追加します。

wp-head-callbackはキーの値に記述した名前を関数名にしてページのheadタグ内でカスタムヘッダーのテキスト色をheader_textcolor()で表示するために追加します。

default-text-colorはテキストカラーのデフォルトカラーを指定するための追加オプションです。デフォルトのカラーが必要なければ記述は不要です。

header-textは値をtrueにしておきます。falseにするとカスタムヘッダーのヘッダー画像メニューの上で表示する「色」というメニューが非表示になり、ヘッダー画像のテキストカラーの変更ができなくなることに注意です。

function header_style(){
    ?>
        <style type="text/css">
        .hero span{
            color: #<?php header_textcolor();?>;
        }
        </style>
    <?php
}

次に上記の記述のようにstyleタグの中に表示するテキストのCSSセレクタを記述し、colorの値でheader_textcolor()を記述します。関数名はカスタムヘッダーのオプションを渡す配列に記述したwp-head-callbackの値です。記述するファイルはfunctions.phpです。

そうするとテキストのカラーはカスタムヘッダーの機能を追加した外観の色メニューから自由にテキストカラーを変更した表示ができるようになります。

CSSでヘッダー画像とテキストのデザイン

一応WordPressにカスタムヘッダーの機能を追加して画像を表示したときに、CSSでヘッダー画像とテキストのデザインをした記述も載せておきます。

.hero img{
    width: 100%;
    height: auto;
    max-height: 650px;
    object-fit: cover;
    vertical-align: top;
}

.hero{
    position: relative;
}
.hero::after{
    content: "";
    position: absolute;
    background-color: rgba(0,0,0,.25);
    background-image: linear-gradient(90deg,rgba(0,0,0,.5) 50% ,transparent 50%),
    linear-gradient(rgba(0,0,0,.25) 50% ,transparent 50%);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: 2px 2px;
}
.hero span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 1.4rem;
    width: 450px;
    z-index: 123;
    letter-spacing: 2px;
    text-align: center;
}