WordPressでJqueryやJqueryプラグインを使う

【この記事を読むのに必要な時間は約 25 分です。】

WordPressでは、多種多様なJqueryプラグインがWordPress用プラグインとして用意されている。
しかし、時としてWordPressのプラグインではないJqueryプラグインを利用したいときがある。
そのような際は、基礎から懇切丁寧に解説している以下のサイトを参考にすると良い。

kachibito.net 「WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例」
Web Design Recipes 「WordPressでjQueryが動かないという人へ」

これらを熟読したうえで、有効にしているテーマの「header.php」へ記載することにした。

利用したいJqueryプラグインと通常のHTMLへの記載

利用したいjqueryプラグインは「colorbox」と「syntaxhighlither」

colorbox

以下のファイルが必要。
  jquery.colorbox.js
  colorbox.css
以下のスクリプトを<head></head>内に記載。

			<script>
			$(document).ready(function(){
				//Examples of how to assign the ColorBox event to elements
				$(".group1").colorbox({rel:'group1'});
				$(".group2").colorbox({rel:'group2', transition:"fade"});
				$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
				$(".group4").colorbox({rel:'group4', slideshow:true});
				$(".ajax").colorbox();
				$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
				$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
				$(".inline").colorbox({inline:true, width:"50%"});
				$(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});
				
				//Example of preserving a JavaScript event for inline calls.
				$("#click").click(function(){ 
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});
			});
		</script>

※その他に「images」フォルダがある。

syntaxhighlighter

以下のファイルが必要。
shCore.js
shBrushJScript.js
shBrushBash.js
shBrushXml.js
shCore.css
shThemeDefault.css
以下のスクリプトを<head></head>内に記載。

        <script type="text/javascript">
         SyntaxHighlighter.all()
        </script>

通常のHTMLファイルに記載するとこんな感じ

<head>

<!--↓jquery start-->
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<!--↑jquery end-->

<!--↓syntaxhighlighter_3.0.83 start-->
<link type="text/css" rel="stylesheet" href="css/shCore.css"/>
<link type="text/css" rel="stylesheet" href="css/shThemeDefault.css"/>
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushBash.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
<!--↑syntaxhighlighter_3.0.83 end-->

<!--colorbox start-->
		<link rel="stylesheet" href="css/colorbox.css" />
		<script src="js/jquery.colorbox.js"></script>
<!--colorbox end-->

<!--script start-->
        <script type="text/javascript">
         SyntaxHighlighter.all()
        </script>
		<script>
			$(document).ready(function(){
				//Examples of how to assign the ColorBox event to elements
				$(".group1").colorbox({rel:'group1'});
				$(".group2").colorbox({rel:'group2', transition:"fade"});
				$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
				$(".group4").colorbox({rel:'group4', slideshow:true});
				$(".ajax").colorbox();
				$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
				$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
				$(".inline").colorbox({inline:true, width:"50%"});
				$(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});
				
				//Example of preserving a JavaScript event for inline calls.
				$("#click").click(function(){ 
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});
			});
		</script>
<!--script end-->
</head>

実践:WordPressでJqueryプラグインを使う

うまくいかなかった方法

上記サイトを熟読したうえで、以下のようにするのがベストと思った。
1)WordPressに用意されているjquery本体は、「no conflict」の問題があるので、使わないようにする。
2)ajaxから最新のjquery本体を呼び出して使う。
3)そのうえで、<?php wp_head(); ?>より上に、
   wp_enqueue_script関数(jsファイルを呼び出す)と
   wp_enqueue_style関数(cssファイルを呼び出す)を利用して記載する。
4)上記関数はまとめて記載する。(うまくいかなかった場合は、別々でも記載してみる。)
5)直接スクリプトを記載する必要がある場合は、<?php wp_head(); ?>より下で</head>より上に、そのまま記載する。
以上の方針のもとに、以下のように記載した。

<head>
//↓WordPressのJqueryを使わずにajaxから呼び出して使う
<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), '1.7.1');
?>

//↓利用したいjqueryプラグインのcssファイルをまとめて記載する
<?php
wp_enqueue_style('colorbox-css', get_bloginfo('template_url') . '/css/colorbox.css');
wp_enqueue_style('syntaxhighlighter1-css', get_bloginfo('template_url') . '/css/shCore.css');
wp_enqueue_style('syntaxhighlighter2-css', get_bloginfo('template_url') . '/css/shThemeDefault.css');
?>

//↓利用したいjqueryプラグインのjsファイルをまとめて記載する
<?php
wp_enqueue_script('syntaxhighlighter1', get_bloginfo('template_url') . '/js/shCore.js',array(jquery)); 
wp_enqueue_script('syntaxhighlighter2', get_bloginfo('template_url') . '/js/shBrushJScript.js',array(jquery)); 
wp_enqueue_script('syntaxhighlighter3', get_bloginfo('template_url') . '/js/shBrushBash.js',array(jquery)); 
wp_enqueue_script('syntaxhighlighter4', get_bloginfo('template_url') . '/js/shBrushXml.js',array(jquery)); 
wp_enqueue_script('colorbox', get_bloginfo('template_url') . '/js/jquery.colorbox.js',array(jquery)); 
?>

//↓より上にjquery、jaueryプラグインとそのcssファイルは記載する

<?php wp_head(); ?>

//↑より下に、直接書き込むスクリプトは記載する

<script type="text/javascript">
         SyntaxHighlighter.all()
        </script>
