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可能です。
チェックを入れた項目のみ、モバイルフッターが非表示になります。
表示比較(ビフォー/アフター)
※画像は見本です。実際のスクリーンショットを /wp-content/uploads/ にアップロードしてURLを置き換えてください。
動作確認結果
| 設定 | 表示結果 |
|---|---|
| PCのみON | PC非表示/スマホ・タブレット表示 |
| タブレットのみON | タブレット非表示/PC・スマホ表示 |
| 両方ON | PC・タブレット非表示/スマホ表示 |
| 両方OFF | 全端末で表示 |
まとめ
-
- ✔️ カスタマイザーで簡単に切り替え可能
-
- ✔️ プラグイン不要・軽量
-
- ✔️ テーマアップデートにも強い構成
制作メモ
制作:NEW STYLE GARDEN(佐久間技研工業)
用途:住宅外構業向けサイトでのCocoonカスタマイズ実装例。
Cocoonの柔軟な構造を活かして、レスポンシブ時のデザイン崩れを防止しています。
関連カスタマイズ予定
-
- トップページのみモバイルフッターを非表示にする
- スクロール位置に応じてモバイルボタンを切り替える
- ヘッダーのレスポンシブ切替改善(メニュー固定)

