Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

共有:
通知
すべてクリア

[解決済] 追加jQueryが動きません。

16 投稿
4 ユーザー
13 Reactions
3,992 表示
(@toejune)
Active Member Registered
結合: 4年前
投稿: 10
Topic starter  
子テーマ直下にある
javascript.js
 
にjQueryを記載しても、動きません。
 
一方で、まったく同じコードを、固定ページの編集画面で「カスタムjavascript」に記載すればそのページでは動くので、コード自体は合っていると思うのですが。(ですのでとりあえずは具体的なjQueryコードの記載は省略いたします)
 
なお、jQueryを使用するために、同じ固定ページのhtmlを入力する欄に
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
を記載しています。
 

何か原因お分かりになりますでしょうか?お手数ですが、よろしくお願いいたします。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、toejune さん

私は、あまり詳しくないのですが、子テーマのダッシュボードの「外観」→「テーマエディター」→「tmp-user」→「footer-insert.php」とだとり、その「footer-insert.php」の中に書いたりすると、動いたりしますか?

This post was modified 4年前 by リフィトリー

   
わいひら reacted
(@toejune)
Active Member Registered
結合: 4年前
投稿: 10
Topic starter  
フィリトリーさん、早速ありがとうございます。
 
footer-insert.php
に早速記載してみました。
 
一部動くのですが、動かないものもあるという結果でした。
簡単にjQUeryの機能とコードの説明を記載します。
 
 
動く
ヘッダー固定
offset、scrollTop、addClass、removeClass を使用
 
トップへ戻るボタン
scroll、scrollTop、fadeIn、fadeOut、animate を使用
 
記号アニメーション
toggle、slide(direction) を使用
 
 
動かない
スクロールで下から出現
load scroll、scrollTop、fadeIn、fadeOut を使用
 
hoverで別要素出現
hover、show、$(document).on、$(this).hide を使用
 
 
jQueryのバージョン違いの問題のような気もしますが、引き続き情報頂ければ幸いです。
 
ちなみに以前、同フォルダのhead-insert.phpでは試していたのですがダメで、footerのほうが正解だったのですね。
 

よろしくお願いいたします。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@toejune さん

すみません。前述しましたとおり、私はあまり詳しくないので、よくわかりません。

 

ただ、jQUery では、ブラウザがHTMLを先に読み込んでからでないと動かないものが多いような認識が おぼろげにあったので、bodyタグの終了タグの近くに書かけば動くものもあるのではないか、と、推測した次第です。

This post was modified 4年前 by リフィトリー

   
わいひら reacted
(@toejune)
Active Member Registered
結合: 4年前
投稿: 10
Topic starter  

リフィトリーさん

 

とんでもございません。効く場所が分かっただけでもありがたいです。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@toejune さん

Wordpressで、さらにCocoonの環境ですと、JSのコードが、何かの要因で動かないこともあるのかもしれません。

 

静的なHTMLの簡単なテストサイト等の他の要因の影響を受けない環境で、コードの動作を確認してみるのも、コードの有効性を確かめるという点では、有りかもしれません。

This post was modified 4年前 by リフィトリー

   
わいひら reacted
(@toejune)
Active Member Registered
結合: 4年前
投稿: 10
Topic starter  
何度も失礼します。解決していませんが、現状はこのような状態かと思います。
情報の整理ができればと思い投稿します。
 
 
・footer-insert.phpに記載したコードは有効。
・しかしjQueryのバージョン違いで一部が動かない。
・一方で、固定ページのカスタムjavascriptに記載したものは動くのは、html欄に記載の以下が有効であるため。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
 
・つまり、footer-insert.phpに上記jQueryのコードを記載しても効かない。
 
ではどこに書けばいいのか、ということになるかと思います。
 
リフィトリーさんの仰るように、Wordpressやcocoonの仕様でつまづいているのではないかと思います。(こちらの静的な制作環境では動きますので)

引き続き、情報をお待ちしたいと思います。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@toejune さん

だとすると、以下だけ、heder-insert.php に書いて、他は footer-insert.php に書く、というのを試してもいいかもしれませんね。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

 


   
わいひら reacted
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1087
 

