今回は無料WordPressテーマ:Stinger7サイトのスマホメニューを、サイトタイトルやディスクリプション(タグライン)の下に移動する方法を紹介したいと思います。
目次
カスタマイズ前
↓ 最初の状態では、スマホメニューはサイトタイトルの右上に表示
カスタマイズ後
↓ スマホメニューをタグラインの下、メインビジュアルの上に表示
はじめに
今回のカスタマイズは
- 親テーマの header.php を子テーマへ複製(全文コピペ)
- header.php を編集してスマホメニューをディスクリプションの下に移動し、
- その後CSSで中央寄せ
という流れでテーマファイルを編集していきます。
(※ もしすでに header.php を作ってあるという場合には、2. の header.php の編集から読み進めて下さい)
1. 親テーマの header.php をコピペ
最初の状態ではStinger7の子テーマフォルダの中には header.php が無いので、お使いの親テーマ(Stinger7本体)の header.php を子テーマのフォルダに複製します。
(子テーマのフォルダに header.php を全文コピペ)
ここまでの状態の 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" ) //アナリティクスコード ?>
これでスマホメニューをディスクリプションの下に移動することが出来ました。
3. style.css を編集
スマホメニューを移動することが出来たので、あとはこれを中央寄せすれば完成です。
以下のコードを style.css に追加します。
#s-navi dt.trigger {text-align: center;}
これでスマホメニューが中央寄せされました。
このタイプもよく見かけますよね。
ボタンをタップしたときのメニューはカスタマイズ前と同じように展開します。
今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。