THE THOR - スマホ表示のときだけサイドバーを消す方法

WordPress のテーマ「THE THOR」ではスマホ表示時のサイドバーは記事下に表示されます。

しかし THE THOR の標準のカスタマイズ設定では、スマホだけサイドバーを非表示にすることはできません。

そこで functions.php に専用のコードを記述することで、これを実現します。

functions.php に記述

手順は1つです。以下のコードを functions.php に記述して更新してください。

add_filter( 'sidebars_widgets', 'disable_sidebar' );
function disable_sidebar( $sidebars_widgets ) {
    if ( is_mobile() ) {
        $sidebars_widgets['sidebar'] = false;
    }
    return $sidebars_widgets;
}

これでスマホ表示のときだけサイドバーが非表示になります。

コードの説明

PHP が読める方は是非読んでみてくださいね。

add_filter()

add_filter( 'sidebars_widgets', 'disable_sidebar' );

1行目のadd_filter() は WordPress が用意している関数です。第1引数に指定した処理に第2引数のフィルターをかけて挙動を変更できます。第1引数の sidebars_widgets はサイドバーを表示するときに呼ばれるフック処理で、その処理に以下に定義する disable_sidebar 関数をフィルターとしてかけています。

disable_sidebar()

function disable_sidebar( $sidebars_widgets ) {
    if ( is_mobile() ) {
        $sidebars_widgets['sidebar'] = false;
    }
    return $sidebars_widgets;
}

2行目の disable_sidebar() は実際のフィルター処理内容を定義しています。is_mobile() は THE THOR が定義しているモバイル端末判定関数です。

$sidebars_widgets['sidebar'] = false; の部分が実際にサイドバーを非表示に設定しているコードになります。最後に非表示設定された $sidebars_widgets を返却します。

まとめ

THE THOR でスマホ表示のときだけサイドバーを消す方法を紹介しました。標準のカスタマイズ設定で実現できないのはちょっと面倒ですね（泣）。

引き続き、良き THE THOR ライフをお過ごしください。