Dans cet article, vous apprendrez à transformer facilement des liens de texte en boutons attrayants dans WordPress. En suivant ce guide, vous découvrirez comment ajouter un menu déroulant à l'éditeur visuel WordPress qui vous permet d'appliquer des styles CSS personnalisés au contenu de votre publication.

Ces styles CSS personnalisés peuvent être appliqués au texte de vos publications pour le décorer et le formater. Une grande utilité pour cela est de créer des boutons attrayants et accrocheurs pour vos publications. Ce guide couvrira également la génération des styles CSS des boutons. Si vous souhaitez ajouter facilement des boutons attrayants aux publications et aux pages, ce guide est fait pour vous.

Le résultat final

Le résultat final de ce guide pratique vous permettra de sélectionner du texte dans votre publication, puis de lui appliquer un style via le menu déroulant de l'éditeur de publication. C'est idéal pour créer le type de boutons que vous voyez ici sur WP Kube ainsi que pour ajouter tout autre type de formatage au contenu de votre publication.

Une fois que nous aurons terminé, l'éditeur visuel ressemblera à ceci et contiendra un élément de menu déroulant Styles :

Comment faire des styles 01

En utilisant le nouveau menu, il sera possible d'appliquer un style CSS à un lien texte dans votre message, afin de créer un effet de bouton sans utiliser d'images. Les liens pourraient ressembler à ceci, bien que l'apparence dépende de vous :

Comment faire des styles 02

Cette approche vous fait non seulement gagner du temps lors de la création d'un article, mais permet également à tous les contributeurs de votre blog d'utiliser systématiquement les mêmes styles pour décorer les boutons ou tout autre élément de l'article.

Précautions de sécurité

Dans ce tutoriel, nous allons éditer les fichiers suivants :

Ces deux fichiers font partie de votre thème, nous travaillerons donc avec les versions associées au thème actuellement actif sur votre site. Premièrement, il est important de faire une copie de sauvegarde de ces fichiers au cas où quelque chose tournerait mal.

Deuxièmement, il est bon de créer un thème enfant de votre thème actuel. Si vous ne savez pas comment créer un thème enfant, consultez ce guide de Rachel Adnyana. L'utilisation d'un thème enfant garantira que si vous mettez à jour votre thème actuel, ce que nous faisons dans ce didacticiel ne sera pas écrasé. Il convient également de souligner que si vous changez de thème, ces modifications seront perdues aussi.

Cependant, si vous travaillez sur un site de développement ou une installation locale de WordPress, il n'est pas entièrement nécessaire de créer un thème enfant.

Ajout de l'élément de menu Styles

L'élément de menu déroulant Styles fait déjà partie de l'éditeur visuel de WordPress, mais il a été désactivé par défaut. Pour l'activer, il vous suffit d'ajouter du code au fonctions.php fichier de votre thème actuel.

Pour ouvrir le fichier pour le modifier, vous pouvez accéder au menu Apparence, puis cliquer sur Éditeur dans le sous-menu.

Comment faire des styles 03

Vérifiez d'abord que le thème que votre site WordPress utilise actuellement est sélectionné dans le menu déroulant en haut à droite de la page. J'édite actuellement le fonctions.php fichier pour le thème Twenty Twelve mais pour vous, il peut s'agir d'un thème différent.

Comment faire des styles 04

Cliquez ensuite sur le fonctions.php fichier dans la liste de fichiers sur le côté droit de la page, pour commencer à éditer ce fichier.

Ensuite, copiez et collez le code suivant dans le fichier. Pour plus de commodité, je vous recommande de coller à la fin du fichier afin que vous puissiez facilement garder une trace de ce que vous avez ajouté au fichier.


// Enable the Styles dropdown menu item
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');
// end of part I

Référence : http://codex.wordpress.org/TinyMCE_Custom_Styles

Une fois le code ajouté au fichier, cliquez sur le bouton Mettre à jour le fichier pour enregistrer les modifications. Si tout s'est bien passé, vous devriez voir que le menu déroulant styleselect a été ajouté à l'éditeur de publication visuel WordPress.

Cependant, nous n'avons pas encore fini. Si vous regardez les éléments de menu de cette nouvelle liste déroulante, ce sont les styles connectés aux autres boutons de l'éditeur visuel. Nous voulons ajouter nos propres styles à la liste.

Création des styles CSS des boutons

Dans ce didacticiel, nous créons un bouton pour nos liens texte, mais vous pouvez tout aussi bien créer la décoration et la mise en forme de tout autre type d'élément de page.

