WordPress –ショートコードを使ってPHPを実行する-

以前にPHP – WordPressでiPhoneアプリランキングを表示させる方法 –という記事を書きましたが、このときは固定ページテンプレートにphpを書いていました。

別のコードを実行したい場合にその都度新しい固定ページテンプレートを作成するのも面倒なので、記事の本文に直接phpを書けないか調べてみました。

記事本文にphpを直接書いて実行できるようにするプラグインはExec-PHPなどいくつかあるようですが、実行させたいのではなく記事の一部としてphpコードを書いた場合（サンプルコードとして紹介する場合など）にも実行されてしまうという情報もありました。
回避方法はいろいろあるのでしょうが、ショートコードという機能を知ったのでこちらを使ってみることにしました。

ショートコードの基本的な使い方

以下のようなコードをfunctions.phpに追加します。

function shortcodeTest() {
    return 'ショートコードを使ってみました。';
}
 
add_shortcode('sc', 'shortcodeTest');

記事のなかに”[sc]”と書くと”ショートコードを使ってみました。”が出力されるようになります。

ショートコードを使ってiPhoneアプリランキングを表示させる

以下、iPhoneアプリランキングを表示させるためにfunctions.phpに追加したコードです。
HTMLが挿入される位置が変わったせいか表示も若干変わってしまったのでCSSも修正しました。
あとは”add_shortcode(‘showFreeGameAppRanking’, ‘showFreeGameAppRanking’);”で指定した文字列(showFreeGameAppRanking)を角括弧で括って記事本文に書くだけです。

<?php
/**
 * iOS無料ゲームアプリを出力
 *
 */
function showFreeGameAppRanking() {

date_default_timezone_set('Asia/Tokyo');
$html = '<h2>'.date( "F j, Y (l)", time()).'</h2>';
 
$html .= 'Top 99 Free Game Apps';
 
$rssUrl = "https://itunes.apple.com/jp/rss/topfreeapplications/limit=99/genre=6014/xml";
$rss = file_get_contents($rssUrl);
$xml = simplexml_load_string($rss);
$rssresults = '';
$ranking = 0;
 
define('URI_RSS', 'http://itunes.apple.com/rss');
$html .= '<div class="list-item"><div class="item-block">';
 
foreach($xml->entry as $val) {
$ranking++;
 
$rssresults .= '<div class="app-ranking"><div class="app-number"><span class="ranking">'.$ranking.'</span></div><div class="app-info"><div class="inner-app"><div><a href="'.$val->id.'" title="'.$val->title.'"><img src="'.$val->children(URI_RSS)->image[0].'" alt="'.$val->children(URI_RSS)->name.'"align="left" width="100"style="border-radius: 10px;width: 70px;box-shadow: 1px 2px 3px gray;margin-right:10px;"></a></div><a href="'.$val->id.'"><div style="font-size:16px;font-weight:bold;padding:3px 0;">'.mb_strimwidth($val->title, 0, 120, "…", "utf-8").'</a></div><div style="font-size:12px;font-weight:bold;color:#3A3A3A;">販売元:<a href='.$val->children(URI_RSS)->artist->attributes()->href.'>'.$val->children(URI_RSS)->artist.'</a></div></div></div></div>';
 
$html .= $rssresults;
 
$rssresults = '';
 
}
 
$html .= '</div></div>';

return $html; 

}
 
add_shortcode('showFreeGameAppRanking', 'showFreeGameAppRanking');

?>

CSS

/* アプリランキング用に追加 */

.list-item {
	 width: 680px;
	 margin-bottom: 30px;
	 clear: both;
}

.item-block {
    margin-top: 6px;
    width: 680px;
}

.app-ranking {
	border: 2px solid #F0E68C;
    height: 90px;
    width: 662px;
    margin-bottom: 6px;
}

.app-number {
	background-color: #F0E68C;
    color: #FFFFFF;
    float: left;
    font-size: 50px;
    font-weight: bold;
    height: 90px;
    text-align: center;
    line-height:70px;
    width: 70px;
}

.ranking {
	color: #FFFFFF;
    display: block;
    margin-top: 6px;
}

.app-info {
	display: block;
    float: left;
    height: 60px;
    margin-top: 1px;
    position: relative;
    text-align: left;
    width: 589px;
}

.app-info .inner-app {
	float: left;
    height: 60px;
    margin-left: 15px;
    margin-top: 3px;
    width: 580px;
}

.app-info img {
	border: 0px solid #CCCCCC;
    float: left;
    height: 75px;
    padding: 2px;
    width: 75px;
    display: block;
}

/* ================== */