WordPress【twenty seventeen】トップページのヘッダー画像の高さを簡単に変更・カスタマイズする方法

WordPressのテーマ【twenty seventeen】ですが、とても素敵なテンプレートだと感じています。しかし、トップページヘッダー画像の大きさが凄い！！

正直、この大きなヘッダー画像はインパクトがあって人によっては良いのかもしれません。しかし、個人的にはヘッダー画像が画面全てに表示されてしまうので、下スクロールさせないと記事一覧が表示できないことが少し残念と思ってしまいます。

恐らく動画をヘッダー画像に使用する場合には良いのかもしれませんが、通常のサイトだと大きすぎて邪魔と思う方が多いのではないかと感じています。

トップページ以外のページでは高さが抑えられており、それと同じ高さにしたいと思い【twenty seventeen】のヘッダー画像の高さ表示に関する仕組みを全て解析しました。トップページと他ページの違いは「home」、「twentyseventeen-front-page」の2つのキーワードがポイントになります。

始めはCSSを変更しようと考えたのですが、実はコレ結構クセ物です。ヘッダー画像の表示スタイルで「object-fit:」と言うものが使用されていること、そしてブラウザによって表示スタイルを変更しているので、パソコン上では修正できたとしてもスマホやタブレットでは高さが抑えられないというような現象が起こりえます。

また、CSS修正の場合には一か所の修正で済まない為、せっかく子テーマを作ってるのに子テーマのCSSが滅茶苦茶になる可能性があります。それでは筆者がどのようにカスタマイズしたかを説明します。

トップページ以外のページと同じ動作をさせれば良いだけ

はっきり言ってしまいますと、最新の投稿をトップページに設定している場合は「home」、固定ページをトップページにしている場合は「twentyseventeen-front-page」がキーワードになってPHPが動作するように出来ています。勘が良い方ならわかると思いますが、「強制的にこのキーワードを外す」ことをすれば良いのです。

「functions.php」でキーワードを外す

子テーマの「functions.php」に下のコードを追記しよう。

// トップページヘッダー画像を他ページと同じ扱いとする
add_filter( 'body_class', 'top_body_class');
function top_body_class( $classes ) {
    unset($classes[array_search("twentyseventeen-front-page",$classes)]);
    unset($classes[array_search("home",$classes)]);
    return $classes;
}

たったこれだけでトップページのヘッダー画像の高さが他のページと同じになります。しかし、この修正だけだと右側に下矢印（↓）が表示されてしまう為、これが気になる方は次の修正もしてください。

「site-branding.php」をカスタマイズし下矢印を非表示にする

「子テーマフォルダ \ template-parts \ header \ site-branding.php」の下の方になるのですが、7行目～9行目部分を「コメントアウト」するか「削除」する。また、子テーマにこのファイルをコピーされていない場合は親テーマより子テーマにコピーして下さい。

            if ( $description || is_customize_preview() ) :
            ?>
                <p class="site-description"><?php echo $description; ?></p>
            <?php endif; ?>
        </div><!-- .site-branding-text -->

        <?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && ! has_nav_menu( 'top' ) ) : ?>
        <a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a>
    <?php endif; ?>

    </div><!-- .wrap -->
</div><!-- .site-branding -->

ちなみに自分は下の様にコメントアウトしました。if分の中をHTMLとPHP部分で細かくコメントアウトしています。4行目・5行目が変更した部分となります。

        </div><!-- .site-branding-text -->

        <?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && ! has_nav_menu( 'top' ) ) : ?>
        <!--下矢印を消去する-->
        <!--<a href="#content" class="menu-scroll-down">--><?php /* echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); */ ?><!--<span class="screen-reader-text">--><?php /* _e( 'Scroll down to content', 'twentyseventeen' );*/ ?><!--</span></a>-->
    <?php endif; ?>
    </div><!-- .wrap -->
</div><!-- .site-branding -->

これでトップページの下矢印（↓）も消去することができます。本サイトはこの修正によりトップページのヘッダー画像の高さを他ページと同じにしました。CSSに修正を加えるよりも、こちらの方がシンプルで簡単だと思いますので、同じようトップページのヘッダーが画像の高さで悩まれている方はやってみて下さい。

【A8.netに登録しよう！】
◇ 広告主数・アフィリエイトサービス数日本最大級☆
◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
◇ 使いやすいサイトNO.1
⇒アフィリエイトならA8.net