添付画像の jQuery は、誰が書いているのでしょうか？この部分で問題が発生しています。

子テーマのスキンをお使いになっていますが、そのスキンでお書きになっていませんか？

投稿者:: @akira

↑

添付画像の jQuery は、誰が書いているのでしょうか？この部分で問題が発生しています。

子テーマのスキンをお使いになっていますが、そのスキンでお書きになっていませんか？

 Akira さん

ありがとうございます。

子テーマのスキンは、SILKを元に、私がダークモードに変更したものですが、
ご指摘部分の jQueryは、組み込んだ覚えがありません。

ダークモードにするため、css部分は追記しましたが、、、

「 jQuery」部分については、改めて調べてみたいと思います。

貴重なヒントありがとうございます。

●ご参考

https://wp-cocoon.com/community/postid/73555/

(@chu-ya)さん

情報ありがとうございます。

GitHubの最終情報を見ながら、functions.php　と tmp/footer-javascript.php　を
慎重に見直してみたいと思っています。

SILKスキンを変更して子テーマに移したのは２年以上前です。
それから、１年後くらいに再度オリジナルのSILKスキンをD/Lし、
再度変更を加えましたので、それを踏まえて見直します。

ただ、functions.php　も footer-javascript.php　も、変更した記憶が（定かで）ないので、

ここは、オリジナルのものかと思います。

ですので、最終の
https://github.com/xserver-inc/cocoon/commit/c4aa6bc9002427f423c8224943a94af96682c700
部分だけ参照し、ステートメント番号がずれていないかのみ確認しながら、変更を当てて行けば良い様に思えます。

先ずはお礼までで、修正が完了してCopyできる様ななったら、「解決済み」としたいと思います。

@yamachan11 さん

SSLサイトでは、Clipbord.jsを使用しません。
これにより、書かれた通り、SILK自体も変更となっています。

SILKをコピーし、独自で直しているとの事。
結果、旧オリジナルのSILKでは動作しません。

余り良い方法ではないですが、Clipboard.jsを読み込めば動作するかと思います。

半分解決しました。

1の　<>コードブロックで追加した部分の「Copyアイコン」クリックでのクリップボードへのコピーは、解決です。

　対応は、Cocoon\Skins\silk\functions.phpで

・　CocoonChild\Silk-dark-j\functions.phpを上書きしました。
WinMergeでfunctions.phpを比較し、GitHubにあったステートメントが一致するかを確認。

\Silk-dark-j\に移したのが２年以上前であったため、GitHubにあるものに比べ圧倒的にステートメントが少ないですが、
　　（添付画像１：WinMerge.jpg）

・　エディタでも相互を比べ、内容が問題ないと判断し、入れ替えました。

　　（添付画像２：functions.php231206.jpg）

・尚、tmp/footter-javascript.phpは、親フォルダ（Cocoon）にしか存在しない為そのままです。

2.　カスタムHTMLブロックに追加した「Copy機能」から呼び出す.jsでのCopyは相変わらずダメです。

　先にも書いた通り2022年に非推奨となった

 document.execCommand('copy');

を使用している為だと思いますが、これは独自カスタマイズの為、ここではサポート対象外と思われますので、

これにてクローズ「解決済み」としたいと思います。

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

２番目の画像が間違っていた為差し替えです。

@yamachan11 さん

以下のページですが、変数を再定義しているとエラーが出ています。

https://xn--ecka7j.biz/site-operation/design/5452/

Uncaught SyntaxError: Identifier 'hero' has already been declared

<!-- cocoon Custom JS --> とあるため、その投稿ページの「カスタムJavaScript」にお書きになった JavaScript だと思います。

変数 hero を別名にするか、全体を {} で囲めばエラーは解消すると思います。

{
  /*--- 変数の宣言--- */
  const hero = document.getElementById("hero");
  //    5.Glassのカラー Hex入力Id:     #input_hexColor 
  const hex = document.getElementById("input_hexColor");
  //    5.Glassのカラー 選択Id:        #input_rgbColor
  const rgb = document.getElementById("input_rgbColor");

  以下省略
}

(@akira) さん

ありがとうございます。

(@akira) さん

お陰様で、ご指摘頂いたエラーは回避できました。

が、デベロッパーツールで確認すると、他にもエラーが出ていました。
今まで動いていたのが何だったのか？
.HTMlと.cssの生成は出来ています。（以前動いていたCopyは、今できませんが）

