Jetez un œil à votre éditeur visuel WordPress. Il existe des options standard pour le formatage et le style de votre contenu, mais pas beaucoup en termes de personnalisation pour donner à vos articles et pages un aspect un peu sophistiqué.

Maintenant, vous savez peut-être que vous avez la possibilité de faire des allers-retours entre les éditeurs de texte et visuel de WordPress pour ajouter du CSS pour créer des éléments tels que des boutons et des blocs de texte, mais c’est pénible, et si vous ne l’avez pas beaucoup d’expérience dans l’édition de code, l’éditeur de texte semble un peu intimidant.

Ne serait-il pas plus simple si vous pouviez créer vos propres styles personnalisés, les placer dans un menu déroulant de l’éditeur WordPress et choisir de les utiliser chaque fois que vous en avez besoin? Oui, c’est beaucoup plus facile, nous voulons donc expliquer comment procéder ici. Gardez à l’esprit que même si nous essayons de rendre ce processus aussi simple que possible, il est utile d’avoir un peu de connaissances CSS si vous souhaitez découvrir tous les avantages des styles personnalisés.

Voyons comment ajouter des styles personnalisés à l’éditeur visuel WordPress.

Ajouter des styles personnalisés à l’éditeur visuel WordPress en ajoutant du code

Cette première option nécessite que vous sachiez un peu comment incorporer et modifier le CSS, mais je vais vous donner un petit aperçu pour vous aider à apprendre les bases afin que vous puissiez utiliser ces connaissances à l’avenir. C’est une bonne option si vous ne voulez pas alourdir votre site avec un plugin.

Le but est d’ajouter un nouveau menu déroulant qui inclut des styles personnalisés dans votre éditeur visuel WordPress, ce qui vous permet de sélectionner des éléments dans votre éditeur, puis de leur appliquer des styles personnalisés. Si vous développez un nouveau thème, localisez votre functions.php et placez le code ci-dessous dans ce fichier ou si vous travaillez avec un thème déjà intégré, collez ce code dans le fichier functions.php d’un thème enfant.

function myprefix_mce_buttons_1( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );

Revenez à l’éditeur dans l’un de vos articles WordPress et vous devriez maintenant voir un nouveau bouton «Formats» dans la rangée supérieure de l’éditeur. Remarquez comment nous nous sommes accrochés aux «mce_buttons_1? Cela place le bouton du menu des formats dans la première ligne de l’éditeur mce. Vous pouvez également utiliser le filtre «mce_buttons_2» pour le placer dans la deuxième ligne ou «mce_buttons_3» pour le placer dans la 3e ligne.

Donc, maintenant que vous avez activé l’élément de menu, il est temps d’ajouter vos styles personnalisés à utiliser dans vos publications. Prenez le code ci-dessous et collez-le dans votre functions.php fichier qui ajoutera 2 nouveaux styles à la liste déroulante Formats – “Bouton Thème” et “Surlignage”.

/**
 * Add custom styles to the mce formats dropdown
 *
 * @url https://codex.wordpress.org/TinyMCE_Custom_Styles
 *
 */
function myprefix_add_format_styles( $init_array ) {
    $style_formats = array(
        // Each array child is a format with it's own settings - add as many as you want
        array(
            'title'    => __( 'Theme Button', 'text-domain' ), // Title for dropdown
            'selector' => 'a', // Element to target in editor
            'classes'  => 'theme-button' // Class name used for CSS
        ),
        array(
            'title'    => __( 'Highlight', 'text-domain' ), // Title for dropdown
            'inline'   => 'span', // Wrap a span around the selected content
            'classes'  => 'text-highlight' // Class name used for CSS
        ),
    );
    $init_array['style_formats'] = json_encode( $style_formats );
    return $init_array;
} 
add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );

Vous pouvez modifier les titres pour afficher différents noms dans votre menu déroulant, ajouter / supprimer des éléments du tableau, etc. Vous pouvez modifier à peu près tout dans ce code pour révéler vos propres styles de format personnalisés, assurez-vous de vérifier le Codex WordPress pour une explication plus approfondie des paramètres acceptés et des valeurs de retour.

Maintenant que vous avez de nouveaux styles, vous pouvez mettre en évidence le contenu dans votre éditeur et appliquer les styles. Remarquez, comment le format “Bouton de thème” a un paramètre de sélecteur? Cela signifie que le style ne peut être appliqué qu’à ce sélecteur spécifique (dans ce cas, la balise «a» ou «link»). Le deuxième format que nous avons ajouté «Highlight» n’a pas de paramètre de sélecteur mais plutôt un paramètre «inline» qui lui dit d’appliquer le style à tout texte que vous avez mis en surbrillance dans votre éditeur et de l’envelopper dans une étendue avec votre nom de classe unique. Vous pouvez voir un exemple de notre thème WordPress Total sur la façon dont nous avons utilisé les formats afin que les utilisateurs puissent facilement appliquer une liste de contrôle regardez toutes les puces dans l’éditeur.

liste de contrôle

Vous pouvez désormais utiliser vos formats personnalisés, mais ils ne seront pas différents tant que vous n’aurez pas ajouté du CSS personnalisé à votre site pour les styliser. Vous devez localiser la feuille de style de votre thème (si vous créez le vôtre) ou du thème enfant et coller le code CSS suivant dans le fichier.

