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:ユーザー入力補助

カテゴリー

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクスとサーチコンソール。別にグーグルのアナリティクス、サーチコンソールでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクス。別にグーグルのアナリティクスでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せな

FB 広告 最適化~グーグルサーチコンソールの使い方(必要な分だけ)

FB 広告 最適化~グーグルサーチコンソールの使い方(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルサーチコンソール。別にグーグルのサーチコンソールでなくてもいいんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せなくしたキーワ

FB 広告 最適化~グーグルのアクセス解析の基本

FB 広告 最適化~グーグルのアクセス解析の基本 FB広告を最適化するためには、アクセス解析が重要なカギを握ります。FB広告から当該ページに飛んでくるときURLにオプションを付けることができます。このURLにつけたオプションを使ってどの広告から、どん

jQuery ボタンを押しても反応しない

jQuery ボタンを押しても反応しない jQuery の click イベントを使ってボタンを押したら alert を表示する簡単な仕様なのになにも反応しない。一瞬はまってしまうことって・・・ありますよね?例えば、こう書きます。popup.

WP パーマリンク リダイレクト インターナルサーバーエラー

WP パーマリンク リダイレクト インターナルサーバーエラー WP パーマリンクのリダイレクトがインターナルサーバーエラーを起こすようになった。ユーザーさんのサイトなので「なにをしたか」わからない。WP パーマリンク リダイレクト インターナルサーバーエラーのい