<pre class="brush: javascript; gutter: true; first-line: 1; highlight: []; html-script: false">
			<script>
			$(document).ready(function(){
				//Examples of how to assign the ColorBox event to elements
				$(".group1").colorbox({rel:'group1'});
				$(".group2").colorbox({rel:'group2', transition:"fade"});
				$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
				$(".group4").colorbox({rel:'group4', slideshow:true});
				$(".ajax").colorbox();
				$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
				$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
				$(".inline").colorbox({inline:true, width:"50%"});
				$(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});
				
				//Example of preserving a JavaScript event for inline calls.
				$("#click").click(function(){ 
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});
			});
		</script>
</head>

ところがうまくいかなかった。

うまくいった方法

それで、以下のようにすると動いた。
1)WordPressに用意されているjquery本体を使う。
2)そのうえで、<?php wp_head(); ?>より上に、
   wp_enqueue_script関数(jsファイルを呼び出す)と
   wp_enqueue_style関数(cssファイルを呼び出す)を利用して記載する。
3)上記関数は別々記載する。
4)直接スクリプトを記載する必要がある場合は、<?php wp_head(); ?>より下で</head>より上に、「$」を「jQuery」に書き換えて記載した。

<head>
//↓利用したいjqueryプラグインのcssファイルを個別に記載する
<?php wp_enqueue_style('colorbox-css', get_bloginfo('template_url') . '/css/colorbox.css'); ?>
<?php wp_enqueue_style('syntaxhighlighter1-css', get_bloginfo('template_url') . '/css/shCore.css'); ?>
<?php wp_enqueue_style('syntaxhighlighter2-css', get_bloginfo('template_url') . '/css/shThemeDefault.css'); ?>

//↓利用したいjqueryプラグインのjsファイルを個別に記載する
<?php wp_enqueue_script('syntaxhighlighter1', get_bloginfo('template_url') . '/js/shCore.js',array(jquery)); ?>
<?php wp_enqueue_script('syntaxhighlighter2', get_bloginfo('template_url') . '/js/shBrushJScript.js',array(jquery)); ?>
<?php wp_enqueue_script('syntaxhighlighter3', get_bloginfo('template_url') . '/js/shBrushBash.js',array(jquery)); ?>
<?php wp_enqueue_script('syntaxhighlighter4', get_bloginfo('template_url') . '/js/shBrushXml.js',array(jquery)); ?>
<?php wp_enqueue_script('colorbox', get_bloginfo('template_url') . '/js/jquery.colorbox.js',array(jquery)); ?>

//↓より上にjquery、jaueryプラグインとそのcssファイルは記載する

<?php wp_head(); ?>

//↑より下に、直接書き込むスクリプトは「$」を「jQuery」に変えて記載する

<script type="text/javascript">
         SyntaxHighlighter.all()
        </script>
<pre class="brush: javascript; gutter: true; first-line: 1; highlight: []; html-script: false">
			<script>
			jQuery(document).ready(function(){
				//Examples of how to assign the ColorBox event to elements
				jQuery(".group1").colorbox({rel:'group1'});
				jQuery(".group2").colorbox({rel:'group2', transition:"fade"});
				jQuery(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
				jQuery(".group4").colorbox({rel:'group4', slideshow:true});
				jQuery(".ajax").colorbox();
				jQuery(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
				jQuery(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
				jQuery(".inline").colorbox({inline:true, width:"50%"});
				jQuery(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});
				
				//Example of preserving a JavaScript event for inline calls.
				jQuery("#click").click(function(){ 
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});
			});
		</script>
</head>

理解に戸惑った部分

関数の指定の部分でいくつか戸惑ったのでメモ書きしておく。

wp_enqueue_script('ハンドル名', 'スクリプトのパス' , array(), 'バージョン');
wp_enqueue_style('ハンドル名', 'cssのパス' , array(), 'バージョン');

バンドル名

ここでひとつのJqueryプラグインを利用するのに複数のjsファイルやcssファイルが存在する時、バンドル名はわかりやすければなんでもいいが、連番にしないと全部のファイルを呼び出してくれない。
例)syntaxhighlighter1,syntaxhighlighter2というように最初これがわからなかった。

get_bloginfo(‘template_url’)

これはどこを呼び出しているのか、最初わからなかった。
結局、現在有効化しているテーマを呼び出している。
従って、get_bloginfo(‘template_url’) . ‘/css/colorbox.css
というのは、
「wp-content」-「themes」-「個別のテーマ名(例えば「fastfood」)」-「css」-「colorbox.css」
という指定になっている。

array

これは関数で指定したjsファイルと必ずセットで呼び出しなさいという事らしい。
jqueryを指定しておけば通常問題ない。

バージョン

バージョンは指定しなくてもよい。指定しないと、適当な番号がつくが、特に問題なかった。

こちらも参考に

なお、この記事は、私の別のブログubuntu12.04LTS使い始めました!で、WordPressのプラグインではない「Jqueryプラグイン」を紹介していて、先日まで、通常の「html+css」で作成したhtmlファイルにリンクを貼っていた。そのため、デザインが統一されていなかった。

デザインを統一するため、あれこれ思案して次のように計画した。
1.マルチサイト化する。(サブディレクトリ型)
2.子サイトで「Jqueryプラグイン」紹介ページを作成する。
3.子サイトで「WordPressでJqueryプラグインを使う」を実行する。
4.子サイトで「投稿記事別(カテゴリー別)に特定のheader.phpを割り当て」を実行する。
ことにより作成しようと目論んだので1.や4.も見てほしい。

以上

Related Posts Plugin for WordPress, Blogger...

もし良ければお願いします。

  • このエントリーをはてなブックマークに追加

良かったらフォローお願いします。