.theme-button {
    display: inline-block;
    padding: 10 15px;
    color: #fff;
    background: #1796c6;
    text-decoration: none;
}
.theme-button:hover {
    text-decoration: none;
    opacity: 0.8;
}
.text-highlight {
    background: #FFFF00;
}

Maintenant, cela va ajouter du style à vos nouveaux formats pour le front-end afin qu’une fois appliqué, vous puissiez les voir en direct. Yay! Mais ne serait-il pas agréable de voir également vos styles dans l’éditeur réel lorsqu’ils sont appliqués? Pour ce faire, vous devrez utiliser la fonction «feuille de style de l’éditeur» dans WordPress. Si vous créez votre propre thème, vous voudrez créer un nouveau fichier css dans votre thème appelé “editor-style.css” (vous pouvez le nommer comme vous voulez, assurez-vous simplement de modifier l’extrait ci-dessous en conséquence) avec le CSS personnalisé ajouté pour vos formats, puis ajoutez la fonction ci-dessous pour le charger dans le backend.

function myprefix_theme_add_editor_styles() {
    add_editor_style( 'editor-style.css' );
}
add_action( 'init', 'myprefix_theme_add_editor_styles' );

Si vous travaillez avec le thème de quelqu’un d’autre, vous devrez l’ajouter dans votre thème enfant, assurez-vous simplement de lui donner un nom unique afin qu’il n’entre pas en conflit avec votre thème parent ou si votre thème parent a déjà un fichier CSS pour l’éditeur, vous pouvez réellement le copier et le coller dans votre thème enfant (sans ajouter le code PHP ci-dessus) puis ajouter votre nouveau CSS car WordPress vérifiera d’abord le thème enfant avant de charger le fichier CSS de l’éditeur du thème parent et s’il le localise, il le fera chargez-le plutôt à partir du thème enfant.

Ajouter des styles personnalisés à l’éditeur visuel WordPress avec un bon plugin

Si vous n’avez pas le temps de jouer avec le code, ou si vous ne pouvez pas comprendre vous-même, il y a de bonnes nouvelles. Il existe un plugin qui vous permet de compléter exactement ce que nous venons de faire ci-dessus sans avoir à vous soucier du code.

Plugin de styles personnalisés TinyMCE

Recherchez, installez et activez simplement le Plugin de styles personnalisés TinyMCE et activez-le sur votre site WordPress.

Paramètres de styles personnalisés TinyMCE

Aller à Paramètres> Styles professionnels TinyMCE sur le côté gauche de votre tableau de bord WordPress. C’est ici que vous modifiez vos paramètres pour le plugin.

Paramètres de styles personnalisés TinyMCE

Le plugin vous permet de choisir où se trouvent vos feuilles de style ou où vous souhaitez les placer. Il est recommandé de créer un nouveau répertoire personnalisé. Sélectionnez la troisième option et donnez un nom à votre répertoire, puis descendez de la page pour cliquer sur votre Enregistrer les paramètres option avant de passer à l’étape suivante.

Styles personnalisés TinyMCE Ajouter un nouveau

Une fois que vous avez enregistré les paramètres, faites défiler vers le bas pour sélectionner le bouton Ajouter un nouveau style.

Options de styles personnalisés TinyMCE

C’est ici que vous personnalisez à quoi vous voulez que vos styles personnalisés ressemblent. Il s’agit essentiellement d’un simple éditeur Web qui génère le code CSS pour vous. Tapez un titre pour ce que vous souhaitez afficher dans le menu déroulant. Choisissez si vous souhaitez un sélecteur, un type en ligne ou un type de bloc. N’hésitez pas à utiliser la capture d’écran ci-dessus pour remplir les classes et les styles CSS, ou créez les vôtres en fonction de ce que vous prévoyez d’utiliser le menu déroulant. Une fois terminé, cliquez sur Enregistrer les paramètres en bas de la page.

Format des styles personnalisés TinyMCE

Il est maintenant temps de voir à quoi ressemble le nouveau style personnalisé dans votre éditeur. Ouvrez un nouvel article ou une nouvelle page et recherchez le menu déroulant Formats sur le côté gauche de l’éditeur visuel. Il apparaît dans la deuxième ligne. Une fois que vous avez cliqué sur le menu déroulant, il révélera le nouveau style que vous venez de créer.

Format de styles personnalisés TinyMCE utilisé

Cliquez sur l’option Big Blue Button, ou sur ce que vous avez créé, pour le voir révélé dans votre éditeur. Pour l’utiliser, mettez simplement en surbrillance le texte que vous souhaitez mettre en forme, puis cliquez sur votre option et le tour est joué!

Conclusion

C’est tout pour le moment! Vous pouvez toujours en savoir plus sur l’utilisation de nouveaux styles en consultant le Page de codex WordPress dédié à ce sujet.

Faites-nous savoir dans la section commentaires si vous avez des questions sur la façon d’ajouter des styles personnalisés à l’éditeur visuel WordPress. Et n’hésitez pas à partager tous les styles inhabituels que vous avez créés pour rendre votre site un peu plus joli!

Share: