WordPress – Anpassung des Texteditors

0

An dieser Stelle möchte ich erklären, wie man mithilfe der WordPress Funktion add_editor_style(), das Aussehen des Texteditors im WordPress-Backend anpassen kann. Dies ist zum Beispiel dann sinnvoll, wenn man das Design des Editors an das Frontend-Design einer Webseite anpassen möchte. Man kann die Funktion aber auch einfach dazu nutzen, eine bestimmte Gestaltung von Elementen im Editor zur erzielen.

Um diese Thematik zu verdeutlichen, wähle ich als Beispiel den HTML-Tag <code>, welcher zur Kennzeichnung von Quelltext eingesetzt wird. Gibt man nun Beispielsweise <code>Ich bin Quellcode</code> in den HTML-Editor von WordPress ein und wechselt anschließend auf den visuellen Editor, so wird man feststellen, dass der Inhalt zwischen den <code>-Tags nur in einer anderen Schriftart angezeigt wird. Dies entspricht der Standardgestaltung des Code-Elementes.

Ziel ist es nun, die Gestaltung des Elements im Editor an das Design im Frontend anzupassen. In meinem Theme sieht das Code-Element folgendermaßen aus.

<code>Ich bin Quellcode</code>

Soll der Code im visuellen Editor genau so angezeigt werden, bedient man sich der oben genannten Funktion add_editor_stylesheet(), um ein eigenes Stylesheet für den Browser anzulegen. Die Funktion wird dabei in die Datei functions.php im Theme-Verzeichnis eingefügt. Als mögliches Argument kann der Funktion der Name des Stylesheets übergeben werden. Gibt man keinen Parameter für das Argument an, muss man das Stylesheet editor-style.css nennen.

Ist das geschehen, kann man das Stylesheet mithilfe eines Texteditors erstellen. Im Falle des obigen Beispiels würde der Code wie folgt lauten.

code {
	display: block;
	margin: 20px 0;
	padding: 15px 20px;
	background-color: #f1f1f1;
}

Hat man das Stylesheet angelegt und in die oberste Ebene des Theme-Verzeichnises hochgeladen, sollte der Text, der mit den Code-Tags gekennzeichnet wurde, nun wie auf dem unten stehenden Bild aussehen.

Darstellung des Code-Elements mit benutzerdefiniertem Editor-Stylesheet

Auf diese Weise kann die Darstellung sämtlicher zur Verfügung stehender HTML-Elemente im Editor angepasst werden. Aber auch der Editor selbst kann verändert werden. Möchte man beispielsweise die Breite des Editors an die Breite des Inhalts im Frontend einer Seite anpassen, fügt man nachstehenden Code in das Stylesheet ein. In meinem Fall wird die Breite des Editors somit auf 698 Pixel begrenzt.

html .mceContentBody {
	max-width: 698px;
}

Möchte man alle Elemente an das Design der Webseite angleichen, ist es eine gute Idee, den CSS-Code für die entsprechenden Elemente aus dem Haupt-Stylesheet der Seite zu kopieren und in das Editor-Stylesheet einzufügen.
In meinem Fall sieht das fertige Editor-Stylesheet für das LB-Projects Theme folgendermaßen aus.

/*
*	Stylesheet for customization of the TinyMCE editor
*
*	LB-Projects Theme
*	Autor: Lukas Bommes
*	Copyright (C) Lukas Bommes
*/

html .mceContentBody {
	max-width: 698px;
}

* { 
	font-family: Verdana,Arial,sans-serif;
	font-size: 12px;
	line-height: 150%;
	text-rendering: optimizelegibility;
	word-wrap: break-word;
	hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	-o-hyphens: auto;
	-ms-hyphens: auto;
}

body#tinymce {
	color: #3a3a3a;
}


::selection { background:#d54e21; color:#fff; }
::-moz-selection { background:#d54e21; color:#fff; }
::-webkit-selection { background:#d54e21; color:#fff; }


/* Misc */

a, 
a:active, 
a:visited {
	color: #d54e21;
	text-decoration: none;
	outline: none;
}

a:hover {
	text-decoration: underline;
}

img {
	border: none;
	max-width: 650px;
	height: auto;
}

input,
textarea {
	font-family: Verdana,Arial,sans-serif;
	font-size: 12px;
	padding: 2px;
	outline: none;
	color: #3a3a3a;
}


/* Text Styles */

code {
	display: block;
	margin: 20px 0;
	padding: 15px 20px;
	background-color: #f1f1f1;
}

table {
	border-collapse: collapse;
}

th {
	padding: 10px;
	background-color: #f1f1f1;
	text-align: left;
	border: 1px solid #888 !important;
}

td {
	padding: 10px;
	border: 1px solid #888 !important;
}

blockquote {
	display: inline-block;
	padding: 5px 12px;
	text-indent: 40px;
	background: transparent url('images/blockquote.png') 5px 5px no-repeat;
	border: 1px dashed #ddd;
}

blockquote cite {
	display: block;
	margin-top: 10px;
	text-indent: 0;
}

blockquote cite:before {
	content:"- ";
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
}


/* Alignments */

.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 15px;
	margin-top: 4px;
}

.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 15px;
	margin-top: 4px;
}

.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft,
.alignright,
.aligncenter,
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 6px;
}

img.alignnone,
.alignnone {
	display: block;
	margin-top: 4px;
	margin-bottom: 12px;
}


/* Captions */

.wp-caption {
	max-width: 660px;
	background: #f1f1f1;
	color: #888;
	text-align: center;
	margin-top: 10px;
	padding: 5px;
	border: none;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	-o-border-radius: 0;
	-ms-border-radius: 0;
}

.wp-caption img {
	margin: 5px;
}

.wp-caption p.wp-caption-text {
	margin: 0 0 4px;
}


/* Custom Shortcodes */

a.button,
a.button:active,
a.button :visited{
	text-decoration: none;
	display: inline-block;
	margin: 10px 0;
	padding: 10px;
	color: #fff !important;
	background-color: #d54e21;
	transition: background-color .15s;
	-moz-transition: background-color .15s;
	-webkit-transition: background-color .15s; 
	-o-transition: background-color .15s;
	-ms-transition: background-color .15s;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
}

a.button:hover {
	background-color: #33363b;
}

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Zu diesem Artikel sind bisher keine freigegebenen Kommentare vorhanden.