Möchten Sie benutzerdefinierte Stile im visuellen Editor von WordPress hinzufügen? Durch Hinzufügen von benutzerdefinierten Stilen können Sie schnell Formatierungen anwenden, ohne zum Texteditor zu wechseln. In diesem Artikel zeigen wir Ihnen, wie Sie dem visuellen Editor von WordPress benutzerdefinierte Stile hinzufügen.
Anmerkung: Dieses Tutorial setzt Grundkenntnisse in CSS voraus.
Wenn werden Sie Müssen Sie dem WordPress Visual Editor einen benutzerdefinierten Stil hinzufügen?
Standardmäßig bietet der visuelle Editor von WordPress grundlegende Formatierungs- und Gestaltungsoptionen. Manchmal müssen Sie jedoch benutzerdefinierte Stile zur Hand haben, mit denen Sie beispielsweise CSS-Schaltflächen hinzufügen können. Inhalt, Haken usw.
Sie können jederzeit vom visuellen Editor zum Texteditor wechseln und benutzerdefinierten HTML- und CSS-Code hinzufügen. Wenn Sie jedoch regelmäßig bestimmte Stile verwenden, ist es besser, sie im visuellen Editor hinzuzufügen, damit Sie sie problemlos wiederverwenden können.
Das spart Ihnen enorm viel Zeit und ermöglicht es Ihnen außerdem, überall auf Ihrem Gerät immer die gleichen Stile zu verwenden Website.
Noch wichtiger ist, dass Sie Stile problemlos bearbeiten oder aktualisieren können, ohne die Artikel auf Ihrer Website bearbeiten zu müssen.
Wir werden nun herausfinden, wie dies in WordPress gemacht wird.
1-Methode: Fügen Sie einen benutzerdefinierten Stil mit einem Plugin hinzu
Als erstes müssen Sie das Plugin installieren und aktivieren. " TinyMCE Custom Styles ". Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation von a WordPress Plugin.
Nach der Aktivierung müssen Sie " Einstellungen> Einstellungen »Benutzerdefinierte TinyMCE-Stile So konfigurieren Sie die Plugin-Einstellungen.
Mit dem Plugin können Sie den Speicherort von Stylesheet-Dateien auswählen. Es kann Ihr Design oder Ihren untergeordneten Designstil verwenden, oder Sie können einen benutzerdefinierten Speicherort auswählen.
Danach müssen Sie auf die Schaltfläche " Speichern Sie alle Einstellungen Zum Speichern Ihrer Einstellungen.
Jetzt können Sie Ihre benutzerdefinierten Stile hinzufügen. Sie müssen zum Stilbereich scrollen und auf die Schaltfläche klicken Hinzufügen neuer Stil ".
Sie müssen zuerst einen Titel für den Stil eingeben. Dieser Titel wird im Dropdown-Menü angezeigt. Dann müssen Sie definieren. Ob es sich um eine Zeile, einen Block oder ein Auswahlelement handelt.
Fügen Sie anschließend eine CSS-Klasse hinzu und fügen Sie dann Ihre CSS-Regeln hinzu, wie im folgenden Screenshot 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 jetzt einen vorhandenen Artikel bearbeiten oder einen neuen erstellen. Sie werden ein Format im Dropdown-Menü 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ü aus, um ihn anzuwenden.
Sie können jetzt eine Vorschau Ihres Artikels anzeigen, um festzustellen, ob Ihre benutzerdefinierten Stile korrekt angewendet werden.
2-Methode: Fügen Sie dem visuellen Editor manuell Stile hinzu
Bei dieser Methode müssen Sie Ihren WordPress-Dateien manuell Code hinzufügen. Wenn Sie dies zum ersten Mal tun, lesen Sie unser Tutorial zum Hinzufügen einer WordPress Plugin.
Schritt 1: Fügen Sie einen benutzerdefinierten Stil aus dem Dropdown-Menü des WordPress Visual Editor hinzu.
Zuerst fügen wir ein Dropdown-Menü im visuellen Editor von WordPress hinzu. In diesem Dropdown-Menü können wir dann unsere benutzerdefinierten Stile auswählen und anwenden.
Sie müssen den folgenden Code in Ihre functions.php Datei oder auf Ihrem Plugin hinzufügen.
Funktion wpb_mce_buttons_2 ($ button) {array_unshift ($ button, 'styleselect'); $ button zurückgeben; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');
Schritt 2: Hinzufügen von Optionen im Dropdown-Menü
Jetzt müssen Sie dem soeben erstellten Dropdown-Menü einige Optionen hinzufügen. Sie können diese Optionen dann aus den Formaten im Dropdown-Menü auswählen und anwenden.
Für dieses Tutorial fügen wir drei benutzerdefinierte Stile hinzu, die erstellt werden sollen Inhalt Block und Tasten.
Sie müssen den folgenden Code zur Datei "functions.php" Ihrer Datei functions.php oder zu einem bestimmten Plugin hinzufügen.
/ * * Rückruffunktion zum Filtern der MCE-Einstellungen * / function my_mce_before_init_insert_formats ($ init_array) {// Definiere das style_formats-Array $ style_formats = array (/ * * Jedes untergeordnete Array ist ein Format mit eigenen Einstellungen * Beachten Sie, dass jedes Array einen Titel hat , Block-, Klassen- und Wrapper-Argumente * Titel ist die Bezeichnung, die im Menü Formate angezeigt wird. * Block definiert, ob es sich um einen Span-, Div-, Selector- oder Inline-Stil handelt. * Mit Klassen können Sie CSS-Klassen definieren. * Wrapper, ob dies der Fall ist oder nicht Fügen Sie ein neues Element auf Blockebene um ausgewählte Elemente * / array hinzu ('title' => 'Content Block', 'block' => 'span', 'classes' => 'content-block', 'wrapper' => true,), Array ('title' => 'Blue Button', 'block' => 'span', 'classes' => 'blue-button', 'wrapper' => true,), Array ('title' => 'Roter Knopf', 'Block' => 'Spanne', 'Klassen' => 'Roter Knopf', 'Wrapper' => wahr,),); // Füge das Array JSON ENCODED in 'style_formats' ein. $ Init_array ['style_formats'] = json_encode ($ style_formats); return $ init_array; } // Rückruf an 'tiny_mce_before_init' anhängen 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 Dropdown-Menü des visuellen Editors auf die Formate klicken. Sie werden feststellen, dass Ihre benutzerdefinierten Stile jetzt sichtbar sind.
Ihre Auswahl hat jedoch keinen Einfluss auf den visuellen Editor von WordPress.
3-Schritt: Fügen Sie einen CSS-Stil hinzu
Im letzten Schritt fügen Sie CSS-Stilregeln für Ihre benutzerdefinierten Stile hinzu.
Sie müssen dieses CSS in die Datei style.css Ihres Themas oder des untergeordneten Themas einfügen.
.content-block {border: 1px solid #eee; Polsterung: 3px; Hintergrund: #ccc; maximale Breite: 250px; schweben rechts; Textausrichtung: Mitte; } .content-block: after {clear: both; } .blue-button {Hintergrundfarbe: # 33bdef; -Moz-Rand-Radius: 6px; -webkit-border-radius: 6px; Randradius: 6px; Rand: 1px fest # 057fd0; Anzeige: Inline-Block; Cursor: Punkt; Farbe: #ffffff; Polsterung: 6px 24px; Textdekoration: keine; } .red-button {Hintergrundfarbe: # bc3315; -Moz-Rand-Radius: 6px; -webkit-border-radius: 6px; Randradius: 6px; Rand: 1px fest # 942911; Anzeige: Inline-Block; Cursor: Punkt; Farbe: #ffffff; Polsterung: 6px 24px; Textdekoration: keine; }}
Das Editor-Stylesheet steuert das Erscheinungsbild Ihres Inhalt im visuellen Editor. Sehen Sie in der Dokumentation nach, wie Sie den Speicherort dieser Datei finden.
Wenn Ihr Thema keine Stylesheet-Datei enthält, können Sie jederzeit eine erstellen. Erstellen Sie einfach eine neue CSS-Datei und nennen Sie sie " Benutzerdefinierte-Editor-style.css ".
Sie müssen diese Datei in das Stammverzeichnis Ihres Themas hochladen und diesen Code dann zur Datei "functions.php" Ihres Themas hinzufügen.
my_theme_add_editor_styles function () {add_editor_style ( 'custom-Editor-style.css'); } Add_action ( 'Init', 'my_theme_add_editor_styles');
Das ist alles. Sie haben gerade Ihre benutzerdefinierten Stile im visuellen Editor von WordPress hinzugefügt. Sie können jetzt die Anpassungen vornehmen, die Sie für richtig halten.
Zögern Sie nicht, dieses Tutorial mit Ihren Freunden in Ihren bevorzugten sozialen Netzwerken zu teilen.
