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

13 Juni 2013 5 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):

  1. span class="co1">// Attributes
  2. 'width' => '',
  3. 'height' => '',
  4. 'float' => '',
  5. 'padding' => '',
  6. 'border' => '',
  7. 'margin' => '',
  8. 'clear' => '''<div style="';
  9.  
  10. // Code
  11. 'width: '.$width.';''height: '.$height.';''float: '.$float.';''padding: '.$padding.';''border: '';''margin: '.$margin.';''clear: '.$clear.';''">''</div>''div_new', 'div_shortcode'// Attributes
  12. 'width' => '',
  13. 'height' => '',
  14. 'float' => '',
  15. 'padding' => '',
  16. 'border' => '',
  17. 'margin' => '',
  18. 'clear' => '''<div style="';
  19.  
  20. // Code
  21. 'width: '.$width.';''height: '.$height.';''float: '.$float.';''padding: '.$padding.';''border: '';''margin: '.$margin.';''clear: '.$clear.';''">''</div>''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

Du kannst gerne Deinen Senf zu diesem Beitrag geben: Hier geht es zu den Kommentaren




Schreiben macht durstig! Eine kleine Erfrischung kann daher nie schaden. Wem dieser freie Artikel gefallen hat, der darf mir gerne einen frisch gezapften Hopfen-Tee ausgeben (Paypal - der Spenden-Knopf
oder bitcoin - Adresse: 1NacVNwcLLePUVv8uSafu5Ykdwh8QyDfgK). Ich freue mich über jede noch so kleine Spende. Vielen Dank und Prost!
 Alle Kommentare als Feed abonnieren

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

  1. al sagt:

    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 sagt:

      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 sagt:

    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 sagt:

      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 sagt:

    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!

Antworten