skip to Main Content

Comment Ajouter un menu déroulant comportant des styles CSS dans votre éditeur Visuel

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Dans ce tutoriel, vous apprendrez comment transformer facilement les liens textuels en boutons attrayants dans WordPress. En suivant ce guide de procédures, vous saurez comment ajouter un menu déroulant à l’éditeur visuel de WordPress qui vous permettra d’appliquer des styles CSS personnalisés au contenu de votre article.

Ces styles CSS personnalisés peuvent être appliqués au texte dans vos articles pour les décorer et les mettre en forme. Ils sont utilisés en grande partie pour créer des boutons attrayants et accrocheurs pour vos articles. Ce tutoriel couvrira également la création d’un bouton de styles CSS.

Si vous voulez un moyen facile d’ajouter des boutons attrayants dans les articles et pages, alors ce tutoriel est fait pour vous.

Le résultat final.

Le résultat final de ce tutoriel sera de vous permettre de sélectionner du texte dans votre article et ensuite lui appliquer un style via le menu déroulant de l’éditeur d’articles.

Une fois que nous aurons terminé, l’éditeur Visuel ressemblera à ceci et contiendra un élément « styles » sous la forme d’un menu déroulant :

How-To-Styles-01

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

How-To-Styles-02

Cette approche, non seulement économise votre temps lors de la création d’un article, mais permet  également à tous les contributeurs de votre blog d’être en mesure d’utiliser toujours les mêmes styles pour décorer des boutons ou tout autre élément des articles.

Consignes de sécurité.

Dans ce tutoriel nous allons édités les fichiers suivants :

  • fonctions.php
  • style.css

Ces deux fichiers font partie de votre thème, donc nous travaillerons avec les versions qui sont associés au thème actuellement actif sur votre blog. Tout d’abord, il est important de faire une copie de sauvegarde de ces fichiers au cas où quelque chose se passerait mal.

Deuxièmement, il est conseillé de créer un thème enfant de votre thème actuel. Si vous ne savez pas comment créer un thème enfant. L’utilisation d’un thème enfant, fera en sorte que votre thème actuel sera mis à jour. Il est également intéressant de souligner que si vous changer de thème, ces modifications seront perdues.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Cependant, si vous travaillez sur un blog en cours de développement ou une installation WordPress locale il n’est pas nécessaire de créer un thème enfant.

Ajout d’un élément « Styles » au Menu.

Le menu déroulant « styles » est en fait déjà une partie de l’éditeur Visuel de WordPress, mais il a été désactivé par défaut. Pour l’activer, vous avez juste besoin d’ajouter quelques codes au fichier fonctions.php de votre thème actuel.

Pour ouvrir le fichier et le modifier, aller sur le menu  » Apparence  »  ensuite cliquez sur « Éditeur » dans le sous-menu. Si vous avez une version anglaise Aller sur Appearance>Editor

How-To-Styles-03

Vérifiez d’abord que le thème utilisé actuellement par votre blog est sélectionné dans le menu déroulant en haut à droite de la page. Je suis actuellement entrain de modifier le fichier fonctions.php du thème Twenty Twelve mais pour vous, il pourrait s’agir d’un thème différent.

Ensuite cliquez sur le fichier fonctions.php de la liste des fichiers du côté droit de la page, pour commencer à le modifier. Copiez et collez le code suivant dans le fichier. Pour plus de commodité, je vous recommanderai de le coller à la fin du fichier, ainsi vous pourrez facilement garder une trace de ce que vous avez ajouté au fichier.

1
2
3
4
5
6
7
8
9
// 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

Une fois que le code a été ajouté au fichier, cliquez sur le bouton mise à jour pour enregistrer les modifications. Si tout va bien, vous devriez voir que le menu déroulant de sélection de styles  a été ajouté à l’éditeur visuel WordPress de articles.

Cependant, nous n’avons pas encore finis. Si vous examinez les éléments du menu sur cette nouvelle liste déroulante, vous remarquerez que ce sont des styles liés à l’éditeur Visuel des autres boutons.

Nous voulons Ajouter nos propres styles à la liste.

Créez les Styles CSS de vos boutons .

