Le Champ caché est le seul contrôle dans les modules complémentaires principaux Constructeur de widgets que les éditeurs ne voient jamais Il détient une valeur fixe que vous définissez une fois dans le constructeur, disons une chaîne de version ou une clé de mise en page La valeur voyage avec le widget et imprime via un jeton de modèle, mais aucune entrée pour cela n'apparaît nulle part dans le panneau Élémenteur.
Même le champ caché prend en charge Conditions1, et sa valeur stockée s'imprime via le Moteur de modèles de syntaxe Twig comme tout autre jeton, vous pouvez donc y faire référence {% if %} vérifie sur votre modèle Les deux guides couvrent les détails.
Cela en fait la bonne maison pour les constantes dont votre modèle a besoin mais les utilisateurs ne doivent pas modifier Tout ce qu'un client curieux pourrait changer par accident reste hors de portée Vos panneaux HTML, CSS et JS peuvent toujours le lire comme n'importe quelle autre valeur.
Ce que fait le champ caché #
- Stocke une valeur de chaîne fixe définie dans le constructeur, sans contrôle visible dans Elementor.
- Imprime une valeur n'importe où dans le panneau HTML, CSS ou JS du widget
{{ your_field_name }}. - Conserve les constantes de configuration hors de l'interface utilisateur d'édition, elles ne peuvent donc pas être modifiées par page.
- Se comporte comme une valeur de texte dans la logique des modèles, donc des conditions telles que
{% if mode == 'embed' %}travail.
S'il s'agit de votre premier widget personnalisé, lisez le Aperçu du constructeur de widgets avant cette page ; il couvre la disposition de l'éditeur que supposent les documents de champ.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Un widget personnalisé s'ouvre dans l'éditeur Widget Builder Notre exemple est un widget d'intégration de carte où un champ caché est nommé
map_style_keyporte l'identifiant de style de carte fixe attendu par le script d'intégration.
Comment ajouter un champ Caché #
Faites glisser le Caché champ du panneau des champs dans n'importe quelle section L'onglet n'a pas d'importance ici, puisque rien ne se rend dans le panneau de toute façon Ses options s'ouvrent à gauche dès qu'il atterrit.
Options de champ caché expliquées #
La liste des options est courte par conception :
- Étiquette: un nom pour votre propre référence à l'intérieur du constructeur, Il ne se montre jamais dans Elementor.
- Nom: l'identifiant unique auquel vos modèles font référence Lettres, chiffres et soulignements uniquement, par exemple
map_style_key. - Par défaut: la valeur que le champ détient Puisqu'il n'y a pas d'interface utilisateur pour le modifier plus tard, il s'agit effectivement de la valeur, point final.
Connectez le champ Caché avec son jeton #
Le champ Caché est un champ de jeton Imprimez-le exactement comme une valeur de texte, dans l'un des trois panneaux suivants :
<!-- HTML panel -->
<div class="ma-map" data-style="{{ map_style_key }}"></div>
// JS panel
var styleKey = "{{ map_style_key }}";
initMap(styleKey);La logique du modèle peut également se brancher dessus Si vous expédiez deux modes internes du même widget, un champ Caché peut choisir la branche sans exposer le choix :
{% if widget_mode == 'compact' %}
<div class="ma-map ma-map--compact"></div>
{% else %}
<div class="ma-map ma-map--full"></div>
{% endif %}Un mode d'échec silencieux à connaître : si vous renommez le champ plus tard, chaque jeton pointant toujours vers l'ancien nom imprime une chaîne vide Rien d'erreur, le widget se contente de se rendre avec un blanc où se trouvait la constante Après un renom, recherchez l'ancien nom dans les trois panneaux avant de sauvegarder.
Attention: un champ Caché est invisible, pas secret Sa valeur rend toujours dans le balisage de page ou le script que les visiteurs peuvent afficher-Source Gardez les clés API privées et les informations d'identification hors de lui ; c'est pour les constantes de configuration, pas les secrets.
Utilisez le champ Caché dans Elementor #
Ajoutez votre widget personnalisé à une page dans Elementor Le panneau affiche tous les autres contrôles que vous avez définis, et rien pour le champ Caché Cette absence est la fonctionnalité La valeur est déjà appliquée, et le widget rendu la reflète dès la première goutte.
Cas d'utilisation courants #
- Clés de disposition que les branches internes CSS ou JS sont activées, corrigées par widget.
- Chaînes de version estampillé dans un attribut de données pour déboguer les widgets expédiés.
- Drapeaux de mode API comme un type d'intégration, le script du widget se lit.
- Fragments de nom de classe fixe imprimé dans le balisage pour qu'une famille de widgets partage des crochets de style.
- Interrupteurs de branche de modèle lorsque vous exportez un widget dans deux variantes internes.
Conseils pour travailler avec le champ Caché #
- Nommez-le comme la constante qu'il est.
map_style_keyindique au prochain mainteneur ce que signifie le jeton ;hidden_1ne. - Définissez la valeur par défaut avant d'enregistrer. Il n'y a pas de seconde chance du côté Élémenteur ; un défaut vide rend une chaîne vide partout où le jeton apparaît.
- Citez-le dans JS. La valeur est une chaîne, alors écrivez
var key = "{{ map_style_key }}";avec citations. - Préférez un champ visible une fois que les utilisateurs ont besoin de contrôle. Au moment où une valeur doit différer par page, échangez le champ Caché contre un Texte ou Sélectionner champ au lieu de demander aux utilisateurs de modifier les internes du widget.
- Aucun secret. La valeur se retrouve dans la sortie de la page publique, alors traitez-la comme visible par quiconque lit la source.
Foire aux questions #
Qu'est-ce que le champ Caché dans le Master Addons Widget Builder ?
Le champ Caché stocke une valeur fixe à l'intérieur d'un widget Elementor personnalisé sans rendre aucun contrôle dans le panneau Vous définissez la valeur une fois dans le constructeur, et les modèles l'impriment avec {{ field_name }} dans le panneau HTML, CSS ou JS. Les éditeurs ne peuvent pas le voir ou le modifier.
Pourquoi utiliserais-je un champ Caché au lieu de coder en dur la valeur dans mon HTML ?
Centralisation. Lorsqu'une même constante apparaît à plusieurs endroits sur les panneaux HTML, CSS et JS, un champ caché les maintient synchronisés, et mettre à jour le widget plus tard signifie changer un par défaut au lieu de parcourir trois panneaux.
Les utilisateurs peuvent-ils modifier la valeur d'un champ caché dans Elementor ?
Non. Le champ ne restitue aucune entrée dans le panneau, sa valeur est donc fixée à n'importe quelle valeur par défaut que vous définissez dans le constructeur. Pour le modifier, il faut modifier le widget dans le constructeur de widgets lui-même.
Puis-je utiliser la valeur du champ Caché dans les conditions du modèle ?
Oui. Il se comporte comme n'importe quelle valeur de texte, donc {% if widget_mode == 'compact' %} fonctionne. Cela permet à une définition de widget de transporter un commutateur interne avec lequel les utilisateurs n'interagissent jamais.
La valeur du champ caché est-elle privée ?
Non. Il est caché du panneau d'édition, mais il se transforme en page comme n'importe quel autre jeton, où n'importe qui peut le lire dans la source de la page. N'y stockez pas de secrets d'API ou d'informations d'identification.
Le champ Caché est-il disponible dans la version gratuite ?
Le champ Caché appartient à l'ensemble de contrôle libre, aux côtés de bases comme Texte et Textarea. L'expérience complète de Widget Builder avec la bibliothèque de champs complète fait partie de Master Addons Pro ; voir le page de tarification pour détails.
Envelopper #
Le champ Widget Builder Hidden résout un problème calme mais réel : les valeurs d'un widget dépendent du fait qu'aucun éditeur ne doit toucher Définissez-le une fois, imprimez son jeton là où cela est nécessaire, et la constante s'expédie avec le widget partout où il est utilisé Quand une valeur doit être modifiable après tout, atteignez un champ visible comme Numéro ou Texte à la place Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.
