2020年1月4日更新

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

Thumbnail

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

カスタマイズ前

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

stinger7-sp-menu-before

カスタマイズ後

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

stinger7-sp-menu-after-1

はじめに

今回のカスタマイズは

  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 --> の直前に移動します。

↓　移動するコード

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>
<!-- /アコーディオン -->

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

PHP
コピーする
<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 --> の直前に移動）

PHP
コピーする
<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
コピーする
<?php include_once( "st-font.php" ) //googlefont ?>
<?php include_once( "analyticstracking.php" ) //アナリティクスコード ?>

↓　編集後

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 に追加します。

CSS
コピーする
#s-navi dt.trigger {
    text-align: center;
}

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

stinger7-sp-menu-after-1

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

stinger7-sp-menu-after-3

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

Home

関連記事

トップに戻る

Copyrights © WebCraftLogAll Rights Reserved.