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

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

スポンサーリンク

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

cocoon は、jQuery をフッターで出力しているため、javascript を使った動的なページを作ろうとすると
jQuery is not defined
とか
$ is not defined

とか言われちゃいます(デバッガーの出力)
そのためjQuery の読み込みをヘッダーに移動させようと思ったわけです。


jQuery is not defined とか $ is not defined とか言われる理由


JavaScript は、使用する関数が先に読み込まれていないと動かない言語です。
jQuery を使おうとしたときに Jquery が読み込まれていないと jQuery を使うことができません。

つまり、
jQuery is not defined
とか
$ is not defined
といわれるのは、jQuery の読み込みが終わっていないうちに jQuery を使った javascriptを動かそうとしている時にこのメッセージが表示されます。

対策は、そのページのソースファイルを見てください。
jQuery の読み込みと動かそうとする javascript の位置関係はどうなっていますか?

jQuery の方が先に読まれているのならば、その前の javascript でトラブルが発生している可能性があります。
目的の javascript の関数の前にある関数でエラーが出ていないか調べてみてください。

jQuery が 目的の javascript よりも後に出てくるようならば、その順番を変えてあげればいいんです。

ワードプレスの場合、大抵は ヘッダで読み込みますが、テーマによってはフッターで読み込むものもあります。
ソースファイルで確認してください。


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


基本的にワードプレスは、何もしなくても jquery を読み込んでいてくれるので
テーマ側で意図的に操作しない限り jQuery の読み込みはヘッダー部でやってくれています。
じゃあ、なぜ jQuery の読み込みをわざわざフッターにもっていく必要があるんでしょう?

jQuery はご存知の通り、とっても便利な javascript のライブラリーです。
そのため jQuery は、でかい。

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

つまり、cocoon も速度優先という考え方のようです。


フッターにある jQuery の読み込みを ヘッダーに持ってくる方法


ワードプレスでは、ヘッダーで jQuery を読み込むのがセオリーですが、テーマによってはフッターで読み込んでいます。
通常ワードプレスで jQuery の読み込む時は、以下のようにしています。

wp_enqueue_script("jquery", "jQuery の URL");

これをフッターで読み込むようにするためには、こう書きます。

wp_enqueue_script("jquery", "jQueryURL", array( "jquery" ), false, true );

wp_deregister_script("jquery");
wp_enqueue_script("jquery","jQueryURL",array(), "", true);

最初の行で wp が読み込む jquery を無効にしています。
次の行で jQuery をフッターで読み直すようにしています。

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

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

そこで、フッターに書こうとしているものを再びヘッダーに・・・
それは、時間の無駄なのでは?

ということで、自分のスクリプトをjQuery の下に出力する方法をこちらに書いておきました。


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

スポンサーリンク

スポンサーリンク

よく使うタグ

・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 広告 最適化にあたって必要になってくるツールがグーグルアナリティクスとサーチコンソール。別にグーグルのアナリティクス、サーチコンソールでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