HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプトもOK)

スポンサーリンク

ワードプレスで jQuery の後に script を読み込ませる方法、これは動的スクリプトも可能な方法です。

ワードプレスのプラグインで動くシステムを開発していたところ、ユーザーインターフェイスでどうしても javascriptを使わないといけない場面が出てしまいました。
それはなんてことなかったのですが、ベースにしていたテーマが cocoon 。
cocoonは、simplecity の後継ともいわれる ワードプレスのテーマです。

なので気軽に始めようとしたら cocoon の表示ページは、jQuery をフッターで出力しているので、

javascript を使うと
jQuery is not defined
とか
$ is not defined

とエラーが出ます。


jQuery is not defined 、 $ is not defined と表示される理由


JavaScript は、呼出しに物理的な順番が影響する言語です。
そのため jQuery を使う関数は、jQuery が読み込み済み(物理位置)でないと
jQuery is not defined や is not defined といったエラーが出てしまいます。

対策は、そのページのソースを開いて、jQuery の読み込み位置と動かそうとする script の位置を確認してください。
jQuery の方が先にでてきていれば、その前の javascript でトラブルが発生している可能性があります。

jQuery が 目的の javascript よりも後に出てくるようならば、その順番を変えることでエラーを消すことができます。。


なぜ jQuery の読み込みをフッターにするのか


ワードプレスは、jQuery を標準で読み込んでいますから、普段は意識せずに jQuery を使用することができます。
事実ダッシュボードで動かすプログラムは jQuery を読み込ませなくても動きます。

これはワードプレスの管理画面(ダッシュボード系)では、jQuery は、管理画面のヘッドの部分で読み込んでいる証拠です。

ところがテーマ側で意図的 jQuery をフッターで読み込むように細工しているものがあります。
なぜ jQuery の読み込みをわざわざフッターにもっていくのかといえば、
jQuery はご存知の通り、とっても便利な javascript のライブラリーです。
そのため jQuery は、サイズがおおきくなっています。

その大きなファイルをヘッダで読み込もうとするとコンテンツが表示されるまで時間がかかってしまいます。
そこでフッターのさらに下で jQuery を読み込むことでコンテンツの表示速度を上げることができるからです。



スポンサーリンク





ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプト可)


jQuery を利用するスクリプトを常に jQuery の下に配置するように指示すれば動的スクリプトでも性的スクリプト(jsファイルにしたもの)でも問題なく動きます。


ワードプレスでは、ヘッダーで jQuery を読み込むのがセオリーですが、テーマによってはフッターで読み込んでいます。
通常ワードプレスで jQuery の読み込む時は、以下のようにしています。
jQuery is not defined とか $ is not defined から抜け出せない場合、次のように改変すると動きます。

1、ダミーの js ファイル(例では fillerpadding.js 中味は空っぽ)を作ります
2、スクリプトを $line にいれて以下のように記述します。
	// $dUrls : fillerpadding.js のあるURLのパス
	// $line : スクリプト
	
	// (1)
	wp_enqueue_script(    'myjscript', $dUrls.'/fillerpadding.js', array( 'jquery' ), false, true  );
	// (2)
	wp_add_inline_script( 'myjscript' , $line, 'after' ) ;


wp_enqueue_scriptは、ワードプレスのリファレンスでは、こういう説明があります。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

ですが、解説がイマイチ高度なので平たく言いますと。
$handle: 読み込んだ場所につけるアンカー(目印)
$src:script の 読み込み場所(今の説明でいうと jQuery の URL)
$deps:通常は、array() で指定しません。が、どの場所(アンカー)の下に配置するかを指定します。
$ver:読み込むスクリプトのバージョン番号(自作のスクリプトなら別に何でもいい。省略可)
$in_footer:false ならヘッダーで true ならフッターで読み込みます。


(1) jquery の次の行へ myjscript という名前の アンカーを 付けます。
(2) (1)でつけたアンカーと同じ場所へ $line のスクリプトを読み込ませます。


ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプトもOK)まとめ


ポイントは、jquery というアンカー(wordpress が jquery 読み込みの場所につけてるアンカー)の次の行にアンカーを貼り、
そのアンカーのところへ自分のスクリプトを読み込ませるということです。

関数的になかなか検索で見つけられないのが wp_add_inline_script です。
wp_enqueue_script の意味とwp_add_inline_scriptがわかってしまえば、案外簡単ですよね。


この記事があなたのお役に立てれば幸いです。

スポンサーリンク

スポンサーリンク

よく使うタグ

