Eigene Shortcodes schreiben oder Div Shortcode verwenden

In einem Projekt ergab sich die Anforderung, dass auf einer Seite alle Mitarbeiter aufgelistet werden. Und zwar so:

shortcode_anforderung_team_seite

Lösung mit eigenen Shortcodes

Da ich keine Lust hatte, in der Text-Sicht des Beitrags HTML zu coden, habe ich Shortcodes geschrieben. Und das ist gar nicht so schwer.

Um das Layout umzusetzen, brauchte ich zwei geschachtelte div-Elemente mit class-Attributen. Die Shortcodes sollten heißen staff und description. Mit dem folgenden Code habe ich die Shortcodes zur Verfügung:

function staff_shortcode( $atts, $content = null ) {
   return '<div>' . do_shortcode( $content ) . '</div>';
}
function description_shortcode( $atts, $content = null ) {
   return '<div>' . $content . '</div>';
}

add_shortcode( 'staff', 'staff_shortcode' );
add_shortcode( 'description', 'description_shortcode' );

Da die Shortcodes geschachtelt sind, ist der Aufruf do_shortcode des äußeren Shortcodes wichtig, damit auch der innere Shortcode verarbeitet wird.

Da ich ein modifiziertes Standard-Theme verwendet habe, habe ich den Code einfach in die functions.php des Themes gepackt. Ich brauchte also nicht mal ein eigenes Plugin.

Im Editor sieht das dann so aus:

shortcode_custom_shortcode_editor

Alternative Lösung: Div Shortcode

Erst nachdem ich das Projekt abgeschlossen hatte, entdeckte ich das Plugin Div Shortcode (http://wordpress.org/plugins/div-shortcode/), mit dem sich das obige Problem ebenfalls lösen lässt. Und zwar ohne eigenen Code, stattdessen muss nur das Div Shortcode Plugin installiert werden.

Im Editor sieht das dann so aus:

shortcode_div_shortcode_editor

Ich habe mich zunächst gewundert, warum das Div Shortcode Plugin mit einem Shortcode [end-div] arbeitet, statt mit einem schließenden [/div]. Das liegt daran, dass WordPress unterschiedliche Shorcodes schachteln kann (so wie oben stuff und description), aber nicht in der Lage ist, gleiche Shortcodes zu schachteln. Es ist nicht möglich mit einfachen Mitteln einen div-Shortcode bereitzustellen, der [div][div][/div][/div] richtig interpretieren kann. WordPress würde das erste öffnende und das erste schließende Tag als Paar betrachten. Daher der "Workaround" über das [end-div].

Fehlerhaftes HTML und Abhilfe durch Shortcode Empty Paragraph Fix

In beiden obigen Umsetzungsalternativen - also mit eigenen Shortcodes oder mit dem Div Shortcode - kommt es zunächst zu fehlerhaftem HTML. In der Quellcodeansicht sieht es in beiden Fällen so aus:

shortcode_html_sourcecode_mit_fehler

WordPress packt um das öffnende div ein p-Tag und bringt damit das HTML ordentlich durcheinander.

Abhilfe schafft das Plugin Shortcode Empty Paragraph Fix (http://wordpress.org/plugins/shortcode-empty-paragraph-fix/). Einfach installieren und aktivieren. Anschließend ist der Fehler weg.

shortcode_html_sourcecode_ohne_fehler

 

bjoerne_com_bjoern_weinbrenner_softwareentwickler_icon_leistungen_02

Lust auf mehr? Als Experte für WordPress und individuelle WordPress-Entwicklung kann ich Sie in Ihren Projekten unterstützen. Melden Sie sich gerne bei mir.

2017-01-28T14:33:11+00:00 27.08.2013|Tags: , , |0 Kommentare

Hinterlassen Sie einen Kommentar