【Cocoon機能アップカスタマイズ集】PC・タブレットだけモバイルフッターを非表示にする方法

Cocoonではスマホ表示時に便利な「モバイルフッター(ホーム/トップ/サイドバー/検索)」が自動で表示されますが、
PCのウィンドウを小さくしたり、タブレット表示にしたときにも表示されてしまうことがあります。

今回は、「PC」や「タブレット」だけモバイルフッターを非表示にするカスタマイズ方法をご紹介します。
Cocoonの子テーマの functions.php に追加するだけでOKです。


対応バージョン

  • Cocoon Ver. 2.8.8
  • Cocoon Child Ver. 1.1.3
  • WordPress 6.x 対応

機能概要

設定項目効果
✅ PCでモバイルフッターを非表示にするPC表示時にモバイルフッターを完全に非表示
✅ タブレットでも非表示にするiPadやAndroidタブレットでも非表示
⬜ 両方OFF全デバイスでモバイルフッターを表示

手順

① 子テーマの functions.php に追加

WordPressの管理画面で Cocoon Child テーマを使用していることを確認し、
テーマエディターまたはFTPで functions.php の末尾に下記コードを追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/* ============================================================================
 * class        : NS_MobileFooterController
 * description  : 
 *         Cocoon 子テーマ用:モバイルフッター制御(PC/タブレット個別判定)
 * parameter    : none
 * ============================================================================
 *   rev. |   date     |   author       | description
 * -------+------------+----------------+--------------------------------------
 * @0v0.0 | 2025.11.11 |it-koubou.jax.jp| designed
 * ============================================================================
 */
class NS_MobileFooterController {

	public static function init() {
        add_action('customize_register', [__CLASS__, 'customize_register']);
        add_action('template_redirect', [__CLASS__, 'start_output_buffer']);
    }

    public static function customize_register($wp_customize) {
        $wp_customize->add_section('ns_mobile_footer_section', [
            'title'    => 'モバイルフッター制御',
            'priority' => 210,
        ]);

        $wp_customize->add_setting('ns_disable_mobile_footer_on_pc', [
            'default'           => false,
            'sanitize_callback' => 'wp_validate_boolean',
        ]);
        $wp_customize->add_control('ns_disable_mobile_footer_on_pc', [
            'label'    => 'PCでモバイルフッターを非表示にする',
            'section'  => 'ns_mobile_footer_section',
            'type'     => 'checkbox',
        ]);

        $wp_customize->add_setting('ns_disable_mobile_footer_on_tablet', [
            'default'           => false,
            'sanitize_callback' => 'wp_validate_boolean',
        ]);
        $wp_customize->add_control('ns_disable_mobile_footer_on_tablet', [
            'label'    => 'タブレットでも非表示にする',
            'section'  => 'ns_mobile_footer_section',
            'type'     => 'checkbox',
        ]);
    }

    public static function detect_device_type() {
        $ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
        if (preg_match('/(iPhone|iPod|Android.*Mobile|Windows Phone)/i', $ua)) {
            return 'mobile';
        } elseif (preg_match('/(iPad|Tablet|Kindle|Silk|PlayBook|Android(?!.*Mobile))/i', $ua)) {
            return 'tablet';
        } else {
            return 'pc';
        }
    }

    public static function remove_footer($buffer) {
        $disable_pc     = (bool) get_theme_mod('ns_disable_mobile_footer_on_pc', false);
        $disable_tablet = (bool) get_theme_mod('ns_disable_mobile_footer_on_tablet', false);
        $device_type    = self::detect_device_type();

        $should_remove = ($disable_pc && $device_type === 'pc') ||
                         ($disable_tablet && $device_type === 'tablet');

        if ($should_remove) {
            $pattern = '/<ul[^>]*class=(["\'])(?:[^"\']*\s)?mobile-footer-menu-buttons(?:\s[^"\']*)?\1[\s\S]*?<\/ul>/i';
            $buffer = preg_replace($pattern, '', $buffer);
        }

        return $buffer;
    }

    public static function start_output_buffer() {
        ob_start([__CLASS__, 'remove_footer']);
    }
}
// 初期化
NS_MobileFooterController::init();

これで、Cocoonのカスタマイザーに「モバイルフッター制御」セクションが追加されます。


② 「外観 → カスタマイズ」を開く

以下のような設定項目が追加されます:

📱 モバイルフッター制御
[✔] PCでモバイルフッターを非表示にする
[✔] タブレットでも非表示にする

それぞれ独立してON/OFF可能です。
チェックを入れた項目のみ、モバイルフッターが非表示になります。


表示比較(ビフォー/アフター)

モバイルフッター表示あり(ビフォー)
▲ ビフォー:フッターにメニューが表示されている状態
モバイルフッター非表示(アフター)
▲ アフター:PC・タブレットでモバイルフッターが非表示

※画像は見本です。実際のスクリーンショットを /wp-content/uploads/ にアップロードしてURLを置き換えてください。


動作確認結果

設定 表示結果
PCのみON PC非表示/スマホ・タブレット表示
タブレットのみON タブレット非表示/PC・スマホ表示
両方ON PC・タブレット非表示/スマホ表示
両方OFF 全端末で表示


まとめ

    • ✔️ カスタマイザーで簡単に切り替え可能

    • ✔️ プラグイン不要・軽量

    • ✔️ テーマアップデートにも強い構成


制作メモ

制作:NEW STYLE GARDEN(佐久間技研工業)
用途:住宅外構業向けサイトでのCocoonカスタマイズ実装例。
Cocoonの柔軟な構造を活かして、レスポンシブ時のデザイン崩れを防止しています。


関連カスタマイズ予定

    • トップページのみモバイルフッターを非表示にする
    • スクロール位置に応じてモバイルボタンを切り替える
    • ヘッダーのレスポンシブ切替改善(メニュー固定)
タイトルとURLをコピーしました