MENU

スマートフォン用サイドメニューウィジェットエリアにウィジェットを設定して下さい。

サイトデザインを自作テーマに変更しました。

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

こんにちは、SHUMiSTです。

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

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

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

第2回:ヘッダーにソースを追加しよう!

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(ストーク)テーマでは、カスタムヘッダー内にヘッダー見出し、サイトの説明や見出しの補足、メニューボタンがあるのでボックスを2つ増やし、下記のソースをカスタムヘッダー内に追加します。

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

カスタマイズまとめ

今回のカスタマイズ記事で、カスタムヘッダーにヘッダーテキストを追加するカスタマイズを行い、よりSTORK(ストーク)テーマに近しいレイアウトになりました。

ですが、下記のカスタマイズ後のスクリーンショットを見たら分かるように、ページトップフォローボタンが右寄せ、ヘッダーテキストが左寄せになっており、バランスが悪い状態です。

次回は、ヘッダーのレイアウト準備が整ったのでCSS(スタイルシート)を変更して、ヘッダーのデザインをバランスが悪い状態からSTORK(ストーク)テーマに近づけるカスタマイズを行っていきます。

Simplicity(シンプリシティー)テーマの元々の機能やソースを流用して、STORK(ストーク)テーマに近づけているため、STORK(ストーク)テーマのソースをそのまま丸ごと利用したりはしておりませんので中身はまったく別物です。

STORK(ストーク)テーマの機能面などを利用したい方はSTORK(ストーク)テーマを購入してご利用ください。

今回のカスタマイズ前後のスクリーンショット

カスタマイズ前

カスタマイズ後

第1回:ヘッダーレイアウト編を読む

第3回:ヘッダーデザイン編を読む

SimplicityをSTORK風にカスタマイズシリーズ目次へ

この記事が気に入ったら
いいね!しよう!

最新記事をお届けします。