WordPressのショートコードをマスターするチュートリアル

WordPressのショートコードの基本的なものから実用的なものまでのチュートリアルをSmashing Magazineから紹介します。

Mastering WordPress Shortcodes

シンプルなショートコード

最初はお約束の「Hello, World!」の表示。

functions.php

function hello() {
    return 'Hello, World!';
}

add_shortcode('hw', 'hello');

WordPressに記述するショートコード

[hw]

URLを表示するショートコード

リンクのhrefからURLを取得して表示。

functions.php

function myUrl($atts, $content = null) {
	extract(shortcode_atts(array(
		"href" => 'http://'
	), $atts));
	return '<a href="'.$href.'">'.$content.'</a>';
}

add_shortcode("url", "myUrl");

WordPressに記述するショートコード

[url href="http://www.wprecipes.com"]WordPress recipes[/url]

RSSボタンを配置するショートコード

RSSボタンなどdiv要素を配置。

functions.php

function subscribeRss() {
    return '<div class="rss-box"><a href="http://feeds.feedburner.com/wprecipes">Enjoyed this post? Subscribe to my RSS feeds!</a></div>';
}

add_shortcode('subscribe', 'subscribeRss');

WordPressに記述するショートコード

[subscribe]

Google AdSenseを配置するショートコード

Google AdSenseをショートコードで管理。

functions.php

function showads() {
    return '<div id="adsense"><script type="text/javascript"><!--
	google_ad_client = "pub-XXXXXXXXXXXXXX";
	google_ad_slot = "4668915978";
	google_ad_width = 468;
	google_ad_height = 60;
	//-->
</script>

<script type="text/javascript"
src="http://88.198.60.17/images/mastering-wordpress-shortcodes/http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>';
}

add_shortcode('adsense', 'showads');

WordPressに記述するショートコード

[adsense]

特定のカテゴリから記事を取得するショートコード

特定のカテゴリから指定した数の記事を取得。

functions.php

function sc_liste($atts, $content = null) {
        extract(shortcode_atts(array(
                "num" => '5',
                "cat" => ''
        ), $atts));
        global $post;
        $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
        $retour='<ul>';
        foreach($myposts as $post) :
                setup_postdata($post);
             $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';
        endforeach;
        $retour.='</ul> ';
        return $retour;
}

add_shortcode("list", "sc_liste");

WordPressに記述するショートコード

[liste num="3" cat="1"]

ウィジェットにもショートコードを使用可に

サイドバーのウィジェットにもショートコードを使用できるように。

functions.php

add_filter('widget_text', 'do_shortcode');

Smashing Magazineのエントリーでは、他にも、twitterやfeedburner関連、最新画像を取得するショートコードが紹介されています。