WordPressプラグインの開発(1)

この記事は1年以上前に書かれました。
内容が古くなっている可能性がありますのでご注意下さい。


WordPressの投稿や固定ページにOpenStreetMapの地図を貼り付けるためのプラグイン、Embed OSMを開発します。

最初に作成するバージョン0.1は、以下のようなショートコード

[embed_osm lat="35.32395" lon="139.55598" zoom="16"]

を記述すると、指定された緯度、経度、ズームレベルの地図を表示するという簡単なものです。

地図の表示には、オープンソース（BSDライセンス）のJavaScriptライブラリOpenLayersを利用します。

WordPressのインストール先の、wp-content/pluginsフォルダに配置するファイルは以下のようにします。

embed-osm/embed-osm.php
embed-osm/openlayers/OpenLayers.js
embed-osm/openlayers/license.txt
embed-osm/openlayers/img/*
embed-osm/openlayers/theme/*

embed-osm.phpは、今回作成するプラグインの本体です。
openlayersフォルダの配下は、OpenLayersの配布物の一部をコピーしたものです。OpenLayersのプログラム本体であるOpenLayers.js、ライセンス情報を記したlicense.txt、imgフォルダとthemeフォルダの内容のすべてをコピーします。

embed-osm.phpの完全なリストは以下のとおりです。

<?php
/*
  Plugin Name: Embed OSM
  Plugin URI: http://midoriit.com/works/embed-osm.html
  Description: Embed OpenStreetMap on the page.
  Version: 0.1
  Author: Midori IT Office
  Author URI: http://midoriit.com/
  License: GPL3
*/

function embed_osm_handler( $atts ) {

  extract( shortcode_atts( array(
    'lon' => '0',
    'lat' => '0',
    'zoom' => '1'),
      $atts ) );

  return 
'  <div id="mapdiv" style="width:400px; height:300px;"></div>
  <script type="text/javascript" src="'.plugins_url().'/embed-osm/openlayers/OpenLayers.js"></script>
  <script type="text/javascript">
    var map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
    var lonLat = new OpenLayers.LonLat('.$lon.' , '.$lat.').transform(
      new OpenLayers.Projection("EPSG:4326"),
      map.getProjectionObject() );
    map.setCenter(lonLat, '.$zoom.');
    var markers = new OpenLayers.Layer.Markers("Markers");
    map.addLayer(markers);
    var marker = new OpenLayers.Marker(lonLat)
    markers.addMarker(marker);
  </script>
  <small>
    <a href="http://www.openstreetmap.org/?mlat='.$lat.'&mlon='.$lon.'#map=16/'.$lat.'/'.$lon.'" target="_blank">大きな地図を表示</a>
  </small>';
}

add_shortcode('embed_osm', 'embed_osm_handler');
?>

embed-osm.phpファイルの先頭

<?php
/*
  Plugin Name: Embed OSM
  Plugin URI: http://midoriit.com/works/embed-osm.html
  Description: Embed OpenStreetMap on the page.
  Version: 0.1
  Author: Midori IT Office
  Author URI: http://midoriit.com/
  License: GPL3
*/

は、PHPプログラムの開始タグと、コメントです。
このコメントには重要な意味があります。決められた作法に従ってコメントを記述することによって、WordPressの管理画面の「インストール済プラグイン」ページに以下のようにプラグイン情報が表示されるのです。

次に、embed_osm_handler()関数を定義します。この関数は、ショートコード[embed_osm]の処理をするハンドラです。

function embed_osm_handler( $atts ) {

  extract( shortcode_atts( array(
    'lon' => '0',
    'lat' => '0',
    'zoom' => '1'),
     $atts ) );

[embed_osm]ショートコードには、緯度、経度、ズームレベルを表す3つの属性、lon、lat、zoomがあります。これらが、arrayの形でembed_osm_handler()関数に渡されます。
WordPressのshortcode_atts()関数は、無効な属性を取り除き、値の入っていない属性にはデフォルト値を設定します。
さらに、PHPのextract()関数を用いて、arrayの要素の1つ1つを変数に変換します。arrayのキー名が変数名になり、$lon、$lat、$zoomで参照できるようになります。

embed_osm_handler()関数の後半

  return 
'  <div id="mapdiv" style="width:400px; height:300px;"></div>
  <script type="text/javascript" src="'.plugins_url().'/embed-osm/openlayers/OpenLayers.js"></script>
  <script type="text/javascript">
    var map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
    var lonLat = new OpenLayers.LonLat('.$lon.' , '.$lat.').transform(
      new OpenLayers.Projection("EPSG:4326"),
      map.getProjectionObject() );
    map.setCenter(lonLat, '.$zoom.');
    var markers = new OpenLayers.Layer.Markers("Markers");
    map.addLayer(markers);
    var marker = new OpenLayers.Marker(lonLat)
    markers.addMarker(marker);
  </script>
  <small>
    <a href="http://www.openstreetmap.org/?mlat='.$lat.'&mlon='.$lon.'#map='.$zoom.'/'.$lat.'/'.$lon.'" target="_blank">大きな地図を表示</a>
  </small>';
}

は、ページに埋め込むHTMLをreturn文で返しています。
まず最初に、地図を埋め込む領域を定義します。

<div id="mapdiv" style="width:400px; height:300px;"></div>

次に、OpenLayersのJavaScriptファイル、OpenLayers.jsを読み込むための<script>タグを返します。OpenLayers.jsは、プラグインのフォルダ内に配置しましたので、WordPressのplugins_url()関数を用いてパスを作成します。

<script type="text/javascript" src="'.plugins_url().'/embed-osm/openlayers/OpenLayers.js"></script>

return文の残りの部分では、OpenLayersを用いて地図を埋め込むためのJavaScriptコードと、別のウィンドウで地図を開くためのリンクを返していますが、説明は割愛します。

embed-osm.phpファイルの残り部分

add_shortcode('embed_osm', 'embed_osm_handler');
?>

では、WordPressのadd_shortcode()関数を用いて、[embed_osm]ショートコードのハンドラとしてembed_osm_handler()関数を登録しています。
こうすることによって、投稿や固定ページの中で[embed_osm]ショートコードを記述すると、embed_osm_handler()関数によって処理された結果が出力されるようになります。
最後にPHPタグを閉じて終了です。

embed-osm.phpファイルではマルチバイト文字を使用していますので、ファイルを保存する際には文字コードに注意が必要です。バイト順マーク （BOM） なしのUTF-8（UTF-8Nと呼ばれることもあります）で保存する必要があります。

WordPressのインストール先の、wp-content/pluginsフォルダにembed-osmフォルダ以下をすべて配置してあれぱ、WordPressの管理画面の「インストール済プラグイン」ページにEmbed OSMプラグインが登録されていますので、有効化します。

あとは、投稿や固定ページにショートコードを記述すれば、指定した緯度、経度、ズームレベルの地図と、大きな地図へのリンクが表示されます。

[embed_osm lat="35.32395" lon="139.55598" zoom="16"]

と記述すると、以下のように表示されます。

大きな地図を表示

 

今回作成したプラグインのダウンロードはこちらからどうぞ。ライセンスは、ヘッダコメントに記述したとおり、GPL3です。（追記：バージョン0.9からはGPLv2 or laterとなりました）

WordPressプラグインの開発 1234567891011