・float クリア
<br clear="all"><div style="clear:both;" class="clearfix"></div>
・角丸め
round-radius
border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;
・div box
overflow:scroll;min-width:300px;max-width:300px;min-height:300px;max-height:300px;
・TEXTAREAリサイズ
resize: vertical;
・サイトURL
home_url() // http://…
if(site_url()==home_url){
$shorturl_yuzu_path = substr(ABSPATH,0,strpos( ABSPATH, substr(site_url(),strlen(home_url()) ) ) ).’/’;
}else{
$shorturl_yuzu_path = ABSPATH.’/’;
}
// /var/…
・WP HOME URL
site_url() // http://…/wp
ABSPATH // /var/…/wp
・プラグイン(自分のDIR追加必要)
plugins_url() // http://…/plugins
WP_PLUGIN_URL // http://…/plugins
WP_PLUGIN_DIR // /var/…/plugins
・使用中のテーマ
get_template_directory_uri() // http://…/theme/xx
get_template_directory() // /var/…/theme/xx
・wp-content
content_url() // http://…/wp-content
WP_CONTENT_DIR // /var/…/wp-content
・画像URLからDIR変換
$pctdir=str_replace(content_url(), WP_CONTENT_DIR,$pcturl);
・パス名分解
$pathData = pathinfo($file);
echo $pathData["dirname"]; // /var/~
echo $pathData["filename"]; // xxx
echo $pathData["extension"]; // txt
echo $pathData["basename"]; // xxx.txt
・画像サイズ
list($width,$height) = getimagesize($url);
if(has_post_thumbnail()){
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘full’ );
$src = $image[0]; //url
$width = $image[1]; //横幅
$height = $image[2]; //高さ
・画像サイズ比率
list($src_w,$src_h) = getimagesize($file);
$dst_w = 600;$dst_h = 0;
$dst_h = ($dst_w!=0)?(intval(($src_h*$dst_w)/$src_w )):(($dst_h!=0)?(intval(($src_w*$dst_h)/$src_h)):0);
・疑似要素順
link visited hover active


特殊文字
シングルクォート : &#39;
ダブルクォート : &quot;
WP設定内表示前処理(htmlタグ許可項目)
$str = str_replace(‘<','&lt;' ,$str);
$str = str_replace(‘>’,’&gt;’ ,$str);
$str = str_replace(‘\”‘,’&quot;’,$str);
$str = str_replace(“\'”,’&#39;’ ,$str);
WO設定項目表示前処理(htmlタグ許可項目)
$str = str_replace(‘\”‘,'”‘,$str);
$str = str_replace(“\'”,”‘”,$str);
・テーマ
get_theme_root_uri()
get_theme_root()
・WP 情報
get_bloginfo( $show )
・Wp config FTP 情報 設置
define( ‘FTP_HOST’, ‘host’ );
define( ‘FTP_USER’, ‘id’ );
define( ‘FTP_PASS’, ‘pw’ );
define( ‘FTP_SSL’, false );
弾に使う
placeholder:ユーザー入力補助

カテゴリー

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス flexbox は、div の box を横に並べるためのブラウザに標準装備されてるクラス。乱暴な言い方すればそういうことです。現場では細かいことはどうでもよくて、とにかく簡単に DIV BOX を横

vba タスクに IE が残る

vba タスクに IE が残る vba タスクに IE が残る。VBAでブラウザ経由でサイトのページの情報を拾い上げる技は結構使いますよね?私だけ?wwwそうすると、なぜかvba タスクに IE が残っていて、繰り返し利用するとどん

wp datepicker 特定の項目で動かない。

wp datepicker 特定の項目で動かない。 ワードプレスでつかえる datepicker は、とっても簡単につかえて便利なライブラリーです。javascript は、なれないとデバッグに時間がかかり気持ち的にすごく敷居が高い気がしますがわかって

プラグインの管理画面でHTMLの入力を許すフィールドの扱い方

プラグインの管理画面でHTMLの入力を許すフィールドの扱い方 ワードプレスのプラグインを書いていると、HTMLタグを入力できるフィールドを作りたくなりますよね?例えば、ページにデータを表示するときにその書式を入力さえるとか。例えば、これはワードプレスのプラグイン

ワードプレスのフッターにある jQueryの読み込みをヘッダーで出力させる

ワードプレスのフッターにある jQueryの読み込みをヘッダーで出力させる ワードプレスのフッターにあるjQueryの読み込みをヘッダーで出力させる必要ができました。simplecity の後継ともいわれる ワードプレスのテーマ cocoon のカスタマイズです。cocoon

ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプトもOK)

ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプトもOK) ワードプレスで jQuery の後に script を読み込ませる方法、これは動的スクリプトも可能な方法です。ワードプレスのプラグインで動くシステムを開発していたところ、ユーザーインターフェイスでどう