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

カテゴリー

カラフルボックスなど cpanel サーバーでPerlでMySQLにアクセスできないときの対策

カラフルボックスなど cpanel サーバーでPerlでMySQLにアクセスできないときの対策 カラフルボックスでPerlでMySQLにアクセスできないときの対策カラフルボックスでPerlでMySQLにアクセスできない!エラーメッセージは、mysql のドライバーがない。こんなメッセージが返って

MW WP FORM のフックが効かない。

MW WP FORM のフックが効かない。 MW WP FORM のフックが効かない。MW WP FORM は、各種フックがあってカスタマイズが便利~とか言われているプラグインですが。。。マニュアルにはあるのにフックが効かないフックがかなりある

MW WP FORM のショートコードで出力される内容をカスタマイズする。

MW WP FORM のショートコードで出力される内容をカスタマイズする。 MW WP FORM のショートコードで出力される内容をカスタマイズしたくなりました。非表示フィールド type=”hidden” にデータをためておいて、それをメール送信する

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所 WelCart 買い物かごのカスタマイズするとき、毎回テンプレートファイルを探すのでメモしておきます。WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所WelCart 買い物かごのカ

WelCart で投稿ページに商品購入欄を作る

WelCart で投稿ページに商品購入欄を作る WelCart の商品ページは、ご存知んごとくウルトラダサい。これをカスタマイズしないとなんとも素人っぽさの抜けないサイトになってしまう。WelCart で投稿ページに商品購入欄を作るときのモジュール

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

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