web-dev-qa-db-fra.com

Ajustez les tailles de prévisualisation de périphérique utilisées dans WP 4.5 Personnalisateur

WP 4.5 a introduit le Device Preview dans le Customizer et il est très facile à utiliser. Cliquez sur l'une des trois icônes et consultez votre site à différentes tailles ( prédéterminées ).

  • La version de bureau remplira toujours 100% de votre écran
  • La version de la tablette est définie sur 6 pouces x 9 pouces
  • La version mobile est définie sur 320px x 480px

Vous pouvez également filtrer les appareils disponibles ou les supprimer en utilisant customize_previewable_devices

add_filter( 'customize_previewable_devices', '__return_empty_array' );

Il y a beaucoup de discussions @ # 31195 , mais en supposant que vous puissiez ajouter/supprimer périphériques visualisables où déterminez-vous la taille de ces vues?

Pour savoir pourquoi plus de variété est préférable, consultez la page { http://design.google.com/resizer/ .

SOLUTION D'ORIENTATION DE DISPOSITIF

D'après la réponse de Luis Sanz , je pense que cette solution est un peu plus complète. Il traite de l'ajout de nouveaux périphériques, de la configuration d'icônes et du réglage de l'ordre des périphériques dans la liste.

Bien que je pense qu’il soit intéressant de régler la hauteur de ces fenêtres pour montrer la différence entre les paramètres portrait et paysage, je pense vraiment que 100% height est préférable dans la plupart des cas.

Les icônes utilisent actuellement Dashicons , mais je pouvais également voir les remplacer par quelque chose qui suggère des points d'arrêt au lieu d'appareils plus tard. [SM, M, L, XL]

/**
 *   Determine the device view size and icons in Customizer
 */
function wpse_20160503_adjust_customizer_responsive_sizes() {

    $mobile_margin_left = '-240px'; //Half of -$mobile_width
    $mobile_width = '480px';
    $mobile_height = '720px';

    $mobile_landscape_width = '720px';
    $mobile_landscape_height = '480px';

    $tablet_width = '720px';
    $tablet_height = '1080px';

    $tablet_landscape_width = '1080px';
    $tablet_landscape_height = '720px';

    ?>
    <style>
        .wp-customizer .preview-mobile .wp-full-overlay-main {
            margin-left: <?php echo $mobile_margin_left; ?>;
            width: <?php echo $mobile_width; ?>;
            height: <?php echo $mobile_height; ?>;
        }

        .wp-customizer .preview-mobile-landscape .wp-full-overlay-main {

            width: <?php echo $mobile_landscape_width; ?>;
            height: <?php echo $mobile_landscape_height; ?>;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .wp-customizer .preview-tablet .wp-full-overlay-main {

            width: <?php echo $tablet_width; ?>;
            height: <?php echo $tablet_height; ?>;
        }

        .wp-customizer .preview-tablet-landscape .wp-full-overlay-main {

            width: <?php echo $tablet_landscape_width; ?>;
            height: <?php echo $tablet_landscape_height; ?>;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .wp-full-overlay-footer .devices .preview-tablet-landscape:before {
            content: "\f167";
        }

        .wp-full-overlay-footer .devices .preview-mobile-landscape:before {
            content: "\f167";
        }
    </style>
    <?php

}

add_action( 'customize_controls_print_styles', 'wpse_20160503_adjust_customizer_responsive_sizes' );

/**
 *   Set device button settings and order
 */
function wpse_20160503_filter_customize_previewable_devices( $devices )
{
    $custom_devices[ 'desktop' ] = $devices[ 'desktop' ];
    $custom_devices[ 'tablet' ] = $devices[ 'tablet' ];
    $custom_devices[ 'tablet-landscape' ] = array (
            'label' => __( 'Enter tablet landscape preview mode' ), 'default' => false,
    );
    $custom_devices[ 'mobile' ] = $devices[ 'mobile' ];
    $custom_devices[ 'mobile-landscape' ] = array (
            'label' => __( 'Enter mobile landscape preview mode' ), 'default' => false,
    );

    foreach ( $devices as $device => $settings ) {
        if ( ! isset( $custom_devices[ $device ] ) ) {
            $custom_devices[ $device ] = $settings;
        }
    }

    return $custom_devices;
}

add_filter( 'customize_previewable_devices', 'wpse_20160503_filter_customize_previewable_devices' );

SOLUTION DE DEMANDE DE MEDIA

Voici un exemple d'utilisation de points de rupture comme [L|M|S] basé sur la solution d'orientation de périphérique précédente et sans nécessiter de glyphes supplémentaires. Celles-ci devraient évidemment compléter les requêtes des médias de votre thème.

/**
 * Determine the size of the devices and icons in Customizer
 */
function wpse_20160504_adjust_customizer_responsive_sizes() {
    ?>
    <style>
        .wp-customizer .preview-small .wp-full-overlay-main {
            width: 320px;
            height: 100%;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .wp-customizer .preview-medium .wp-full-overlay-main {
            width: 768px;
            height: 100%;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .wp-customizer .preview-large .wp-full-overlay-main {
            width: 1224px;
            height: 100%;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .wp-full-overlay-footer .devices .preview-small:before {
            content: "S";
        }

        .wp-full-overlay-footer .devices .preview-medium:before {
            content: "M";
        }

        .wp-full-overlay-footer .devices .preview-large:before {
            content: "L";
        }

    </style>
    <?php
}

add_action( 'customize_controls_print_styles', 'wpse_20160504_adjust_customizer_responsive_sizes' );

/**
 * Add device sizes to customizer
 */
function wpse_20160504_filter_customize_previewable_devices( $devices )
{
    $custom_devices[ 'desktop' ] = $devices[ 'desktop' ];
    $custom_devices[ 'large' ] = array ( 'label' => __( 'Large' )  );
    $custom_devices[ 'medium' ] = array ( 'label' => __( 'Medium' )  );
    $custom_devices[ 'small' ] = array ( 'label' => __( 'Small' )  );

    return $custom_devices;
}

add_filter( 'customize_previewable_devices', 'wpse_20160504_filter_customize_previewable_devices' );
theme-customizeradmin-css
6
jgraup

Les dimensions mobile et tablette sont définies dans le fichier themes.css de l'administrateur. Le javascript qui s'exécute lorsque les boutons sont déclenchés sert uniquement à ajouter et à supprimer des classes et non à traiter les tailles elles-mêmes.

Il ne devrait donc pas être difficile de remplacer les dimensions en ajoutant des CSS supplémentaires. Pour rester simple, j'utilise customize_controls_print_styles pour aligner certains styles, mais vous pouvez également le faire en mettant en file d'attente un fichier css.

<?php

    /*
        Plugin Name: Adjust Customizer responsive sizes
        Description: Allows to change the mobile and tablet preview dimensions in the WP Customizer
        Version: 0.1
        Author: Your Name
        Author URI: http://www.yourwebsite.com/
    */

    if ( ! defined( 'ABSPATH' ) ) exit;

    function wpse_223684_adjust_customizer_responsive_sizes() {

        $mobile_margin_left = '-240px'; //Half of -$mobile_width
        $mobile_width = '480px';
        $mobile_height = '720px';

        $tablet_margin_left = '-540px'; //Half of -$tablet_width
        $tablet_width = '1080px';
        $tablet_height = '720px';

?>
        <style>
            .wp-customizer .preview-mobile .wp-full-overlay-main {
                margin-left: <?php echo $mobile_margin_left; ?>;
                width: <?php echo $mobile_width; ?>;
                height: <?php echo $mobile_height; ?>;
            }

            .wp-customizer .preview-tablet .wp-full-overlay-main {
                margin-left: <?php echo $tablet_margin_left; ?>;
                width: <?php echo $tablet_width; ?>;
                height: <?php echo $tablet_height; ?>;
            }
        </style>
<?php

    }

    add_action( 'customize_controls_print_styles', 'wpse_223684_adjust_customizer_responsive_sizes' );

?>

Les tailles par défaut sont 320x480px pour mobile et 720x1080px pour tablette.

EDIT 16/04/26: Reflète les modifications de la taille par défaut de la tablette par rapport à la version WordPress 4.5.1 introduite.

2
Luis Sanz

Une excellente solution de Luis Sanz. Excellent travail, sauf pour les requêtes de supports impliquant des requêtes de type paysage et portrait, car iFrame ne s’adapte pas. Pour résoudre ce problème, j'ai utilisé le script de Luis et ajouté

.wp-customizer .preview-tablet .wp-full-overlay-main iframe {
    height: <?php echo $tablet_height; ?> !important;
}
.wp-customizer .preview-mobile .wp-full-overlay-main iframe {
    height: <?php echo $mobile_height; ?> !important;
}

J'ai ajouté ceci à la fin de la section.

0
Ben Matthews