Erste Schritte mit WordPress-Shortcodes und Beispiel-Snippets

WordPress-Shortcodes wurden in 2.5 eingeführt und helfen Ihnen, Makrocodes zu erstellen, die Sie in Ihren Inhalten verwenden können. Wenn Sie darüber nachdenken, ist dies eine großartige Möglichkeit, so etwas wie einen dynamischen Werbespot oder einen Call-to-Action-Button in Ihren Beiträgen zu erstellen.

Wenn wir das Call-to-Action-Beispiel verwenden, könnten Sie Ihrem Blog-Beitrag so etwas hinzufügen, um die Schaltfläche anzuzeigen, und dann die Ausgabe in Ihrer Datei „functions.php“ Ihrer Vorlage bearbeiten, worauf wir in einer Minute zurückkommen.

 [button]

Um die Schaltfläche anzupassen, könnten wir einfach etwas hinzufügen wie:

 [button type="twitter"]

Oder um es noch besser zu machen, könnten wir einen umschließenden Shortcode verwenden:

 [button type="twitter"]Follow me on Twitter![/button]

Mit etwas Fantasie erkennen Sie schnell das Potenzial von Shortcodes und was man damit machen kann. In diesem Artikel zeige ich Ihnen, wie Sie diese drei verschiedenen Arten von Shortcodes erstellen und verwenden, und zeige dann einige gebrauchsfertige Shortcodes, die Sie auf Ihrer eigenen WordPress-Site verwenden können.

Erstellen eines selbstschließenden Shortcodes

Der einfachste Shortcode ist der selbstschließende. Wir erstellen einen einfachen Link zu unserem Twitter-Konto und fügen ihn dann einem Blogbeitrag hinzu.

