WordPressのカスタマイザーでスマホ表示サイズを変更したい

WordPressでCocoon環境です。
カスタマイザーでスマホ表示をすると320×480 は現代のスマホとしてはかなり小さい。

現代のスマホはこんな感じ。

スマホの主流解像度（2024年時点）

現在のスマホの主流な画面サイズは以下のようになっている。

なので、画面サイズをせめて400px x 700pxにしてみましょうというお話です。

試すときはバックアップを取って、テーマのchildをつくってそちらのfunction.phpに記述しましょう。

1. 目的:
   • WordPressのカスタマイザープレビュー画面で、モバイルプレビューボタン (.preview-mobile) がクリックされたときに、プレビュー画面のサイズを特定のサイズ（幅375px、高さ667px）に変更します。
2. コードの構成:
   • CSS:
     • #customize-preview 要素に対して、幅、高さ、オーバーフローのスタイルを !important で指定します。
     • これは、JavaScriptでサイズを変更する際の初期設定として機能します。
   • JavaScript:
     • jQueryを使用して、.preview-mobile クラスを持つ要素（モバイルプレビューボタン）がクリックされたときのイベントリスナーを設定します。
     • ボタンがクリックされると、#customize-preview 要素のスタイルを、指定された幅、高さ、オーバーフローに変更します。
3. functions.phpへの記述:
   • 下記を、WordPressの functions.php ファイルに記述します。
   • これにより、カスタマイザープレビュー画面にカスタムスクリプトが追加されます。

function custom_customize_preview_scripts() {
    ?>
    <script>
        (function($) {
            $(document).ready(function() {
                $('.preview-mobile').on('click', function() {
                    $('#customize-preview').css({
                        'width': '400px',
                        'height': '700px',
                        'overflow': 'auto'
                    });
                });

                $('.preview-desktop, .preview-tablet').on('click', function() {
                    $('#customize-preview').css({
                        'width': '',
                        'height': '',
                        'overflow': ''
                    });
                });
            });
        })(jQuery);
    </script>
    <?php
}
add_action('customize_controls_print_footer_scripts', 'custom_customize_preview_scripts');

add_action の説明:

• add_action('customize_controls_print_footer_scripts', 'custom_customize_preview_scripts');
  • この行は、WordPressの「アクションフック」という仕組みを利用して、カスタム関数 custom_customize_preview_scripts を特定のタイミングで実行するように登録しています。
  • add_action():
    • WordPressの関数で、特定のアクション（イベント）が発生したときに、指定された関数を実行するように登録します。
  • 'customize_controls_print_footer_scripts':
    • これはアクションフックの名前です。
    • カスタマイザーのコントロールパネル（左側の設定パネル）のフッタースクリプトが出力される直前に発生するアクションを指します。
    • つまり、カスタマイザーのコントロールパネルのHTMLが生成され、フッター部分のスクリプトが出力されるタイミングで、登録された関数が実行されます。
  • 'custom_customize_preview_scripts':
    • これは、登録する関数名です。
    • この関数は、上記で説明したCSSとJavaScriptを出力する役割を持っています。
  • つまり、この１行は「カスタマイザーのコントロールパネルのフッタースクリプトが出力されるタイミングで、custom_customize_preview_scripts関数を実行してください」という命令になります。
  • このアクションフックを利用することで、カスタマイザーのプレビュー画面に、必要なタイミングでカスタムスクリプトを追加できます。

まとめ:

add_action は、WordPressの特定のアクションが発生したときに、指定された関数を実行するための仕組みです。この例では、カスタマイザーのプレビュー画面にカスタムスクリプトを追加するために使用されています。

カスタマイザーのスマホ表示がおっきくなりました。
戻したいときはfunction.phpの追加部分を消せばOK。