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

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


WordPressの投稿や固定ページにOpenStreetMapの地図を貼り付けるためのプラグイン、Embed OSMのバージョン0.2では、プラグインに関する設定値をWordPressのテーブルに保存できるようにしました。そこで、設定値を変更するための管理画面が欲しくなるところですが、その前に、バージョン0.3ではちょっとした改善を施します。

１つめは、クラス化です。プラグインをクラスで定義することによって、他のプログラムとの関数名の重複を防ぐことができます。
２つめは、地図を貼り付ける<div>のIDです。

<div id="mapdiv" ...

と、固定的なIDを割り当てているため、結果として１つのページに１つの地図しか貼り付けられない仕様になってしまいました。
それでは不便ですので、<div>を出力する都度、動的にユニークなIDを割り当てるように修正します。

バージョン0.3の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.3.1
  Author: Midori IT Office
  Author URI: http://midoriit.com/
  License: GPL3
*/

$embedosm = new EmbedOSM();

class EmbedOSM {

  public function __construct() {
      register_activation_hook( __FILE__, array(&$this,'embed_osm_activate' ));
      register_uninstall_hook( __FILE__, 'EmbedOSM::embed_osm_uninstall' );
      add_shortcode('embed_osm', array(&$this, 'embed_osm_handler'));
  }

  public function embed_osm_activate() {
    add_option('embed_osm_width', '400');
    add_option('embed_osm_height', '300');
  }

  public static function embed_osm_uninstall() {
    delete_option('embed_osm_width');
    delete_option('embed_osm_height');
  }

  public function embed_osm_handler( $atts ) {
    $width = get_option('embed_osm_width');
    $height = get_option('embed_osm_height');
    $uniq = uniqid("",1);

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

    return 
'  <div id="mapdiv'.$uniq.'" style="width:'.$width.'px; height:'.$height.'px;"></div>
  <script type="text/javascript" src="'.plugins_url().'/embed-osm/openlayers/OpenLayers.js"></script>
  <script type="text/javascript">
    var map = new OpenLayers.Map("mapdiv'.$uniq.'");
    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>';
  }
}
?>

ヘッダコメントの次の

$embedosm = new EmbedOSM();

は、プラグインのクラスEmbedOSMのインスタンスを作成しています。
残りのコードでEmbedOSMクラスを定義していますす。
コンストラクタ

public function __construct() {
  register_activation_hook( __FILE__, array(&$this,'embed_osm_activate' ));
  register_uninstall_hook( __FILE__, 'EmbedOSM::embed_osm_uninstall' ));
  add_shortcode('embed_osm', array(&$this, 'embed_osm_handler'));
}

では、プラグイン有効化／プラグイン削除のフック関数、[embed_osm]ショートコードのハンドラを登録しています。クラス化する前は単に関数名を渡していたregister_activation_hook()とadd_shortcode()の第２引数が、インスタンスとメソッド名のarrayになっている点に注意して下さい。さらに、register_uninstall_hook()の第２引数は「クラス名::メソッド名」の形式となっていますが、これは、uninstallのフック関数がstaticメソッドのためです。

ショートコードを処理する関数embed_osm_handler()は、<div>のIDが重複しないように修正してあります。まず、PHPのuniqid()関数を用いて

$uniq = uniqid("",1);

ユニークなIDを取得し、

<div id="mapdiv'.$uniq.'" style="width:'.$width.'px; height:'.$height.'px;"></div>

このIDを用いてユニークなIDを持つ<div>を定義し、

var map = new OpenLayers.Map("mapdiv'.$uniq.'");

そこに地図を貼り付けています。

これで、１つのページにいくつ地図を貼り付けても大丈夫です。

[embed_osm lat="35.32395" lon="139.55598" zoom="14"]
大きな地図を表示 
[embed_osm lat="35.32395" lon="139.55598" zoom="16"]
大きな地図を表示 
[embed_osm lat="35.32395" lon="139.55598" zoom="18"]
大きな地図を表示

 

今回作成したプラグインのダウンロードはこちらからどうぞ。

WordPressプラグインの開発 1234567891011