Haben Sie sich jemals gewünscht, Sie könnten Ihre eigenen Formatierungsbuttons in WordPress erstellen, wie einen speziellen Notizstil oder ein Marken-Zitatformat? Genau das tun benutzerdefinierte Stile.
Ich habe beträchtliche Zeit damit verbracht, verschiedene Ansätze für benutzerdefinierte Stile in WordPress zu testen, von einfachen CSS-Ergänzungen bis hin zu fortgeschritteneren Lösungen.
Diese Erfahrung hat mir geholfen, die praktischsten Wege zu identifizieren, um Ihren Editor mit benutzerdefinierten Formatierungsoptionen zu verbessern, die jeder in Ihrem Team nutzen kann.
Heute führe ich Sie durch den Prozess, wie Sie benutzerdefinierte Stile zu Ihrem visuellen Editor von WordPress hinzufügen. Sie erfahren, was benutzerdefinierte Stile sind, warum sie nützlich sind und erhalten Schritt-für-Schritt-Anleitungen zum Hinzufügen zu Ihrer Website, alles basierend auf meinen realen Testerfahrungen.✨
💡Kurze Zusammenfassung: Der beste Weg, benutzerdefinierte Stile hinzuzufügen
Der effektivste Weg, benutzerdefinierte Stile zum WordPress Block-Editor hinzuzufügen, ist die Einbindung eines PHP-Code-Snippets auf Ihrer Website. Dies ermöglicht es Ihnen, neue Stilvarianten für Blöcke wie Schaltflächen, Überschriften und Zitate zu registrieren.
Für die sicherste und einfachste Methode empfehle ich die Verwendung des WPCode Plugins, um den Code einzufügen. Dies vermeidet das Risiko, die functions.php Datei Ihres Themes direkt zu bearbeiten.
Hier ist eine kurze Übersicht darüber, was ich in diesem Artikel behandeln werde:
- Was sind benutzerdefinierte Stile und wie sie die Art und Weise ändern können, wie Sie WordPress verwenden
- So fügen Sie benutzerdefinierte Stile zum visuellen Editor von WordPress (Block-Editor) hinzu
- Bonus: So fügen Sie benutzerdefinierte Stile zu WordPress-Widgets hinzu
- Häufig gestellte Fragen zu benutzerdefinierten Stilen
Tauchen wir jetzt ein!
Was sind benutzerdefinierte Stile und wie sie die Art und Weise ändern können, wie Sie WordPress verwenden
Einfach ausgedrückt ist ein benutzerdefinierter Stil eine vordefinierte Formatierungshilfe im WordPress-Editor.
Er löst das Problem der manuellen Anpassung von Schriftarten, Farben und Layouts jedes Mal, wenn Sie Inhalte erstellen, was zeitaufwendig sein und zu Inkonsistenzen führen kann.
Zum Beispiel können Sie eine benutzerdefinierte Schriftart für Überschriften erstellen, eine Hintergrundfarbe für Hervorhebungsfelder wählen oder einen konsistenten Stil für Testimonials anwenden.
Stellen Sie es sich als eine Vorlage für Designelemente vor. Anstatt jedes Mal manuell Abstände, Schriftarten oder Farben anzupassen, wählen Sie Ihren benutzerdefinierten Stil aus und er wendet sofort Ihr bevorzugtes Design an.
Nehmen wir zum Beispiel an, Sie betreiben einen Business-Blog und fügen am Ende Ihrer Beiträge immer eine Produktempfehlung oder einen Haftungsausschluss ein. Anstatt ihn jedes Mal zu formatieren, könnten Sie einen benutzerdefinierten Stil namens 'Produkthinweis' oder 'Wichtiger Hinweis' erstellen und ihn sofort anwenden.
Dies spart Ihnen Zeit und sorgt dafür, dass alles poliert bleibt, insbesondere wenn Sie mit einem Team arbeiten oder viele Inhalte veröffentlichen.
Nichtsdestotrotz werfen wir einen Blick darauf, wie Sie dem visuellen Editor von WordPress ganz einfach benutzerdefinierte Stile hinzufügen können.
So fügen Sie benutzerdefinierte Stile zum visuellen Editor von WordPress (Block-Editor) hinzu
Wenn Sie benutzerdefinierte Stile im Block-Editor hinzufügen möchten, ist die effektivste Methode die Verwendung von PHP-Code. Beachten Sie jedoch, dass dieser Ansatz am besten für fortgeschrittene WordPress-Benutzer geeignet ist.
Das liegt daran, dass Sie die Datei functions.php Ihres Themes bearbeiten müssen, und selbst der kleinste Fehler kann Ihre Website lahmlegen. Das gesagt, Sie können ein anfängerfreundliches Plugin verwenden, um den Prozess zu vereinfachen.
Ich empfehle immer WPCode für diese Art von Anpassung. Meiner Meinung nach ist es das beste WordPress-Code-Snippet-Plugin auf dem Markt. Ich habe es gründlich getestet und festgestellt, dass es der einfachste und sicherste Weg ist, benutzerdefinierten Code ohne Fehlerrisiko hinzuzufügen.
Um mehr zu erfahren, lesen Sie die vollständige WPCode-Bewertung meines Teams.
📌 Wichtiger Hinweis: Unabhängig von Ihrem Kenntnisstand empfehle ich immer, ein vollständiges Backup Ihrer Website zu erstellen, bevor Sie an wichtigen Codes herumfummeln. Sehen Sie sich unseren Leitfaden zur Sicherung Ihrer WordPress-Website an, um Anweisungen zu erhalten, wie Sie dies tun können.
Beachten Sie, dass der von mir verwendete Code-Snippet standardmäßig so eingerichtet ist, dass er benutzerdefinierte Stile für den Button-Block hinzufügt. Aber mit nur wenigen kleinen Anpassungen können Sie ihn problemlos verwenden, um andere Blöcke zu unterstützen, wie zum Beispiel:
- 🔷 Überschriften mit ausgefallenen oder umrandeten Stilen
- 💬 Zitat-, Pullquote- und Vers-Blöcke
- 🗂️ Archiv- oder Kategorie-Blöcke
- ➕ Und mehr
Dies gibt Ihnen viel Flexibilität, um wiederverwendbare Stile für Ihre gesamte Website zu entwerfen.
Zuerst müssen Sie das WPCode Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie unseren Anfängerleitfaden zur Installation eines WordPress-Plugins.
📌 Hinweis: WPCode bietet auch einen kostenlosen Plan an. Ein Upgrade auf die Pro-Version bietet Ihnen jedoch Zugriff auf Funktionen wie eine Cloud-Bibliothek von Code-Snippets, die Block-Snippet-Funktion, intelligente bedingte Logik und mehr.
Sobald Sie das Plugin aktiviert haben, gehen Sie im Dashboard zu der Seite Code Snippets » + Snippet hinzufügen . Klicken Sie hier auf die Schaltfläche „Snippet verwenden“ unter der Option „Eigene Codes hinzufügen (Neues Snippet)“.
Dies führt Sie zur Seite „Benutzerdefiniertes Snippet erstellen“, auf der Sie Ihrem Code-Snippet einen Namen geben müssen. Dieser Name dient nur Ihrer Identifizierung und wird keinen Benutzern angezeigt.
Wählen Sie dann PHP-Snippet aus dem erscheinenden Prompt aus, nachdem Sie auf die Option „Code-Typ“ in der rechten Ecke geklickt haben.
Wenn Sie danach einen benutzerdefinierten Stil für eine Schaltfläche erstellen möchten, fügen Sie den folgenden benutzerdefinierten Code in das Feld „Code-Vorschau“ ein.
// Function to enqueue and register styles for both frontend and editor
function my_custom_button_styles() {
// Register the style only once
wp_register_style(
'my-custom-button-styles',
false
);
// Add inline styles
wp_add_inline_style(
'my-custom-button-styles',
<<<CSS
.is-style-fancy-button .wp-block-button__link {
background-color: #f0c040;
color: #fff;
border: none;
border-radius: 15px;
padding: 10px 20px;
}
.is-style-outline-button .wp-block-button__link {
background-color: transparent;
color: #333;
border: 2px solid #333;
border-radius: 5px;
padding: 10px 20px;
}
CSS
);
// Enqueue the style for both frontend and editor
wp_enqueue_style('my-custom-button-styles');
}
// Function to add custom styles for Gutenberg editor
function my_custom_gutenberg_button_styles() {
// Call the general styles function for the editor
my_custom_button_styles();
// Enqueue inline script for the editor to register block styles
wp_add_inline_script(
'wp-blocks',
<<<JS
wp.domReady(function() {
wp.blocks.registerBlockStyle('core/button', {
name: 'fancy-button',
label: 'Fancy Button'
});
wp.blocks.registerBlockStyle('core/button', {
name: 'outline-button',
label: 'Outline Button'
});
});
JS
);
}
// Hook the styles function to frontend
add_action('wp_enqueue_scripts', 'my_custom_button_styles');
// Hook the custom block style registration
add_action('enqueue_block_editor_assets', 'my_custom_gutenberg_button_styles');
Dieser Code-Schnipsel fügt dem Buttons-Block in WordPress zwei benutzerdefinierte Stile hinzu.
Das Tolle daran ist, dass Sie diesen Code auch anpassen können, um Stile für andere Blöcke zu erstellen. Dies erfordert jedoch etwas mehr als nur das Austauschen des Wortes „Button“. Damit es richtig funktioniert, müssen Sie zwei Schlüsselteile des Codes aktualisieren:
- Der Blockname (Slug): Im JavaScript-Teil des Codes finden Sie
'core/button'. Dies ist der offizielle Name für den WordPress-Button-Block. Sie müssen dies durch den Slug des Blocks ersetzen, den Sie gestalten möchten (z. B.'core/heading'). - Die CSS-Selektoren: Der CSS-Code (wie
.is-style-fancy-button .wp-block-button__link) ist speziell für die HTML-Struktur des Button-Blocks geschrieben. Andere Blöcke haben eine andere Struktur, daher müssen Sie neue CSS-Regeln schreiben, um sie korrekt anzusprechen.
Sie können das CSS auch anpassen, um die Hintergrundfarbe zu ändern, den Randradius anzupassen und andere Stiländerungen vorzunehmen, die Ihren Bedürfnissen entsprechen.
💡 Experten-Tipp: Wenn Sie zögern, den Code selbst anzupassen, kann ein KI-Assistent wie ChatGPT ein guter Ausgangspunkt sein. Um den korrekten Code zu erhalten, müssen Sie ihm jedoch eine sehr klare und detaillierte Aufforderung geben.
Anstatt einer einfachen Anfrage könnten Sie zum Beispiel eine Aufforderung wie diese geben:
Here is a PHP, CSS, and JS snippet that adds custom styles to the 'core/button' block in WordPress. Please adapt it to target the 'core/heading' block instead. The new style should be named 'Green Highlight' and it should add a light green background color.
Allerdings empfehle ich immer, den von KI generierten Code auf einer Staging-Umgebung zu testen, bevor Sie ihn zu Ihrer Live-Website hinzufügen. So können Sie potenzielle Fehler ohne Risiko erkennen.
Schalten Sie nun den Schalter 'Inaktiv' auf 'Aktiv'.
Klicken Sie abschließend auf die Schaltfläche „Snippet speichern“, um Ihre Änderungen zu speichern.
Öffnen Sie als Nächstes einen Beitrag im Block-Editor und fügen Sie den Block hinzu, für den Sie benutzerdefinierte Stile hinzugefügt haben.
Wenn Sie beispielsweise benutzerdefinierte Stile für den Buttons-Block hinzugefügt haben, fügen Sie ihn in Ihren Beitrag ein.
Sobald Sie das getan haben, sehen Sie die benutzerdefinierten Stile im Abschnitt „Stile“ im Block-Panel.
Klicken Sie danach auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen zu speichern.
Besuchen Sie dann Ihre WordPress-Website, um die benutzerdefinierten Stile in Aktion zu sehen.
Bonus: So fügen Sie benutzerdefinierte Stile zu WordPress-Widgets hinzu
Nachdem Sie nun gelernt haben, wie Sie benutzerdefinierte Stile zum visuellen Editor von WordPress hinzufügen, sehen wir uns eine weitere nützliche Anpassung an: das Hinzufügen benutzerdefinierter Stile zu WordPress-Widgets.
Das Anpassen von Widgets mit einzigartigen Farben, Schriftarten oder Layouts hilft sicherzustellen, dass sie zum Gesamtdesign Ihrer Website passen und die Benutzererfahrung verbessern.
Der einfachste Weg, benutzerdefinierte Stile zu WordPress-Widgets hinzuzufügen, ist die Verwendung eines CSS-Code-Snippets, das Sie mit einem Plugin wie WPCode hinzufügen können.
Sie können einfach benutzerdefiniertes CSS hinzufügen, das auf bestimmte Widgets abzielt und Dinge wie Schriftgrößen, Hintergrundfarben, Abstände und sogar Rahmen anpasst.
Dies ist perfekt, um sicherzustellen, dass Ihre Widgets zu Ihrem Gesamtdesign passen, ohne zu technisch werden zu müssen.
Um loszulegen, sehen Sie sich unser Tutorial an, wie Sie benutzerdefinierte Stile zu WordPress-Widgets hinzufügen können: So fügen Sie benutzerdefinierte Stile zu WordPress-Widgets hinzu.
Häufig gestellte Fragen zu benutzerdefinierten Stilen
Hier sind einige Fragen, die unsere Leser häufig zum Hinzufügen benutzerdefinierter Stile zum visuellen Editor von WordPress gestellt haben:
Kann ich benutzerdefinierte Stile hinzufügen, ohne ein Plugin zu verwenden?
Ja, es ist möglich, den Code direkt in die functions.php-Datei Ihres Themes einzufügen. Ich rate jedoch dringend von dieser Methode für Anfänger ab.
Ein kleiner Fehler in dieser Datei kann Ihre Website lahmlegen, und Ihre Anpassungen gehen bei einem Theme-Update verloren. Die Verwendung von WPCode ist der sicherste und zuverlässigste Ansatz.
Funktionieren diese benutzerdefinierten Stile mit jedem WordPress-Theme?
Im Allgemeinen ja. Der in diesem Tutorial verwendete Code registriert Stile beim Kerneditor von WordPress, sodass er mit jedem modernen, gut codierten Theme kompatibel sein sollte.
In seltenen Fällen kann ein Theme mit sehr aggressivem oder schlecht geschriebenem CSS Ihre benutzerdefinierten Stile überschreiben, aber das ist nicht üblich.
Wie finde ich den richtigen Namen (Slug) für andere Blöcke, die ich gestalten möchte?
Eine einfache Möglichkeit, den Slug eines Blocks zu finden, besteht darin, in den WordPress-Editor zu gehen, den gewünschten Block auszuwählen und dann auf das Drei-Punkte-Menü in der Block-Symbolleiste zu klicken.
Klicken Sie ganz unten in diesem Menü auf 'Blocktyp kopieren'. Dadurch wird der Slug des Blocks (z. B. core/image, core/quote) in Ihre Zwischenablage kopiert, den Sie dann in das Code-Snippet einfügen können.
Kann ich mehr als zwei benutzerdefinierte Stile für denselben Block erstellen?
Absolut. Im JavaScript-Teil des Code-Snippets können Sie die Funktion wp.blocks.registerBlockStyle(...) einfach für jeden neuen Stil duplizieren, den Sie hinzufügen möchten.
Stellen Sie einfach sicher, dass Sie jedem einen eindeutigen Namen und ein eindeutiges Label geben. Sie müssen auch entsprechende CSS-Regeln für jeden neuen Stil hinzufügen, den Sie registrieren.
Ich hoffe, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie benutzerdefinierte Stile im visuellen Editor von WordPress hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden für Anfänger lesen, wie Sie einen benutzerdefinierten WordPress-Block erstellen (wie Sie einen benutzerdefinierten WordPress-Block erstellen) und unseren Vergleich von Padding und Margin in WordPress.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Toufic Ahemmed
Diese Leute sind großartig. Sie helfen mir meistens. Vielen, vielen Dank.
WPBeginner Support
Glad we could help
Admin
Aslan French
Dieser Artikel sollte im Hinblick auf Gutenberg aktualisiert werden, da diese Art von Funktionalität kürzlich zur Rich-Text-API hinzugefügt wurde.
WPBeginner Support
Hallo Aslan,
Danke für den Vorschlag. Wir werden uns ältere Artikel ansehen, sobald Gutenberg verfügbar ist.
Admin
Mehrdad
Vielen Dank.
Dieser Artikel hat mir wirklich geholfen.
sabbi
Dies fügt Klassen zu einem p-Tag hinzu, nicht wahr?
Gibt es eine Möglichkeit, eigene Tags zu erstellen?
Oder noch etwas: überschreibt ein gewähltes benutzerdefiniertes Format einen zuvor gewählten h-Tag mit einem p? Dies wäre notwendig, um zu verhindern, dass ein Kunde in Schwierigkeiten gerät, wenn er in den Standard- UND benutzerdefinierten Stilen herumklickt.
Britany
Leider hat mir das überhaupt nicht geholfen. Gibt es einen Artikel, der erklärt, was jedes der Felder, die Sie ausfüllen müssen, bedeutet?
Alles, was ich brauche, ist eine Möglichkeit, Zitate auf meinen Podcast-Show-Notizseiten gleich zu formatieren. Jedes Zitat hat die gleiche Schriftart (die ich als Überschriftenstil eingerichtet habe), ist fett und zentriert.
Ich habe es satt, jedes Formatierungselement manuell auf jedes Zitat anzuwenden, und wünsche mir einfach eine Möglichkeit, mit einem Klick fertig zu sein.
Syams
Bitte sagen Sie mir, wie ich eine neue Schriftart zum WP-Visual-Editor hinzufüge.
Moya Nicholson
Danke. Wirklich hilfreich.
stanley
Ich muss mein Theme WP modifizieren
hell me please
Sandy Connolly
DANKE DAFÜR!!! OMG!!!! Wie hilfreich, wenn man eine Website an einen Kunden übergibt, der seine eigenen Inhalte basierend auf unserem Design hinzufügen möchte!
Marcin
Hallo, ich entwickle jeden Tag WordPresses und mache alles mit WP, aber dieses Stück Code ist eines der nützlichsten, das ich seit langem gesehen habe… Es ist genau das, was dem Standard-WYSIWYG (jetzt kann ich sagen: fehlte)! Es ermöglicht, einige erstaunliche Dinge im Inhaltsfeld zu tun. Danke fürs Teilen!
Foxglove
Ich benutze dieses Plugin schon seit einiger Zeit, aber es ist nicht mehr von wordpress.org verfügbar - anscheinend nicht mehr aktualisiert oder unterstützt. Weiß jemand von Alternativen außer der von Ihnen beschriebenen manuellen Methode?
Lisa McMahon
Hier ist eine aktualisierte/geforkte Version des ursprünglichen Plugins, das im Artikel erwähnt wird: TinyMCE Custom Styles
WPBeginner Support
Hallo Lisa, danke, dass du darauf hingewiesen hast. Wir haben den Artikel mit der aktualisierten/verzweigten Version aktualisiert.
Admin
Shubha Das
Ich möchte p anstelle von span hinzufügen. Aber wenn ich den Blocknamen span in p ändere, funktioniert es nicht.
‘title’ => ‘Hinweis’,
‘block’ => ‘p’,
‘classes’ => ‘hinweis’,
‘wrapper’ => true,
MacKenzie
Ich fand das wirklich hilfreich und ich habe das Gefühl, ich habe es fast geschafft, aber es funktioniert noch nicht ganz. Mein Text wird im Editor korrekt mit den Span- und Klassentags versehen, wenn er ausgewählt ist – aber keiner der Stile, die ich in die Style-Sheet eingefügt habe, wird auf die veröffentlichte Notiz angewendet.
Frank
Ich werde immer nervös und mir wird schlecht, wenn ein Kunde WordPress-Anpassungen benötigt. Toll, diese Stil-Dropdownliste, ABER, wie jemand zuvor sagte, völlig nutzlos, wenn Stile nicht nachträglich zurückgezogen werden können und sich nur ansammeln, ansammeln, ansammeln...
Ich bin diese halbfertigen Lösungen in WordPress gewohnt – normalerweise gibt es auch eine ergänzende halbfertige Lösung, um die erste halbwegs zu reparieren. Aber hier?
Wie würden Sie jetzt vorschlagen, benutzerdefinierte Stile zu ENTFERNEN, die über das Dropdown-Menü für Stile hinzugefügt wurden. Die Codeansicht ist für meinen Kunden keineswegs akzeptabel?
Ich hätte unglaubliches Glück, wenn jemand einen Weg gefunden hätte, das zu tun, und dieses Wissen teilen würde (und dafür, dass die Katastrophe namens WordPress für (ich hoffe) sehr lange Zeit aus meiner Reichweite ist).
Vielen Dank im Voraus!
Frank
Chris
Klicken Sie erneut auf den Stil in der Dropdown-Liste. Fertig.
Shafi ken
Danke für das hilfreiche Tutorial. Danke
K Shazzad
Whole tutorial worked flawlessly for me. Thanks a bunch
Stef
Ich habe dieses Plugin ausprobiert, aber festgestellt, dass, wenn Sie einen benutzerdefinierten Stil ändern, die bereits eingefügten nicht aktualisiert werden. Sie müssen zurückgehen und sie neu einfügen, da die Funktion den Stil inline und nicht über eine Stylesheet hinzufügt.
Phil
Danke für das hilfreiche Tutorial. Gibt es Leistungseinbußen, wenn das Plugin anstelle von Handcodierung verwendet wird? Danke,
WPBeginner Support
Nein, aber für die Wiederverwendung von Elementen ist diese Methode sehr praktisch. Sie ist auch nützlich, wenn Sie eine Website für einen Kunden erstellen und möchten, dass dieser Dinge aus dem visuellen Editor hinzufügen kann.
Admin
Sei
Danke für das Tutorial!
Gibt es eine Möglichkeit, zwei Markierungen gleichzeitig hinzuzufügen? Zum Beispiel, etwas wie Text erhalten
Sei
Okay, Ihre Kommentare konvertieren HTML. Ich meine, ich möchte sowohl 'h1' als auch 'span' Markups um meinen Text erhalten, indem ich nur auf einen Stil klicke.
Lily
Ich habe es geschafft, die benutzerdefinierten Klassen hinzuzufügen, und die Elemente werden mit den richtigen Klassen im Texteditor und auf der Seite angezeigt, aber die Klasse wird nicht im visuellen Editor angewendet, was es für den Benutzer sehr unklar macht, ob es funktioniert hat oder nicht. Gibt es eine Möglichkeit, das zu beheben?
Bonnie Dasher-Andersen
Ich habe zwei benutzerdefinierte Stile hinzugefügt. Wenn ich eine Seite bearbeite, habe ich zwei Formatmenüs, jedes mit denselben Einträgen (den beiden von mir erstellten Stilen). Wenn ich versuche, diese Stile anzuwenden, passiert nichts. Ich kann das Tag in der Textansicht sehen, aber wenn ich die Seite anzeige – wurde der Stil nicht angewendet.
Irgendwelche Vorschläge? Ich muss das für einen Kunden herausfinden, der diese WP-Website aktualisieren wird und nicht sehr versiert ist.
Marcello
Ich hatte das gleiche Problem, dass die Tags nicht auf den Code angewendet wurden. Habe es behoben, indem ich 'wrapper' auf 'false' gesetzt habe. Ich kenne die technischen Gründe nicht, habe es nur getestet und es hat funktioniert. Hoffe, es hilft!
hugotom
Ich hatte das gleiche Problem, dass das Style Sheet nicht registriert wird.
Lösung
Wenn Sie bereits diese Registrierungs-Style-Sheets in der functions.php-Datei haben, sollten Sie direkt dort stylesheet custom-editor-style.css hinzufügen
Beispiel:
function styles_theme() { wp_enqueue_style(‘bootstrap_css’, get_template_directory_uri() . ‘/sources/bootstrap/bootstrap.min.css’); wp_enqueue_style(‘main_css’, get_template_directory_uri() . ‘/style.css’); wp_enqueue_style(‘theme_css’, get_template_directory_uri() . ‘/custom/css/theme.css’); wp_enqueue_style(‘editor_css’, get_template_directory_uri() . ‘/custom-editor-style.css’); // HIER };
Raphael Landau
Ich habe das verwendet und hatte auch das Problem, dass der Stil/die Klasse auf den gesamten Absatz angewendet wird. Das liegt daran, dass Sie das Stilformat als „Block“ festlegen. (‘block’ => ‘span’,).
Ein schneller Blick in das offizielle Wordpress-Codex offenbart viel mehr Optionen für die Formatierung von Stilen.
http://codex.wordpress.org/TinyMCE_Custom_Styles
Da span standardmäßig ein Inline-Stil ist, sollten Sie ‘block’ durch ‘inline’ ersetzen, und voilà! Ihre Formatierung sollte wie erwartet funktionieren.
also kurz gesagt:
array(
‘title’ => ‘Ihr Titel’,
‘inline’ => ‘span’,
‘classes’ => ‘ihre-klasse’,
‘wrapper’ => true,
),
nemaha
Hallo,
Tolles Tutorial, danke dafür! Ich habe auch das Problem, dass der Stil (ein Span) auf den gesamten Absatz angewendet wird. Was ich vorhabe: Eine Überschrift schreiben und sie als Überschrift 1 formatieren, dann nur ein bestimmtes Wort in dieser Überschrift markieren, um einen benutzerdefinierten Stil hinzuzufügen. Gibt es ein Update, wie man das beheben kann? Danke!
bekee
Ich habe auch das Problem, dass der Stil auf den gesamten Absatz angewendet wird und nicht nur auf das ausgewählte Element. Gibt es ein Update dazu? Danke!
Debbie
Habe das gleiche Problem. Hebt ein Wort hervor, aber wirkt sich auf den gesamten Absatz aus.
James
Ich habe ein paar Probleme gefunden. Es scheint zu funktionieren, aber nicht wie erwartet. Für jemanden, der keinen Code kennt, ist das nichts.
1. Heben Sie ein einzelnes Wort in einem Absatz hervor, um ein hinzuzufügen, aber das wird dem gesamten Absatz hinzugefügt, nicht nur dem hervorgehobenen Wort.
2. Keine Möglichkeit, das CSS zu entfernen, ohne den Code zu bearbeiten. Mein Kunde macht keinen Code! Habe sogar versucht, eine Klasse von .nothing zu erstellen, aber die neue Klasse wird nur zu anderen hinzugefügt, ersetzt nicht die vorhandene Klasse.
WPBeginner-Mitarbeiter
Sehen Sie sich unseren Leitfaden an, wie Sie häufige Bildprobleme in WordPress beheben.
Sheikh Zuhaib Siddiqui
Hallo, ich habe einen Fehler beim Hinzufügen von Medien. Wenn ich versuche, Medien hochzuladen, wird nur weiter geladen und keine Medien angezeigt und ich kann Medien hochladen... Lassen Sie mich wissen, was hier der Fehler ist???
Aber das funktioniert einwandfrei... nur ein Fehler im Media-Uploader. Bitte geben Sie mir diese Lösung.
Marlice
Hallo. Vielen Dank für dieses tolle Tutorial. Ich habe ein Problem mit Inhalten, die bereits im Editor vorhanden sind. Wenn ich ein Wort oder einen Textteil markiere und einen Stil auswähle (z. B. „blauer Button“ – aus Ihrem Code), wird nicht nur das markierte Wort oder der Textteil umschlossen. Stattdessen wird der gesamte Inhalt markiert und ein Span mit der Klasse .blue button darauf gesetzt. Ich habe es mehrmals mit anderen Seiten und Beiträgen versucht – immer das Gleiche: Wenn der Inhalt bereits vorhanden war und ich ihn markierte, erhielt der gesamte Inhalt die Span-Klasse. Dies geschieht nicht, wenn ich einen neu bearbeiteten Text auf der Seite/dem Beitrag umschließe – dann funktioniert alles einwandfrei. Hat jemand dieses Phänomen auch?
Vielen Dank,
Ute
John-Henry Ross
Hallo. Ich habe diese Methode ausprobiert und sie funktioniert wie ein Zauber, genau das, wonach ich gesucht habe, danke. Ich möchte nur herausfinden, ob es eine Möglichkeit gibt, Stile zu einem Unterordner hinzuzufügen, anstatt sie nur unter einem Format-Button hinzuzufügen. Z.B. einen Unterordner für Überschriften mit allen Überschriftenstilen, ein Div-Untermenü mit Div-Stilen usw. hinzufügen.
dave
Danke!
Es ist auch großartig, 2 Methoden zu zeigen… meine Kunden kauern vor Angst, wenn sie mit Code hantieren müssen.
I will sometimes use custom fields to “force” safe additional styles, but the TinyMCE can be handled by some people, so I’ll kee that in mind.
Ciao, Dave
WPBeginner-Mitarbeiter
Sie müssen den Punkt nicht hinzufügen
classes’ => ‘.alert-blue’,
Es sollte sein
classes’ => ‘alert-blue’,
Jeff Gaudette
Leider hat das nicht funktioniert. Ich habe den Punkt entfernt, aber im Editor wird immer noch nichts angewendet. Ich weiß, dass Sie kein Helpdesk sind, aber hier ist ein Screenshot, falls Sie interessiert sind: http://screencast.com/t/JI0zMvcH
Danke für all die großartigen Sachen, die Sie veröffentlichen!
WPBeginner-Mitarbeiter
Können Sie den Code einfügen, den Sie in Ihre functions.php-Datei eingefügt haben. Fügen Sie auch das CSS ein, das Sie für diese Schaltflächen verwenden.
Jeff Gaudette
Sicher. Funktionen:
/*
* Callback-Funktion zum Filtern der MCE-Einstellungen
*/
function my_mce_before_init_insert_formats( $init_array ) {
// Definiere das style_formats-Array
$style_formats = array(
// Jede Array-Kind ist ein Format mit seinen eigenen Einstellungen
array(
‘title’ => ‘Alarm’,
‘block’ => ‘span’,
‘classes’ => ‘entry p.alert-blue’,
‘wrapper’ => true
),
array(
‘title’ => ‘Alarm Blau’,
‘block’ => ‘p’,
‘classes’ => ‘alert-blue’,
‘wrapper’ => true,
),
array(
‘title’ => ‘Blauer Knopf’,
‘block’ => ‘span’,
‘classes’ => ‘alert-blue-button’,
‘wrapper’ => true,
),
);
// Füge das Array, JSON ENCODED, in ‘style_formats’ ein
$init_array[‘style_formats’] = json_encode( $style_formats );
return $init_array;
}
// Callback an 'tiny_mce_before_init' anhängen
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
CSS
.alert-blue{
background: none repeat scroll 0 0 #E7F4FD;
border: 1px solid #C5D7E3;
color: #3A5971;
font-size: 18px;
line-height: 24px;
text-align: center;
margin: 0 0 15px !important;
padding: 15px 25px;
width: auto;
}
WPBeginner-Mitarbeiter
Haben Sie das CSS in Ihre Stylesheet eingefügt?
Stellen Sie sicher, dass die Stilregeln, die Sie in Ihrem CSS hinzufügen, mit den Klassen übereinstimmen, die Sie in der Callback-Funktion zum Filtern der MCE-Einstellungen hinzufügen.
Kemi O
TinyMCE Advanced Professsional Formats and Styles wird nur bis WP Version 3.6.1 unterstützt.
Keely Worth
Ich meide den visuellen Editor wie die Pest! Ich benutze ihn nur, wenn ich zu ihm wechseln muss, um die integrierte Shortcode-Schaltfläche eines Themes zu verwenden. Ansonsten – benutze ich ihn nie.
Blair2004
Ich habe die erste Methode ausprobiert, neue Stile sind verfügbar, aber wenn ich einen auswähle, passiert nichts...
Jeff Gaudette
Ich versuche, dies mit einem Block zu tun und habe keinen Erfolg. Der Code lautet:
array(
‘title’ => ‘Alert Blue’,
‘block’ => ‘p’,
‘classes’ => ‘.alert-blue’,
‘wrapper’ => true,
),
Es funktioniert, wenn ich span verwende, aber das erfordert eine span-Klasse, die ich nicht verwenden kann.
Wenn ich den obigen Code verwende, passiert im WP-Editor nichts. Ich wähle den Text aus, klicke auf die Formatierungsoption Alert Blue und nichts passiert: http://screencast.com/t/dijujZ2ZdqBy
Irgendwelche Ratschläge?