Ajouter un style personnalisé à Éditeur WordPress (manuel et via les plug – INS)

Une grande partie du succès de WordPress est qu’il facilite la création de contenu Web. Il n’y a rien de tel qu’un éditeur visuel. Il s’agit d’un outil puissant qui permet aux utilisateurs de créer facilement des blogs et des pages Web en utilisant un traitement de texte. Pour simplifier les choses, l’éditeur offre de nombreuses options de style aux utilisateurs de WordPress et aux propriétaires de sites Web. Que vous souhaitiez que votre contenu soit gras, oblique, souligné ou rayé, vous pouvez le faire en touchant le bouton. D’autres options de formatage sont disponibles. Mais parfois, même cela ne suffit pas. Si vous avez déjà eu besoin d’options de style personnalisées, telles que des boîtes de contenu, des CTA ou des boutons dans l’éditeur WordPress, vous n’êtes pas seul. C’est une exigence très courante. Une façon d’obtenir un style personnalisé est d’utiliser un éditeur de texte et de l’ajouter en ligne avec le code HTML et CSS. Cependant, si vous devez ajouter des formats supplémentaires régulièrement, parfois ce n’est pas nécessairement la meilleure solution. Dans ce cas, il est préférable de faire des styles personnalisés une partie permanente de l’éditeur WordPress.
Comment avez – vous fait? C’est le sujet de cet article. Ci – dessous, vous apprendrez comment ajouter des styles personnalisés en tant que menu déroulant à l’éditeur WordPress. Nous apprendrons d’abord comment l’exécuter manuellement, puis à travers le plug – in. Ensuite, nous examinerons des exemples et des idées sur la façon d’utiliser cette fonctionnalité. Cependant, gardez à l’esprit que le style du contenu Web est fait par CSS. Par conséquent, une connaissance pratique des opérateurs CSS est utile pour suivre et créer vos propres styles. Si vous êtes un débutant, vous pouvez toujours utiliser ce tutoriel, mais vous pourriez avoir besoin de plus de temps pour comprendre le code CSS ci – dessous.
Prêt.
Et Alors commençons à travailler. Comment ajouter manuellement des styles personnalisés à l’éditeur WordPress, comme promis précédemment, nous étudierons comment ajouter manuellement de nouveaux styles à l’éditeur. Pour ce faire, nous devons modifier certains fichiers de sujets. La première tâche consiste donc à sauvegarder les thèmes WordPress. Mieux encore, si vous ne l’avez pas encore fait, définissez un sous – thème afin que vous ne manquiez pas les changements apportés aux mises à jour du thème. Bien sûr, si vous avez déjà un sous – thème, sauvegardez – le aussi. Tout va bien? Alors commençons. Créer un menu déroulant de style personnalisé pour rendre les styles personnalisés disponibles dans l’éditeur WordPress, nous devons d’abord créer un nouveau menu déroulant dans l’éditeur. De cette façon, vous pouvez appliquer le format en quelques clics.
Pour créer un menu, il suffit d’ajouter le code suivant à la fonction. Php du sujet. Si vous le souhaitez, vous pouvez également ajouter du Code au site sous forme de plug – ins personnalisés. Quelle que soit l’option que vous choisissez, il est important que le Code y arrive. Ajouter _ style select button ($button)
Tableau _ unshift ($button, ‘Style Selection’);
Retour au bouton $;
}
Enregistrez nos rappels dans les filtres appropriés
Ajouter _ filter (‘MCE buttons 2’, ‘add style select buttons’); Ce code ajoute un bouton de menu déroulant appelé format dans l’éditeur WordPress. Il est livré avec de nombreuses nouvelles options de formatage. Lorsque vous créez des styles personnalisés, ils sont également affichés ici. Avec le Code actuel, vous devez ouvrir ce qu’on appelle un évier de cuisine pour voir le menu. C’est parce que nous l’avons relié à MCE _ buttons 2. Si vous voulez placer le menu sur la première ligne, vous pouvez changer le crochet en MCE \ u buttons \ u 1. Vous pouvez également l’insérer dans une nouvelle troisième ligne en utilisant les boutons MCE \ u \ u 3. Remplir le menu avec des options maintenant que nous avons le menu, il est temps de remplir le menu avec des options.
Ceci est également fait avec un code pratique: \/ \/ ajouter des styles personnalisés à l’éditeur WordPress
Fonction my _ Custom style ($init Array) {
$style _ formats = tableau
Ce sont des styles personnalisés
Transporteur (
« titre» = > « bouton Rouge»,
« bloc» = > « portée»,
« class» = > « Red button»,
\
()
Transporteur (
« titre» = > « bloc de contenu»,
« bloc» = > « portée»,
« classe» = > « bloc de contenu»,
\
()
Transporteur (
« titre» = > « stylo fluorescent»,
« bloc» = > « portée»,
« catégorie» = > « stylo fluorescent»,
\
()
);
Insérer un tableau codé json dans le format Style _ Format
$init _ Array [‘Style formats’] = json Encoding ($style formats);
Renvoie le tableau $init _ Array;
}
Lier le rappel à \
Ajouter un filtre (‘Tiny _ MCE before init’, ‘My Custom style’); Prenons le temps de comprendre ce qui se passe ici. Dans le fragment de code ci – dessus, nous avons créé trois styles personnalisés différents. En particulier, nous ajoutons des options pour créer un bouton rouge, une boîte de contenu et un stylo Fluorescent pour un paragraphe de texte.
Vous pouvez les trouver dans le tableau au milieu. Comme vous pouvez le voir, nous avons attribué à chaque option son propre titre, bloc, classe et wrapper. Voici ce qu’ils signifient: Title: title settings Custom style the name shown in the drop – down menu. Blocs: définit le type d’éléments de bloc à générer autour du texte mis en évidence, par exemple

, ,

. Les éléments de bloc existants dans la sélection sont remplacés par de nouveaux éléments. Catégorie – spécifie une ou plusieurs catégories pour l’élément sélectionné. La classe est utilisée pour appliquer un style css à un élément. Emballage: définition
Indique s’il faut ajouter un format de conteneur à un élément de bloc tel qu’un wrapper

Ou une offre en bloc. Vous pouvez également utiliser d’autres paramètres (disponibles dans WordPress Codex):
Inline: le nom de l’élément inline à ajouter à la sélection. Comme un bloc. Sélecteur – sélecteur CSS 3 pour appliquer une classe à un élément particulier ou à une chose complexe, comme une ligne impaire dans un tableau. Pour les applications de modélisation plus subtiles. Styles: vous permet d’ajouter directement des styles CSS en ligne. Pour ce faire, nous utilisons des classes CSS et des feuilles de style. Attribut: utilisé pour invoquer un nouvel attribut HTML et l’appliquer à l’élément sélectionné ou au nouvel élément inline \/ block. Précision: désactive la possibilité de fusionner des styles similaires lorsqu’ils sont utilisés. Il est utile pour certaines questions d’héritage CSS. Après avoir ajouté le code ci – dessus, les styles personnalisés doivent être visibles dans l’éditeur WordPress et vous pouvez déjà commencer à les assigner à votre projet. Cependant, il ne changera pas beaucoup tant que nous n’aurons pas défini le style css approprié. Heureusement, c’est exactement ce que nous allons faire ensuite. Ajouter un style css à une feuille de style pour voir les effets d’un style personnalisé, vous devez d’abord ajouter CSS à la Feuille de style du sujet. Dans notre cas, il en va de même:. Bouton rouge
Couleur de fond: # bc3315;
Rayon limite MOZ: 3px;
Rayon limite webkit: 3px;
Rayon de bord: 3px;
Bords: aucun;
Couleur: # FFF;
Affichage: verrouillage en ligne;
Curseur: pointeur;
Remplissage: 10px 30px;
Décoration textuelle: aucune;
}
– Oui. Bouton rouge: vol stationnaire
Couleur de fond: # e53f19;
}
– Oui. Bloc de contenu
Bord: 1px solide # EEE;
Remplissage: 10px;
Contexte: \ # CCC;
Flotteur: gauche;
Bord inférieur: 1,75 em;
Alignement du texte: centré;
}
– Oui. Blocs de contenu: après
Nettoyage: les deux;
}
– Oui. Stylo fluorescent
Couleur de fond: # ffff66;
Comme vous pouvez le voir, ces styles
Correspond exactement à la classe que nous avons précédemment assignée à la personnalisation. Après les avoir ajoutés au fichier de style. Le CSS de notre sujet actuel sera affiché au début du site. En gros, oui. Nous sommes sur le point de terminer notre travail d’ajout de styles personnalisés à l’éditeur WordPress. Toutefois, nous devons redoubler d’efforts si nous voulons vraiment faire de notre mieux. Actuellement, nous devons passer d’un éditeur à l’autre ou à l’aperçu de la page pour voir nos styles personnalisés. N’est – ce pas merveilleux si nous pouvons voir leurs effets dans l’éditeur? Je veux dire, après tout, c’est ce qu’on appelle \
Si vous n’avez pas encore cette fonctionnalité, vous pouvez implémenter le fichier vous – même. Tout ce que vous avez à faire est de créer un nouveau fichier texte et de changer son nom en style d’éditeur. CSS et copiez le style css personnalisé là. Ensuite, sauvegardez – le et téléchargez – le à la racine du thème ou du sous – thème. Tout ce que vous avez à faire maintenant est d’ajouter le code suivant à la fonction fichier. Php utilise un nouveau fichier pour le sujet: fonction Custom _ Editor styles () {
Ajouter _ Editor style (‘editor-styles.css’);
}
Ajouter _ action (‘init’, ‘Custom Editor style’); Ensuite, vous devriez être en mesure de voir les effets du nouveau style personnalisé directement dans l’éditeur WordPress. C’est tout. Vous pouvez maintenant officiellement ajouter des styles personnalisés à l’éditeur WordPress. Bien sûr, il y a plus de façons d’utiliser cette fonctionnalité (nous avons
Cliquez sur Ajouter un nouveau style en bas de l’écran. Cela vous donne de nombreuses options pour définir vos propres styles personnalisés. En gros, c’est la même chose que nous avons fait avec le Code, mais en utilisant un éditeur visuel. La plupart des options sont explicites: Titre: le nom du style personnalisé affiché dans l’éditeur WordPress. Type: Vous pouvez choisir ici si vous souhaitez créer un élément en ligne, un bloc ou un sélecteur. Valeur de type – la valeur à utiliser pour l’élément, comme span, DIV ou une autre valeur. Classe CSS: classe associée à un style personnalisé. Style CSS – le style directement assigné à l’élément (sans classe). Attributs: attributs HTML appliqués aux éléments sélectionnés. Comme précédemment, utilisez pour désactiver la fusion de balises CSS similaires. Wrapper: convertit le format actuel en conteneur pour les éléments de bloc tels que div. Delete: supprime le format de l’élément sélectionné. Le plug – in fournit également une description détaillée de chaque réglage. Lorsque vous avez terminé, cliquez sur enregistrer tous les paramètres au bas de la page. Ensuite, vous trouverez de nouveaux styles personnalisés dans l’éditeur WordPress, comme auparavant, et vous serez prêt à les utiliser. Du calme. Comme indiqué ci – dessus, il existe plusieurs plug – ins pour ce type de fonctionnalité. Voici quelques autres candidats pour ajouter des styles personnalisés à l’éditeur WordPress: Modifier WP: ajouter des options de formatage supplémentaires à l’éditeur, telles que la création de tables. Il permet également à l’utilisateur de créer des boutons et des colonnes. Bien que vous ne puissiez pas créer votre propre style, le plug – in offre d’autres options. Tinymce Advanced – similaire au plug – in ci – dessus. Il offre des options pour changer la police, la taille de la police, la couleur de fond, etc., mais vous ne pouvez pas créer la vôtre. Tinymce Custom Style – une autre option pour ajouter un style pers
Testez au besoin jusqu’à ce que vous soyez satisfait. Ces possibilités ne sont limitées que par votre expertise CSS. En plus, le ciel est la limite. Utilisez – vous des styles personnalisés sur votre site Web? Comment les mettre en œuvre? Y a – t – il des conseils, des plug – ins ou d’autres choses à ajouter? Veuillez nous le dire dans la section commentaires ci – dessous!