- このトピックには10件の返信、2人の参加者があり、最後に
により11年、 5ヶ月前に更新されました。
-
投稿
-
-
お世話になります。
初心者ながら試してみたいことがあり、wordpressのプラグインなどを探してみたのですが見つからず、jQueryで可能そうなものをみつけました。
そこでjQueryに関連しての質問なのですが、
以前hidekichi様からwordpressでjQueryを使う際のコンフリクトの注意など助言いただきましたが、その後色々調べていて以下のサイト様の記述を見つけました。
↓
http://www.pondad.com/?p=7620こちらの管理人様が行ったようにwordpress独自のjQuryコードを打ち消すようにしようかと考えているのですが、これを行った場合、simplicityのデフォルトの表示に不具合が起こるなどありますでしょうか？
例えばモバイル用のメニューで[animatedModal.js] というものが使用されているようですが、こちらが使えなくなるなどです。
なにぶん無知ですので、jQueryのコードなどが紹介されている記事のコードをそのまま使用できるようになれば、色々紹介されているライブラリ？を試せるのではないかと思いまして。
-
-
わいひら様ありがとうございます。
説明不足失礼いたしました。
「これ」と言いますのは、上記サイト様の最後の部分となりまして、こちらのサイト様が紹介しておられるサイト｛http://sensebahn.com/develop/389/)の「WordPressの独自仕様によるjQueryを「読み込ませない」設定にする」ために<head></head>の中に（simplicityの場合は header-insert.php になりますでしょうか？）以下の様なコードを入れる、と言った方法です。
↓
<?php wp_deregister_script(‘jquery’); ?>
<!– WordPressのjQueryを読み込ませない –>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>結局のところは自分で動作確認するしかないとは考えておりますが、素人判断でしてしまって、知らずに何か致命的な失敗をしてしまっていたり、後になって直すのがとても困難、など他で何度か経験しておりまして（苦笑）
事前に分かる問題などがあればクリアしておきたいと考えて質問させていただきました。
-
なんか呼ばれたような気がしたので来てみました（笑）
外部CDNからjQueryを読み込ませるのはいくつか理由があります。リンク先の管理人さんが言われていたり、前に僕もチラホラと書きましたが、コンフリクト(競合)の部分は、基本jQueryしか使わないのであればそれほど気にするところではありません。
jQueryは基本javascriptのライブラリなので、他のjavascriptのライブラリだったりと正に競合すると色々まずいので、wordpressではjQueryを使う時は、jQueryと書くようにしましょうという感じです。なぜまずいのかは、例えばprototypeというのも$を利用していたりするからです。
例えばjQueryを外部CDN(例えばGoogleからとか)読み込めば、競合問題は起きません…と言うと語弊がありますが管理者がjQueryを使うように心がければ問題ない部分です。問題があるとすればpluginとかになるでしょうか。
また、外部から読み込む場合、基本的に最新のjQueryを利用できます。セキュリティ的にも速度的にも外部jQueryを利用する方が良いのでそうすれば大部分の問題は解決できたりします。
wordpressはアップデートされて初めて自前で持っているjQueryのバージョンが上がります。wordpressとjQueryが互いに協調してアップデートしてくれればよいのですがそういうわけには行かずに、いつまでたってもwordpressのjQueryのバージョンが上がらないと言う場合もあります。その時にjQueryに問題が浮上したら、jQueryを開発している人達は直ちにアップデートすると思いますが、wordpressを開発している人達がそれに同調するかどうかはわかりません。なので、利用しているここで言うなら管理者がバージョンを上げるかどうかの判断をしないといけないわけです。ただし、wordpressのjQueryはwordpress向けにできている(わけではないにしても色々調査されている)だろうと思うので、管理画面や編集画面等では自前のjQueryが動作したほうがよかったりします。
そういうことからリンク先の管理人さんも自前のjQueryを使わず(wp_deregister_scriptを利用して)、新たにCDNからjQueryを読み込んでいるわけです。と、説明した上で、現在のSimplicityでは、リンク先の管理人さんのやり方でもできなくはないのですが、もう少し違う方法でjQueryを読み込ませます(wordpressの仕組みがちょっと変わったため。別にこの通りしなくても良いのですが、便利なので)。
if(!is_admin()){ function register_jQuery(){ wp_deregister_script( 'jquery' ); //あらかじめ登録されているjQueryを登録解除する $url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'; wp_register_script('jquery', $url); wp_enqueue_script('jquery'); //登録し直したjQueryを読み込む } add_action('wp_enqueue_scripts', 'register_jQuery'); } add_filter( 'script_loader_tag', function ( $tag, $handle ) { if ( 'jquery' !== $handle ){ return $tag; } return str_replace( ' src', ' async defer src', $tag ); }, 0, 2 );僕はこれを子テーマのfunctions.phpに書いています。
やっていることは、wordpress自前のjQueryの登録を解除して、新たにGoogleのcdnから読み込んだjQueryを登録しています。
そしてadd_filterで、本来の<script type="javascript" src="google cdnのアドレス"></script>こう出力されるものを、書き変えて、
<script type="text/javascript" async="" defer="" src="google cdnのアドレス"></script>
こうなるようにしています(srcの部分がasync defer srcと言うのに書き換わる)。これは主に近々サービス終了らしいpageSpeed insightの対策と言うか、レンダリングブロックしているスクリプト(上記はjQueryだけですが)を何とかするためのものです。wp_enqueue_scriptは、キューをwordpressに送って整列させるというか順番待ちをうまく整合させるというかそういうやつです。jQuery依存のスクリプトはjQueryが読み込まれるまで読み込まれません。これがうまく動作していないと、jQueryが読み込まれる前にpluginとかのスクリプトが読み込まれて、プラグインが「あれ？俺先に読み込まれたけどjQueryないじゃん」って事でエラーをだしたりして、例えばSNSボタンの数値部分がいつまでもクルクルと回り続けたりするわけです。
まぁ一番先にjQueryが読み込まれるように手動で操作すればそれで済むんですけども、まぁ色々ありまして（笑）ちなみにif(!is_admin()){とあるように、管理者と違う人が動作させた時だけと言う仕組みなので、管理画面、編集画面などログインしないと操作できない部分はwordpress自前のjQueryが動作します。
特別このような外部CDNからのjQueryの読み込みに関して(現在の所)Simplicityが問題を起こすことはないと思います。
また、IEなどの古いブラウザもサポートしないといけない場合は、
1.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 2.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>上記の、1.x系を。IEは別にどうでもいいやと言う僕みたいな考えの人は迷わずに2.x系を利用されるのをオススメします。古いブラウザをサポートしない分、多少速いはずです。
-
hidekichi様
今回も詳しい説明ありがとうございます。正直なところ、以前助言いただいたコンフリクトの問題が今ひとつ理解できていませんでした。
wordpress独自の問題があると再認識する前に、試してみるjQueryがことごとく表示できず悩んでいた際、記事内のコードで記述されているjQueryのバージョンがそれぞれ違っていることに気づき、これに問題があるのかな？などとも思っていました。
結局原因は違うところにあったようで、表示することは出来なかったのですが、バージョンも色々変更して試してみたりもしました。
いちいちこんなことをしなくちゃいけないのなら、それはそれで面倒だなと感じていましたが、このコードを記述することで勝手に最新のものに置き換わってくれるということですよね？（今現在文字化けしているようですが）
基本的にド素人がネットを徘徊していて、面白い表示ができるんだなと見つけたのがたまたまjQueryだったと言うだけで、それ以外のものを利用したいというのは全然ありません。
今回色々読んでいて「wp_enqueue_script」というのが賢いというのも漠然と知りまして、記述していただいたコードにこれが組み込まれていることで賢いんだと確信しました（笑）
IEなどの古いブラウザのサポートというのは全然考えていませんでしたが、記述しておいても問題ないものであるのなら、より親切かな？とも思いますので、2.x系というのを記述しようと思いますが、その場合は if(!is_admin()){ 〜のコードの最後にくっつけて子テーマのfunctions.php に記述する、という解釈でよろしいでしょうか？
if(!is_admin()){
～
～
～
},
0,
2
);
2.x snippet:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>↑
のような形（文字化けは直しました）で子テーマのfunctions.php に記述する？ -
>このコードを記述することで勝手に最新のものに置き換わってくれるということですよね？
>（今現在文字化けしているようですが）これはやや違います。最新のjQueryの外部CDNアドレスを入れているので最新になることには変わりないのですが常に最新というわけではありません。Google cdnで検索すると、「Hosted Libraries – Hosted Libraries — Google Developers」がトップに出てくると思います。これがGoogleが配信している各jQueryなどのライブラリです。ここからjQueryの所を見ると、アドレスが記載されているのでそこに記載されているものを前のレスでは適応しているだけなのです。
その内jQueryも3とか4が出るだろうと思いますが、その時はまたそのアドレスを前レスのスクリプト(子テーマfunctions.php)に書き変えないといけないわけです。一応、ちょっとした書き換えで常に最新にすることもできるのですが、それはjQueryの本家がやめてくれとブログで発表していました。
理由としては、「まぁほとんどのバグやセキュリティホールはその時の最新状態で潰しているはずだけど(最新版を公開するにあたって万全は尽くしているが)、万が一があった場合、wordpressも含めスクリプトをキャッシュするような機構が組み込まれている場合、バグフィックス版の公開直後に最新に切り替わらないことがあるため」と言う感じでした。スクリプトのキャッシュはおそらく比較的長いと思われるので、その間に攻撃されたらマズイということですね。
>2.x系というのを記述しようと思いますが、その場合は if(!is_admin()){ 〜のコードの
>最後にくっつけて子テーマのfunctions.php に記述する、という解釈でよろしいでしょうか？このレス上記の内容からもわかるように、2.x系と1.x系はアドレスが違います。https://ajax.google…./jquery/ここ/jquery.min.js なので、前レスの$url=”…”を自分が利用したいアドレスに書き換える必要があるわけです。つまり前レスのスクリプトの後にGoogleのアドレスを追記するのではなく、$urlの部分を書き換えるだけです。
文字化けについては、その内にわいひらさんが修正してくれるだろうと思いますが、管理者権限のない人が投稿したスクリプトは＜や”などがコード化するようになっていますので、
＆#039; は '
＆lt; は <
＆gt; は >
＆quot; は "と読み替えて下さい(これも変わらないかな…変わってるだろうと信じて（笑）。
1.x snippet: や 2.x snippet: はただわかりやすいように書いてるだけなので、実際に必要なのはアドレスだけです。
-
#26650
僕は、jQueryもあまり詳しいわけではないので、そうすることによる影響まではちょっとわからないです。
僕も、大丈夫だろうと思って実装して動作しなくなったりすることがよくあるので。ここら辺は、hidekichiさんがかなり詳しいので、お任せしたいと思います。
僕が先にレスを読んでいたら、心の中で完全にとhidekichiさんを呼んでいたと思います(笑) -
hidekichi様
追解説ありがとうございます！なるほどぉー、とここにきてようやく少しすっきりした感じです。
1.x、2.x、というのはそういうことだったんですね。
バージョン関連で調べている時に「Hosted Libraries」にも辿り着いていたんですけど、自分の目の節穴っぷりにかなり落胆です…という訳で、その後文字化けを直して子テーマのfunctions.php に記述してみたのですが…
うまくいきませんでした…jQueryの前にちょっとした不具合も確認されました。
一つはコメント欄の不具合で、「某スレッド版掲示板風入力欄」がスマホ表示ではみ出してしまう問題をこちらのトピック→とカスタマイザーの「コメント欄を文章量に応じて伸縮させるか」にチェックを入れることで解決しているのですが（私の環境ではトピックの方法だけでは解決されませんでした）それがはみ出した状態に戻ってしまいます。
もう一つは「wp_enqueue_script」で説明してもらっている「例えばSNSボタンの数値部分がいつまでもクルクルと回り続けたりする」というまさにこの状態になってしまっています。
別の所に問題があるのかと思い何度か確認してみましたが、やはり子テーマのfunctions.php への記述で上の２つの状態になってしまうようです…
これはつまり書き込んだjQueryのコードが壊れている、または変な所に設置している？とかいった状態なのでしょうか？
ちなみにjQuery関連の記述を削除して、子テーマのfunctions.php への記述だけにしても上記の状態になってしまいます…
わいひら様
文字化けの解消ありがとうございます。ド素人の質問にhidekichi様にお付き合いいただき、この場をお借りしてしまっていることお二方にお詫びし、感謝いたします。
-
>「例えばSNSボタンの数値部分がいつまでもクルクルと回り続けたりする」というまさに
>この状態になってしまっています。これの原因を見つけるためには、まずautoptimize、headクリーナーとかを一旦停止するのが重要です。使われていないのであればひとまずは読み進めて下さい。
使われている場合に停止する理由の一つは、どちらもスクリプトをひとまとめにしてしまう、またフッターへ自動で位置を変えてしまうのを防ぐためです。またautoptimizeに関しては独自にキャッシュファイルを作ったりするので何も問題がないサイトの状況だとそれが高速化に繋がるのですが、問題がある場合はそれがネックで原因が突き止められません。
これらのプラグインを停止すると、基本的にwordpress、あるいはSimplicityが読み込む「素の状態」になると思います。他にも、jetpackのphotonとかも怪しかったりするのですが、これも使われている場合は一時停止でしょうか。(jetpackの設定で、photonのチェックを外す)
いわゆる素の状態になれば、htmlのhead部分でどうゆう読み込み順序になっているかがわかります。ここではじめて修復方法が見つかったりするのです。他にもweb開発環境(モダンブラウザのF12あたりから)でconsoleを開くと、SNSボタンの数値がクルクルで進まない時に、何が原因のエラーを吐いているかを確認できます。
大抵の場合、jQueryが読み込まれる前に他のスクリプトが動作してしまっている場合、また何かしらの他のエラーが出てしまって親・子それぞれのjavascript.jsまで動作できない状態、最悪は親・子それぞれのjavascript.jsの中身にエラーがある場合等が考えられます。
他のスクリプトがjQueryが読み込まれる前に動作している場合は、それを修復する必要がありますがたいていは手を加えなくてもデフォルトで動作するはずです。問題があるとすれば、asyncがスクリプトの読み込みに入っている時でしょうか。
asyncは非同期に読み込んで、いわゆる読み込める状態になったら動作するわけですが、そのタイミングがいつなのかが管理者側からはわかりにくいんです。またそのスクリプトの中身にdocument.writeが使われてるい場合はasyncは使えません。なので基本的に「どうしてもasyncでしかダメな場合」を除いて、レンダリングブロックを解消するのであればdeferを利用するべきです。
googleのアドセンスはasyncですけどね（笑）deferは、サイトの構造などの解析が完了したら、いわゆるページのレンダリングの準備が完了したらはじめて動きます。遅延読み込みというやつです。すでにサイトの構成は整っていてそこに何かしらを追加したり変更したりするわけですから間違いが少ないと言えます。
>という訳で、その後文字化けを直して子テーマのfunctions.php に記述してみたのですが…
>うまくいきませんでした…上記のプラグインをひとまず停止してみて、htmlのhead部分にcdnからの自分が指定したバージョンのjquery.min.jsが読み込まれているかを確認してみて下さい。
jquery.min.jsが読み込まれているようであれば問題は後で追加した何かしらのスクリプトとなります。>これはつまり書き込んだjQueryのコードが壊れている、
>または変な所に設置している？とかいった状態なのでしょうか？自身で書き込んだjQuery自体にエラーがある場合もあれば、その他の場合もあります。そういう時は、autoptimizeなどのプラグインを停止して「素の状態」にしてから、chromeやfirefoxでweb開発環境を開いてconsoleを見ます。
もし、Uncaught ReferenceError: jQuery is not definedなどのエラーの場合、jQueryが読み込まれる前に他のスクリプトが動作してしまっていることが考えられます。つまり「おいおい、読み込まれたけどjQueryないじゃん」と言うエラーです。
たいていのプラグインのスクリプト、親・子テーマのjavascript.jsはjQueryに依存しているはずなのでjQueryが読み込まれていれば、(wp_enqueue_scriptのキューの順番待ちで)jQueryのロードを待っているはずです。jQueryがロードできない場合はやはりUncaught ReferenceErrorが出るだろうと思います。こういう時は、必ずそうなるのであればweb開発環境のelements(いわゆるhtmlの構成)を調べて、何がjQueryの前に読み込まれているかをチェックします。
僕の環境で問題があったのは、jetpackプラグインのphotonとdequeue_devicepxぐらいです。後は導入しているプラグインはすべてwp_enqueue_scriptが正しく書かれていて問題は出ていないように思いますが、今現在でもphoton(画像をwordpress本家のどこかしらのサーバーに一時的にキャッシュしてCDNで読み込むjetpackの機能)がエラーを吐いている時のみ(404[not found]とか)の場合はUncaught ReferenceError: jQuery is not definedが出たりしますが、たいていの場合は出ません。
photonを止めたらエラーでないんだろうけどなぁ…と常々思ってます（笑）
dequeue_devicepxはプラグイン作者も利用しないのであれば読み込む必要はないので、
function dequeue_devicepx() { wp_dequeue_script( 'devicepx' ); } add_action( 'wp_enqueue_scripts', 'dequeue_devicepx', 20 );これで対処してくれと公式のフォーラムに投稿がありました。これは前にもどこかで書きましたが、retinaやらhdpiの高解像度の画像を扱う場合のものです。まぁ普通は必要ないものなので、これらも僕は子テーマfunctions.phpに書いています。
-
hidekichi様、わいひら様ありがとうございます。
その後激闘の末（苦笑）原因を究明、なんとか「くるくる」コメント欄不具合を解消しつつ使いたかったjQueryの表示もできるようになりました。
結論から申しますと、やはり私がコードを置いた場所、及びPHPへの変換の間違いによるjsファイルの呼出しの失敗によるものでした。（書き方おかしく分かりづらいくてすみません…）
様々な形で思い当たる様々な場所に記述、削除繰り返してみまして、一つ一つ「くるくる」を確認していってみまして、やはり呼びこむ順番に問題があったようでした。
逆に言うとこの「くるくる」がよいバロメーター？になって確認しやすかったです（笑）
これが解消できたことで、jQuery関連の問題も見当がつき、作動させることができました。
一つだけ「あれ？なんでこれで大丈夫なんだ？」と思う部分があったのですが、Chromeで各ブラウザで表示確認しても問題ないようでしたので、取り敢えず結果オーライとしました。
ド素人に親切にお付き合いいただきましてありがとうございました！
今はゆっくり眠りたいと思います（汗） -
-
- トピック「jQueryなどの表示に関しまして」には新しい返信をつけることはできません。