Benutzerdefinierte TinyMCE-Editor-Formatierung in WordPress

Wenn Sie einen Textblock mit dem WordPress-Editor schreiben, müssen Sie manchmal auf eine bestimmte Weise aussehen. Normalerweise fügen wir Textstücken Stile hinzu, aber wir möchten nicht immer, dass unsere Kunden den Texteditor öffnen müssen und mach das manuell.

In diesem Beispiel erstellen wir einen kleinen Filter, den Sie Ihrer functions.phpDatei hinzufügen können, um dem Benutzer einige zusätzliche Formatierungsoptionen zu bieten, um einen benutzerdefinierten Absatzstil „Lead” hinzuzufügen.

Verwenden der benutzerdefinierten TinyMCE-Formatierung

Hier ist ein superschnelles Beispiel für den Filter in Aktion. Es zeigt dir:

• So schalten Sie die Symbolleiste um, sodass Sie das Menü „Formate” sehen können
• So wenden Sie die Formatierung über das Menü „Formate” an
• So löschen Sie die Stile

TinyMCE-Formatierung in Aktion

Der Code

Der Code ist wirklich einfach, hängen Sie sich einfach ein tiny_mce_before_initund fügen Sie Ihren benutzerdefinierten Stil zum style_formatsArray hinzu. Stellen Sie sicher, dass Sie einen Titel, die Art des Elements, das Sie verwenden möchten, und vor allem die Klasse angeben.

Stile

Ohne ein wenig Styling geht natürlich nichts. Stellen Sie sicher, dass Sie die Stile zu Ihrem Haupt-WordPress hinzufügen, styles.cssdamit Ihr Lead im Frontend angezeigt wird, und stellen Sie außerdem sicher, dass Sie ein Editor-Stylesheet registrieren, damit der Code im Editor angezeigt wird (Sie können add_editor_style()dies tun).

.lead {
    font-size: 120%;
}