エラー回避を進めて行きたいと思っています。

ありがとうございます。

@yamachan11 さん

このエラーが出ていますね。

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

該当箇所は以下の部分ですが、copy_buttonHTML という ID のある要素がないのが原因です。おそらく、正しい ID は copy_HTML_button だと思います。

/* --- コピー/貼り付けボタンを担当するイベント --- */
document.getElementById('copy_buttonHTML').addEventListener('click', ()=>{
  copyToClipboard('code_text1');
}
);

その直後にお書きの部分でも、同じエラーが出るはずです。copy_buttonCSS ではなく、おそらく copy_CSS_button だと思います。

document.getElementById('copy_buttonCSS').addEventListener('click', ()=>{
  copyToClipboard('code_text2');
}
);

(@akira) さん

いつもながら、ありがとうございます。

非推奨となったdocument.execCommand('copy');の代替として、Clipboard APIを使用する

  const clipboard = document.querySelector('[data-clipboard-text]');
  clipboard.textContent = str;
  clipboard.click();

を、行ってから

エラーの特定を進めていたところなので、ずいぶん助かっています。
ありがとうございます。

暫く、時間が取れそうにないので、
時間をみて、
教えて戴いたところを追ってみたいと思っています。

(@akira) さん

お陰様で、独自カスタマイズ部分のCopy機能も修正でき、回復しました。
原因は、Custom_JavaScript部分の記述間違いでした（copy_buttonCSSとcopy_buttonHTML）。

カスタムHTMLブロックの定義と＜Link部分の.jsしか見ていなかった為、
（copy_CSS_buttonとcopy_HTML_button）しかなく、
問題部分（copy_buttonCSSとcopy_buttonHTML）が見つけられなかったのです。

➡  Custom_JavaScriptに定義していたことを、すっかり失念していました。

また、
Link部分の.jsの推奨化部分も大幅に簡略化できました。

function copyToClipboard(x) {
  navigator.clipboard.writeText(document.getElementById(x).textContent);
}

// ：関数の宣言:引数xは、コピーするテキストを含む要素のIDです。
//            引数xで指定された要素のtextContentを取得する
// ：textContent属性を使用して、要素のテキストコンテンツを取得しています。
// ：Clipboard APIのwriteText()メソッドを使用して、テキストをクリップボードに書き込んでいます。
//   navigator.clipboard.writeText()メソッドでクリップボードにテキストを書き込むメソッド。  
//
// ：非推奨のdocument.execCommand('copy');をClipboard APIに置き換え。
//	　 document.getElementById(x).textContentは、要素のテキストコンテンツを取得するメソッドです。
// ：textContentは、value属性と同じ値を返すため、el.value = str;を削除。
//非推奨となっているdocument.execCommand('copy');の使用を避けることができ、また、コードの記述量を減らすことができました。

以下、修正後にCopyがうまく行ったCopy出力部分です。

<!-- ジェネレーターで生成された HTML Souecr-Codeです。--> 
<div class="glass_container_J2023_12_11_13958" id="glass2023_12_11_13958"></div>

/* ジェネレーターで生成された CSS Souecr-Codeです。*/
.glass_container_J2023_12_11_13958 {
    position: relative;
    z-index:  0px;
    width:device-width;
    height: 375px;
    color:  white;
    display: flex;
    gap:      0px;
    justify-content: center;
    align-items:     center;
    backdrop-filter: blur(5px);
    background-color:rgba(0,191,255, 0.075);
    box-shadow:      rgba(000, 000, 000, 0.3) 2px 8px 8px;
    border-top-left-radius:    10px;
    border-top-right-radius:   10px;
    border-bottom-right-radius:10px;   
    border-bottom-left-radius: 10px;
    border-top:   2px solid;
    border-right: 2px solid;
    border-bottom:2px solid;
    border-left:  2px solid;
    border-top-color:   rgba(255,255,255,0.40);
    border-right-color: rgba(040,040,040,0.35);
    border-bottom-color:rgba(040,040,040,0.35);
    border-left-color:  rgba(255,255,255,0.40);
    margin-top:    0px; 
    margin-right:  0px;  
    margin-bottom: 0px; 
    margin-left:   0px;    
    padding-top:   0px;
    padding-right: 0px;
    padding-bottom:0px;
    padding-left:  0px;
}