Simplicityにヘッダーソースを追加してSTORK風にカスタマイズ！

こんにちは、SHUMiSTです。

Simplicity（シンプリシティー）テーマを使用して、STORK（ストーク）テーマを再現というかデザインを近づけるカスタマイズ第２回目です。

前回は、ヘッダーレイアウトをSTORK（ストーク）テーマに近づけるところまで行きました。
今回は、予定通りSimplicity（シンプリシティー）テーマの流用だけでは再現できない箇所のソースの追加カスタマイズを行っていきます。

テンプレートファイルに変更を加える場合は親テーマの該当ファイルを子テーマのディレクトリにコピーし、子テーマで変更を加えましょう。

第２回：ヘッダーにソースを追加しよう！
- header.phpのカスタムヘッダーに表示条件を追加
- header.phpのカスタムヘッダーにヘッダーテキストを追加
カスタマイズまとめ
- 今回のカスタマイズ前後のスクリーンショット

第２回：ヘッダーにソースを追加しよう！

Simplicity（シンプリシティー）テーマの流用だけでは対応できない箇所、STORK（ストーク）テーマを再現できない箇所にソースを追加します。とはいっても、カスタムヘッダー内に追加するだけで、比較的簡単なので安心してください。

header.phpのカスタムヘッダーに表示条件を追加

Simplicity（シンプリシティー）テーマのカスタムヘッダーはどのページでも必ず表示されてしまうので、今後進めていくSTORK（ストーク）テーマのように大きいカスタムヘッダーだとメインコンテンツである記事が下に下がってしまい、読者に余計な手間をかけさせてしまいます。

そこで、トップページ・フロントページのみで表示するようにカスタマイズを行います。

変更前のソース

  <div id="header" class="clearfix">
      <?php //カスタムヘッダーがある場合
      // $h_top_style = '';
      // if (get_header_image()){
      //   $h_top_style = ' style="background-image:url('.get_header_image().')"';
      // } ?>
      <div id="h-top"<?php //echo $h_top_style; ?>>
        <div class="alignright top-sns-follows">
          <?php if ( is_top_follows_visible() ): //トップのフォローボタンを表示するか?>
            <?php get_template_part('sns-pages'); //SNSフォローボタンの呼び出し?>
          <?php endif; ?>
        </div>
      </div><!-- /#h-top -->
  </div><!-- /#header -->

追加ソース

下記のソースが、トップページ・フロントページのみで表示する条件式です。

  <?php if ( is_home() || is_front_page() ): ?>
  // ここに変更前ソースを挿入します。
  <?php endif ?>

変更後のソース

#headerボックスを囲むように上記の追加ソースを追加します。

  <?php if ( is_home() || is_front_page() ): ?>
  <div id="header" class="clearfix">
      <?php //カスタムヘッダーがある場合
      // $h_top_style = '';
      // if (get_header_image()){
      //   $h_top_style = ' style="background-image:url('.get_header_image().')"';
      // } ?>
      <div id="h-top"<?php //echo $h_top_style; ?>>
        <div class="alignright top-sns-follows">
          <?php if ( is_top_follows_visible() ): //トップのフォローボタンを表示するか?>
            <?php get_template_part('sns-pages'); //SNSフォローボタンの呼び出し?>
          <?php endif; ?>
        </div>
      </div><!-- /#h-top -->
  </div><!-- /#header -->
  <?php endif ?>

header.phpのカスタムヘッダーにヘッダーテキストを追加

Simplicity（シンプリシティー）テーマには、ヘッダーテキストを表示する箇所がないのでSTORK（ストーク）テーマのようにヘッダーテキストを表示できるようにカスタムヘッダー内にソースを追加します。

変更前のソース

66行～72行付近

      <div id="h-top"<?php //echo $h_top_style; ?>>
        <div class="alignright top-sns-follows">
          <?php if ( is_top_follows_visible() ): //トップのフォローボタンを表示するか?>
            <?php get_template_part('sns-pages'); //SNSフォローボタンの呼び出し?>
          <?php endif; ?>
        </div>
      </div><!-- /#h-top -->

追加ソース

STORK（ストーク）テーマでは、カスタムヘッダー内にヘッダー見出し、サイトの説明や見出しの補足、メニューボタンがあるのでボックスを２つ増やし、下記のソースをカスタムヘッダー内に追加します。

          <div class="header-text">
            <h2 class="header-heading">Simplicity X STORK</h2>
            <p class="header-description">Simplicity（シンプリシティー）をSTORK（ストーク）風テーマにカスタマイズ！</p>
            <p class="header-button"><a class="" href="#">記事を読む</a></p>
            <!-- トップのフォローボタンソースが入る -->
          </div>

変更後のソース

      <div id="h-top"<?php //echo $h_top_style; ?>>
        <div class="header-text">
          <h2 class="header-heading">Simplicity X STORK</h2>
          <p class="header-description">Simplicity（シンプリシティー）をSTORK（ストーク）風テーマにカスタマイズ！</p>
          <p class="header-button"><a class="" href="#">記事を読む</a></p>
          <div class="alignright top-sns-follows">
            <?php  if ( is_top_follows_visible() ): //トップのフォローボタンを表示するか?>
              <?php get_template_part('sns-pages'); //SNSフォローボタンの呼び出し?>
            <?php endif; ?>
          </div>
        </div><!-- /#header-text -->
      </div><!-- /#h-top -->