SimplicityのヘッダーレイアウトをSTORK風にカスタマイズ！

こんにちは、SHUMiSTです。

ふと、Simplicity（シンプリシティー）テーマを使用して、STORK（ストーク）テーマを再現というかデザインを近づけるカスタマイズをしてみようと考え、どうせならなるべく【コピペでOK！】な状態でカスタマイズの記録を残そうと思い、現在第１回目の記事を書いております。

なお、当ブログを使用してカスタマイズしていくため、進捗状況も合わせて見ることができるのでそちらも楽しんでいただけたらと思います。（2017/10/30時点）

Simplicity（シンプリシティー）テーマを選択した理由

シンプルでカスタマイズしやすい。
機能面が充実しており、流用できるものもある。
普段から使用している。

STORK（ストーク）テーマをカスタマイズ先のテーマに選択した理由

単純にデザインが好み
サイト全体を見た時の記事の見易さ
WordPressテーマのカスタマイズをするのも割と好き

購入すれば早い話ですが、上記の理由により思い立った次第です。まぁ、長ったらしい前置きはここまでにして同じような考えの方に、少しでもカスタマイズの参考かつ時間短縮になればいいなぁと思います。

行数を掲載していますが、Simplicity（シンプリシティー）テーマのバージョンや各々のカスタマイズ内容により確実にその行数にあるとは限りません。大体、その行数付近にある基準として参考までにと思ってください。

対応しているSimplicity（シンプリシティー）テーマのバージョン：2.6.1.1～2.6.2

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

第１回：ヘッダーレイアウトをカスタマイズしよう！
カスタマイズまとめ
- 今回のカスタマイズ前後のスクリーンショット

第１回：ヘッダーレイアウトをカスタマイズしよう！

記念すべき第一回は、Simplicity（シンプリシティー）テーマとSTORK（ストーク）テーマのヘッダーソースを比較してレイアウトが違う箇所をカスタマイズしていきます。

header-logo.phpのサイト概要を削除

STORK（ストーク）テーマにはサイト概要の表示がないのでSimplicity（シンプリシティー）テーマの下記のサイト概要に関するソースを削除します。

19行～30行付近

<!-- サイトの概要 -->
<?php //サイトの概要 ?>
<?php $site_description = get_bloginfo('description'); ?>
<?php if ( is_home() ): ?>
<h2 id="site-description">
  <?php echo $site_description ?>
</h2>
<?php else: ?>
<p id="site-description">
  <?php echo $site_description ?>
</p>
<?php endif ?>

header.phpのグローバルナビゲーションの挿入位置を変更

Simplicity（シンプリシティー）テーマの下記のグローバルナビゲーションの挿入位置は、headerタグ外になっているため、STORK（ストーク）テーマ同様、<header></header>タグ内に変更します。

該当のソース

71行～73行付近

      <?php if (is_navi_visible())://ナビゲーションが表示のとき
        get_template_part('navi');//グローバルナビのためのテンプレート
      endif; ?>

変更後のソース

STORK（ストーク）テーマと同じになるように下記のようにヘッダーロゴボックス（top-title-catchphrase）の下に変更します。

60行～62行付近

              <div class="alignleft top-title-catchphrase">
                <?php get_template_part('header-logo');?>
              </div>

              <?php if (is_navi_visible())://ナビゲーションが表示のとき
                get_template_part('navi');//グローバルナビのためのテンプレート
              endif; ?>

header.phpのモバイルメニューの挿入位置を変更

Simplicity（シンプリシティー）テーマでは、ヘッダーの最初に挿入されますが、STORK（ストーク）テーマではパソコン用グローバルナビゲーション直下に挿入されるため、今後のスタイルのし易さを考え、同様の箇所に変更します。

該当のソース

54行付近

<?php get_template_part('button-menu'); //モバイルメニューボタンの呼び出し?>

変更後のソース

STORK（ストーク）テーマと同じになるように下記のようにパソコン用グローバルナビゲーションの下に変更します。

63行付近

              <?php if (is_navi_visible())://ナビゲーションが表示のとき
                get_template_part('navi');//グローバルナビのためのテンプレート
              endif; ?>

              <?php get_template_part('button-menu'); //モバイルメニューボタンの呼び出し?>

header.phpの外側のカスタムヘッダーの挿入位置を変更

Simplicity（シンプリシティー）テーマでは外側のカスタムヘッダーボックス（header）がグローバルナビゲーションの上にあるため、STORK（ストーク）テーマ同様、グローバルナビゲーションの下にくるように<header></header>タグ外に挿入位置を変更します。

今回は下記の２箇所を変更するため間違わないように注意してください。

該当のソース

45行目付近

        <div id="header" class="clearfix">

73行目付近

        </div><!-- /#header -->

変更後のソース

上記の該当ソースを繋げた形で<header></header>タグ外に挿入します。

このボックスは画面幅いっぱいに広がるヘッダー画像を設定する際に使用します。
また、外観->カスタマイズ->ヘッダー->ヘッダー外側背景画像で設定することができます。

72～75行目付近

      </header>

      <div id="header" class="clearfix">
      </div><!-- /#header -->

header.phpの内側のカスタムヘッダーの挿入位置を変更

次に、内側のカスタムヘッダーボックス（h-top）の挿入位置を外側のカスタムヘッダーボックス（header）内に変更します。

今回も下記の２箇所を変更するため間違わないように注意してください。

該当のソース

47行～52行付近

            <?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; ?>>

70行付近

            </div><!-- /#h-top -->

変更後のソース

上記の該当ソースを繋げた形で外側のカスタムヘッダーボックス（header）内に挿入します。

このボックスは中央寄せのヘッダー画像を設定する際に使用します。
また、外観->カスタマイズ->ヘッダー->現在のヘッダーで設定することができます。

66行～74行付近

        <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><!-- /#h-top -->
        </div><!-- /#header -->

header.phpのページトップフォローボタンの挿入位置を変更

Simplicity（シンプリシティー）テーマにはページトップフォローボタンがあります。STORK（ストーク）テーマにはありませんが、カスタムヘッダー内でのテキストやボタン表示があるので、せっかくなので追加で挿入するようにして有効活用できるようにしようと思います。

不要な場合は、追加しなくても良いですが下記のように表示/非表示を切り替えられるので追加しても問題ありません。

ページトップフォローボタンは外観->カスタマイズ->SNS->ページトップフォローボタンの表示で表示/非表示を切り替えられます。

該当のソース

57行～61行付近

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

変更後の挿入位置

先ほど変更した下記の内側のカスタムヘッダーボックス（h-top）内に該当ソースを挿入します。

66行～67行付近

            <div id="h-top"<?php //echo $h_top_style; ?>>
            </div><!-- /#h-top -->

変更後のソース

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 -->