Créez et personnalisez vos propres boutons WordPress

par | décembre 26, 2020 | Wordpress

Vous avez du mal à créer un bouton de code court (short code) dans WordPress? Les boutons de code court (short code) sont très pratiques pour insérer rapidement des boutons élégants et accrocheurs dans votre contenu WordPress. Mais WordPress n’inclut aucune fonctionnalité pour créer un bouton shortcode par défaut .

Pour vous aider, nous allons vous montrer deux façons différentes de créer un bouton de code court dans WordPress.

Tout d’abord, nous allons vous montrer comment le faire en utilisant votre propre code. Ensuite, nous vous montrerons une méthode plus conviviale pour les débutants en utilisant un plugin.

Comment créer manuellement un bouton Short code dans WordPress avec du code ?

Cette méthode n’est pas très conviviale pour les débutants, nous ne la recommandons donc pas aux personnes sans au moins une compréhension de base du CSS.

En effet, bien que nous puissions vous donner l’extrait de code PHP exact dont vous avez besoin , vous devrez être en mesure de comprendre le CSS par vous-même pour que le bouton ressemble réellement à ce que vous voulez.

Si vous ne savez pas ce qu’est le CSS, vous devriez probablement passer à la méthode du plugin dans la section suivante.

Étape 1 : Ajouter le code PHP pour le bouton

Pour commencer, vous devez ajouter un extrait de code PHP qui crée le raccourci de votre bouton. Nous vous recommandons de placer ce code dans un plugin comme Code Snippets. Mais vous pouvez également utiliser le fichier functions.php de votre thème enfant :

   function custom_button_shortcode( $atts, $content = null ) {

   // shortcode attributes
   extract( shortcode_atts( array(
   ‘url’ => ”,
   ‘title’ => ”,
   ‘target’ => ”,
   ‘text’ => ”,
   ), $atts ) );

   $content = $text ? $text : $content;

   // Returns the button with a link
   if ( $url ) {

   $link_attr = array(
   ‘href’ => esc_url( $url ),
   ‘title’ => esc_attr( $title ),
   ‘target’ => ( ‘blank’ == $target ) ? ‘_blank’ : ”,
   ‘class’ => ‘custombutton’
   );

   $link_attrs_str = ”;

   foreach ( $link_attr as $key => $val ) {

   if ( $val ) {

   $link_attrs_str .= ‘ ‘ . $key . ‘=”‘ . $val . ‘”‘;

   }
   }
   return ‘<a’ . $link_attrs_str . ‘>’ . do_shortcode( $content ) . ‘’;
   }

   // Return as span when no link defined
   else {

   return ‘’ . do_shortcode( $content ) . ‘’;

   }
   }
   add_shortcode( ‘custombutton’, ‘custom_button_shortcode’ );

Ce code crée un nouveau code court [bouton personnalisé]. Lorsque vous utilisez ce raccourci, vous pouvez spécifier un lien et un titre (ainsi que la possibilité de ne pas l’ouvrir dans un nouvel onglet). Ensuite, vous pouvez donner un style au bouton en utilisant la classe CSS du bouton personnalisé.
shortcode-bouton

Comment créer un bouton de code court dans WordPress avec Forget About Shortcode.

Le plugin Forget About Shortcode (FASC) Buttons pour WordPress est un moyen visuel d’ajouter des boutons dans l’écran de l’éditeur de messages. Au lieu d’ajouter des raccourcis dans l’éditeur de messages, vous insérez de véritables boutons stylisés – ce qui rend le processus d’ajout de boutons à vos messages et pages beaucoup plus naturel tout en améliorant l’apparence et la convivialité de l’éditeur de messages.

FASC Buttons essaie d’être aussi propre que possible avec le html, en n’utilisant que les attributs de données pour les fonctionnalités nécessaires – les boutons que vous utilisez dans l’éditeur de messages utilisent exactement les mêmes classes que sur le début de votre site, sans balisage supplémentaire ou caché pour les faire se comporter de cette façon.

L’édition d’un bouton ne pourrait pas être plus facile – il suffit de double-cliquer sur un bouton et un panneau d’options apparaît, vous permettant de reconfigurer complètement le bouton actuel – cela évite les raccourcis fastidieux et l’utilisation d’une syntaxe précise !

Téléchargez le document à partir du dépôt de plugins WordPress :

Comment l’utiliser

Une fois le plugin téléchargé et installé sur votre site WordPress, vous trouverez un nouveau bouton dans la barre d’outils de votre écran d’édition. Une fenêtre contextuelle s’affichera alors pour vous permettre de créer un nouveau bouton dans votre article/page. Créez votre bouton, cliquez sur “Envoyer” et c’est tout ! Vous pourrez voir votre nouveau bouton dans l’éditeur de messages comme vous le feriez sur le site – et si vous n’êtes pas satisfait, double-cliquez simplement sur l’un des boutons que vous avez créés pour l’éditer 🙂

Exigences de WordPress

Ce plugin ne fonctionnera qu’avec  WordPress 3.9 et plus .

Cela est dû au fait que ce plugin utilise la nouvelle fonctionnalité de l’éditeur TinyMCE fourni avec WP 3.9 – je ne serai donc pas en mesure de prendre en charge les versions de WP avant cela.

Latest posts

Les meilleurs hébergeurs pour WordPress

Les meilleurs hébergeurs pour WordPress

Les meilleurs hébergeurs pour WordPress et Woocommerce Si vous êtes à la recherche d’un hébergement de qualité pour votre site WordPress ou votre boutique WooCommerce, alors vous êtes au bon endroit  ! Nous allons passer en revue les meilleurs hébergements français,...

Comment trouver le meilleur thème WordPress ?

Comment trouver le meilleur thème WordPress ?

10 points à considérer avant de choisir un thème WordPress pour votre site web Choisir le bon thème WordPress est une étape difficile Lorsque vous commencez votre recherche, vous pouvez être submergé par le nombre apparemment infini de thèmes gratuits ou payants...

0 commentaires