Der gesamte Code kommt in die functions.php , die sich in /wp-content/themes/your-theme/ befindet. Wenn Sie keine haben, erstellen Sie einfach eine und fügen Sie den Code ein.

 <?php function button_shortcode() { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follow me on Twitter!</a>"'; } add_shortcode('button', 'button_shortcode'); ?>

Verwendungszweck:

 [button]

Mit der Funktion add_shortcode() können wir einfach jede PHP-Funktion mit unserem Shortcode verknüpfen. In diesem einfachen Beispiel geben wir lediglich einen Link zu unserem Twitter-Konto zurück, aber gehen wir noch einen Schritt weiter und fügen einige Parameter hinzu.

Erstellen eines selbstschließenden Shortcodes mit Parametern

Shortcode unterstützt Parameter, mit denen wir die Ausgabe anpassen können. In diesem Beispiel haben wir zwei verschiedene Buttons, also müssen wir definieren, welchen Button wir zeigen wollen.

 <?php function button_shortcode($type) { extract(shortcode_atts(array( 'type' => 'type' ), $type)); // check what type user entered switch ($type) { case 'twitter': return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follw me on Twitter!</a>'; break; case 'rss': return '<a href="http://example.com/rss" class="rss-button">Subscribe to the feed!</a>' break; } } add_shortcode('button', 'button_shortcode'); ?>

Jetzt können Sie auswählen, welche Schaltfläche angezeigt werden soll, indem Sie den type in Ihrem Shortcode definieren.

 [button type="twitter"] [button type="rss"]

Das ist toll. Aber was, wenn wir den Text ändern wollten? Wir könnten weiter Shortcode-Typen wie [button type="twitter-2"] und so weiter hinzufügen, aber das ist nicht sehr dynamisch, oder? Mal sehen, wie man das richtig macht.

Erstellen eines umschließenden Shortcodes

Der umschließende Shortcode ermöglicht es Ihnen, Inhalte in Ihren Shortcode einzubetten, genau wie BBCode, wenn Sie das jemals verwendet haben.

 <?php function button_shortcode( $attr, $content = null ) { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>

Um diesen Shortcode zu verwenden, betten Sie den Text, den Sie verwenden möchten, wie folgt ein:

 [button]Follow me on Twitter![/button]

Um diese Schaltfläche noch besser zu machen, könnten wir Parameter hinzufügen, wie wir es im vorherigen Beispiel getan haben. Lassen Sie uns diesmal zwei Parameter hinzufügen, einen für den Twitter-Benutzernamen und einen für den Schaltflächenstil. Dann können wir verschiedene Arten von Schaltflächen haben und auswählen, mit welchem ​​Twitter-Konto wir die Schaltfläche verknüpfen möchten.

 <?php function button_shortcode( $atts, $content = null ) { extract( shortcode_atts( array( 'account' => 'account', 'style' => 'style' ), $atts ) ); return '<a href="http://twitter.com/' . esc_attr($account) . '" class="twitter-button ' . esc_attr($style) . '">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>

Verwendungszweck:

 [button account="filipstefansson" style="simple"]Follow me on Twitter![/button] // Result: <a href="http://twitter.com/filipstefansson" class="twitter-button simple">Follow me on Twitter!</a>

Jetzt haben wir eine anpassbare Schaltfläche, die wir mit jedem Twitter-Konto verknüpfen können. Wie Sie sicher verstehen, können Sie weitaus fortgeschrittenere Shortcodes als diese erstellen, aber dies ist ein guter Anfang.

Shortcodes in Widgets und Vorlagendateien

Jetzt, wo Sie die Leistungsfähigkeit von Shortcodes gesehen haben, fragen Sie sich wahrscheinlich, warum Sie sie nicht in Ihren Widgets und Ihren Vorlagendateien verwenden können. Nun, es stellt sich heraus, dass Sie es können.

Um Shortcodes in Ihren Widgets zu aktivieren, fügen Sie einfach den folgenden Code in functions.php ein:

 add_filter('widget_text', 'do_shortcode')

Und um einen Shortcode in Ihren Vorlagendateien zu verwenden, können Sie darauf zugreifen, indem Sie Folgendes verwenden:

 do_shortcode("[button]");

Gebrauchsfertige Shortoden

Hier sind einige coole Shortcodes, die Sie sofort implementieren können.

Code in Beiträgen

Wenn Sie einen Blog betreiben, der sich auf das Programmieren konzentriert, möchten Sie wahrscheinlich Code in Ihren Beiträgen anzeigen.

 function code_shortcode( $attr, $content = null ) { $content = clean_pre($content); // Clean pre-tags return '<pre"><code>' . str_replace('<', '<', $content) . // Escape < chars '</code></pre>'; } add_shortcode('code', 'code_shortcode');

Verwendungszweck:

 [code]<?php echo 'Hello World!'; ?>

Betten Sie Adsense überall in Ihre Posts ein

Mit diesem Shortcode können Sie überall in Ihren Beiträgen eine Google-Anzeige hinzufügen, indem Sie einfach [adsense] .

 function showads() { return '<script type="text/javascript"><!-- google_ad_client = "pub-3637220125174754"; google_ad_slot = "4668915978"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> '; } add_shortcode('adsense', 'showads');

YouTube-Video einbetten

Mit diesem Shortcode können Sie YouTube-Videos in Ihre Blog-Beiträge einbetten.

 function youtube($atts) { extract(shortcode_atts(array( "value" => 'http://', "width" => '475', "height" => '350', "name"=> 'movie', "allowFullScreen" => 'true', "allowScriptAccess"=>'always', "controls"=> '1', ), $atts)); return '<object style="height: '.$height.'px; width: '.$width.'px"><param name="'.$name.'" value="'.$value.'"><param name="allowFullScreen" value="'.$allowFullScreen.'"><param name="allowScriptAccess" value="'.$allowScriptAccess.'"><embed src="'.$value.'" type="application/x-shockwave-flash" allowfullscreen="'.$allowFullScreen.'" allowScriptAccess="'.$allowScriptAccess.'" width="'.$width.'" height="'.$height.'"></object>'; } add_shortcode("youtube", "youtube");

Verwendungszweck:

 // Optional attributes: width, height, name, allowFullScreen, allowScriptAccess, controls [youtube value="http://www.youtube.com/watch?v=1aBSPn2P9bg"]

Paypal-Spenden-Shortcode

Dies ist ein Shortcode, der Ihnen hilft, Spendenlinks zu Ihrem Paypal-Konto zu erstellen.

 function donate_shortcode( $atts, $content = null) { global $post;extract(shortcode_atts(array( 'account' => 'your-paypal-email-address', 'for' => $post->post_title, 'onHover' => '', ), $atts)); if(empty($content)) { $content='Make A Donation'; } return '<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation for '.$for.'" title="'.$onHover.'">'.$content.'</a>'; } add_shortcode('donate', 'donate_shortcode');

Verwendungszweck:

 [donate] [donate]Donate Now[/donate] [donate account="[email protected]" onHover="Thanks" for="Title"] [donate account="[email protected]" onHover="Thanks" for="Title"]Donate Now[/donate]

Private Notiz an die Autoren

Letzteres ist clever. Mit diesem Shortcode können Sie Notizen in Ihren Beiträgen erstellen, die nur die Autoren sehen können.

 function sc_note( $atts, $content = null ) { if ( current_user_can( 'publish_posts' ) ) return '<div class="note">'.$content.'</div>'; return ''; } add_shortcode( 'note', 'sc_note' );

Fazit

Nachdem Sie diesen Artikel gelesen haben, hoffe ich, dass Sie WordPress-Shortcodes genauso lieben wie ich, und ich hoffe, Sie werden anfangen, sie in Ihrem eigenen Blog zu implementieren.