Sélectionner2

Le champ Select2 ajoute une liste déroulante consultable à un widget personnalisé construit avec les modules complémentaires principaux Constructeur de widgets. Les éditeurs tapent pour filtrer la liste, et avec Afficher plusieurs activés, ils peuvent choisir plusieurs options à la fois. Utilisez-le pour de longues listes d'options ou pour des choix de style de balise où une seule réponse ne suffit pas.

Select2 est un champ Pro. Le plugin gratuit comprend un Widget Builder limité et l'ensemble complet des champs est livré avec Maître Addons Pro.

Ce que fait le champ Select2 #

• Il ajoute un dropdown avec un champ de recherche dans le panneau de votre widget dans Elementor.
• Avec Show Multiple off, l'éditeur choisit une option et votre modèle obtient la clé de cette option.
• Avec Show Multiple on, l'éditeur sélectionne n'importe quel nombre d'options, affichées sous forme de balises amovibles, et votre modèle reçoit une liste de clés que vous imprimez avec a {% for %} boucle.
• Chaque option a une clé et une étiquette Les éditeurs voient les étiquettes, et votre HTML reçoit toujours les clés.

Si vous n'avez pas encore construit de widget, lisez le Aperçu du constructeur de widgets d'abord. Pour une courte liste à choix unique sans recherche, la plaine Sélectionnez champ est plus simple.

Avant de commencer #

• WordPress avec Elementor installé et actif.
• Master Addons pour Elementor et Master Addons Pro, tous deux actifs. Le guide d'installation couverture configuration.
• Un widget ouvert dans le Widget Builder L'exemple dans ce guide est un widget “Portfolio Card” avec un champ Texte pour le titre du projet et deux champs Select2 : Type de projet (un choix) et Balises de projet (plusieurs choix).

Comment ajouter un champ Select2 #

1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
2. Sur le Contenu onglet, ajoutez une section s'il n'y en a pas encore.
3. Type select dans la zone de recherche du champ à gauche Sélectionnez et Sélectionnez2 montez.
4. Glisser Sélectionner2 dans la section Ses paramètres s'ouvrent dans la barre latérale gauche.

Un nouveau champ Select2 commence par Afficher plusieurs activés et trois exemples d'options (value-1 à value-3). Remplacez-les par le vôtre avant d'écrire le modèle.

Options du champ Select2 expliquées #

Voici le champ Type de projet, mis en place pour un seul choix :

• Étiquette est le texte à côté du contrôle dans Elementor, par exemple “Project Type”.
• Nom est l'ID unique du champ (lettres, chiffres et soulignements uniquement).C'est aussi le jeton que vous utilisez dans le modèle, donc project_type devient {{project_type}}.
• Description apparaît sous le contrôle dans Elementor. Utilisez-le pour un court indice tel que “Choisissez une catégorie.”
• Afficher plusieurs? bascule entre un choix (Non) et plusieurs choix (Oui).Cela modifie ce que votre modèle reçoit, alors décidez avant d'écrire le HTML.
• Options est la liste des choix La case de gauche est la clé que votre modèle obtient (branding, web). La case de droite est la vue des éditeurs d'étiquettes (Marque, Web Design).Utilisez l'icône plus pour ajouter une ligne et la croix rouge pour en supprimer une.
• Valeur par défaut est ce qui est sélectionné lorsque le widget est ajouté pour la première fois à une page En mode unique c'est un dropdown normal Si vous le laissez vide, la première option est sélectionnée.

Project Tags utilise les mêmes options avec Afficher le multiple activé La case Valeur par défaut devient un sélecteur de balises, vous pouvez donc présélectionner plus d'une option Laissez-la vide et la première option est présélectionnée.

Si la liste Valeur par défaut affiche toujours les anciennes options d'échantillonnage après avoir modifié les options, cliquez sur Enregistrer Paramètres et ouvrez le champ à nouveau.

Sous Valeur par défaut, vous trouverez les paramètres communs partagés par la plupart des champs : Afficher l'étiquette, Bloc d'étiquettes, Contrôle réactif, Support dynamique, Frontend disponible, Séparateur, Conditions et les classes de contrôle. Le bloc d'étiquettes vaut la peine d'être activé pour un champ multiple, puisque le contrôle obtient alors toute la largeur du panneau pour ses balises.

