Scribbling for "Scripting"

WordPress2.5では画像のタイトルに全角文字を使っていると、記事に画像を挿入する際にエラーが出てしまう場合があるみたいです。

画像の代替テキスト（alt=”****”)には画像のタイトルが使われますので、全角文字が使えないのは困りますが、今回はとりあえずタイトルをデフォルトのままで挿入してから、HTMLで画像のAlt=”***”部分を書き換えて対処しました。大した手間ではないのですが何かスッキリしません。

で、せめてどんなエラーが出ているのか調べようとして同じ条件で画像を再アップロードしたんですが、今度はエラーが出ず・・・・まあ良くあることですが（＾_＾；

皆さんお待ちかね、かどうかは知りませんが、WordPress2.6日本語版がリリースされました。
私は新しもの好きものなので、当然ながらテストすべく、とりあえずローカルおよびレンタルサーバーのテスト環境にインストールしました。通常は大きな問題もなくすんなりアップデートできる（文字化けのような細かな問題はありましたが）Wordpressでしたが、今回は、
（１）ローカルサーバー上でパーマリンク設定がデフォルト以外使えなくなった。
※ローカルサーバー上の問題でWordPress2.6が原因によるものではありませんでした。お詫びして修正いたします。
また、レンタルサーバー上でも、
（２）アップデート後にパスワードが通らない（再発行しても）。
など、何かとトラブルが起きたので、原因が判明するまでアップデートは見送ることにしました。１の方は.htaccess関連だと思うのですが、ちょっと忙しくて原因を究明する暇がないです・・・

以前にSimpleCodeの代用品として作成したEncCode.htaですが、前記事のように、WordPress2.5.1ではペーストしたコードが文字化けしてしまうため、それに対応するように修正しました。
以前のバージョンをご利用の方は新しいバージョンに差し替えてご利用ください。

enccode02.lzh

ここのブログのコードは一応すべてこのEncCodeを使っていますので、自分で気づいた点があれば修正していますが、もし何かお気づきの点がありましたらご指摘いただけると嬉しいです。

このブログでは記事内にソースコードを表示していますが、2.5から2.5.1にアップデート後にcodeタグ内のシングルクォーテーションとダブルクォーテーションの表示の一部が全角に化けてしまうようになってしまいました。
具体的には、codeタグで囲んである部分の、
・シングルクォーテーション（'）が全角になってしまう
・ダブルクォーテーション（"）が全角になってしまう
・連続したシングルクォーテーション（''）が全角のダブルクォーテーションになってしまう
等が確認されました。これにより記事からペーストしても正常に動作しない状態になってしまいました。
これらの文字は文字コードで指定すれば化けないようですので（もともと文字コードで記述すべきなのでしょうが）、過去の記事につきましてはとり急ぎ修正しましたが、不具合がありましたらコメントお願いいたします。

WordPress2.5.1日本語版がリリースされていましたので、さっそくアップデートしました。

今回も前回の2.5へのアップデート同様、こちらの記事の方法で問題なくアップデートできました。

外観や機能面では2.5とほとんど変わりませんが、バグフィックスの中には重要なものもありますので、アップデートする価値はあると思います。

パフォーマンスの向上に関しては、とりあえず記事を一つ書いてみたところではエディタのレスポンスが軽くなった様な気がする、といった程度でしょうか。

2.5ではパッチを当てなければならなかったIEでのメディアのアップロードの問題は修正されています。

またまたショートコードタグですが、今回は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ですが、表示が重くなるのを避けるためシングルページのみで表示されるようになっています。
個別記事表示にするとマップを表示します

ついこの間日本語版2.3.3にアップデートしたばかりですが、相変わらずのタイミングで、その直後に２．５が正式リリースされましたのでアップデートしました。アップデート方法に関しましてはこれまでのバージョンと同様で、前回と同じくこちらの記事を参考にしてすんなりとアップデートできました。

２．５になって管理画面周りのデザインがかなり変わっています。自分はwordPressを使ってあまり経っていないのですんなり対応できましたが、長く使っている人はかなり違和感を感じるかも。レスポンスは以前とよりもやや良くなっている気がします。

個人的に気に入っているのはテキストエディタのフルスクリーンモード。これだけでもアップデートした甲斐がありました。

あとちょっと試してみたいのがショートコードタグ。投稿記事に[tag]…[/tag]みたいな形でphpで作成したオリジナルのタグを埋め込めるようです。