Eigene Shortcodes erstellen mit WordPress. Gehalten am 24.09.2013 beim WP Meetup Hamburg

1. Eigene ShortcodesEigene Shortcodes
WP Meetup Hamburg am 24.9.2013

2. HamburgHamburg
WordPressWordPress MeetupMeetup
Codex-Beispiel
/**
* Intro Shortcode
*/
function intro_shortcode( $atts, $content = null ) {
return '<span class="intro">' . $content . '</span>';
}
add_shortcode( 'intro', 'intro_shortcode' );

3. HamburgHamburg
WordPressWordPress MeetupMeetup
Shortcode in Shortcode?
/**
* Intro Shortcode
*/
function intro_shortcode( $atts, $content = null ) {
return '<span class="intro">' . do_shortcode($content) .
'</span>';
}
add_shortcode( 'intro', 'intro_shortcode' );

4. HamburgHamburg
WordPressWordPress MeetupMeetup
Parameter
function caption_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array( 'class' => 'caption',), $atts ) );
return '<span class="' . esc_attr($class) . '">' . $content .
'</span>';
}

5. HamburgHamburg
WordPressWordPress MeetupMeetup
Problem!
●
Kein Problem:
[intro]Test[/intro]
●
Problem:
[intro]Absatz 1
Absatz 2[/intro]

6. HamburgHamburg
WordPressWordPress MeetupMeetup
Erzeugtes HTML:
<div class="intro">Nicht lange darauf kam Kay mit großen
Fausthandschuhen und seinem Schlitten auf dem Rücken. Er
flüsterte Gerda in die Ohren: Ich habe Erlaubnis bekommen,
auf den großen Platz zu fahren, wo die Anderen spielen und
fort war er.</p>
<p>Nicht lange darauf kam Kay mit großen Fausthandschuhen
und seinem Schlitten auf dem Rücken. Er flüsterte Gerda in
die Ohren: Ich habe Erlaubnis bekommen, auf den großen
Platz zu fahren, wo die Anderen spielen und fort war er.</div>

7. HamburgHamburg
WordPressWordPress MeetupMeetup
Problem bekannt...
●
http://core.trac.wordpress.org/ticket/12061
●
http://core.trac.wordpress.org/ticket/24846

8. HamburgHamburg
WordPressWordPress MeetupMeetup
… Gefahr gebannt?
function prefix_remove_wpautop( $content ) {
$content =
do_shortcode( shortcode_unautop( $content ) );
$content = preg_replace( '#^</p>|^<br />|
<p>$#', '', $content );
return $content;
}
Und ähnliche Lösungen ...

9. HamburgHamburg
WordPressWordPress MeetupMeetup
Meine Lösung
/**
* Intro Shortcode
*/
function intro_shortcode( $atts, $content = null ) {
return '<div class="intro"><p>' . $content . '</p></div>';
}
add_shortcode( 'intro', 'intro_shortcode' );
CSS:
.intro p {
color: #458792;
font-size: 200%;
}

10. HamburgHamburg
WordPressWordPress MeetupMeetup
Weiterführende Links

Dokumentation (inkl noch mehr Links)

http://codex.wordpress.org/Shortcode_API

Shortcode generieren lassen:

http://generatewp.com/shortcodes/

Shortcode als Quicktag einfügen

http://wordpress.org/plugins/addquicktag/