月: 2011年9月

以前に「Google マップを使う」を書きましたが、その後 WordPress も Google マップもずいぶん進化して、時代遅れになってしまいました。

意図してる使い方は次のようなものです。

• 固定ページに位置情報を持たせる。その固定ページにマップが表示される
• それらのインデックスとなるような、上記の各ページにリンクされたマークが表示された全体図が、別の固定ページがある

たとえば、会社案内のサイトで各支店ごとに固定ページを作り、それぞれに案内地図を掲載し、「支店一覧」の全体図が別にもうひとつある、というイメージです。Lightweight Google Maps はほぼ条件を満たしていますが、その便利な機能がこちらの思惑には合いませんでした。

ざっと探してみましたが、「固定ページに位置情報」というものはなかなかありません。そこで、固定ページではなく投稿に、というプラグイン RomeLuv Google Maps for WordPress を見つけたので、それを改変することにしました。

RomeLuv Google Maps for WordPress を改変

--- romeluv-maps.php.orig
+++ romeluv-maps.php
@@ -51,6 +51,12 @@
         'romeluv_maps_inner_custom_box',
         'post' 
     );
+    add_meta_box( 
+        'romeluv_maps_sectionid',
+        __( 'Maps', 'romeluv_maps_textdomain' ),
+        'romeluv_maps_inner_custom_box',
+        'page' 
+    );
   
 }
 
@@ -361,6 +367,7 @@
 }
 
 add_action('save_post', 'romeluv_maps_handle_savepost');
+add_action('save_page', 'romeluv_maps_handle_savepost');
 
 
 
@@ -385,7 +392,7 @@
         if ($romeluv_single_map_done) return $post_content_html; else $romeluv_single_map_done=TRUE;
     
     
-       if (!is_single()) return $post_content_html;
+       if (!is_single() && !is_page()) return $post_content_html;
         //return "".$post_content_html;
        global $wpdb,$post,$mapheight;
        $savepost=$post;
@@ -552,13 +559,25 @@
     
     global $wpdb,$post;
     $savepost=$post;
+
     
+    extract( shortcode_atts( array(
+          'cat' => '', // category ID
+       ), $atts ) );
+       if (esc_attr($cat) == '') {
+         if (isset($_GET[cat])) $get_cat = $_GET[cat];
+       } else {
+         $get_cat = esc_attr($cat);
+       };
+
+
+
     ////query all the posts to display on the global map
      $querystr = "
        SELECT wposts.* 
        FROM $wpdb->posts wposts 
        WHERE  wposts.post_status = 'publish' 
-       AND wposts.post_type = 'post' ". $whereadditional ."
+       AND (wposts.post_type = 'post' OR wposts.post_type = 'page') ". $whereadditional ."
        ORDER BY wposts.post_date DESC
     ";
     //echo $querystr; //useful for debugging your custom query
@@ -571,9 +590,7 @@
     
     if ($result_posts):
     
-    if (isset($_GET[cat]))  echo '<h3 id="map-category-heading">'.get_cat_name($_GET[cat]).'</h3>';
-    
-    
+    if (isset($get_cat))  echo '<h3 id="map-category-heading">'.get_cat_name($get_cat).'</h3>';
     
     $mapwidth=get_option('global_romeluv_mapwidth');
     $mapheight=get_option('global_romeluv_mapheight');
@@ -614,7 +631,7 @@
                            
                              $count++;  
                            
-                           if (isset($_GET[cat])) if (!in_category($_GET[cat],$post->ID)) continue; //this allows category filtering adding the $_GET parameter ?cat=xx
+                           if (isset($get_cat)) if (!in_category($get_cat,$post->ID)) continue; //this allows category filtering adding the $_GET parameter ?cat=xx
                            
                            if (is_category()) { if (!in_category($cat_ID,$post->ID)) continue;  }   //skip posts if viewing a category page, if those do not match the current category
                            

改変の内容は、

• 固定ページの作成画面にも「Maps」の入力欄を表示する
• 全体図の出力の際に固定ページも対象にする
• 全体図を出力するショートコード [GLOBALMAP] に、オプションcat を追加する

です。この最後の項目は次のような事情です。

このプラグインのオリジナル版では、全体図を表示させるには、固定ページでショートコード [GLOBALMAP] を用います。特定のカテゴリーに属する投稿だけを全体図に表示するという絞り込みができます。その方法は、カテゴリーの ID をパラメータで付加して、http://www.example.com/map?cat=6 のような形で、全体図のページを呼ぶようにします。

しかし、WordPress 標準のメニュー機能でこのような形式のリンクを作る方法が思い浮かびません。そこで、むしろ複数の全体図のページを用意することにして(たとえば http://www.example.com/map1 と http://www.example.com/map6)、それぞれのページでのショートコードにオプションでカテゴリー ID を付けるようにしました(たとえば [GLOBALMAP cat="1"] と [GLOBALMAP cat="6"])

さて、ここでは固定ページに位置情報を付加して、全体図を作ることを想定しています。すると固定ページにもカテゴリーが設定されていないと、上記の絞り込みができません。テーマの functions.php か何かで

function add_category_to_page() {
    register_taxonomy_for_object_type('category', 'page'); 
}
add_action('init', 'add_category_to_page');

とやって、固定ページにもカテゴリーを設定できるようにしておく必要があります。

twentyeleven で Google マップが壊れる

実際に使用してみると、表示される地図が微妙に壊れていました。タイルの継ぎ目が合わずに道や川がずれているような感じになります。はじめ、自分が使っているブラウザか何かの環境のせいかと思って、いろいろ調べましたがわかりません。ようやく、テーマ twentyeleven にすると壊れて、twentyten にすると正常に表示されることに気がつきました。それから今度は twentyeleven のスタイルシートのどの記述が影響しているのか順に見ていき、ついに img に max-width が付いているとこの現象が起こることがわかりました。これだけで随分と時間を費やしました。

このプラグインの影響下の img のみ max-width を解除するため、

div#romeluv-global-map img,
div#single-post-map img {
        max-width: none;
}

をスタイルシートに書いて、解決しました。