Safariでの表示不具合も解決できました

前回『プラグイン導入によるSafariでの表示不具合』ということでデバッグをしていました。結論としてはプラグインやテーマでjavscriptライブラリを2重に読み込んでいることが原因のようで、これを解決させるとその不具合も問題なく解消されました。ようやくひと安心…といったところです。

どんな対策をしたかというとWP 2.1から導入されたというwp_enqueue_script()という関数を使いました。javascriptライブラリを引き込むのにGoogle Maps for WordPressプラグインがこの関数を使っていたことに端を発します。

このwp_enqueue_script()関数の詳しい説明は『wp_enqueue_scriptで外部JavaScriptの読み込みをスマートに at WordPress.ex-libris.jp』や『[WP]wordpress付属のJavascriptを使用する – WebTecNote』に任せますとして、対策のために変更したのは次の通りです。

Lightbox JS 2.04プラグイン・lightbox.php：

function lightbox_styles() {
	$lightbox_path = get_option('siteurl')."/wp-content/plugins/lightbox-2-wordpress-plugin/lightbox/";
	$lightboxscript.= "<script type=\"text/javascript\"> lb_path = \"$lightbox_path\"; </script>\n";
	$lightboxscript.= "<link rel=\"stylesheet\" href=\"".$lightbox_path."css/lightbox.css\" type=\"text/css\" media=\"screen\" />\n";
	$lightboxscript.= "<script type=\"text/javascript\" src=\"".$lightbox_path."js/prototype.js\"></script>\n";
	$lightboxscript.= "<script type=\"text/javascript\" src=\"".$lightbox_path."js/scriptaculous.js?load=effects,builder\"></script>\n";
	$lightboxscript.= "<script type=\"text/javascript\" src=\"".$lightbox_path."js/lightbox.js\"></script>\n";

	print($lightboxscript);
}

の部分を次のように変更します。

function lightbox_styles() {
	$lightbox_path = get_option('siteurl') . "/wp-content/plugins/". basename(dirname(__FILE__)) . "/lightbox/";
	$lightboxscript.= "<script type=\"text/javascript\"> lb_path = \"$lightbox_path\"; \n";
	$lightboxscript.= "<link rel=\"stylesheet\" href=\"".$lightbox_path."css/lightbox.css\" type=\"text/css\" media=\"screen\" />\n";

	wp_enqueue_script('wpLightbox', "{$lightbox_path}js/lightbox.js", array('prototype', 'scriptaculous-effects', 'scriptaculous-builder'));

	print($lightboxscript);
}

でもこれだけでは修正は有効にならないのでその下にあるコードも変更します。

Lightbox JS 2.04プラグイン・lightbox.php：

// Erase	add_action('wp_head', 'lightbox_styles');
// start Add
add_action('wp_print_scripts', 'lightbox_styles');
// end Add

Google Maps for WordPressプラグインとLightbox JS 2.04プラグインの競合による不具合はこれで解消されます。

…でも私の使っているテーマの関係もあってこれだけでは終わりそうにないのでテーマの方も変更しておくことにしました。使用しているテーマは『Rounded v2 blue edition』です。このテーマの構成ファイルのうち、header.phpに対して修正を施しました。

Rounded v2 blue editionテーマ・header.php：

		<link rel="stylesheet" href="< ?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />

<!-- Comment Out
	<script src="<?php bloginfo('template_directory'); ?>/js/lib/prototype.js" type="text/javascript">
	<script src="<?php bloginfo('template_directory'); ?>/js/scriptaculous.js" type="text/javascript"></script>
		<script src="<?php bloginfo('template_directory'); ?>/js/sifr.js" type="text/javascript"></script>
 Comment Out -->
< ?php
// start Add
	$template_url = get_option('siteurl') . "/wp-content/themes/rounded-v2-blue-edition-10/";
	wp_enqueue_script('sifr', "{$template_url}js/sifr.js" , array('prototype', 'scriptaculous'));
// end Add
?>

これらの変更によりjavascriptライブラリが2重に読み込むこともなくなるようです。吐き出されるソースコードでも確認したので確かでしょう。

これでようやく枕を高くして眠れそうです(^-^)

…あぁ、でも折角紹介しているソースコードが見にくい…。デザイン的にはかなり気に入っているんだけど別のテーマを探した方が良いのかなぁ……。

関連記事：

関連記事は今のところありません