WordPress: come correggere l’anteprima mobile e tablet del Customizer

Con le versioni più recenti di WordPress, dalla 7 in poi, alcuni utenti potrebbero riscontrare un cambiamento nella visualizzazione delle anteprime responsive di Aspetto → Personalizza.

Rispetto alle versioni precedenti, la simulazione di smartphone e tablet può mostrare larghezze poco realistiche, rendendo più difficile verificare correttamente il layout del sito. Il comportamento può dipendere anche dal tema e dal relativo builder, quindi non si tratta necessariamente di un problema presente in tutte le installazioni.

Per questo BACKdigit propone una possibile correzione tramite WPCode, con uno snippet dedicato a ridimensionare le anteprime mobile e tablet senza modificare direttamente la visualizzazione pubblica del sito.

Come correggere l’anteprima con WPCode

Una possibile soluzione consiste nell’utilizzare WPCode, il plugin che permette di aggiungere snippet personalizzati a WordPress.

Leggi anche: Come duplicare un articolo WordPress con WPCode

Crea un nuovo snippet di tipo PHP, assegnagli il titolo BACKdigit – Correzione anteprima responsive del Customizer (Mobile e Tablet) e incolla il seguente codice.

Leggi anche: Come creare un tema child WordPress e perché può evitarti molti problemi

/**
 * BACKdigit - Correzione anteprime responsive del Customizer
 * Mobile: 390px
 * Tablet: 768px
 * Intervento limitato ai controlli del Customizer.
 */

add_action('customize_controls_print_styles', function () {

    if (!is_admin()) {
        return;
    }

    ?>
    <style id="backdigit-customizer-responsive-fix">

        /* Anteprima smartphone */
        body.wp-customizer .preview-mobile #customize-preview {
            width: 390px !important;
            max-width: calc(100% - 20px) !important;
            height: 844px !important;
            max-height: calc(100% - 40px) !important;
            margin-inline-start: -195px !important;
        }

        /* Anteprima tablet */
        body.wp-customizer .preview-tablet #customize-preview {
            width: 768px !important;
            max-width: calc(100% - 20px) !important;
            height: 1024px !important;
            max-height: calc(100% - 40px) !important;
            margin-inline-start: -384px !important;
        }

    </style>
    <?php
});

Come attivare lo snippet

1. Vai in WPCode → Aggiungi snippet.
2. Seleziona PHP Snippet e incolla il codice.
3. Imposta l’esecuzione su Run Everywhere.
4. Salva e attiva lo snippet.
5. Riapri Aspetto → Personalizza e verifica le anteprime mobile e tablet.

Attenzione alle classi CSS del tema

I valori di 390 e 768 pixel sono riferimenti indicativi. Il codice funziona soltanto se il Customizer del tema utilizza i selettori previsti, come .preview-mobile e .preview-tablet. Se l’anteprima non cambia, occorre verificare le classi effettive utilizzate dal tema.

La modifica è pensata per l’interfaccia di amministrazione e non per alterare il layout pubblico del sito. Per verificare le dimensioni effettive è sempre consigliabile controllare anche il sito con gli strumenti per sviluppatori di Chrome o direttamente da smartphone.