Guide des shortcodes de boutons WordPress : Plugins, codes personnalisés et optimisation du design expliqués

WordPressboutonsL'utilisation de codes courts peut ajouter de l'interactivité et de l'attrait visuel à votre site web. Les boutons stylisés peuvent être facilement ajoutés à l'aide de shortcodes de boutons, sans codage complexe, ou peuvent être réalisés rapidement à l'aide de plugins ou de fonctionnalités intégrées.

Cet article détaille la mise en œuvre et les meilleures pratiques pour les shortcodes de boutons WordPress sous les aspects suivants :

• Méthode du code court
• Méthode d'enfichage
• Méthode directe d'ajout de boutons
• Conseils pour la conception et l'optimisation des boutons
• Questions fréquemment posées

1. ajouter des boutons WordPress à l'aide de shortcodes

Les shortcodes sont des bouts de code concis qui permettent d'intégrer des fonctionnalités complexes dans une page ou un article. Par exemple, les boutons de lien peuvent être rapidement créés et leur style personnalisé grâce aux shortcodes.

Étape 1 : Ajouter le shortcode du bouton

1. Connectez-vous au panneau d'administration de WordPress.
2. Aller à "état extérieur > Éditeur de fichiers de thèmes", trouver functions.php (fichier de thème). Si vous craignez que la modification des fichiers du thème n'affecte les mises à jour, utilisez l'option sous-thème ou des plug-ins personnalisés.

3. existent functions.php Ajoutez le segment de code suivant au fichier :

// Fonctions qui définissent les shortcodes des boutons
function custom_button_shortcode($atts) {
    // Définir les propriétés par défaut
    $atts = shortcode_atts(
        array(
            'url' => '#', // lien par défaut
            'text' => 'click me', // texte du bouton par défaut
            'class' => 'custom-button', // classe CSS par défaut
        ),
        $atts.
        'bouton'
    );
 
    // Retourne le code HTML du bouton
    return '' . esc_html($atts['text']) . '' ;
}
 
// Enregistrez le code court
add_shortcode('button', 'custom_button_shortcode') ;

Étape 2 : Définir le style du bouton

1. Aller à "état extérieur > personnalisation > CSS supplémentaire".

2. Ajoutez le CSS suivant :

.custom-button {
    display : inline-block ;
    padding : 10px 20px ;
    couleur de fond : #0073aa ;
    couleur : #fff.
    décoration du texte : aucune ;
    border-radius : 5px ;
    taille de la police : 16px ;
}

.custom-button:hover {
    couleur de fond : #005177.
}

Étape 3 : Utiliser des codes courts

Insérez le code court suivant à l'endroit où vous souhaitez que le bouton soit affiché (par exemple, sur une page, dans un message) :

[button url="https://example.com" text="En savoir plus" class="my-custom-class"]

Description du bien

• url: Le lien cible du bouton.
• texteTexte d'affichage de la touche : Texte d'affichage de la touche.
• classeClasse CSS personnalisée (peut être vide).

2. ajouter un shortcode de bouton WordPress à l'aide du plugin

Les plugins sont une solution pratique si vous n'êtes pas familier avec le codage. Voici les étapes détaillées pour ajouter un shortcode de bouton via un plugin.

Plug-ins recommandés: :Shortcodes WP

WP Shortcodes est un plugin puissant qui vous permet de créer rapidement des shortcodes pour des éléments tels que des boutons.

procédure

• Installation des plug-ins: :
  • Connectez-vous au tableau de bord de WordPress.
  • Recherche et installation Shortcodes WP pour l'activer.

• Bouton de configuration Code court: :
  • Ouvrez la page ou l'article auquel vous souhaitez ajouter un bouton.
  • Dans l'éditeur, recherchez le fichier bouton code court Icônes.
  • Sélectionnez "boutons"Le texte du bouton, le lien, la couleur, la taille, etc. sont configurés en fonction des besoins.

• Sauvegarde et prévisualisation: :
  • Une fois la configuration terminée, enregistrez la page et prévisualisez l'effet du bouton.

avantage

• Permet la visualisation sans avoir à écrire du code manuellement.
• Une large gamme de styles et de caractéristiques est disponible.

3. ajouter des boutons directement à l'aide de l'éditeur Gutenberg

L'éditeur Gutenberg dispose d'un module "bouton" intégré, qui est le moyen le plus direct de le faire sans plugins ou shortcodes supplémentaires.

déplacer

• Ouvrez l'éditeur: :
  • Créez ou modifiez des pages/postes.
  • Cliquez sur le bouton "+" pour ajouter un nouveau bloc.

• Ajouter un bloc de boutons: :
  • Recherchez le bloc "Bouton" et insérez-le.
  • Saisissez le texte du bouton et définissez le lien de destination.

• Styles de boutons personnalisés: :
  • Utilisez la barre d'outils pour définir la couleur, la taille, l'alignement, etc. des boutons.
  • Styles modifiables, par exemple boutons remplis, boutons avec contours.

• Sauvegarde et prévisualisation: :
  • Après avoir confirmé que vous êtes satisfait de l'apparence, enregistrez et publiez.

4. les techniques de conception et d'optimisation des boutons

Conception du texte d'un bouton

• Restez simple, par exemple "En savoir plus", "S'inscrire maintenant".
• Utilisez des verbes qui renforcent l'action, tels que "télécharger" et "commencer".

comparaison visuelle

• Les couleurs des boutons doivent contraster avec l'arrière-plan pour attirer l'attention.
• Il est recommandé d'utiliser une palette de couleurs propres à la marque, cohérente avec le style général du site.

cliquabilité

• Veillez à ce que les boutons soient suffisamment grands pour s'adapter aux appareils à écran tactile.
• Utilisez des coins arrondis pour améliorer le confort visuel.

Essais et optimisation

• Vérifiez l'affichage des boutons sur différents appareils (téléphones portables, tablettes, ordinateurs de bureau).
• Assurez-vous que les liens des boutons fonctionnent pour éviter les problèmes d'expérience utilisateur.

5. questions fréquemment posées

Puis-je ajouter des boutons au pied de page ou à la barre latérale ?

Oui, il est possible d'utiliser des shortcodes dans les widgets. Par exemple, définissez le code [bouton] Le code court est simplement inséré dans le widget de texte.

Les boutons peuvent-ils être appliqués à des types d'articles personnalisés ?

Vous pouvez. Il suffit d'insérer le shortcode dans le type d'article personnalisé et l'effet sera le même que pour un article/une page normal(e).

Comment puis-je personnaliser davantage le style des boutons ?

En ajoutant des feuilles de style CSS personnalisées, vous pouvez ajuster les couleurs des boutons, les polices, les effets d'animation et bien d'autres choses encore. Des modules d'extension prenant en charge les styles avancés sont également disponibles.