Scribbling for "Scripting"

またまたショートコードタグですが、今回はGoogle Mapsを表示するショートコードタグです。GeoCodingを利用しているので住所をタグで囲むだけでマップが表示されます。これも前回の翻訳タグ同様、GoogleのサンプルJavaScriptをほとんどそのままラッピングしているだけです。
// [gmapwithgc (nosinglemsg="message" id="id" width="width" height="height" zoom="zoom")]address[/gmaiwithgc]
// googleマップを住所で表示
function gmapwithgc_func($atts, $content='') {
  extract(shortcode_atts(array(
    'nosinglemsg' => '',
    'id' => 'gmap0',
    'width' => '500px',
    'height' => '300px',
    'zoom' => '14',
  ), $atts));
  if($nosinglemsg != "" and !is_single()){
    return $nosinglemsg;
  } else {
    return <<<_EOT_
    <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=●●" type="text/javascript"></script>
      <div id="$id" style="width: $width; height: $height"></div>
      <script type="text/javascript">
    map = new GMap2(document.getElementById("$id"));
    geocoder = new GClientGeocoder();
        geocoder.getLatLng("$content",
        function(point) {
      if (!point) {
        alert("$content" + " not found");
      } else {
        map.setCenter(point, $zoom);
        var marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml("$content");
      }
    });
    </script>
_EOT_;
  }
}
add_shortcode('gmapwithgc', 'gmapwithgc_func');

ソースの●●部分はご利用のGoogle Maps APIキーに置き換えてください。
使い方は記事内に以下のようなタグを入れると、Google Mapsが表示されます。
[gmapwithgc]東京タワー[/gmapwithgc]

サイズや拡大率を指定できます。
[gmapwithgc width=”400px” height=”350px” zoom=”10″]富士山[/gmapwithgc]

シングルページのみマップを表示する場合は以下のようにシングルページ以外で表示されるメッセージを指定してください。
[gmapwithgc nosinglemsg=”記事のタイトルをクリックしてシングル表示にしてください”]東京タワー[/gmapwithgc]

ひとつの記事に複数タグを入れたい場合は重複しないidを指定してください。
[gmapwithgc id=”gmap2″]東京タワー[/gmapwithgc]

以下は実際にタグを埋め込んだサンプルです。
シングルページにするとマップが表示されます

WordPress2.5のショートコードタグ関連のネタとして、Google翻訳APIを利用するショートコードタグを作ってみました。とはいっても実質はGoogleのドキュメント内のサンプルJavaScriptをラッピングしているだけですが(^^;

// [gtranslate (sl="SourceLang" tl="TargetLang" id="id")]content[/gtranslate]
// タグに囲まれた部分をgoogle翻訳する(デフォルトは日→英)
function gtranslate_func($atts, $content='') {
  extract(shortcode_atts(array(
    'sl' => 'ja',
    'tl' => 'en',
    'id' => 'gtrans',
  ), $atts));
  return <<<_EOT_
    <div id="$id"></div>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("language", "1");
    function initialize() {
      google.language.translate("$content", "$sl", "$tl", function(result) {
        if (!result.error) {
        var container = document.getElementById("$id");
        container.innerHTML = result.translation;
        }
      });
    }
    google.setOnLoadCallback(initialize);
  </script>
_EOT_;
}
add_shortcode('gtranslate', 'gtranslate_func');


使い方としては記事内に以下のようなタグを入れれば、次の行の様に翻訳されます。
[gtranslate]我々はこの老人を知っています。[/gtranslate]

ひとつの記事に複数タグを入れたい場合は重複しないidを指定してください。
[gtranslate id=”gtrans2″]いえ、この眼差しと顔の傷を知っています。[/gtranslate]

先の記事でソースのヘッダに実際にタグ名が入っていますが、これをタグと認識させないために以下のようなショートコードを定義しています。

// [addsb]content[/addsb]
// contentにスクエアブラケットを追加します
function addsb_func($atts, $content='') {
  return @"[" . $content . "]";
}


つまり上のソースのコメントの1行目は[addsb]addsb[/addsb]content[addsb]addsb[/addsb]となっているわけです＜ますます分かんない？

ところで２．５のエディタなんですが、HTMLモードではフルスクリーンは使えないんですね。
というかサイズ変更もできなくなってる(；´Д｀)・・・ソースコードを貼り付ける時とか、結構HTMLモードも使うのでこれは何とかしてほしいです。

WordPress2.5の新機能であるショートコードタグですが、使い方がだんだんわかってきました。

基本的としては、phpで関数を記述（記述場所はテンプレートのfunctions.phpが適当)して、その関数をadd_shortcodeで登録しておけば、記事内にて、[タグ名 属性名="属性"]または[タグ名]…[/タグ名]といった形で、記事内にオリジナルの機能を持ったタグを追加できるというものです。
wp-includes/shortcodes.php内にサンプルの記述がありましたので、それを参考に遊びでタグを作ってみました。

// [randomface id="number"]
//idに対応した顔文字を表示(idなしの場合はランダム)
function randomface_func($atts) {
  extract(shortcode_atts(array(
    'id' => '0',
  ), $atts));
  $faces=array('', '(・∀・)', '(´∀｀)', '(´・ω・｀)',
    'Σ (ﾟДﾟ;)', 'ヽ(；´Д｀)ノ', '(*´Д｀*)', '＿|￣|○');  
  if($id =='0'){
    return @$faces[rand(1, count($faces) -1)];
  } else {
    return @$faces[intval($id)];
  }
}
add_shortcode('randomface', 'randomface_func');


簡単に説明しますと、タグ内の属性はfunctionの引数として配列で渡されます。つまりこの場合は$atts['id']にnumberの値が入ります。次のextract…は配列を変数に展開するもので、これを通すと先ほどの属性値が$idで参照できるようになります。この中で使われているshortcode_attsですが、1番目の配列に2番の配列を上書きするような動作をするようで、これによってid属性が指定されなかった場合のデフォルト値を設定できるようになります。つまりこの場合はidが指定されていない場合は最初に指定された配列の値が有効になるので０になるといった具合です。
それ以降はテンプレート内とほぼ同様にテンプレートタグやphpが利用できます。ただしループ内でしか利用できないタグはうまく動かないものがあるようです。
こうして関数を定義したら、最後にadd_shortcode(’タグ名’,'呼び出される関数名’)と記述すれば、それ以降は記事内でタグが利用できるようになります。

上のタグを実際に記事内に入れるとこんな感じです。
(*´Д｀*)

テンプレートタグとショートコードタグを組み合わせると、これまでの記事では難しかった動作を簡単に指定することができます。
例えば以下のようなショートコードを定義しておくと、シングルページでしか表示しない部分を投稿編集画面から簡単に指定することができます。上のものと違ってこれはタグで囲い込む形ですが、これもひな形として覚えてしまえばいいと思います。残念ながらショートコードタグは入れ子構造には対応していないみたいです。

// [issingle]content[/issingle]
// 個別記事ページの場合のみタグ内を表示します
function issingle_func($atts, $content='') {
  if(is_single()){
    return @$content;
  }
}
add_shortcode('issingle', 'issingle_func');

↓ここにシングルページでしか表示されないテキストがあります

以下は上の応用で、GoogleMapsを読み込むJavaScriptですが、表示が重くなるのを避けるためシングルページのみで表示されるようになっています。
個別記事表示にするとマップを表示します