Cocoonを利用している時点でjQueryは読み込まれているので、特別理由(特定のバージョンのものを使いたいなど)がなければ追加で読み込む必要はないと思います。

jQueryのバージョンはCocoon設定>その他>JavaScriptライブラリ設定から変更できます。

動くものと動かないものがあるのがなぜかは分かりませんが、追加で読み込んでる場合は上手く動くのなら、固定ページと同じものをCocoon設定>アクセス解析・認証>ヘッド用コードに入力しておけば上手くいくのかなと思います。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@toejune さん

はるさんと、ちょっと被ってしまったので、補足です。

投稿者:: @haruinoue

Cocoon設定>アクセス解析・認証>ヘッド用コードに入力しておけば上手くいくのかなと思います。

ヘッド用コードの欄でも、headタグ内に出力され、「heder-insert.php」でも headタグ内に出力されるかと思います。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 
投稿者:: @toejune
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

とりあえず、こちらは一度削除して動作確認する必要はあると思います。


   
(@toejune)
Active Member Registered
結合: 4年前
投稿: 10
Topic starter  

皆さんありがとうございます。まとめてのお礼で失礼いたします。

いろいろ試しました。

・まず、
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
をfooter-insert.phpから削除しました。

・結果、どこにも上記コードの記載がない状態になり、まず
Cocoon設定>その他>JavaScriptライブラリ設定から、jQuery Migrateも含めjQueryのバージョンを全通り試しましたが、動きません。
この時点でやはり、上記コードを追加しないと動かないことが確認できました。
そして、やはり私が使いたいjQuryのバージョンは、cocoon標準のものでは対応していないということなのだと思います。

・次に、Cocoon設定>アクセス解析・認証>に上記コードを記述する方法を試しました。

ヘッダー用コード、フッター用コードのいずれかへの記載で、今回のトピックの当初の状態になります。
動くものと動かないものがある、という状態です。

ですので、ここまでの検証でいえることは
「footer-insert.phpに書いていたものをCocoon設定>アクセス解析・認証>に移動させ、同じ動きになる」
ということでした。(当たり前かもしれませんが)

ですのでまだ解決はしないのですが、ご報告です。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@toejune さん

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

のコードを「header-insert.php」に書いて試してみられましたか?

 

というのも、Cocoon設定>アクセス解析・認証>ヘッド用コードだと、同じheadタグ内でも上の方の行に出力され、「header-insert.php」なら、headタグ内の下の方の行に出力されるので、なにか変わるのではと思ったのです。

 

 


   
わいひら reacted
(@toejune)
Active Member Registered
結合: 4年前
投稿: 10
Topic starter  

リフィトリーさん

大変失礼いたしました、教えて頂いた形で対応しましたところ、動きました。

また他の皆様も、

「一部動くjQueryと動かないものがある」と申しました点は、私がhtmlを限定したページでしか表示しないようにしていたことが直接の原因でした。お騒がせして申し訳ありません。

結論として、解決しました。いろいろと勉強になりました。ありがとうございました。

ちなみにですが、今回対象となったすべてのコードを、ウィジェットの

コンテンツ下部に、カスタムHTMLに記載してみたところ、動きます。テーマファイルやcocoon設定には何も記載しなくてもOKです。表示にも影響がないようで、そのほうがメンテも楽かなと思いました。ということも発見したので、念のため、補足しておきます。


リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@toejune さん

jqueryのCDNのコードは、headタグ内に記述するのが通常の方法だったように記憶しています。

 

また、ググってみると、jquery-ui のCDNのコードはjquery本体のCDNのコードより下の行に記述しなくてはならないようです。

 

Cocoonのテーマでも jquery のCDNのコードがheadタグ内に出力されているので、もしかしたら、それより下の行に書く必要があるのかなと、思った次第です。

 

 

This post was modified 4年前 2回 by リフィトリー

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 
投稿者:: @leafytree

jqueryのCDNのコードは、headタグ内に記述するのが通常の方法だったように記憶しています。

これは、動作させるコードより先に読み込んでいれば良い、ということみたいですね。

 

headタグ内でなくてはいけないということではないようです。 ? 


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました