web-dev-qa-db-fra.com

Comment puis-je empêcher un widget de s'afficher sur un site mobile?

Sur mon site principal, j'ai utilisé le widget de recherche dans la barre latérale.

Cependant, le thème mobile que j'utilise ( minileven ) a déjà un champ de recherche intégré dans sa barre de menus. Cela se traduit par un deuxième champ de recherche dans la barre latérale (qui apparaît après le contenu de l'article) en raison du widget.

Comment puis-je empêcher le widget de recherche d'apparaître sur le site mobile?

C'est le code pour sidebar.php du thème mobile:

<?php
/**
 * The Sidebar containing the main widget area.
 *
 * @package Minileven
 */
?>
        <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
                <div id="secondary" class="widget-area" role="complementary">
                        <?php dynamic_sidebar( 'sidebar-1' ); ?>
                </div><!-- #secondary .widget-area -->
        <?php endif; ?>

Sinon, serait-il préférable de ne pas utiliser le widget de la barre latérale de recherche et de coder en dur le champ de recherche dans le thème du site principal? Est-ce habituel pour les thèmes WordPress de le faire? (Je prévois de publier le thème WordPress que j'ai créé).

widgetsmobile
1
paradroid
  • Ajouter une classe .hide avec la propriété display: none; - à spécifier uniquement pour les fenêtres mobiles, pas dans les styles de bureau
  • attribuer la classe à votre widget ou à la barre latérale entière, selon les besoins
3
Phantasmix

Ajoutez une classe aux éléments que vous souhaitez masquer sur les appareils mobiles/tablettes/petits écrans:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <div id="secondary" class="widget-area mobile-hide" role="complementary">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
        </div><!-- #secondary .widget-area -->
<?php endif; ?>

Ensuite, utilisez les requêtes multimédia dans la ou les feuilles de style de votre thème pour les masquer:

/* change screen width to your liking */
@media handheld, only screen and (max-width: 799px) {
    .mobile-hide {
        display: none;
        visibility: hidden;
    }
}

En passant, cette question est du matériel WPSE limite et aurait peut-être été mieux posée à SO - où il a probablement été répondu à de nombreuses reprises :)

2
Johannes Pille

La réponse la plus évidente consiste à utiliser le plugin WordPress. Vous pouvez consulter ce plugin: Widget Options for WordPress qui est disponible gratuitement sur le référentiel: https://wordpress.org/plugins/widget-options/ et masquer facilement les widgets des appareils mobiles et autres. Vous pouvez consulter la capture d'écran ci-dessous pour en savoir plus sur son intégration.

 enter image description here 

Alternativement, vous pouvez utiliser un CSS personnalisé. Assurez-vous simplement de connaître l'identifiant du widget et ajoutez quelque chose comme ceci dans votre style.css.

@media(max-width:480px){
    .widget#text-12 {
        display:none;
    }
}
1
Jeffrey Carandang

Le plus simple est d’utiliser WordPress dans les fonctions de l’API:

Dites bonjour à wp_is_mobile() !

// Example
if (
    ! wp_is_mobile()
    AND is_active_sidebar( 'sidebar-1' ) 
) :
    ?>
    <div id="secondary" class="widget-area" role="complementary">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </div><!-- #secondary .widget-area -->
    <?php
endif;
1
kaiser