Maintenant, nous devons créer les styles CSS pour le bouton. Vous pouvez soit créer votre propre CSS, soit utiliser l'une des nombreuses applications de générateur de boutons en ligne. Générateur de boutons CSS est un bon choix alors visitez le site et créez rapidement un bouton puis copiez le CSS ou utilisez l'exemple ci-dessous.

Retournez maintenant à la page Apparence > Éditeur et cliquez sur le style.css fichier dans la liste des fichiers sur le côté droit.

Encore une fois, faites défiler jusqu'à la fin du fichier et collez le bouton CSS ci-dessous ou utilisez votre propre CSS :

.linkButton {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#79bbff", endColorstr="#378de5");
background-color:#79bbff;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}

.linkButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#378de5", endColorstr="#79bbff");
background-color:#378de5;
}

.linkButton:active {
position:relative;
top:1px;
}

/* This button was generated using CSSButtonGenerator.com */

Mettez à jour le fichier pour enregistrer les modifications.

Ajout du style au menu déroulant

Cliquez maintenant sur le fonctions.php fichier à nouveau et collez le code ci-dessous au bas du fichier.

// Add the Button CSS to the Dropdown Menu
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {

// Define the style_formats array
$style_formats = array(

// Each array child is a format with it's own settings
array(
'title' => 'Link Button',
'selector' => 'a',
'classes' => 'linkButton',
),
);

// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}

// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
// end of part II

Remarquez ces lignes à l'intérieur du tableau :

  • titre – c'est le titre qui sera affiché dans le menu déroulant
  • sélecteur – le ‘a' fait référence à l'ancre, signalant que ce style est pour les liens
  • classes – c'est le nom de notre classe CSS de bouton

Si vous deviez utiliser votre propre CSS, l'entrée des classes serait ce que vous appelez votre propre classe CSS. Dans l'exemple ci-dessus cependant, le style CSS du bouton s'appelle linkButton.

Une fois que vous avez collé le code, cliquez sur le bouton Mettre à jour le fichier pour enregistrer les modifications. Une fois le fichier enregistré, accédez à l'éditeur de publication WordPress et actualisez la fenêtre pour que les modifications prennent effet. Cliquez maintenant sur le menu déroulant des styles et vous devriez voir une entrée intitulée Bouton de lien.

Comment faire des styles 05

Pour appliquer le style CSS et créer le bouton, il suffit créer un lien texte dans votre message, mettez le texte en surbrillance, puis sélectionnez le style Bouton de lien dans le menu. Les styles ne seront pas visibles dans la fenêtre de l'éditeur de publication. Vous devez prévisualiser le message pour voir la mise en forme, qui devrait ressembler à ceci :

Comment faire des styles 06

Désormais, chaque fois que vous avez besoin d'insérer un bouton accrocheur et attrayant dans vos publications ou vos pages, créez simplement un lien texte, puis sélectionnez ce style dans le menu déroulant.

Options avancées

J'espère que vous pouvez penser à d'autres utilisations intéressantes de cette fonctionnalité. Si vous le souhaitez, vous pouvez ajouter des styles supplémentaires au menu. Ceux-ci peuvent être pour différents styles de boutons, ou pour formater l'apparence du texte, ou toute autre chose que vous pouvez faire avec CSS.

Si vous souhaitez créer un style de bouton supplémentaire et l'ajouter au menu déroulant, créez simplement une autre entrée dans le tableau (qui a été ajoutée à fonctions.php) et modifiez les lignes de titre et de classes :

array(
'title' => Bigger Button',
'selector' => 'a',
'classes' => 'biggerButton',
),

Ajoutez ensuite un nouveau style CSS au style.css fichier. Si vous souhaitez créer des styles pour des éléments qui ne sont pas des liens, vous pouvez également le faire. Cela nécessite de modifier la deuxième ligne en fonction de la zone à laquelle vous souhaitez appliquer le style. Vous pouvez trouver plus d'informations sur cette page.

Raccourcis

Si tout ce qui précède semble bien en théorie, mais que vous souhaitez un moyen plus rapide de l'implémenter sans éditer de code, alors ces deux plugins pourraient vous intéresser :

Conclusion

Désormais, vous pouvez facilement créer de superbes boutons dans WordPress en sélectionnant simplement une option dans un menu déroulant de l'éditeur visuel de WordPress. Si vous rencontrez des difficultés ou avez des questions, laissez simplement un commentaire ci-dessous.

Laisser un commentaire