Share
Nous avons tous entendu parler des questions des médias. Nous les avons largement utilisés dans nos thèmes pour les rendre réactifs. Ils sont parfaits pour la plupart des applications, mais lorsqu'il s'agit de dispositions à colonnes, nous avons parfois besoin de plus de contrôle pour que nos conceptions se démarquent..
Dans cet article, vous en apprendrez davantage sur le plugin Selector-Query jQuery et sur son utilisation dans vos thèmes WordPress..
Qu'Est-ce que c'est? Eh bien, considérez-le comme une requête multimédia, mais au lieu d'utiliser la largeur du navigateur comme référence, il utilise la largeur actuelle de l'élément.
Avant de passer à l'essentiel de Selector-Query, parlons d'abord de ce que sont les requêtes de média. En un mot, les requêtes multimédia permettent aux styles de votre CSS d'être appliqués uniquement lorsque la largeur du navigateur se situe dans une certaine plage.
Les requêtes des médias sont le cœur et l’âme du design réactif. Dans une seule page Web et un seul fichier CSS, nous pouvons le rendre affiché différemment lorsqu'il est visualisé avec différentes résolutions d'écran et différents périphériques. Avec les requêtes multimédia, il n'est pas nécessaire de créer deux versions de bureau et mobiles différentes d'un site Web..
Passons rapidement en revue son utilisation. Pour les ordinateurs de bureau et les tablettes, nous pouvons envelopper nos règles CSS avec la requête multimédia suivante. Le CSS ci-dessous serait suivi pour les largeurs de navigateur de 768px et ci-dessus:
@media only screen et (min-width: 768px) / * Les règles CSS sont ici * /
Pour les appareils plus petits tels que les téléphones intelligents, nous pouvons utiliser les éléments suivants. Celui-ci serait suivi pour les largeurs de 767px et plus bas:
@media only screen et (max-width: 767px) / * les règles CSS sont ici * /
Lors de la conception de sites Web, nous pouvons adapter notre conception à la manière dont nous voulons qu’elle examine différentes tailles d’écran en utilisant des requêtes multimédia.. Cependant, lorsqu’il s’agit de concevoir des thèmes WordPress, nous avons besoin de plus de contrôle.
En tant qu'auteurs de thèmes WordPress, nous souhaitons que nos thèmes soient à la fois flexibles et esthétiques. Nous intégrons des fonctionnalités telles que les codes abrégés et la disposition multi-colonnes, et nous donnons à nos utilisateurs la liberté de faire ce qu'ils veulent..
Plus le client est heureux, plus nous sommes heureux.
Supposons, par exemple, qu'un de nos clients veuille placer un numéro abrégé de témoignage dans une colonne pleine largeur. Disons que nous avons uniquement conçu ce shortcode pour qu'il soit placé côte à côte avec d'autres témoignages (ou tout autre contenu) dans 3 colonnes ou plus:
Pour ce scénario, il serait peut-être préférable de concevoir différemment le shortcode de témoignage dans un conteneur plus grand. Peut-être qu'une telle conception conviendrait mieux à une colonne pleine largeur:
Malheureusement, les requêtes des médias ne pourront pas vous aider. Pourquoi? Parce que la largeur de l'écran est toujours la même, que le témoignage ait été placé dans une colonne pleine largeur ou dans une colonne d'un tiers!
Ok, alors vous pensez peut-être, "Pourquoi ne pas utiliser la classe de la colonne dans le CSS?" Vous allez probablement vous retrouver avec quelque chose comme ceci dans votre fichier CSS:
.testimonial / * style sur deux colonnes ou plus ici * / @ uniquement écran et (min-largeur: 768px) .one-colonne .testimonial / * remplacement avec un style pleine largeur ici * /
Eh bien, quelque chose comme le CSS ci-dessus fonctionnerait. Cependant, j'ai une proposition plus élégante: Selector-Query.
Selector-Query est un plugin léger jQuery qui permet d'appliquer différents styles à vos éléments en fonction de leur largeur..
Fondamentalement, ce plugin applique des noms de classe supplémentaires à vos éléments en fonction de leur largeur actuelle. Lorsque le navigateur est redimensionné, les noms de classe sont mis à jour de manière appropriée pour refléter la nouvelle largeur d'élément..
Vous pouvez ensuite utiliser ces différents noms de classe pour styliser les différentes dispositions de votre contenu..
Ce que sélecteur-requête fait est d'attendre les événements redimensionnés du navigateur, puis il prend la largeur de vos éléments HTML et les compare à un tableau de largeurs appelé widthStops. Si la largeur de l'élément est inférieure à l'une de ces valeurs widthStop les valeurs, les noms de classe des plus grands sont ajoutés à l'élément.
Je vais expliquer widthStops plus tard avec un exemple, pour l'instant parlons de la façon d'utiliser le plugin.
La première chose à faire est d’inclure le script du plugin jQuery. Vous pouvez télécharger Selector-Query depuis son dépôt GitHub puis l’inclure dans votre répertoire de thèmes. Placez-le dans votre js dossier pour garder votre structure de fichier propre.
Une fois que vous l'avez dans votre répertoire de thème, vous pouvez ajouter ce code dans votre functions.php mettre en file d'attente Sélecteur-Requête juste avant la corps est fermé. Cela nous ferait gagner du temps de chargement de page:
Accentsconagua
function wp_enqueue_script_selector_query () wp_enqueue_script ('sélecteur-requête', get_stylesheet_directory_uri (). '/js/jquery.selectorquery.min.js', array ('jquery'), false (vrai); add_action ('wp_enqueue_scripts', 'wp_enqueue_script_selector_query'); Activer le plugin jQuery est simple. Il suffit d'appeler sélecteurQuery sur vos éléments:
jQuery (document) .ready (fonction ($) $ ('. sélecteur'). sélecteurQuery ();); Et c'est tout!
De plus, le plugin a deux options configurables que vous pouvez passer lors de l'initialisation.
Vous pouvez personnaliser ces valeurs à votre guise:
$ ('. selector'). selectorQuery ('widthStops': [320, 480, 640, 960, 1024, 1280]], // Un tableau de largeurs 'classPrefix': 'max-' // Préfixe des noms de classe avec ceci ); widthStops sont les largeurs utilisées pour vérifier la largeur de l'élément. le classPrefix est utilisé avec widthStops pour générer les noms de classe. Voyons un exemple pour mieux expliquer les choses.
Utilisons notre exemple de témoignage ci-dessus et appliquons-le à Selector-Query afin d'obtenir une image plus claire de son fonctionnement et de ses avantages. Par exemple, disons que le HTML de notre témoignage est écrit comme ceci:
Un texte de témoignage ici
Si notre témoignage div avait une largeur de 1000px, en utilisant les valeurs par défaut pour widthStops ci-dessus, Selector-Query y ajouterait de nouveaux noms de classe. Nous nous retrouverions avec:
Alors si le témoignage div devient redimensionné à 800px, cela ressemblerait alors à ceci:
Nous pouvons utiliser ces noms de classe ajoutés dynamiquement pour styler différentes mises en page pour notre témoignage. On peut utiliser .max-1024 coiffer les largeurs de 1024 et plus grand; et nous pouvons utiliser .max-960 pour remplacer les styles pour nos conceptions plus petites.
Si nous devions concevoir le contenu de témoignage comme ceci:
Nous pouvons utiliser celui-ci comme notre CSS:
/ * Large testimonial * / .testimonial img float: left; hauteur: 200px; largeur: 200px; .testimonial span display: block; débordement caché; / * Petit témoignage * / .testimonial.max-640 img float: none; bloc de visualisation; marge: 0 auto; / * Petit témoignage * / .testimonial.max-480 img height: 150px; largeur: 150px;
La meilleure chose à propos de l'utilisation de Selector-Query est qu'il n'est pas nécessaire de savoir où ce contenu de témoignage est placé. Il sera stylé en fonction de sa largeur, contrairement à notre CSS précédent où notre conception pour le contenu de témoignage volumineux dépendait de son parent (rappelez-vous que nous avons utilisé .une colonne .testimonial dans l'exemple précédent).
Dans cet article, nous avons découvert une nouvelle façon de styliser notre contenu en fonction de sa largeur avec Selector-Query. J'espère que vous trouverez une utilisation géniale de ce plugin jQuery dans vos créations.
Si vous voulez un échantillon live de Selector-Query en action, vous pouvez regarder la démo dans le dépôt Github..
J'espère que vous avez apprécié cet article. J'apprécie hautement vos commentaires, commentaires et suggestions. Faites-moi savoir ce que vous pensez de Selector-Query.
Utiliserez-vous ce plugin dans l’un de vos prochains thèmes WordPress? Partagez vos pensées ci-dessous!
