Google Map for WordPressをCSSファイルにリンクできるようにしました

久しぶりのWordPressネタです…

というのも、私が公開している Google Maps for WordPress 日本語版 なんですが、表示させる地図の幅は生地に地図を埋め込む際に指定ができます。でもそれ以外のレイアウト、たとえば地図の配置とか、マージンとかは指定することができません。

なんですが、個人的に地図はできればセンタリングで表示させたいと思っていました。記事個々のレイアウト上、左寄せにはちょっと違和感があって。そこで Google Maps for WordPress 日本語版 のソースコードをちょちょっといじって地図をセンターに寄せてみました。

最も簡単なのは地図を表示させる際に追加しているコードに直接埋め込む方法。でもこれは記事を表示するめのHTMLタグが長くなってしまって嫌だし、テーマの変更に合わせて配置を変更したいってなったときには変更していた箇所を探して再度直接変更しないといけない訳で…。

そこで目を付けたのが地図の表示の際につくHTMLタグとそのクラス。つまりスタイルシートでレイアウトの指定をすることで、メンテナンス性を高めてやればいいよね！ということで、変更するに至った訳です。

（もちろんコード変更の備忘録も兼ねた記事ですので…）

で、まずは地図を表示させている部分のHTMLタグなんですが、

<div id='…' class='googleMaps' style='...' ></div>

というタグが必ず付加されています。直接HTMLタグにレイアウトに関するスタイルを記述するには、このコードのstyle属性に直接追加すれば終わりです。が、そうすると次のような弊害が…。

• 地図を表示するためのタグが長くなる。
• 1ページに1つの地図ならまだしも、同一ページで複数の地図を表示させたときには同様のコードが毎度出てくることになる
• 何よりテーマの変更などでレイアウトを変えるときはこの変更したコードを再度修正する羽目になる。

そこでレイアウトをCSSファイルの中で指定してサイトのヘッダーで呼び出すことで、それらの問題の解決にならないかと考えた訳でして。

手っ取り早く解決する方法はサイトで使っているテーマのCSSファイルに地図表示のためのスタイルを埋め込むというもの。これなら使用しているテーマのCSSファイルにスタイルを埋め込むだけで終了です。でもそれが逆にメンテナンス性を下げちゃうように思えたのですよ。地図表示のレイアウトも含めて綺麗さっぱり変更するなら良いのですが、地図表示のレイアウトはそのまま…という場合は煩わしいことこの上なく…といった感じで。

そこで地図表示用レイアウトのみを記述したCSSファイルのリンクタグを、Google Maps for WordPressからヘッダーに記述するようにすればいいじゃないかと考えたのです。ですが、ここで気になったことが。それはスタイルシートをどの記事にも地図を載せているのなら良いのですが、地図の表示がないページで地図表示用のCSSファイルを呼び出すコードをヘッダーに埋め込むのは無駄じゃなかろうかということ。そこで一念発起して、それらを解決するべくコードを追加することにしました。

まず地図を表示するためのレイアウトを指定するCSSファイルを用意します。自分で分かるなら名前は何でも構いませんが、ここでは『googleMap.css』とします。中には次のようなコードを。ちなみにdiv.googleMap{ … }の間にスタイルシートで地図表示に共通のレイアウトを指定しておきます。

@charset "utf-8";

div.googleMap {
	margin: 10px auto;
}

次はソースコード。変更ファイルは wp-google-maps.php です。このプラグインでは

wpGoogleMaps

というクラスを構築していて、そのクラスの中に必要なコードが記載されています。そこでこのクラスの最後に次の関数を追加します。

	// for Set CSS files in header
	public function setLinkCSS() {

		if ($this->isMap) {
			$css = get_option('siteurl') . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/googleMap.css';
?>

<link rel="stylesheet" type="text/css" href="<?php echo $css; ?>" />

<?php
		}
	}

このコードは表示しようとしているページにプラグイン地図表示が存在することが確認できたなら、スタイルシートを呼び出すリンクタグを書き出すというコードです。

最後にサイトのヘッダーを記述する際に上記のコードでリンクタグを書き出すようにするため、wp-google-maps.php の最後部にあるコードに次のコードを追加します。

add_action('wp_head', array($wpGoogleMaps, 'setLinkCSS'));

ちなみにこのコードは先ほどの関数をサイトのヘッダーを記述する際に呼び出すように指定するためのコードです。なのですが、ページ内にプラグインによる地図表示があるかどうかを判断してからCSSファイルのリンクを追加するには、このコードが呼び出される前にページ内にプラグインによる地図表示が存在するかどうかをあらかじめ把握しておかないといけません。ということで、プラグインによる地図表示に把握をしている関数を呼び出している次のコードの下辺りに追加します。

add_filter('the_posts', array($wpGoogleMaps, 'findMaps'));

ちなみにこのコードはページに書き出す記事データを選択した際に呼び出したい関数（このプラグインの場合は wpGoogleMaps クラスの findMaps() 関数）を指定しているようです。（この辺りはあんまり把握してないので add_filter() 関数やら the_posts についての詳細は WordPress Codex 日本語版 で確認していただければ… ）

追加する要領として具体的には次のような感じ。addというコメント記述のある行が新たに追加したコードです。

/**
 * Add filters and actions
 */
if ( !get_option('wpGoogleMaps_api_key') && !isset($_POST['submit']) ) {
    // Add the warning notice if the Google API Key isn't set
    add_action('admin_notices', array($wpGoogleMaps, 'warning'));
} else {
    // Process shortCodes and include JavaScript if the Google API Key is set
    add_filter('the_posts', array($wpGoogleMaps, 'findMaps'));
    add_action('wp_head', array($wpGoogleMaps, 'setLinkCSS'));    // < -- add
    add_action('wp_print_scripts', array($wpGoogleMaps, 'wpHead'));
    add_shortcode('googleMap', array($wpGoogleMaps, 'handleShortcodes'));
}
add_filter('admin_print_scripts', array($wpGoogleMaps, 'adminHead'));
add_action('admin_menu', array($wpGoogleMaps, 'adminMenu'));
add_action('admin_init', array($wpGoogleMaps, 'registerOptions'));

これでプラグインによる地図表示がある場合だけ地図表示用CSSファイルがリンクされるようになります。

ちなみにサイト表示に関わるプラグインでCSSファイルを利用したいというときは、これらのコードの変更・追加を応用することで可能になるかと思います。もし良かったらお試しを！

関連すると思われる記事：

• Google Maps for WordPress 日本語版バージョンアップしました
• Google Maps for WordPress日本語版　公開しました
• Google Maps for WordPressのIE表示、対策できました！
• Safariでの表示不具合も解決できました
• Google Maps for WordPressのIE表示対策の参考にできるかも