ブートストラップ３を使って自作テーマ作成（１３）カスタムヘッダー画像を使えるようにheader.phpを修正

現時点では、サイトのヘッダータイトル部分はブートストラップの”jumbotron”を使って表示しています。今回は、WordPress管理画面で設定したカスタムヘッダー画像を表示出来るようにheader.phpを修正してみます。

１）header.phpのサイトタイトル部分を変更
　
現時点では、下記のようにブートストラップのjumbotronを使ってスタイリングしています。

<div class="jumbotron">
    <h1>
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    </h1>
    <p><?php bloginfo( 'description' ); ?></p>
  </div>

TwentyFourteenのheader.phpからカスタムヘッダー画像を表示している部分をコピーし、上記部分を下記のように修正します。
　
カスタムヘッダー画像が設定されている場合はカスタムヘッダー画像を使用し、設定されていない場合は”jumbotron”を使用します。

<div id="page" class="hfeed site">
<?php if ( get_header_image() ) : ?>
  <div id="site-header">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
      <img src="<?php header_image(); ?>" 
           width="<?php echo get_custom_header()->width; ?>" 
           height="<?php echo get_custom_header()->height; ?>" alt="">
    </a>
  </div>
  <header id="masthead" class="site-header" role="banner">
  <div class="header-main">
    <h1 class="site-title">
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
         <?php bloginfo( 'name' ); ?>
      </a>
    </h1>
  </header>
<?php else : ?>
  <div class="jumbotron">
    <h1>
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    </h1>
    <p><?php bloginfo( 'description' ); ?></p>
  </div>
<?php endif; ?>

　
２）サイトタイトル部分のCSS設定
　
スタイルシートについてもTwentyFourteenのstyle.cssを流用し、自分の好みに合わせて修正します。

/**
 * 4.0 Header
 * -----------------------------------------------------------------------------
 */

#site-header {
        position: relative;
        z-index: 3;
}

.site-header {
        background-color: #000;
        max-width: 1260px;
        position: relative;
        width: 100%;
        z-index: 4;
}

.header-main {
        min-height: 48px;
        padding: 0 10px;
}

.site-title {
        float: left;
        font-size: 18px;
        font-weight: 700;
        line-height: 48px;
        margin: 0;
}

.site-title a,
.site-title a:hover {
        color: #fff;
}

　
３）動作確認
　
①WordPress管理画面の「外観」→「ヘッダー」でヘッダー画像を設定
ブラウザで表示し、サイトタイトル部分がヘッダー画像とサイトタイトルが意図したとおり表示されているか確認します。
　
②ヘッダー画像を設定していない場合は、ブートストラップの”jumbotron”のスタイルで表示される事を確認します。
　
「ブートストラップ３を使って自作テーマ作成」の目次へ