Auf unseren Hilfeseiten sind gelegentlich farbig umrahmte Text-Bereiche zu sehen, um bestimmte Inhalte zu betonen. Als wir in 2012 angefangen hatten, die Hilfeseiten auf WordPress umzustellen, war uns noch nicht bewusst, wie leicht sich das mit Boardmitteln umsetzen lässt. Stattdessen hatten wir hierfür ein etwas aufgeblähtes Plugin genutzt, das “Special Text Boxes” Plugin, welches beim Aufruf jeder Seite unötig Ballast erzeugt, selbst auf denen, wo keine Textboxen zu sehen sind.

Es gibt zwar noch einige andere Plugins, die bei bestimten Inhalten verschiedene Gestaltungsoptionen anbieten (TinyMCE Advanced, Shortcodes Ultimate oder Gutenberg). Doch am schlankesten lässt sich das ohne Plugin lösen. Wir benötigen hierfür ein Child-Theme, in dem wir über eine zusätzliche functions.php und style.css einen eigenen Shortcode anlegen und diesem eigene Style-Deklarationen zuweisen. Derart erzeugte eigene Shortcodes können zwar auch noch über eigene Dashicons in der Toolbar des TinyMCE Editors eingebunden werden, wir beschränken uns jedoch auf die functions.php und style.css im Child-Theme.

functions.php Code

add_shortcode( 'texbox', function($atts, $content = null) {
return '<div class="farbigetextbox">' . $content . '</div>';
});

style.css

.farbigetextbox {
background:blue;
color:white;
padding:15px;
}

Wenn jetzt der Inhalt der Textbox mit dem Shortcode [textbox]Inhalt der Textbox[/textbox] umkfasst wird, würde dieser mit einem blauen Hintergrund, weisser Schrift und einem Abstand von 15px zwischen Text und Rand der Textbox dargestellt werden. Das gilt übrigens nicht für Text-Links, dazu später mehr.