サポート » 使い方全般 » テーマcocoonでJavascriptが使えない

  • 解決済 nanana0

    (@nanana0)


    http://kina-test.city-search.net/sky_2/

    上記が私のサイトの画面です。

    チェックボックスを動的に動かしたいです。

    固定ページの記事編集にあるカスタムJavascriptの記述欄、もしくは外観⇒テーマファイルエディタ⇒

    テーマを編集Cocoon Child: javascript.js編集するテーマを選択:   Cocoon Child などからjsをコード追記しても反映しません。

    ネット上にある解説を探してもどうやればよいのか分かりません。

    https://sologaku.com/wordpress/add-js-to-child-theme/#google_vignette

    上記のやり方解説を見つけましたが

    cocoonでこの記述方法が使えるのかも不明です。

    また、https://wp-cocoon.com/community/cocoon-theme/%E5%A4%96%E9%83%A8%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AEjs%E3%82%84css%E3%81%AE%E8%BF%BD%E5%8A%A0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/

    上記のような情報もありましたが、自分のサーバーにあるフォルダのファイル内容異なり、そのままでは使えません。

    とどなたかお答えいただけないでしょうか?

    ヘルプの必要なページ: [リンクを見るにはログイン]

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック投稿者 nanana0

    (@nanana0)

    https://notepad.pw/PFnvHoEgmX5zO8fOhoEu

    上記は、jsのコード。

    JSを動作させるプラグインSimple Custom CSS and JSを使っても画面に変化がありませんでした。

    こんにちは。

    ネット上にあるサンプルコードをそのまま貼り付けても動作するとは限りません。そもそも動作環境や前提条件が一致していないといけませんし、@nanana0さんが要望されている機能を満たしているとも限りません。

    チェックボックスを動的に動かしたい

    この部分をもう少し詳しく共有いただかないと、こんな解説記事がありますよ、とアドバイスすることが難しいです。

    どうしてもこの部分を実装したいのであれば、参考にしたいページなどを用意して(探して)、ご自身で実装が難しいとお感じになるのであれば、有償で開発を依頼されることをご検討されてはいかがでしょうか?

    トピック投稿者 nanana0

    (@nanana0)

    浅川さん、コメントありがとうございます。

    >動作環境や前提条件

    >この部分をもう少し詳しく共有いただかないと、

    環境情報を書きます。

    サイト名:kinahare_test
    サイトURL:http://kina-test.city-search.net
    ホームURL:http://kina-test.city-search.net
    コンテンツURL:/wp-content
    インクルードURL:/wp-includes/
    テンプレートURL:/wp-content/themes/cocoon-master
    スタイルシートURL:/wp-content/themes/cocoon-child-master
    親テーマスタイル:/wp-content/themes/cocoon-master/style.css
    子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
    WordPressバージョン:6.4.3
    PHPバージョン:8.2.16
    ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
    サーバーソフト:Apache
    サーバープロトコル:HTTP/1.1
    エンコーディング:gzip, deflate 言語:ja,en-US;q=0.9,en;q=0.8 テーマ名:Cocoon
    バージョン:2.7.0
    カテゴリー数:1
    タグ数:0 ユーザー数:1 子テーマ名:Cocoon Child
    バージョン:1.1.3
    style.cssサイズ:5401 バイト functions.phpサイズ:203 バイト Gutenberg:1
    Font Awesome:4
    Auto Post Thumbnail:0
    Retina:0 ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg ブラウザキャッシュ有効化:0
    HTML縮小化:0
    CSS縮小化:0
    JavaScript縮小化:0 Lazy Load:0 利用中のプラグイン:
    Simple Custom CSS 4.0.6 Simple Custom CSS and JS 3.46

    これで共有は可能でしょうか?

    環境情報の情報の共有ありがとうございます。

    しかし、そうではなくて….

    チェックボックスを動的に動かしたい

    この部分の実装イメージをもう少し詳しく共有いただかないと、こんな解説記事がありますよ、とアドバイスすることが難しいです。

    トピック投稿者 nanana0

    (@nanana0)

    以下はhtml版になります。これをそのままwp実装するイメージとなります。
    https://kitasoubus.cheap.jp/kinahare_sitemap/check_box1128.html
    コードはwp版が出来ていますのでそちらをアップします。
    以下html
    https://notepad.pw/E0CN37jIKSVku7jI74A5
    以下css
    https://notepad.pw/fnOOZQoo6XvITTasJg34

    です。

    なるほど。
    私の手元の検証環境で、共有していただいたhtml版のコードを「カスタムHTMLブロック」を用いて、その中にコードを貼り付けると動作しました。

    カスタム HTML
    https://ja.wordpress.org/support/article/custom-html/

    一度お確かめいただけると幸いです。

    ishitaka

    (@ishitaka)

    同じ JavaScript コードが子テーマの javascript.js ファイルとインライン(固定ページのカスタム JavaScript 欄?)で記述されています。このため互いの動作を打ち消し合っているようです。

    トピック投稿者 nanana0

    (@nanana0)

    浅川さん、ishitakaさんコメントありがとうございます。まず、jsのコードを固定ページ1つにしました。まだ、チェックボックスの✓が出ませんのでまだワードプレスとhtmlのコードの書き方の違い等問題があるようです。ブロックに関しては、まだ不慣れな部分が多いです。5.0以前のテキストエディタのみ使用していましたので。

    ishitaka

    (@ishitaka)

    > チェックボックスの✓が出ませんので・・・

    ページの左上に表示されてますね。CSS の記述漏れがありませんか?

    トピック投稿者 nanana0

    (@nanana0)

    cssのミスを直したところですが、✓uuuuuと、✓なやみの間に余計な余白、もしくは改行が入っているのようなので調べています。htmlで作成段階ではコーディングミスが見えないことが多いです。

    トピック投稿者 nanana0

    (@nanana0)

    いろいろとありがとうございました。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • このトピックに返信するにはログインが必要です。