WordPressストークテーマでヘッダ廻りが崩れる場合の修正方法（キャッシュプラグイン使用時）

キャッシュプラグインを使用しているとストークテーマのヘッダ廻りが崩れる件です。
以前からなんとなくおかしいなと思う時はありましたが、キャッシュの兼ね合いかな？？と思いそのままにしていました。
先日ストークテーマを更新したりブログを書いたりしている際に気になったので検証してみました。

結論キャッシュプラグインを止めれば全て解決するのですが、キャッシュプラグイン無しのWordPressはちょっと重たいのでテーマを修正してみました。

このブログの環境

• WordPressのバージョン 4.9.6
• サーバー さくらインターネットスタンダード
• ストークのバージョン 1.1.7
• キャッシュプラグイン Comet Cache

ヘッダが崩れる状況

このブログではヘッダロゴを左配置にしてヘッダ下にはスマホナビを表示させているのですが、PCで見た時にSPナビが表示されてしまい、ロゴがセンター表示になってしまいます。
また、スマホで見た時にスマホナビと検索ボタンが出ないページもありました。

原因

テーマ内でPC・スマホのコード出し分けがあり、スマホ用HTMLがキャッシュされているページの場合はPCで見た時に崩れてしまうようです。
その逆に、PC用のHTMLがキャッシュされているページの場合にはスマホで見た時にSPナビが出てこない、検索ボタンが出てこないという事になるようです。
問題を解決するためにはPCとスマホで出し分けをしないように変更して、CSS側で表示・非表示の調整するようにします。
尚、ヘッダ以外にもHTMLの出し分けがされている箇所があると思うのですが今回はヘッダだけをやっていきます。

テーマ調整の準備

テーマを調整する場合は子テーマ側から修正していきます。
今回はheader.phpを修正するので、FTPで子テーマのディレクトリにテーマファイルのheader.phpをアップロードします。
CSSはテーマ編集の方に追記していますが、「ご存知ですか？」と表示されているようにテーマカスタマイズの追加CSSに書き込んでも良いと思います。

修正箇所

header.php 38行目

オリジナルコード

<header class="header animated fadeIn <?php echo esc_html(get_option('side_options_headerbg'),'bgnormal');?> <?php if ( wp_is_mobile() ) : ?>headercenter<?php else:?><?php echo get_option( 'side_options_headercenter' ); ?><?php endif; ?>" role="banner">

is_mobileでheadercenterを付与しているif文を消します。

修正後

<header class="header animated fadeIn <?php echo esc_html(get_option('side_options_headerbg'),'bgnormal');?> <?php echo get_option( 'side_options_headercenter' ); ?>" role="banner">

これでPC時にロゴがセンターになる件が解消しました。

header.php 56行目以降

!is_mobileのif文を削除します。後の方でelseifとなっている箇所も調整します。

オリジナルコード

<?php if (!is_mobile()):?>
<nav id="g_nav" role="navigation">
<?php if(!get_option('side_options_header_search')):?>
<a href="#searchbox" data-remodal-target="searchbox" class="nav_btn search_btn"><span class="text gf">search</span></a>
<?php endif;?>

<?php wp_nav_menu(array(
     'container' => false,
     'container_class' => 'menu cf',
     'menu' => __( 'グローバルナビ' ),
     'menu_class' => 'nav top-nav cf',
     'theme_location' => 'main-nav',
     'before' => '',
     'after' => '',
     'link_before' => '',
     'link_after' => '',
     'depth' => 0,
     'fallback_cb' => ''
)); ?>
</nav>
<?php elseif(!get_option('side_options_header_search')):?>
<a href="#searchbox" data-remodal-target="searchbox" class="nav_btn search_btn"><span class="text gf">search</span></a>
<?php endif;?>

修正後

<nav id="g_nav" role="navigation">
<?php if(!get_option('side_options_header_search')):?>
<a href="#searchbox" data-remodal-target="searchbox" class="nav_btn search_btn"><span class="text gf">search</span></a>
<?php endif;?>

<?php wp_nav_menu(array(
     'container' => false,
     'container_class' => 'menu cf',
     'menu' => __( 'グローバルナビ' ),
     'menu_class' => 'nav top-nav cf',
     'theme_location' => 'main-nav',
     'before' => '',
     'after' => '',
     'link_before' => '',
     'link_after' => '',
     'depth' => 0,
     'fallback_cb' => ''
)); ?>
</nav>
<?php if(!get_option('side_options_header_search')):?>
<a href="#searchbox" data-remodal-target="searchbox" class="nav_btn search_btn"><span class="text gf">search</span></a>
<?php endif;?>

これでスマホの時に右上の検索アイコンが出てこなくなるという事がなくなりました。

header.php 125行目以降

is_mobileのif文を削除します。

オリジナルコード

<?php if(is_mobile()):?>
<div class="g_nav-sp animated fadeIn">
<?php wp_nav_menu(array(
     'container' => 'nav',
     'container_class' => 'menu-sp cf',
     'menu' => __( 'グローバルナビ（スマートフォン）' ),
     'menu_class' => 'top-nav',
     'theme_location' => 'main-nav-sp',
     'before' => '',
     'after' => '',
     'link_before' => '',
     'link_after' => '',
     'depth' => 0,
     'fallback_cb' => ''
)); ?>
</div>
<?php endif;?>

修正後

<div class="g_nav-sp animated fadeIn">
<?php wp_nav_menu(array(
     'container' => 'nav',
     'container_class' => 'menu-sp cf',
     'menu' => __( 'グローバルナビ（スマートフォン）' ),
     'menu_class' => 'top-nav',
     'theme_location' => 'main-nav-sp',
     'before' => '',
     'after' => '',
     'link_before' => '',
     'link_after' => '',
     'depth' => 0,
     'fallback_cb' => ''
)); ?>
</div>

このままではPC時にもSPナビが表示されてしまうため以下のCSSを追加します。

@media only screen and (min-width: 768px) {
  .g_nav-sp {
    display: none;
  }
}

これでスマホナビの表示問題が解消しました。
ヘッダ廻りはこれでバッチリのはずです！
自分の環境では問題ありませんでした。

あとがき

is_mobileでHTML出し分けがあるとどうしてもキャッシュプラグインで問題が出てしまいますね。
公式にもWP Super Cache（要はキャッシュプラグイン全般と受け取りました）は「不具合ではないけど使用を注意したほうがいいプラグイン
」とあるので、ストークではキャッシュプラグイン全般使わないほうが吉という事のようです。

wpxのような速いサーバーだとキャッシュプラグインなしでもそれなりに速いと思うのですが、普通のレンタルーサーバーで運用しているとどうしてもキャッシュプラグインを使いたくなります。
同じ問題で困っている人は是非参考にしてみてください。
また、この記事を参考にテーマ修正をする場合は必ず子テーマ側から修正してください。