[Vc_row content_placement = "middle" css = "vc_custom_1508940533685 {background-color: #f8f6f6 Wichtig;}." El_id = "themeforestpro"] [vc_column width = "3 / 4" css = „vc_custom_1502759058885 {margin-bottom: 0px. wichtig; border-bottom-width: 0px signifikant; padding-bottom: 0px signifikant;} „] [vc_column_text]!

Divi: das am einfachsten zu verwendende WordPress-Theme

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] DOWNLOAD [/vcex_button][/ vc_column][/vc_row]

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen.

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.

stylesinwpeditor

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 Formatierungs- und grundlegende Stiloptionen. Manchmal müssen Sie jedoch über benutzerdefinierte Stile verfügen, mit denen Sie beispielsweise CSS-Schaltflächen, Inhaltsblöcke, Hooks usw. hinzufügen können.

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.

Dies spart Ihnen enorm viel Zeit und ermöglicht es Ihnen, auf Ihrer gesamten Website immer dieselben Stile zu verwenden.

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 Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung müssen Sie " Einstellungen> Einstellungen »Benutzerdefinierte TinyMCE-Stile So konfigurieren Sie die Plugin-Einstellungen.

Steuer-of-plugin-tinymce

Mit dem Plugin können Sie den Speicherort der Stylesheet-Dateien auswählen. Es kann den Stil Ihres Themas oder untergeordneten Themas verwenden oder Sie können einen benutzerdefinierten Speicherort auswählen.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie erstellen Einfach und kostenlos jedes Website- oder Blog-Design mit einem professionellen Look. Hören Sie auf, viel für eine Website zu zahlen, die Sie selbst erstellen können.

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.

Regel-of-style-css

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.

Stil-customize-Editor-Wordpress

Sie möchten Ihre Produkte im Internet verkaufen?

Laden Sie WooCommerce kostenlos herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen und ganz einfach Ihren Online-Shop zu erstellen. Perfekt für Anfänger.

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 eines WordPress-Plugins.

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.

In diesem Tutorial fügen wir drei benutzerdefinierte Stile hinzu, um Blockinhalte und Schaltflächen zu erstellen.

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; }}

Überblick-of-Tasten-tinymce schöpf-of-style-individualisieren

Das Editor-Stylesheet steuert das Erscheinungsbild Ihres Inhalts im visuellen Editor. In der Dokumentation erfahren Sie, 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.

7 Aktien
Aktie6
tweet
Registrieren1