Utilisez les valeurs Select2 dans votre modèle #

La façon dont vous imprimez la valeur dépend de Afficher plusieurs.

Mode unique : imprimer la clé #

Un seul Select2 fonctionne comme n'importe quel autre jeton. {{project_type}} imprime la clé sélectionnée, afin que vous puissiez l'utiliser comme texte ou en construire une classe CSS :

<article class="portfolio-card type-{{project_type}}">
  <span class="card-type">{{project_type}}</span>

Avec Branding sélectionné, cela rend type-branding et branding. Vous pouvez également le comparer : {% if project_type == 'web' %}...{% endif %}.

Mode multiple : boucle sur les touches #

Un multiple Select2 contient une liste, et {{project_tags}} sur ses propres empreintes rien Boucle dessus à la place :

<ul class="card-tags">
  {% for tag in project_tags %}
    <li class="card-tag">{{ tag }}</li>
  {% endfor %}
</ul>

La boucle s'exécute une fois pour chaque option choisie, dans l'ordre dans lequel l'éditeur les a sélectionnées. À l'intérieur, {{ tag }} est une clé et des filtres tels que {{ tag|upper }} travail aussi. Le Guide syntaxique Twig répertorie tout ce que le moteur de modèle prend en charge.

Le panneau Documentation à côté de l'éditeur de code répertorie un jeton pour chaque champ Copie {{project_tags}} à partir de là, c'est bien pour les champs uniques, mais un champ multiple a toujours besoin de la boucle.

Cliquez Enregistrer Paramètres lorsque le modèle est terminé.

Utilisez le contrôle Select2 dans Elementor #

Ajouter le widget à une page, ou recharger l'éditeur si la page était déjà ouverte Les deux contrôles Select2 apparaissent sur l'onglet Contenu avec leurs valeurs par défaut déjà sélectionnées.

Dans le contrôle multiple, cliquez sur le bouton plus ou sur l'espace vide après les balises et commencez à taper La liste se rétrécit au fur et à mesure que vous tapez, et Entrée ajoute l'option en surbrillance Chaque balise a une petite croix qui la supprime.

Le contrôle unique ouvre un dropdown avec son propre champ de recherche Choisissez une option, ou utilisez la croix à côté de la valeur actuelle pour la vider.

Le canevas se met à jour tout de suite Remarquez que le panneau affiche les étiquettes (Web Design, Social Media) pendant que la carte imprime les clés (web, social):

Si vous avez besoin du texte de l'étiquette sur la page, soit rendez la clé suffisamment lisible pour l'afficher, soit mappez-la dans le modèle :

{% for tag in project_tags %}
  <li class="card-tag">{% if tag == 'social' %}Social Media{% else %}{{ tag }}{% endif %}</li>
{% endfor %}

Cas d'utilisation courants #

• Tags ou services sur portfolio, étude de cas et cartes d'équipe.
• Un sélecteur de catégorie ou de style qui ajoute une classe CSS, telle que type-web.
• Longues listes comme les pays, les industries ou les jeux d'icônes, où la recherche enregistre le défilement.
• Listes de fonctionnalités sur les prix ou les cartes de produits, bouclées en éléments de liste.

Conseils pour travailler avec le champ Select2 #

• Décidez d'abord de Afficher plusieurs. Le changer plus tard signifie changer {{field}} vers une boucle, ou l'inverse.
• Écrivez les clés en minuscules sans espaces (social, web). Ils se retrouvent dans les noms de classes et les comparaisons.
• Ne renommez pas les clés après l'utilisation du widget Les pages qui ont déjà enregistré l'ancienne clé ne correspondront pas à la nouvelle.
• Stylez la sortie avec la clé, par exemple .type-web .card-type { ... }.
• Pour une poignée de boutons d'icônes au lieu d'une liste déroulante, utilisez le Choisir champ.

Foire aux questions #

Envelopper #

Ajoutez le champ Select2, définissez vos clés et étiquettes et choisissez entre un choix et plusieurs avant d'écrire le HTML. Imprimez une seule valeur avec {{field_name}} et bouclez-en plusieurs avec {% for %}. Pour répéter des groupes de champs plutôt qu'une liste de choix, regardez le Champ répéteuret vérifiez tarification pour ce que chaque plan comprend.