[WordPress] コピペで使えるページタイトルエリアのテンプレート

公開日:2018/09/23 更新日:2019/07/31

やりたいこと

ページのヘッダーに、画面幅いっぱいの背景画像にコントラストを効かせたタイトルを乗せるというデザインがよくあります
ページごとに背景画像を変えれば見た目や印象にそれぞれ特色が出ますし、タイトルをユーザーに視認してもらいやすくなります
また、WordPressではカテゴリーや検索結果、はたまた該当ページがないときの404ページなど、色々なパターンのページ表示があり得ます
こういったページの種別に応じたタイトルを場合分けしてつけられれば管理が楽になります

サンプルコード

html

<?php
if( !is_home() ) {
    $page_title = '';
    
    if( is_tax() ) {
        $taxonomy = get_query_var( 'taxonomy' );
        $term = get_term_by( 'slug', get_query_var( 'term' ), $taxonomy );
        $page_title = '「'. $term->name .'」関連';
    }
    elseif( is_post_type_archive() ) {
        $page_title = get_post_type_object( get_post_type() )->label;
    }
    elseif( is_category() ) {
        $category = get_the_category();
        $page_title = $category[0]->cat_name;
    }
    elseif( is_404() ) {
        $page_title = 'ページが見つかりませんでした';
    }
    elseif( post_custom( 'h1_title' ) ) {
        $page_title = post_custom( 'h1_title' );
    }
    else {
        $page_title = get_the_title();
    }
?>

<div class="page_header">
    <h1><?php echo $page_title ?></h1>
</div>

CSS

.page_header {
    position: relative;
    height: 200px;
    background-image: url(./images/page_title/bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.page-xxx .page_header {
    background-image: url(./images/page_title/bg_xxx.jpg);
}
.page_header > h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 90%;
    color: #fff;
    text-align: center;
}

仕組み、解説、補足など

背景画像は、各ページ固有のクラス（サンプルコードとの「.page-xxx」クラス）で個別に設定できます
各ページ固有のクラスを自動的に設定する方法はこちらを参考にしてください
SEOの観点から編集画面でつけたページタイトルとは別の文字列をh1にしたいことがあります
そこで、ページに「h1_title」というカスタムフィールドを設けてh1文字列の切り替えができるようにしています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。