SWELLを使ったサイトで『サイドバーのウィジェットがスマホの時に表示されない』現象で、ドハマりしたのでメモしておきます。
スマホ画面ではサイドバーはサイトの一番下に移動するので、この記事の内容は気が付かない人が多いかもしれない現象です。
SWELLのサイトで起きた現象
- スマホの時にサイドバーのウィジェットがカテゴリとアーカイブだけしか表示されない
- PCの時はサイドバーのウィジェットがすべて正常に表示される
スマホの時にサイドバーのウィジェットが表示されない原因と対策
スマホの時にサイドバーのウィジェットが表示されない原因：スマホの時にサイドバーのウィジェットが表示されない
そのまんまなのですが、SWELLには共通サイドバーのウィジェットエリアの他に、共通サイドバー【スマホ版】ウィジェットエリアというものがあります。
テーマを有効化した時点で、共通サイドバー【スマホ版】ウィジェットエリアには、カテゴリとアーカイブの2つのウィジェットが登録されています。
共通サイドバー【スマホ版】ウィジェットエリアにウィジェットが登録されていると、スマホ表示の時に共通サイドバー【スマホ版】ウィジェットエリアが有効になって置き換わります。
対策：スマホの時にサイドバーのウィジェットが表示されない
共通サイドバー【スマホ版】ウィジェットエリアに初期登録されているウィジェットを削除すれば大丈夫です。
SWELLのサイドバーウィジェットを出力するソースコード
IS_MOBILEでSP判定している部分で、sidbar_spを呼び出しています。
sidbar_spが、共通サイドバー【スマホ版】ウィジェットエリアになります。
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
if ( \SWELL_Theme::is_top() ) {
\SWELL_Theme::outuput_widgets( 'sidebar_top' );
}
if ( IS_MOBILE && is_active_sidebar( 'sidebar_sp' ) ) {
// SPかつsidebar_spがあれば
\SWELL_Theme::outuput_widgets( 'sidebar_sp' );
} else {
\SWELL_Theme::outuput_widgets( 'sidebar-1' );
}
if ( ! IS_MOBILE ) {
\SWELL_Theme::outuput_widgets( 'fix_sidebar', [
'before' => '<div id="fix_sidebar" class="w-fixSide pc_">',
'after' => '</div>',
] );
}まとめ
今回の現象は、SWELLテーマの不具合とは思いませんが、現象から原因が分かるまで結構時間がかかってしまいました。
今回の現象は、is_mobileを使っているので、最初からスマホサイズでページを読み込まないと現象が発生しません。
さらに、ページキャッシュプラグインを使用していたため、ページキャッシュの問題だとずっと思って調べていたためです。
ソースコードを追っかけていて、もしかしてSP専用領域ある？そしてなんか登録されている？という気づきから解決に向かいました。
あまり、話題にもなっていないのであまりハマる人はいないのかもしれませんが、Wordpress初期インストール＋SWELLの組み合わせだと起きる現象なので、もし、サイドバーウィジェットエリアの表示がスマホの時に表示されなくなる現象が起きた場合にはこの記事を参考にしてみてください。
コメント