Skip to content

9leapのゲームをwordpressにカンタン埋め込み!ショートコードプラグインの作り方

こんにちは、リョーヘイです!さて、この前の告知記事もそうですが、wise9では9leapのゲームの埋め込み機能をよく使うんですよね。

これが9leapの埋め込み機能

埋め込み機能にはJavaScriptが使われているのですが、ページ内にJavaScriptを埋め込むのはwordpressのビジュアルエディタなどと相性が悪く、プレビューの時に消えてしまったりすることがあります。また、たくさんのゲームがあるとき、それぞれに対応するコードを取得するのもちょっと大変です。

そんなとき、wordpressのショートコード機能を使えば、簡単にゲームの埋め込むことができますよ!

ショートコード機能とは、[]で囲まれた文字列をwordpressがあるコードに自動的に変換してくれる機能です。配布されているサードパーティのプラグインを読み込むことで使えるようになるショートコードも多いですが、自分でも簡単に生成することができます。

今回はこのショートコード機能を使って、9leapのゲームを簡単に埋め込むことができるショートコードをつくりました。

[9leap gameid=11]

このようなショートコードをwordpressの編集画面で入力するだけで、9leapのembedタグに変換してくれます。

<script src="http://9leap.net/games/11/embed.js" type="text/javascript"></script>

phpのソースコードはこちら。

 function nineleap_plugin($atts) { extract(shortcode_atts(array( 'gameid' =&gt; 0, ), $atts)); return "<script src="http://9leap.net/games/{$gameid}/embed.js" type="text/javascript"></script>";
}
add_shortcode('9leap', 'nineleap_plugin');

このコードを、templatesの中の function.php などに書き込むだけで使えるようになります。

Twitterアカウントを指定するだけでアイコンを自動的に読み込みリンクを張ってくれるようなコードはこちら。

function twicon_plugin($atts) {
extract(shortcode_atts(array(
'name' =&gt; 'null',
), $atts));
return "<a href="http://twitter.com/{$name}"><img src="http://api.dan.co.jp/twicon/{$name}/mini" alt="{$name}" /></a>";
}
add_shortcode('twicon', 'twicon_plugin');

このコードをwordpressのどこかに忍ばせておけば、

[twicon name=9leap]

このショートコードが以下のように展開されて、こんなかんじで Twitterアカウントへのリンクが表示できます。 9leap

<a href="http://twitter.com/9leap"><img src="http://api.dan.co.jp/twicon/9leap/mini" alt="9leap" /></a>

twitterアイコンの取得には、dankogaiさんの提供しているAPIを利用しています。

参考: 404 Blog Not Found:#perl – twitterのアイコンURLを固定するAPI

もちろん、ショートコードの関数の中では任意のphpコードを指定して実行できるので、その気になれば他のサイトから情報を取得して…なんてことも可能です。定型文をショートコードの中にまとめてもいいかもしれませんね〜。

みなさんもどんどんwordpressを自分好みに改造して、快適なwordpress生活を送りましょう!ではまた!

このエントリーをはてなブックマークに追加
はてなブックマーク - 9leapのゲームをwordpressにカンタン埋め込み!ショートコードプラグインの作り方
Post to Google Buzz
Share on GREE

Related posts:

  1. 9leap 9Days Challenge #3 & Space Challenge 結果発表!
  2. 9leap 「9Days Challenge #5」 & 「コミPo!チャレンジ」結果発表!
  3. [9leap] コンテスト前期終了!栄冠を手にしたのは?
  4. 9leap 9Days Challenge #2 結果発表!
  5. [9leap] geolocationAPIを使ってGPS連動ゲームを作ろう!

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*