Standardmäßig wird der Inhalt von WordPress-Artikeln und -Seiten einspaltig dargestellt. Für ein aktuelles Projekt habe ich nach einer einfachen Möglichkeit gesucht, Inhalte (Texte und Bilder) auch zweispaltig darzustellen. Und zwar flexibel, also im Editor mit einem Shortcode auswählbar und möglichst ohne ein zusätzliches Plugin. Da die Quellen z.T. unvollständig bzw. nicht funktionsfähig waren, fasse ich meine kleine Lösung hier mal kurz zusammen.
1. functions.php um Shortcode-Funktionen erweitern
Die im Ordner des verwendeten Themes beheimatete Datei functions.php muss wie folgt erweitert werden:
<?php
// Shortcodes für 2 Spalten // Linke Spaltefunction basic_leftcolumn($atts, $content = null) { if(!empty($content)){ return do_shortcode('<div class="leftcolumn">' . $content . '</div>');} return '<div class="leftcolumn">' . $content . '</div>';}add_shortcode("leftcolumn", "basic_leftcolumn"); // Rechte Spaltefunction basic_rightcolumn($atts, $content = null) { if(!empty($content)){ return do_shortcode('<div class="rightcolumn">' . $content . '</div>');} return '<div class="rightcolumn">' . $content . '</div>';}add_shortcode("rightcolumn", "basic_rightcolumn"); // Spalte mit vollständiger Breitefunction basic_topcolumn($atts, $content = null) { if(!empty($content)){ return do_shortcode('<div class="topcolumn">' . $content . '</div>');} return '<div class="topcolumn">' . $content . '</div>';}add_shortcode("topcolumn", "basic_topcolumn");
?>Hiermit werden 3 Shortcodes zur Verfügung gestellt, die jeweils einen neuen Container mit entsprechender Klasse erzeugen. Mit do_shortcode erreichen wir, dass sich die Shortcodes verschachteln lassen (Danke an Colin!).
2. CSS anpassen
Die 3 Container müssen nun natürlich noch entsprechend gestylt werden. Dazu müssen in der style.css des verwendeten Themes folgende Zeilen ergänzt werden:
/* Zweispaltiger Inhalt mit Shortcode */.entry-content .leftcolumn, .entry-content .rightcolumn {width: 48%; }.entry-content .leftcolumn {float: left; }.entry-content .rightcolumn {float: right; }.entry-content .topcolumn {clear: both; }3. Shortcodes im Editor verwenden
Die Shortcodes können nun im Editor wie folgt verwendet werden:
[leftcolumn]Hier steht der Text der linken Spalte.[/leftcolumn][rightcolumn]Hier steht der Text der rechten Spalte.[/rightcolumn][topcolumn]Hier steht der Text der breiten Spalte.[/topcolumn]Die Verwendung der breiten Spalte ist übrigens ratsam, um die Floats aufzulösen und eventuelle Darstellungsprobleme im Verbindung mit dem verwendeten Theme zu vermeiden.
Ergebnis:
Hier steht nun also Text in der linken Spalte. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Und dies ist der Text in der rechten Spalte. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Und hier steht wieder Text in der normalen Breite. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
***
Update: Im Artikel Shortcode für mehrspaltigen Inhalt in WordPress mit CSS3 Multi-column findet ihr eine neue Lösung mit CSS3, die nur 1 Shortcode benötigt!
Hi Matthias,
klasse Idee! Ich habe Deinen Code für die functions.php nach der ersten if Anweisung in die .php Datei eingebaut. Entsprechend die CSS Anweisungen in die style.css meines aktuellen Themes. Allerdings werden die unterschiedlichen Spalten weiterhin untereinander dargestellt.
Hast Du da eine Idee?
PS: Umgesetzt wird der shortcode (ist auf der fertigen Seite im HTML zu sehen), allerdings nicht “interpretiert”.
Hi Sebastian,
dann liegt es am CSS. Schau mal bitte, ob bei dir die Klasse für den Content auch “.entry-content” heißt. Falls nicht, entsprechend die 4 CSS-Anweisungen ändern.
Gruß
Matthias
Hallo Matthias,
darüber war ich auch schon gestolpert, hab mir aber nix dabei gedacht. Ich verwende zum testen das Default Theme und dort heißt es tatsächlich nur entry. Nach dem ändern aller fünf Namen von entry-content in entry aus Deinem Code funktioniert es einwandfrei.
Vielen Dank für das sehr gute workarround!
Gruß
Sebastian
Gern geschehen!
Hallo Matthias!
Danke für die kleine Anleitung.
Trotz meinem gefährlichen Halbwissen konnte ich es realisieren.
Meine Frage: In der linken Spalte soll nun eine Nextgengallery eingebettet werden. Aber irgendwie scheitere ich damit.
Wenn ich z.B. [nggallery id=2] einbaue, bringt das leider nichts.
Entschuldigen, wenn ich frage. Ich bin blutiger Anfänger.
Danke vorab
Hallo Flo,
freut mich, dass die kleine Anleitung geholfen hat.
Grundsätzlich ist es möglich, Shortcodes zu verschachteln. Im WordPress Codex kannst du die Einschränkungen nachlesen und dieser Artikel scheint eine brauchbare Erkläuterung zu liefern. Ich hab es selbst aber nicht getestet.
Viel Erfolg und sag Bescheid, wenn es geklappt hat.
Hi,
ich habe eine kleine Optimierung für die functions.php:
// Shortcode for columns
// Left
function basic_leftcolumn($atts, $content = null) {
if(!empty($content)){
return do_shortcode('' . $content . '');
}
return '' . $content . '';
}
add_shortcode("leftcolumn", "basic_leftcolumn");
// Right
function basic_rightcolumn($atts, $content = null) {
if(!empty($content)){
return do_shortcode('' . $content . '');
}
return '' . $content . '';
}
add_shortcode("rightcolumn", "basic_rightcolumn");
// Top
function basic_topcolumn($atts, $content = null) {
if(!empty($content)){
return do_shortcode('' . $content . '');
}
return '' . $content . '';
}
add_shortcode("topcolumn", "basic_topcolumn");
Damit ist es auch möglich, dass sich andere Shortcodes in den Spalten befinden können.
Liebe Grüße
Colin
Oh Prima! Danach hatte ich vor Kurzem tatsächlich gesucht. Wird gleich ausprobiert.
Danke und Gruß
Matthias
Hallo Matthias,
ich habe das gleiche Problem wie Sebastian vor x-Jahren. Wo genau schaue ich nach ob meine klasse für den Content “.entry-content” heißt? Im css.stile nehme ich an?
Wenn nicht muss ich Deinen angefügten Code in die dort genommene Bezeichnung ändern?
Bin Anfänger, sorry der Nachfrage
Du kannst entweder in einem deiner Templates schauen (z.B. in der single.php) oder in deinem Stylesheet (style.css).
Danke erstmal, aber woran erkenne ich, wie die Klasse “content” definiert wurde?
Gehe in deinen Theme-Ordner und öffne eines der Templates, dass den Content anzeigt, z.B. die Datei content-single.php im Twenty Eleven Theme. Dort suchst du dann nach dem Container, der das Template Tag
the_content()enthält. Und genau die Klasse dieses Containers musst du im Stylesheet verwenden. Im Theme Twenty Eleven heißt sieentry-content, in anderen Themes kann sie aber auch anders heißen. Hier noch ein Screenshot.Erstmal vielen Dank für die Hilfe! Für mich ist es etwas frustrierend für so etwas “kleines” so viel Aufwand zu haben, der dann nicht funktioniert. Daher meine Fragen direkt an der “Quelle”
Ich habe auch mal einen Screenshot angefügt meiner content-single.php. Der markierte Bereich legt der die Klasse fest? Auf verdacht “clear” einzugeben im Stylesheet hat nichts bewirkt!
Dein Blog ist im Abo
http://img6.imagebanana.com/img/1sdbonys/contensinglephp.png
Die entsprechende Klasse heißt in deinem Fall
single-entry-content. Hilft dir das weiter?Habe ich probeweise AUCH mal versucht…TADAAAA!!! Hat funktioniert Wie großartig.
Vielen Dank für die Hilfe! Bin begeistert.
Vielleicht schaust Du mal auf dem Forum vorbei aus dem ich komme, den Backlink solltest ja eigentlich schon sehen !?
Ansonsten hier der Link:
http://www.everestforum.de (nimm ihn raus, falls nicht gewollt)
Viele gleichgesinnte Internet-Marketer und solche die es werden wollen, eventuell sind für dich auch Kontakte drinne?
Schönen Tag noch
Freut mich, dass ich helfen konnte.
In das Forum schaue ich gern mal rein. Danke!
Pingback: Anonymous