Möchten Sie benutzerdefinierte Stile im visuellen Editor von WordPress hinzufügen? Durch das Hinzufügen benutzerdefinierter Stile können Sie schnell Formatierungen anwenden, ohne zum Texteditor wechseln zu müssen. In diesem Artikel zeigen wir Ihnen, wie Sie dem visuellen Editor von WordPress benutzerdefinierte Stile hinzufügen.
Notiz: Dieses Tutorial erfordert grundlegende Kenntnisse in CSS.
Warum und wann Sie benutzerdefinierte Stile für den WordPress Visual Editor benötigen
Standardmäßig enthält der visuelle Editor von WordPress einige grundlegende Formatierungs- und Stiloptionen. Manchmal benötigen Sie jedoch möglicherweise eigene benutzerdefinierte Stile, um CSS-Schaltflächen, Inhaltsblöcke, Taglines usw. hinzuzufügen.
Sie können jederzeit vom visuellen zum Texteditor wechseln und benutzerdefiniertes HTML und CSS hinzufügen. Wenn Sie jedoch einige Stile regelmäßig verwenden, ist es am besten, sie zum visuellen Editor hinzuzufügen, damit Sie sie leicht wiederverwenden können.
Dadurch sparen Sie Zeit beim Hin- und Herwechseln zwischen Text- und visuellem Editor. Es ermöglicht Ihnen auch, konsistent die gleichen Stile auf Ihrer gesamten Website zu verwenden.
Am wichtigsten ist, dass Sie Stile einfach optimieren oder aktualisieren können, ohne Beiträge auf Ihrer Website bearbeiten zu müssen.
Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie benutzerdefinierte Stile im visuellen Editor von WordPress hinzufügen.
Methode 1: Benutzerdefinierte Stile im visuellen Editor mit Plugin hinzufügen
Als erstes müssen Sie die installieren und aktivieren TinyMCE benutzerdefinierte Stile Plugin. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie besuchen Einstellungen » TinyMCE Custom Styles Seite, um die Plugin-Einstellungen zu konfigurieren.
Mit dem Plugin können Sie den Speicherort von Stylesheet-Dateien auswählen. Es kann die Stylesheets Ihres Themas oder des untergeordneten Themas verwenden, oder Sie können einen eigenen benutzerdefinierten Speicherort auswählen.
Danach müssen Sie auf die Schaltfläche „Alle Einstellungen speichern“ klicken, um Ihre Änderungen zu speichern.
Jetzt können Sie Ihre benutzerdefinierten Stile hinzufügen. Sie müssen ein wenig nach unten zum Stilbereich scrollen und auf die Schaltfläche Neuen Stil hinzufügen klicken.
Zuerst müssen Sie einen Titel für den Stil eingeben. Dieser Titel wird im Dropdown-Menü angezeigt. Als nächstes müssen Sie auswählen, ob es sich um ein Inline-, Block- oder Selektorelement handelt.
Fügen Sie danach eine CSS-Klasse hinzu und fügen Sie dann Ihre CSS-Regeln hinzu, wie im Screenshot unten gezeigt.
Nachdem Sie einen CSS-Stil hinzugefügt haben, klicken Sie einfach auf die Schaltfläche „Alle Einstellungen speichern“, um Ihre Änderungen zu speichern.
Sie können nun einen bestehenden Beitrag bearbeiten oder einen neuen erstellen. Sie werden ein Dropdown-Menü Format in der zweiten Zeile des visuellen WordPress-Editors bemerken.
Wählen Sie einfach einen Text im Editor aus und wählen Sie dann Ihren benutzerdefinierten Stil aus dem Dropdown-Menü Formate aus, um ihn anzuwenden.
Sie können jetzt eine Vorschau Ihres Beitrags anzeigen, um zu sehen, ob Ihre benutzerdefinierten Stile richtig angewendet wurden.
Methode 2: Manuelles Hinzufügen von benutzerdefinierten Stilen zum WordPress Visual Editor
Bei dieser Methode müssen Sie Ihren WordPress-Dateien manuell Code hinzufügen. Wenn Sie zum ersten Mal Code zu WordPress hinzufügen, lesen Sie bitte unsere Anleitung zum Hinzufügen von Code-Snippets aus dem Web in WordPress.
Schritt 1: Fügen Sie ein Dropdown-Menü für benutzerdefinierte Stile im WordPress Visual Editor hinzu
Zuerst fügen wir ein Dropdown-Menü für Formate im visuellen Editor von WordPress hinzu. Dieses Dropdown-Menü ermöglicht es uns dann, unsere benutzerdefinierten Stile auszuwählen und anzuwenden.
Sie müssen den folgenden Code zur Datei „functions.php“ Ihres Themes oder einem Site-spezifischen Plugin hinzufügen.
function wpb_mce_buttons_2($buttons) { array_unshift($buttons, 'styleselect'); return $buttons; } add_filter('mce_buttons_2', 'wpb_mce_buttons_2');
Schritt 2: Auswahloptionen zum Dropdown-Menü hinzufügen
Jetzt müssen Sie die Optionen zum soeben erstellten Dropdown-Menü hinzufügen. Sie können diese Optionen dann aus dem Dropdown-Menü Formate auswählen und anwenden.
Für dieses Tutorial fügen wir drei benutzerdefinierte Stile hinzu, um Inhaltsblöcke und Schaltflächen zu erstellen.
Sie müssen den folgenden Code zur Datei functions.php Ihres Themes oder einem Site-spezifischen Plugin hinzufügen.
/* * 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 * Notice that each array has title, block, classes, and wrapper arguments * Title is the label which will be visible in Formats menu * Block defines whether it is a span, div, selector, or inline style * Classes allows you to define CSS classes * Wrapper whether or not to add a new block-level element around any selected elements */ array( 'title' => 'Content Block', 'block' => 'span', 'classes' => 'content-block', 'wrapper' => true, ), array( 'title' => 'Blue Button', 'block' => 'span', 'classes' => 'blue-button', 'wrapper' => true, ), array( 'title' => 'Red Button', 'block' => 'span', 'classes' => 'red-button', 'wrapper' => true, ), ); // 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' );
Sie können jetzt einen neuen Beitrag in WordPress hinzufügen und im visuellen Editor auf das Dropdown-Menü Formate klicken. Sie werden feststellen, dass Ihre benutzerdefinierten Stile jetzt unter Formate sichtbar sind.
Ihre Auswahl macht im Post-Editor derzeit jedoch keinen Unterschied.
Schritt 3: CSS-Stile hinzufügen
Der letzte Schritt besteht nun darin, CSS-Stilregeln für Ihre benutzerdefinierten Stile hinzuzufügen.
Sie müssen dieses CSS zu den Dateien style.css und editor-style.css Ihres Themes oder Child-Themes hinzufügen.
.content-block { border:1px solid #eee; padding:3px; background:#ccc; max-width:250px; float:right; text-align:center; } .content-block:after { clear:both; } .blue-button { background-color:#33bdef; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #057fd0; display:inline-block; cursor:pointer; color:#ffffff; padding:6px 24px; text-decoration:none; } .red-button { background-color:#bc3315; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #942911; display:inline-block; cursor:pointer; color:#ffffff; padding:6px 24px; text-decoration:none; }
Das Editor-Stylesheet steuert die Darstellung Ihres Inhalts im visuellen Editor. Sehen Sie in der Dokumentation Ihres Themes nach, um den Speicherort dieser Datei herauszufinden.
Wenn Ihr Theme keine Stylesheet-Datei für den Editor hat, können Sie jederzeit eine erstellen. Einfach eine neue CSS-Datei erstellen und benennen custom-editor-style.css
.
Sie müssen diese Datei in das Stammverzeichnis Ihres Themes hochladen und dann diesen Code in die Datei functions.php Ihres Themes einfügen.
function my_theme_add_editor_styles() { add_editor_style( 'custom-editor-style.css' ); } add_action( 'init', 'my_theme_add_editor_styles' );
Das ist alles. Sie haben Ihre benutzerdefinierten Stile erfolgreich zum visuellen Editor von WordPress hinzugefügt. Fühlen Sie sich frei, mit dem Code herumzuspielen, indem Sie Ihre eigenen Elemente und Stile hinzufügen.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie dem visuellen Editor von WordPress benutzerdefinierte Stile hinzufügen. Vielleicht möchten Sie auch unsere Anleitung zum Hinzufügen benutzerdefinierter Stile zu WordPress-Widgets lesen.