この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


ワードプレスでオリジナルショートコードを作って表示を動的に変化させる その1

ワードプレスには非常に便利なショートコードというものがあります。
CSSに似ていますが、違うところは後出しで具体的に表示を変化させることができます。
例えばCSSは文字や画像の装飾はできますが、あくまでも見かけだけです。要素を増やすことはできません。
あるものに対して変化させることができるのですが、そもそもないものは増やすことが出来ないのです。

しかし、ショートコードは [code] と記述しておけば記事内でもテンプレート内にもPHPのスクリプトを挿入できます。
ショートコードは[](角括弧 or ブラケット)を記述しておくだけで、あとで色々と再利用できます。もちろんCSSもHTMLもなんでも出力できます。

通常はプラグインに付随するのですが、オリジナルで作っておくと大変便利です。
今回はランダムに変化するバナーを表示するショートコードを作ってみます。

まず、ショートコードを作成するにはテーマフォルダ内にある「functions.php」に記述を追加する必要があります。
記述は「functions.php」のどこでもいいのですが、分かりやすく末尾に記述しておきましょう。
ショートコードを定義する関数は「add_shortcode()」です。
以下のようにして使います。

add_shortcode( 'ショートコード名' , '実行する関数名' );
function 関数名()
{
	//処理を書く
}

仮にオリジナルのショートコードを [myAd] としましょう。
するとこのようになります。

add_shortcode( 'myAd' , 'myAd' );
function myAd()
{
	//処理を書く
}

ショートコードの種類を増やしたければこの記述を増やしていけばいいことになります。
具体的な処理の記述を説明します。

例えば、アフィリエイトバナーを貼るとしてASPにMoba8.netを利用するとします。
Moba8はモバイルに特化したアフィリエイト・サービス・プロバイダですが、バナーを貼るのが面倒だったりします。
バナーをひとつだけ貼る場合はいいのですが、複数のバナーをランダムにローテーションする場合は、スクリプトを組む必要があります。
JavaScriptなどの動的なバナーは貼れないので、実際に実データとしてHTMLで吐き出す必要があります。

以下のような広告素材2件があったとします。これをランダムに表示したいとします。

<a href="http://px.moba8.net/svt/ejp?a8mat=2BPWJT+28DJG2+5K0+CBGI9&guid=on">
<img border="0" width="320" height="48" alt="" src="http://www28.moba8.net/svt/bgt?aid=140616713135&wid=001&eno=01&mid=m00000000720002069000&mc=1"></a>
<img border="0" width="1" height="1" src="http://www13.moba8.net/0.jpg?a8mat=2BPWJT+28DJG2+5K0+CBGI9&guid=on" alt="">


<a href="http://px.moba8.net/svt/ejp?a8mat=2BPWJT+3257OY+YKQ+ZQNG1&guid=on">
<img border="0" width="300" height="250" alt="" src="http://www27.moba8.net/svt/bgt?aid=140616713185&wid=001&eno=01&mid=m00000004481006003000&mc=1"></a>
<img border="0" width="1" height="1" src="http://www19.moba8.net/0.jpg?a8mat=2BPWJT+3257OY+YKQ+ZQNG1&guid=on" alt="">

「functions.php」に以下のように記述します。

関連記事