WordPress: div-Container über Shortcodes einziehen – Seiten oder Beiträge individuell designen

10 Kommentare Autor: Jürgen (jdo)

Wordpress 3 Logo 150x150Ich durfte mich in der letzte Woche wieder mal etwas intensiver mit WordPress beschäftigen. Man kann zwar für jede Seite einzelne Templates anlegen, aber manchmal ist das sehr unpraktisch. Bei gewissen Seiten will man flexibel einfach mal einen oder mehrere div-Container einpflegen und damit das Design beeinflussen können. Nun haben wir gebrütet, wie sich das ohne viel Aufwand und dennoch einigermaßen verständlich erledigen lässt. Wir haben das Rätsel mit Shortcodes gelöst.

Unser Shortcode macht nichts anderes als einfach einen Container mit den entsprechend definierten Parametern zu generieren. Bei meinem Beispiel wäre div_new und div_inner richtig, ich kürze das aber mit div_n und div_i ab, weil mit WordPress sonst einen Shortcode einfügen würde. 🙂

In der Datei functions.php gibst Du nun zum Beispiel diese Zeilen ein (Die einzelnen Hochkommata wandelt WordPress falsch um – der Code ist hier noch mal als txt hinterlegt):

function div_shortcode( $atts , $content = null ) {

// Attributes
extract( shortcode_atts(
array(
'width' => '',
'height' => '',
'float' => '',
'padding' => '',
'border' => '',
'margin' => '',
'clear' => '',
), $atts )
);

$return_stuff = '<div style="';

// Code
if (!empty($width)) {
$return_stuff = $return_stuff.'width: '.$width.';';
}
if (!empty($height)) {
$return_stuff = $return_stuff.'height: '.$height.';';
}
if (!empty($float)) {
$return_stuff = $return_stuff.'float: '.$float.';';
}
if (!empty($padding)) {
$return_stuff = $return_stuff.'padding: '.$padding.';';
}
if (!empty($border)) {
$return_stuff = $return_stuff.'border: '.$border.';';
}
if (!empty($margin)) {
$return_stuff = $return_stuff.'margin: '.$margin.';';
}
if (!empty($clear)) {
$return_stuff = $return_stuff.'clear: '.$clear.';';
}
$return_stuff = $return_stuff.'">';

return $return_stuff.do_shortcode($content).'</div>';
}
add_shortcode( 'div_new', 'div_shortcode' );
function divinner_shortcode( $atts , $content = null ) {

// Attributes
extract( shortcode_atts(
array(
'width' => '',
'height' => '',
'float' => '',
'padding' => '',
'border' => '',
'margin' => '',
'clear' => '',
), $atts )
);

$return_stuff = '<div style="';

// Code
if (!empty($width)) {
$return_stuff = $return_stuff.'width: '.$width.';';
}
if (!empty($height)) {
$return_stuff = $return_stuff.'height: '.$height.';';
}
if (!empty($float)) {
$return_stuff = $return_stuff.'float: '.$float.';';
}
if (!empty($padding)) {
$return_stuff = $return_stuff.'padding: '.$padding.';';
}
if (!empty($border)) {
$return_stuff = $return_stuff.'border: '.$border.';';
}
if (!empty($margin)) {
$return_stuff = $return_stuff.'margin: '.$margin.';';
}
if (!empty($clear)) {
$return_stuff = $return_stuff.'clear: '.$clear.';';
}
$return_stuff = $return_stuff.'">';

return $return_stuff.do_shortcode($content).'</div>';
}
add_shortcode( 'div_inner', 'divinner_shortcode' );

In unserem Fall können wir dem Shortcode die folgenden Werte mit auf den Weg geben: widthheight, float, paddingbordermargin und clear.

Als Beispiel wäre das (nicht vergessen, ich habe new und inner abgekürzt!):

[div_n width="450px" border="solid 1px" float="left" margin="10px 0px 0px 0px" clear="left"]... Dein Inhalt hier ...

[div_i width="250px" border="solid 1px" float="left" margin="10px 0px 0px 0px" clear="left"]Dein eingebetteter Inhalt hier[/div_i]

[/div_n]

Es ist also der in der functions-php definierte Wert gefolgt von = und die CSS-Werte in “” eingeschlossen. Du kannst die Werte natürlich nach belieben ausweiten und Dich mit CSS richtig austoben. 🙂

Stolperstein

Am Anfang wollte das mit den eingebetteten div-Containern nicht klappen. Der Grund ist, dass man WordPress sagen muss: Führe Shortcode innerhalb eines Shortcodes aus. Hierfür ist die Funktion do_shortcode() zuständig. Du kannst das in Zeile 42 oben sehen.

Warum der ganze Aufwand?

Das ist natürlich eine berechtigte Frage, da man div-Container ja auch einfach im Quelltext eingeben kann. Nicht jeder ist allerdings glücklich mit dem Arbeiten im Quellcode und mit den Shortcodes können auch Nicht-Experten recht komfortabel neue Container einziehen. Des Weiteren schreiben wir gerade einen ganz einfachen Shortcode-Generator dafür. Da tippt dann die entsprechende Person einfach Breite, Höhe, Abstand und so weiter rein und der Shortcode wird automatisch für eine Copy&Paste-Aktion generiert.

Klar hätte man auch [Shortcode style=””] machen können. Allerdings ist das meiner Meinung nach schwerer lesbar und ich habe vorher gefragt, welche Methode bevorzugt würde.. Viele Wege führen nach Rom.

