Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

WordPress 4 für Profis

Formatvorlagen im Backend-Editor

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Formatvorlagen im Backend-Editor sind unglaublich praktisch. Damit können auch weniger versierte Autoren unter anderem Intro-Texte formatieren oder Buttons einfügen.
03:58

Transkript

Jetzt kommen wir zu Formatvorlagen für WordPress. Bevor ich Ihnen das lang und breit erkläre zeige ich es Ihnen einfach. Ich habe hier einen einfachen Artikel. Wenn ich jetzt hier zum Beispiel einen besonderen Hinweis schreiben möchte, Hinweis: Achtung, passen Sie auf! Jetzt markiere ich diesen Text hier ... Und jetzt habe ich hier einen neuen Button der Formate heißt. Jetzt sage ich Hinweis und dann wird dieser Hinweis rot markiert. Ich kann jetzt diese Seite aktualisieren und es bleibt gespeichert. Schauen wir uns das Ganze mal im Quelltext im HTML-Editor an: Wenn ich jetzt hier draufgehe, dann sehen Sie diesen Bereich Hinweis: Achtung, passen Sie auf!, umklammert von . Diese Formatvorlagen Introtext und Hinweis finden Sie bei sich nicht. Das liegt daran, dass ich sie selber programmiert habe. Ich zeige Ihnen jetzt aber, wie Sie das selber bei sich programmieren können. Zunächst einmal müssen Sie die zweite Button-Leiste aktivieren. Klicken Sie einfach hier rechts auf Werkzeugleiste umschalten und dann haben Sie hier die gesamte Leiste mit Buttons. Anschließend müssen wir dann auf die Dateiebene von WordPress gehen. Hier bin ich jetzt im Ordner themes, twentythirteen-child. Ihr Theme heißt natürlich etwas anders. Aber hier gehe ich jetzt in die Datei functions.php hinein, wenn die bei Ihnen nicht existiert, legen Sie die einfach an. Hier in meinem Beispiel befindet sich ab Zeile 10 der magische Code der genau diesen Button hinzufügt. Und zwar sage ich hier am Anfang da müssen Sie einfach copy und paste machen „Ich möchte einen zusätzlichen Button einfügen." Dieser zusätzliche Button, das sind hier die Formate am vorderen Ende. Wenn ich jetzt hier weitergehe, sehen Sie, dass ich hier ein add_filter habe: 'tiny_mce_before_init'; tiny mce ist der Name dieses verwendeten Editors von Word Press und before init, also bevor der initialisiert wird, soll eine Funktion aufgerufen werden, deren Namen ich hier frei angeben kann und die ich hier oben definiere. Hier sage ich, ich möchte zum Beispiel einen Introtext haben, der den Text, den ich markiert habe, mit SpanText umklammern soll. Dieser SpanText soll die Klasse intro haben. Und beim Hinweis soll die Klasse Hinweis vergeben werden. Dann wird das Ganze noch JSON-enkodiert und an die style_formats übergeben. Was ich hier unten noch als letztes mache: Ich möchte diese styles.css Dateien natürlich auch in meinem Editor sehen und nicht nur im Frontend, diese Klasse mit Stylesheets belegen. Da sag ich einfach hier: Ich möchte add_editor_style und dann soll das Ganze auf editor.css weitergeleitet werden. Das ist bei Ihnen natürlich entsprechend ein anderer Pfad, aber in dieser editor.css sage ich, dass intro-Text bold sein soll und etwas kleiner sein soll und ein Hinweistext soll einen roten Rahmen und einen roten Hintergrund haben. Wenn wir uns das Ganze jetzt hier noch einmal anschauen, und hier in den HTML-Editor gehen, dann sehen Sie, dass ich genau hier diesen SpanText und diese Klasse Hinweis habe. Wenn ich jetzt hier zurückgehe, kann ich zum Beispiel auch diesen oberen Bereich als Introtext definieren. Dann ist er ein bisschen kleiner und fett gedruckt. Auch hier habe ich gleich dieses None definiert. Vergessen Sie nicht, dass Sie in Ihrer original css.Datei diese Klassen natürlich auch belegen müssen, damit das Ganze im Frontend auch anders ausschaut.

WordPress 4 für Profis

Profitieren Sie von den zahlreichen Praxistipps und arbeiten Sie effizienter mit Ihrem WordPress-System.

1 Std. 5 min (20 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!