Stinger

Stinger7:スマホメニューをサイトタイトルの下移動するする方法

stinger7-thumbnail

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回は無料WordPressテーマ:Stinger7サイトのスマホメニューを、サイトタイトルやディスクリプション(タグライン)の下に移動する方法を紹介したいと思います。

カスタマイズ前

↓ 最初の状態では、スマホメニューはサイトタイトルの右上に表示

stinger7-sp-menu-before

カスタマイズ後

↓ スマホメニューをタグラインの下、メインビジュアルの上に表示

stinger7-sp-menu-after-1

[ad]

はじめに

今回のカスタマイズは

  1. 親テーマの header.php を子テーマへ複製(全文コピペ)
  2. header.php を編集してスマホメニューをディスクリプションの下に移動し、
  3. その後CSSで中央寄せ

という流れでテーマファイルを編集していきます。
(※ もしすでに header.php を作ってあるという場合には、2. の header.php の編集から読み進めて下さい)

1. 親テーマの header.php をコピペ

最初の状態ではStinger7の子テーマフォルダの中には header.php が無いので、お使いの親テーマ(Stinger7本体)の header.php を子テーマのフォルダに複製します。
(子テーマのフォルダに header.php を全文コピペ)

stinger7-sp-menu-folder

ここまでの状態の header.php は、親テーマも子テーマも同じ内容です。

2. header.php を編集

それでは PHPコードを編集していきましょう。
エラーの内容によっては管理画面にも入れなくなることがあるので、注意して編集してくださいね。

2-1. header.php の編集1 (header.php)

バージョンによってコードが変わるかもしれませんが、
header.php の47行目から86行目付近にある <!-- アコーディオン --> から <!-- /アコーディオン --> のコードを </div><!-- /#header-l --> の直前に移動します。

↓ 移動するコード

<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
    <dl class="acordion">
        <dt class="trigger">
        <p><span class="op"><i class="fa fa-bars"></i></span></p>
        </dt>
        <dd class="acordion_tree">
            <?php
                $defaults = array(
                'theme_location' => 'primary-menu',
                );
            ?>
            <?php wp_nav_menu( $defaults ); ?>
            <div class="clear"></div>
        </dd>
    </dl>
</nav>
<!-- /アコーディオン -->

↓ コード編集前(header.php 45行目から86行目)

<header>
<div class="clearfix" id="headbox">
<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
    <dl class="acordion">
        <dt class="trigger">
        <p><span class="op"><i class="fa fa-bars"></i></span></p>
        </dt>
        <dd class="acordion_tree">
            <?php
                $defaults = array(
                'theme_location' => 'primary-menu',
                );
            ?>
            <?php wp_nav_menu( $defaults ); ?>
            <div class="clear"></div>
        </dd>
    </dl>
</nav>
<!-- /アコーディオン -->
<div id="header-l">
    <!-- ロゴ又はブログ名 -->
    <p class="sitename"><a href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
                <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" >
            <?php else: //ロゴ画像が無い時 ?>
                <?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
            <?php endif; ?>
        </a></p>
    <!-- キャプション -->
    <?php if ( is_home() ) { ?>
        <h1 class="descr">
            <?php bloginfo( 'description' ); ?>
        </h1>
    <?php } else { ?>
        <p class="descr">
            <?php bloginfo( 'description' ); ?>
        </p>
    <?php } ?>

</div><!-- /#header-l -->
<div id="header-r" class="smanone">

↓ コード編集後(アコーディオンを </div><!-- /#header-l --> の直前に移動)

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

<div id="header-l">
    <!-- ロゴ又はブログ名 -->
    <p class="sitename"><a href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
                <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" >
            <?php else: //ロゴ画像が無い時 ?>
                <?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
            <?php endif; ?>
        </a></p>
    <!-- キャプション -->
    <?php if ( is_home() ) { ?>
        <h1 class="descr">
            <?php bloginfo( 'description' ); ?>
        </h1>
    <?php } else { ?>
        <p class="descr">
            <?php bloginfo( 'description' ); ?>
        </p>
    <?php } ?>

    <!-- アコーディオン -->
    <nav id="s-navi" class="pcnone">
        <dl class="acordion">
            <dt class="trigger">
            <p><span class="op"><i class="fa fa-bars"></i></span></p>
            </dt>
            <dd class="acordion_tree">
                <?php
                    $defaults = array(
                    'theme_location' => 'primary-menu',
                    );
                ?>
                <?php wp_nav_menu( $defaults ); ?>
                <div class="clear"></div>
            </dd>
        </dl>
    </nav>
    <!-- /アコーディオン -->

</div><!-- /#header-l -->
<div id="header-r" class="smanone">

2-2. header.php の編集2 (header.php)

次にheader.php の33行目と42行目付近にある include_once() の部分を以下のように編集します。

↓ 編集前

<?php include_once( "st-font.php" ) //googlefont ?>

<?php include_once( "analyticstracking.php" ) //アナリティクスコード ?>

↓ 編集後

<?php include_once( TEMPLATEPATH . "/st-font.php" ) //googlefont ?>

<?php include_once( TEMPLATEPATH . "/analyticstracking.php" ) //アナリティクスコード ?>

これでスマホメニューをディスクリプションの下に移動することが出来ました。

stinger7-sp-menu-after-4

3. style.css を編集

スマホメニューを移動することが出来たので、あとはこれを中央寄せすれば完成です。

以下のコードを style.css に追加します。

#s-navi dt.trigger {
    text-align: center;
}

これでスマホメニューが中央寄せされました。
このタイプもよく見かけますよね。

stinger7-sp-menu-after-1

ボタンをタップしたときのメニューはカスタマイズ前と同じように展開します。

stinger7-sp-menu-after-3

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。