Dans ce tutoriel, nous allons créer un bouton pour nos liens texte, mais vous pourriez tout aussi facilement créer la décoration et la mise en forme pour tout autre type d’élément.

Maintenant nous allons créer des styles CSS pour les boutons. Vous pouvez soit créer votre propre CSS ou utiliser l’une des nombreuses applications en ligne Génératrice de bouton. CSS Button Generator (Générateur de bouton CSS) est un bon choix donc visiter le site et créer rapidement un bouton et puis copiez le CSS. Ensuite, allez sur « Apparence » puis sur « Editeur »  et cliquez sur le fichier style.css dans la liste des fichiers du côté droit. En anglais vous aurez Appearance > Editor page > style.css

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

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.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 */

Mettre à jour le fichier pour enregistrer les modifications.

Ajouter les Styles au Menu déroulant.

Maintenant, cliquez de nouveau sur le fichier fonctions.php  et collez-y le code ci-après au bas dudit fichier.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 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

Notez ces lignes à l’intérieur du tableau :

  • title – c’est le titre qui sera affiché sur le menu déroulant
  • selector – le « a » se réfère à l’ancre, signalant que ce style est fait pour les liens.
  • classes – c’est le nom de la classe de notre bouton CSS

Si vous avez utilisé votre propre CSS, alors le nom de la classe serait tout ce que vous avez donné comme nom à votre propre classe CSS. Dans l’exemple ci-dessus, le bouton style CSS s’appelle linkButton.

Une fois que vous y avez collé le code, cliquez sur le bouton mise à jour pour enregistrer les modifications. Dès que le fichier est enregistré, allez à l’éditeur de  posts WordPress et actualisez la fenêtre pour que les modifications puissent prendre effet. Cliquez ensuite sur le menu déroulant « Styles » et vous devriez voir une entrée intitulée « Linkbutton« .

 

How-To-Styles-05

Pour appliquer le style CSS et créer le bouton, il suffit de créer un lien texte dans votre article, sélectionnez le texte, et puis sélectionnez le style que vous voulez donner à votre bouton dans le menu. Les styles ne seront pas visibles dans la fenêtre de l’éditeur de articles. Vous devez prévisualiser l’article , qui devrait ressembler à ceci :

How-To-Styles-06

Maintenant chaque fois que vous aurez à insérer un bouton accrocheur et attrayant dans vos articles ou pages, il suffit de créer un lien texte et puis sélectionnez son style dans le menu déroulant.

Options avancées.

J’espère que vous pouvez penser à d’autres utilisations de cette fonctionnalité. Par exemple, vous pouvez ajouter des styles supplémentaires au menu. Il pourrait s’agir de la mise en forme de l’apparence du texte, ou toute autre chose que vous pouvez faire avec du CSS.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

Si vous souhaitez créer un style de bouton supplémentaire qui sera ajouté à la liste déroulante, il suffira simplement de créer une autre entrée dans le tableau (qui a été ajouté à fonctions.php) et modifier les lignes du titre et de la classe :

1
2
3
4
5
array(
'title' => Bigger Button',
'selector' => 'a',
'classes' => 'biggerButton',
),

Ensuite ajoutez un nouveau style CSS dans le fichier style.css. Si vous souhaitez créer des styles pour des éléments qui ne sont pas des liens alors vous pouvez aussi le faire. Cela nécessite un changement de la deuxième ligne en fonction de la zone où vous voulez appliquer le style.  

Raccourcis.

Si tout ce qui précède est de la grande théorie pour vous, néanmoins vous voulez un moyen plus rapide d’appliquer cette théorie sans avoir à  éditer le code, alors ces deux plugins pourrait vous intéresser :

Conclusion.

Maintenant, vous pouvez facilement créer de grands boutons de recherche dans WordPress simplement en sélectionnant une option dans un menu déroulant sur l’éditeur de posts WordPress.

Nous espérons que ce tutoriel vous a aidé à concevoir un sélecteur de styles dans votre éditeur de posts. Si nous avons omis certaines parties ou alors pensez apporter plus de précisions , n’hésitez pas à nous laisser vos commentaires dans la section réservée à ces derniers.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
11 Partages
Partagez10
Tweetez1
Enregistrer