Comment ajouter des boutons dans l'éditeur classique de WordPress

Ajouter un boutonElle peut améliorer l'effet visuel et l'expérience de l'utilisateur de la page. Cet article présente trois méthodes :Insérer manuellement du HTML répondre en chantant CSS(math.) genreutiliserplug-in (composant logiciel)et la combinaison de Plugin TinyMCE AdvancedMise en œuvre rapide de la fonctionnalité des boutons.

Méthode 1 : Insérer manuellement du HTML et du CSS

Cette méthode convient aux utilisateurs qui ne comptent pas sur les plugins pour obtenir des effets de bouton entièrement personnalisés en modifiant le code HTML et le code CSS.

Les étapes :

1. Passage au mode "Texte
   Ouvrez l'éditeur WordPress Classic et cliquez sur l'onglet Texte pour accéder à la vue Texte.

2. Ajouter le code du bouton HTML
   Insérez le code suivant à l'endroit où le bouton doit être ajouté :<a class="custom-button" href="https://example.com" target="_blank">Cliquez ici</a>Ici :
   • hrefL'adresse du lien du bouton.
   • target="_blank": Définissez le lien pour qu'il s'ouvre dans une nouvelle fenêtre.

3. Ajout d'une feuille de style CSS personnalisée
   Ouvrez "Appearance -> Customise -> Extra CSS" et ajoutez le code suivant :
   • Ces propriétés CSS :
   • couleur de fond: La couleur d'arrière-plan du bouton.
   • couleurCouleur du texte du bouton : Couleur du texte du bouton : Couleur du texte du bouton : Couleur du texte du bouton.
   • rembourrageMarge intérieure : La marge intérieure contrôle la taille du bouton.
   • rayon de la bordureEffet d'arrondi : Effet d'arrondi.
   • :hover: Changement de style au survol de la souris.

.custom-button { background-color : #3498db ; colour : #ffff ; padding : 10px 20px ; text-decoration : none ; border-radius : 5px ; display. inline-block ; } .custom-button:hover { background-color : #2980b9 ; }

4. Sauvegarde et prévisualisation
   Cliquez sur le bouton "Mettre à jour" ou "Publier" pour prévisualiser la page et voir à quoi ressemblera le bouton.

Méthode 2 : ajouter un bouton à l'aide d'un plug-in

Si vous n'êtes pas familier avec le code, vous pouvez opter pour un plugin afin de mettre en œuvre rapidement la fonctionnalité du bouton.

Plugin recommandé :Shortcodes Ultimate

1. Installation des plug-ins
   • Allez dans le tableau de bord de WordPress -> Plugins -> Ajouter un nouveau plugin.
   • rechercher qqch. Shortcodes UltimateCliquez ensuite sur "Installer" et activez le plugin.

2. Ajouter un bouton
   • Pour modifier un article ou une page, dans la barre d'outils de l'éditeur, trouvez "Insérer le code court"Bouton.
   • Sélectionnez dans la liste "Bouton"Options.
   • Remplissez les attributs pertinents tels que le texte du bouton, l'adresse du lien, la couleur, la taille, etc.
   • Cliquez sur le bouton "Insérer", le plug-in génère automatiquement le code court suivant :

[su_button url="https://example.com" target="blank" style="flat" background="#3498db" color="#ffffff" size="5" radius="5"]Cliquez ici[/ su_button]

3. Sauvegarder et consulter les résultats
   Le plugin applique automatiquement les styles et vous pouvez voir l'apparence des boutons personnalisés directement sur le front-end.

Méthode 3 : Combiner avec le plug-in TinyMCE Advanced

S'il doit figurer dans le Barre d'outils de l'éditeur classiquePour ajouter une option de bouton directement au Outils avancés de l'éditeur Plug-ins.

1. Installation des plug-ins
   • Allez dans Plugins -> Ajouter un nouveau plugin, Recherchez Outils avancés de l'éditeur.
   • Cliquez sur "Installer" et activez.

2. Barres d'outils personnalisées
   • Une fois le plugin activé, allez dans "Settings -> Advanced Editor Tools".
   • Faites glisser l'outil "Bouton" vers la barre d'outils.

3. Ajouter un bouton
   Sélectionnez l'option bouton dans l'éditeur et modifiez le texte, le lien et le style du bouton.

Notes et conseils

• conception réactiveLes boutons doivent s'afficher correctement sur les appareils mobiles et des styles spécifiques peuvent être définis pour différentes tailles d'écran à l'aide de requêtes de média.
• Optimiser la vitesse de chargementLes sites web de l'Union européenne : Réduisez le code CSS inutile afin d'éviter d'affecter les performances du site.
• la sécurité: Ajouter pour les liens rel="noopener noreferrer" afin de renforcer la sécurité et de prévenir les opérations potentiellement malveillantes.

résumés

Il existe plusieurs façons d'ajouter des boutons à l'éditeur WordPress Classic. En insérant manuellement du HTML et du CSS, vous pouvez obtenir un aspect entièrement personnalisé, tandis que l'utilisation d'un plugin offre un moyen pratique de le faire, adapté à ceux qui ne sont pas familiers avec l'éditeur WordPress Classic.codificationEn combinaison avec le plug-in TinyMCE Advanced, il est également possible d'ajouter directement un nouveau compte d'utilisateur dans l'interface utilisateur.Utilisation des boutons de la barre d'outilsOptions.