ワイヤード・パンチ

元・大阪人が、岡山の山奥でも生きていけることを証明するためのブログ。

Google MapをWordPressで埋め込んだときに、隅のボタンの表示が崩れているときの対処法。

仕事でやってるサイトにて、投稿に登録した住所情報から、自動的にGoogle Mapを作り出してほしいと言われました。

WordPressの場合は、Simple Mapというプラグインおよび、Google Map APIの両方を利用することで、動的にマップを生成することができます。

マップの生成方法は割愛しますが、それで作り出したマップに表示されているボタンを見ると、なぜか上の写真のように表示が崩れていることがありました。

広告

CSSに原因があるのだけど…。

表示崩れの際に真っ先に疑うべきは、CSS。

というわけで、サイト上に登録されているCSSを、Chromeの検証ツールからリンクを書き換えて、いったんすべて無効にしてみます。

しかし、ボタンの表示崩れは直りません。

どうやら、サイト制作者側が追加したCSSが、マップに影響を与えているわけではないようです。

検証ツールでさらにheadタグを探ってみると、何やらstyleが直書きされている箇所がありました。

<style>.simplemap img{max-width:none !important;padding:0 !important;margin:0 !important;}.staticmap,.staticmap img{max-width:100% !important;height:auto !important;}.simplemap .simplemap-content{display:none;}</style>

名前からして、プラグイン側で生成されたstyleであることが明らかです。

.simplemap img {
	margin: 0 !important;
}

試しに、ここからstyleを徐々に削っていくと、上記のstyleを消したときに、ボタンが正常に表示されることが確認できました。

どうして自分で生成したマップを自分で崩しているのか理解に苦しみますが、とりあえず原因はわかりました。

styleの出力を止めて解決。

ボタンが崩れる原因となっているstyleを打ち消すようなstyleを入れることで解決…。

.simplemap img {
	margin: auto !important;
}

と思ったのですが、別のcssに上記のように打ち消しのstyleを入れて上書きしても、どういうわけか解決とはなりませんでした。

検証ツールで0やauto以外のどの値を入れても解決とならず、チェックボックスを外してstyle自体を無効化することで、ボタンの崩れがなくなります。

margin自体が存在しているとダメなのでしょうか?

というわけで、あまり推奨したくないのですが、プラグイン本体のファイルを直接いじって、headに直書きされるstyleの出力を止めることにします。

(プラグインを直接編集した場合、アップデートによりもとに戻る場合があるので、本当はテーマ側のfunctions.phpなどで対処したかったところ。)

public function wp_head() {

	echo "<style>.simplemap img{max-width:none !important;padding:0 !important;margin:0 !important;}.staticmap,.staticmap img{max-width:100% !important;height:auto !important;}.simplemap .simplemap-content{display:none;}</style>\n";

	$apikey = $this->get_api_key();

	if ( $apikey ) {
		printf(
			'<script>var google_map_api_key = "%s";</script>',
			esc_js( $apikey )
		);
	}
}

wp-content\plugins\simple-map\simple-map.php」を開き、115行目から上記のコードがあります。

このコードのうち、echoの部分をコメントアウトするだけで、解決となります。

フックは用意されていないので、やはり直接書き換えるしかありませんでした。

public function wp_head() {

	//echo "<style>.simplemap img{max-width:none !important;padding:0 !important;margin:0 !important;}.staticmap,.staticmap img{max-width:100% !important;height:auto !important;}.simplemap .simplemap-content{display:none;}</style>\n";

	$apikey = $this->get_api_key();

	if ( $apikey ) {
		printf(
			'<script>var google_map_api_key = "%s";</script>',
			esc_js( $apikey )
		);
	}
}

ボタンに影響があったのは「margin:0 !important;」だけなのですが、このechoごとコメントアウトしても、その他の表示は特に問題ありませんでした。

そもそもこのプラグイン、headに直接styleを出力するのはやめてほしいところ。拡張性に欠けるからです。

styleはcssファイルに別途書き込むのが基本です。

また、!importantもstyleの上書きが難しくなってしまうので、できれば使ってほしくありません。

どうしても書き換えられたくない場合は、被りにくいclass名をつけておけばいいのです。