Werfen Sie einen Blick auf Ihren visuellen WordPress-Editor. Es gibt einige Standardoptionen zum Formatieren und Gestalten Ihres Inhalts, aber nicht viel in Bezug auf die Anpassung, um Ihre Beiträge und Seiten ein wenig wirklich schick aussehen zu lassen.
Jetzt wissen Sie vielleicht, dass Sie die Möglichkeit haben, zwischen den Text- und visuellen Editoren in WordPress hin und her zu springen, um CSS zum Erstellen von Dingen wie Schaltflächen und Textblöcken einzufügen, aber das ist mühsam, und wenn Sie dies nicht getan haben viel Erfahrung in der Bearbeitung von Code Der Texteditor wirkt ein wenig einschüchternd.
Wäre es nicht einfacher, wenn Sie Ihre eigenen benutzerdefinierten Stile erstellen, sie in einem Dropdown-Menü im WordPress-Editor platzieren und sie bei Bedarf verwenden könnten? Ja, es ist viel einfacher, daher möchten wir hier skizzieren, wie das geht. Denken Sie daran, dass wir zwar versuchen, diesen Prozess so einfach wie möglich zu gestalten, es jedoch hilfreich ist, ein wenig CSS-Kenntnisse zu haben, wenn Sie die vollen Vorteile benutzerdefinierter Stile entdecken möchten.
Sehen wir uns an, wie Sie dem visuellen Editor von WordPress benutzerdefinierte Stile hinzufügen.
Fügen Sie dem WordPress Visual Editor benutzerdefinierte Stile hinzu, indem Sie Code hinzufügen
Diese erste Option erfordert, dass Sie ein wenig über das Einbinden und Ändern von CSS wissen, aber ich werde Ihnen eine kleine Anleitung geben, die Ihnen hilft, die Grundlagen zu erlernen, damit Sie dieses Wissen in Zukunft anwenden können. Dies ist eine nette Option, wenn Sie Ihre Site nicht mit einem Plugin belasten möchten.
Der Punkt dabei ist, ein neues Dropdown-Menü hinzuzufügen, das benutzerdefinierte Stile in Ihrem visuellen WordPress-Editor enthält, mit dem Sie Elemente in Ihrem Editor auswählen und dann benutzerdefinierte Stile darauf anwenden können. Wenn Sie ein neues Thema entwickeln, suchen Sie Ihr Funktionen.php Datei und fügen Sie den unten stehenden Code in diese Datei ein, oder wenn Sie mit einem bereits erstellten Thema arbeiten, fügen Sie diesen Code in die Datei functions.php eines untergeordneten Themas ein.
function myprefix_mce_buttons_1( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );
Gehen Sie in einem Ihrer WordPress-Beiträge zurück zum Editor und jetzt sollten Sie in der oberen Zeile des Editors einen neuen Button „Formate“ sehen. Beachten Sie, wie wir uns in die Datei „mce_buttons_1? Dadurch wird die Menüschaltfläche Formate in die erste Zeile des mce-Editors platziert. Sie können auch den Filter „mce_buttons_2“ verwenden, um ihn in die zweite Zeile zu platzieren, oder „mce_buttons_3“, um ihn in die dritte Zeile zu platzieren.
Nachdem Sie das Menüelement nun aktiviert haben, ist es an der Zeit, Ihre benutzerdefinierten Stile zur Verwendung in Ihren Beiträgen hinzuzufügen. Nehmen Sie den unten aufgeführten Code und fügen Sie ihn in Ihr . ein Funktionen.php Datei, die dem Dropdown-Menü Formate zwei neue Stile hinzufügt – „Theme-Button“ und „Highlight“.
/**
* Add custom styles to the mce formats dropdown
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
*/
function myprefix_add_format_styles( $init_array ) {
$style_formats = array(
// Each array child is a format with it's own settings - add as many as you want
array(
'title' => __( 'Theme Button', 'text-domain' ), // Title for dropdown
'selector' => 'a', // Element to target in editor
'classes' => 'theme-button' // Class name used for CSS
),
array(
'title' => __( 'Highlight', 'text-domain' ), // Title for dropdown
'inline' => 'span', // Wrap a span around the selected content
'classes' => 'text-highlight' // Class name used for CSS
),
);
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );
Sie können die Titel ändern, um unterschiedliche Namen in Ihrem Dropdown-Menü anzuzeigen, Elemente zum Array hinzufügen/entfernen usw. Sie können fast alles in diesem Code ändern, um Ihre eigenen benutzerdefinierten Formatstile anzuzeigen WordPress-Codex für eine ausführlichere Erläuterung der akzeptierten Parameter und Rückgabewerte.
Da Sie nun über neue Stile verfügen, können Sie Inhalte in Ihrem Editor hervorheben und die Stile anwenden. Beachten Sie, dass das Format „Theme Button“ einen Selektorparameter hat? Das bedeutet, dass der Stil nur auf diesen bestimmten Selektor angewendet werden kann (in diesem Fall das „a“- oder „link“-Tag). Das zweite Format, das wir „Highlight“ hinzugefügt haben, hat keinen Selektor-Parameter, sondern einen „Inline“-Parameter, der es anweist, den Stil auf jeden Text anzuwenden, den Sie in Ihrem Editor markiert haben, und ihn in eine Spanne mit Ihrem eindeutigen Klassennamen einzuschließen. Sie können ein Beispiel aus unserem Total WordPress-Theme sehen, wie wir Formate verwendet haben, damit Benutzer es einfach können eine Checkliste anwenden Achten Sie auf alle Aufzählungszeichen im Editor.
Jetzt können Sie Ihre benutzerdefinierten Formate verwenden, aber sie sehen nicht anders aus, bis Sie Ihrer Website benutzerdefiniertes CSS hinzugefügt haben, um sie zu gestalten. Suchen Sie das Stylesheet für Ihr Theme (wenn Sie Ihr eigenes erstellen) oder Child-Theme und fügen Sie den folgenden CSS-Code in die Datei ein.
.theme-button {
display: inline-block;
padding: 10 15px;
color: #fff;
background: #1796c6;
text-decoration: none;
}
.theme-button:hover {
text-decoration: none;
opacity: 0.8;
}
.text-highlight {
background: #FFFF00;
}
Jetzt wird dies Ihren neuen Formaten für das Frontend Styling hinzufügen, damit Sie sie nach der Anwendung live sehen können. Yay! Aber wäre es nicht schön, Ihre Styles auch im eigentlichen Editor zu sehen, wenn sie angewendet werden? Dazu müssen Sie die Funktion „Editor Stylesheet“ in WordPress verwenden. Wenn Sie Ihr eigenes Thema erstellen, möchten Sie in Ihrem Thema eine neue CSS-Datei namens „editor-style.css“ erstellen (Sie können es beliebig nennen, nur stellen Sie sicher, dass Sie das Snippet unten entsprechend bearbeiten) mit dem benutzerdefinierten CSS für Ihre Formate hinzugefügt und fügen Sie dann die Funktion unten hinzu, um sie im Backend zu laden.
function myprefix_theme_add_editor_styles() {
add_editor_style( 'editor-style.css' );
}
add_action( 'init', 'myprefix_theme_add_editor_styles' );
Wenn du mit dem Theme einer anderen Person arbeitest, musst du dies in deinem Child-Theme hinzufügen, achte nur darauf, ihm einen eindeutigen Namen zu geben, damit es nicht mit deinem Parent-Theme in Konflikt steht oder wenn dein Parent-Theme bereits eine CSS-Datei für Im Editor können Sie es tatsächlich kopieren und in Ihr Child-Theme einfügen (ohne den obigen PHP-Code hinzuzufügen) und dann Ihr neues CSS hinzufügen, da WordPress zuerst das Child-Theme überprüft, bevor es die CSS-Datei des Editors des Parent-Themes lädt, und wenn es es findet, wird es Laden Sie es stattdessen aus dem Child-Theme.
Fügen Sie dem WordPress Visual Editor mit einem netten Plugin benutzerdefinierte Stile hinzu
Wenn Sie keine Zeit haben, mit Code herumzuspielen, oder Sie es nicht selbst herausfinden können, gibt es gute Neuigkeiten. Es gibt ein Plugin, mit dem Sie genau das ausführen können, was wir oben gerade gemacht haben, ohne am Code herumschrauben zu müssen.
Einfach suchen, installieren und aktivieren TinyMCE Custom Styles-Plugin und aktiviere es auf deiner WordPress-Seite.
Gehe zu Einstellungen > TinyMCE prof.styles auf der linken Seite Ihres WordPress-Dashboards. Hier ändern Sie Ihre Einstellungen für das Plugin.
Mit dem Plugin können Sie auswählen, wo sich Ihre Stylesheets befinden oder wo Sie sie platzieren möchten. Es wird empfohlen, ein neues benutzerdefiniertes Verzeichnis zu erstellen. Wählen Sie die dritte Option und geben Sie Ihrem Verzeichnis einen Namen. Gehen Sie dann auf der Seite nach unten, um auf Ihr zu klicken Einstellungen speichern Option, bevor Sie mit dem nächsten Schritt fortfahren.
Scrollen Sie nach dem Speichern der Einstellungen nach unten, um die Schaltfläche Neuen Stil hinzufügen auszuwählen.
Hier können Sie anpassen, wie Ihre benutzerdefinierten Stile aussehen sollen. Es ist im Grunde ein einfacher webbasierter Editor, der den CSS-Code für Sie generiert. Geben Sie einen Titel für das ein, was Sie im Dropdown-Menü anzeigen möchten. Wählen Sie aus, ob Sie einen Selektor-, Inline- oder Blocktyp wünschen. Fühlen Sie sich frei, den obigen Screenshot zu verwenden, um die CSS-Klassen und -Stile auszufüllen, oder erstellen Sie Ihre eigenen, je nachdem, was Sie vorhaben, indem Sie das Dropdown-Menü verwenden. Wenn Sie fertig sind, klicken Sie unten auf der Seite auf Einstellungen speichern.
Jetzt ist es an der Zeit, zu sehen, wie der neue benutzerdefinierte Stil in Ihrem Editor aussieht. Öffnen Sie einen neuen Beitrag oder eine neue Seite und suchen Sie das Dropdown-Menü Formate auf der linken Seite des visuellen Editors. Es wird in der zweiten Zeile angezeigt. Sobald Sie auf das Dropdown-Menü klicken, wird der neue Stil angezeigt, den Sie gerade erstellt haben.
Klicken Sie auf die Option Big Blue Button oder was auch immer Sie erstellt haben, um sie in Ihrem Editor anzuzeigen. Um es zu verwenden, markieren Sie einfach den Text, den Sie formatieren möchten, klicken Sie dann auf Ihre Option und voila!
Abschluss
Das ist alles für jetzt! Sie können jederzeit mehr darüber erfahren, wie Sie neue Stylings verwenden können, indem Sie die WordPress-Codex-Seite diesem Thema gewidmet.
Lassen Sie es uns im Kommentarbereich wissen, wenn Sie Fragen zum Hinzufügen benutzerdefinierter Stile zum visuellen Editor von WordPress haben. Und zögern Sie nicht, ungewöhnliche Stile zu teilen, die Sie erstellt haben, um Ihre Website ein wenig schöner aussehen zu lassen!