スマホで見たときにサイドバーを削除する方法

スマホでスッキリ表示させるためにはサイドバーは必要ないと思うので表示しないように設定してみます。使ったテーマはSTINGERPLUSの子テーマです。

まず子テーマのモバイルからのアクセスを判断するため「functions.php」に以下のコードを付け加えておきます。

function is_mobile(){
    $useragents = array(
        'iPhone',          // iPhone
        'iPod',            // iPod touch
        'Android',         // 1.5+ Android
        'dream',           // Pre 1.5 Android
        'CUPCAKE',         // 1.5+ Android
        'blackberry9500',  // Storm
        'blackberry9530',  // Storm
        'blackberry9520',  // Storm v2
        'blackberry9550',  // Storm v2
        'blackberry9800',  // Torch
        'webOS',           // Palm Pre Experimental
        'incognito',       // Other iPhone browser
        'webmate'          // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

次に表示する部分のテーマファイルを編集します。「header.php」、「footer.php」、「single.php」等は子テーマにコピーして編集するだけです。 親テーマより子テーマの方が優先されます。今回は「single.php」を編集してみます。

「single.php」の下のほうにサイドバーを読み込む部分があります。

	<?php get_sidebar(); ?>

これの前後に２行付け加えて以下のようにします。

<?php if (!is_mobile()) :?>
	<?php get_sidebar(); ?>
<?php endif; ?>

これでスマホのときにはサイドバーが表示されないようになします。

同様のことも以下のファイルに対して行います。

• トップページ：index.php
• 固定ページ：page.php
• カテゴリー・タグページ：archive.php

-WordPress, スマホ, パソコン, 備忘録