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

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

Copyrights © WebCraftLogAll Rights Reserved.