WordPressのスマホレイアウトでメニューボタンが動かない！
ある特定の条件下で、Wordpressのテーマ、Twentytwelveのスマホ用メニューが開かない場合がある。
この修正方法を紹介。
条件1 Twentytwelveを使っている。
WordPressのテーマ(テンプレート)にtwentytwelveを使っている時にこれは発生する。TwentyelevenやTwenty thirteen fourteen fifteen…などでは起こらない(今後ずっとおこらないかどうかは不明)
条件2 子テーマを使用していて、header.phpをカスタマイズしている
親テーマのheader.phpがアップデートで変更になった。具体的には端末判定によるスマホ対応ではなく、レスポンシブデザインによるスマホ対応になった。
レスポンシブってなに？って場合はこちらのレスポンシブデザインでtableタグを制御をチェック。
この2つの条件が当てはまる場合に、Twentytwelveのスマホメニューが動かなくなる。
解決法 子テーマのheader.phpを修正
Wordpressの管理画面にログインし「外観」→「テーマ編集」
右上の「編集するテーマを選択:」の箇所がTwentytwelveの子テーマになっている事を確認して、「header.php」を編集する。
メニューの部分が
<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
<h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></h3>
<a class=”assistive-text” href=”#content” title=”<?php esc_attr_e( ‘Skip to content’, ‘twentytwelve’ ); ?>”><?php _e( ‘Skip to content’, ‘twentytwelve’ ); ?></a>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>
</nav><!– #site-navigation –>
となっている箇所があるはずなので、その中の
<h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></h3>
を、↓↓↓ に変更するだけ。
<button class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></button>
これでメニューが動くようになったはずだ。
なお、カスタマイズは自己責任で。心配ならバックアップを取っておこう。
