サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020-10-01 16:12
子テーマ直下にある
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>
を記載しています。
何か原因お分かりになりますでしょうか？お手数ですが、よろしくお願いいたします。
Topic starter
2020-10-01 17:09
フィリトリーさん、早速ありがとうございます。
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のほうが正解だったのですね。
よろしくお願いいたします。
Topic starter
2020-10-01 17:51
何度も失礼します。解決していませんが、現状はこのような状態かと思います。
情報の整理ができればと思い投稿します。
・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の仕様でつまづいているのではないかと思います。（こちらの静的な制作環境では動きますので）
引き続き、情報をお待ちしたいと思います。
Topic starter
2020-10-01 20:07
皆さんありがとうございます。まとめてのお礼で失礼いたします。
いろいろ試しました。
・まず、
<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設定>アクセス解析・認証>に移動させ、同じ動きになる」
ということでした。（当たり前かもしれませんが）
ですのでまだ解決はしないのですが、ご報告です。
2020-10-01 20:30
@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
Topic starter
2020-10-01 20:53
リフィトリーさん
大変失礼いたしました、教えて頂いた形で対応しましたところ、動きました。
また他の皆様も、
「一部動くjQueryと動かないものがある」と申しました点は、私がhtmlを限定したページでしか表示しないようにしていたことが直接の原因でした。お騒がせして申し訳ありません。
結論として、解決しました。いろいろと勉強になりました。ありがとうございました。
ちなみにですが、今回対象となったすべてのコードを、ウィジェットの
コンテンツ下部に、カスタムHTMLに記載してみたところ、動きます。テーマファイルやcocoon設定には何も記載しなくてもＯＫです。表示にも影響がないようで、そのほうがメンテも楽かなと思いました。ということも発見したので、念のため、補足しておきます。
2020-10-01 21:28
jqueryのCDNのコードは、headタグ内に記述するのが通常の方法だったように記憶しています。
これは、動作させるコードより先に読み込んでいれば良い、ということみたいですね。
headタグ内でなくてはいけないということではないようです。 ?
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。