Was wir damit aber nun können, ist jede einzelne Seite oder jeden Beitrag speziell designen. Wir können bei Bedarf mehrere Spalten einziehen, Container platzieren und so weiter.

Ich bin mit Sicherheit auch nicht der erste, der auf eine solche Lösung kommt – aber nun weiß ich wo es steht, wenn ich es mal wieder brauche. 🙂

Das lässt sich dann damit anstellen

Container 1 – float left
Container 2 – float left/margin top 10px

Container 1 nested
Container 3 – clear left / padding top 20px / margin left 30px
Container 4 – float left / margin top 10px / margin left 10px
Container 5 – float left / margin left 50px



 Alle Kommentare als Feed abonnieren

10 Kommentare zu “WordPress: div-Container über Shortcodes einziehen – Seiten oder Beiträge individuell designen”

  1. al says:

    Hallo,

    also wie geht es weiter nachdem ich den code in functions eingesetzt habe. (ist es egal wo man den code in functions einsetzt?)

    wo setzte ich dann diesen code ein?
    [div_n width="450px" border="solid 1px" float="left" margin="10px 0px 0px 0px" clear="left"]... Dein Inhalt hier ...

    [div_i width="250px" border="solid 1px" float="left" margin="10px 0px 0px 0px" clear="left"]Dein eingebetteter Inhalt hier[/div_i]

    [/div_n]

    beschäftige mich erst seit kurzem mit wordpress, also sorry.

    Gruß AL

    • jdo says:

      Ja, es ist egal, wo Du das Code-Schnisspel in functions.php einsetzt - solange Du keine andere Funktion damit unterbrichst.

      Das div-Zeugs schreibst Du einfach in den Fließtext ...

  2. Jonny says:

    Hi,

    danke für den Beitrag allerdings habe auch ich so meine Probleme die Anleitung umzusetzen.
    Den erwähnten Shortcode-Generator konnte ich über die Suchfunktion auch noch nicht finden...
    Den Inhalt der TXT Datei habe ich 1:1 ans Ende der functions.php Datei eingefügt, stehe nun aber so wie Al vor der Frage wo ich den die DIV Container einfügen soll.
    Wenn ich den Beispiel Code in den WordPress WYSIWYG Editor einer Seite einfügen, wird mir dieser lediglich als Text ausgegeben (was ja auch logisch ist^^). Wenn ich diesen als Wert für ein Benutzerdefiniertes Feld angeben, weiß ich nicht was ich als Namen angeben soll.

    Auch wenn der Beitrag nun schon älter ist würde ich doch gerne wissen was genau zu tun ist.

    Außerdem ist mir auch nicht ganz klar wie die Anpassungen per CSS Datei festgelegt werden können. Hier wäre ein Beispiel super.

    Vielen Dank im Voraus!
    Jonny

    • jdo says:

      Du hast beachtet, dass ich die Beispiele wie im Beitrag beschrieben abgekürzt habe, da mir mit den echten Shortcodes ein Container eingezogen würde? Also anstatt div_n würdest Du div_new verwenden ...

      Das funktioniert bei mir nach wie vor, auch wenn der Artikel schon älter ist.

  3. Jonny says:

    Hi Jürgen,

    vielen Danke für die schnelle Rückmeldung!
    Ja das kommt davon wenn man sich den Code nicht anschaut, ich hatte es zwar im Beitrag gelesen bin aber davon ausgegangen dass es im PHP Code auch gleich angepasst worden ist.

    Nachdem ich den PHP Code entsprechend angepasst habe funktioniert es nun^^

    Lieben Dank und frohe Feiertage!

  4. Hallo, interessantes Script. Kompliment.

    klar man kann das im Editor einfügen also >> die div-Anweisungen und zusätzlich Container erzeugen.

    Geht das nur im Main-Bereich oder funzt das auch irgendwie im Header? Ich will nämlich im Header einen textorientieren Container über das Header-Bild ( Header-Banner ) legen und hier einen Schriftzug einbinden.

    wäre schön nach so langer Zeit noch eine Antwort zu bekommen.

    Vielen Dank.

    mfg
    alhai

    • jdo says:

      Es sollte überall funktionieren, nachdem die Datei functions.php geladen wurde. Sie wird eigentlich behandelt wie ein Plugin. Die Datei wird im WordPress Codex ganz gut erklärt.

  5. Hallo; ja danke für die Antwort. hab den Code in function.php eingefügt und dann den folgenden Code in den Editor gesetzt.

    [div_n width="450px" border="solid 1px" float="left" margin="10px 0px 0px 0px" clear="left"]... Dein Inhalt hier ...
    [div_i width="250px" border="solid 1px" float="left" margin="10px 0px 0px 0px" clear="left"]Dein eingebetteter Inhalt hier[/div_i]
    [/div_n]

    hat funktioniert.

    Aber wo muß ich obigen div-code für den header einfügen, das ist mir nicht so ganz klar? Wäre nett, hier noch eine Antwort zu bekommen.

    Vielen Dank.

    mfg
    alhai

    • jdo says:

      Im Header geht es vermutlich so:

      Ich habe das nicht probiert und das ist nur eine Vermutung.

  6. hallo nochmals, habe das Schnipsel ganz unten in der header.php eingebunden, leider kam nur orginal als text das CodeSchnipsel >>>

    trotzdem vielen Dank.
    mfg
    alhai