サイト内検索
Cocoonフォーラム
![](https://wp-cocoon.com/wp-content/themes/cocoon-master/screenshot.jpg)
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Cocoonテーマに関する質問
14
投稿
3
ユーザー
11
Reactions
478
表示
Topic starter
2023年12月6日 10:43
お世話様です。
長文になってしまい失礼します。
1. <>コードブロックで追加した部分の「Copyアイコン」クリックでのクリップボードへのコピーができない、
(添付画像1:Copy_Err01.jpg)
2. カスタムHTMLブロックに追加した「Copy機能」から呼び出す.jsでのCopyも効かなくなりました。
(添付画像2:Copy_Err01.2pg)
3. 記憶が定かではないのですが、以前の、同じ<>コードブロックのCopy機能の記事
は、2023/08月時点では、Copyが機能していたと思います。
----------------------------------------------------
「確認したこと」
・ 最近追加したプラグイン[WPCode Lite]、「Query Monitor」の無効化と、
・ 1年以内に追加したプラグイン「WP Statistics」の無効化をしても変化がありません。
・ 高速化「JavaScript縮小化」、「遅延読み込み」、「CSS縮小化」、「HTML縮小化」を
無効化にしても変化ありません。
・ 範囲を指定して、[ctrl] +[c]のコピーはできます。
----------------------------------------------------
「該当記事:日付、URL」
1-1. <>コードブロックで追加した部分のコピーが出来なくなったと気付いた記事
(23/12/04)URL
https://xn--ecka7j.biz/site-operation/design/8500/
2-1. カスタムHTMLブロックに追加した「機能」から呼び出す.jsでコピーが出来なくなった記事
(2022/12/01)
https://xn--ecka7j.biz/site-operation/design/5452/
3-1. 同じ<>コードブロックで追加した部分のCopy機能の記事
(2023/08/19)URL
https://xn--ecka7j.biz/site-operation/design/7939/
「テーマ情報」
----------------------------------------------
サイト名:Webサイトに必要なことと道具
サイトURL: https://xn--ecka7j.biz
ホームURL: https://xn--ecka7j.biz
コンテンツ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
スキン:/wp-content/themes/cocoon-child-master/skins/silk-dark-j/style.css
WordPressバージョン:6.3.2
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:120.0) Gecko/20100101 Firefox/120.0
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.9
カテゴリー数:18
タグ数:85
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.0
style.cssサイズ:7569バイト
functions.phpサイズ:281バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:1
Font Awesome:5
Auto Post Thumbnail:1
Retina:0
ホームイメージ:/wp-content/uploads/2020/02/ogt-512-512-024-068.png
----------------------------------------------
ブラウザキャッシュ有効化:1 ➡無効化
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
Aurora Heatmap 1.6.0
EWWW Image Optimizer 7.2.1
Invisible reCaptcha 1.2.3
Query Monitor 3.15.0 ➡無効化
Regenerate Thumbnails 3.1.6
SiteGuard WP Plugin 1.7.6
Site Kit by Google 1.115.0
SVG Support 2.5.5
Wordfence Security 7.11.0
WP Multibyte Patch 2.9
XO Security 3.7.0
----------------------------------------------
宜しくお願いします。
-----・-----・-----・-----・-----・-----・-----・-----・-----・-----・
「関係あるのか不明ですが、2の.jsの一部」
2'(2-2)[.htmlをクリップボードにCopy]及び、
[.cssをクリップボードにCopy]で機能する.jsの一部を貼り付けておきます。
➡
/wp-content/uploads/j_js/js_j1.js
/* コピー/貼り付け ボタン機能 --- text_area */ function copyToClipboard(x) { const str = document.getElementById(x).innerText; const el = document.createElement('textarea'); el.value = str; el.setAttribute('readonly', ''); el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); } /*ただ、 document.execCommand('copy');は、非推奨となったが、 替わりが見つからない 、 Range.surroundContents('copy');➡これだと。Copy出来ない 22/11/22 ➡ このため、当面はこのままとする。*/
This topic was modified 9か月前 4回 by Yamachan11
Topic starter
2023年12月6日 16:42
(@chu-ya)さん
情報ありがとうございます。
GitHubの最終情報を見ながら、functions.php と tmp/footer-javascript.php を
慎重に見直してみたいと思っています。
SILKスキンを変更して子テーマに移したのは2年以上前です。
それから、1年後くらいに再度オリジナルのSILKスキンをD/Lし、
再度変更を加えましたので、それを踏まえて見直します。
ただ、functions.php も footer-javascript.php も、変更した記憶が(定かで)ないので、
ここは、オリジナルのものかと思います。
ですので、最終の
https://github.com/xserver-inc/cocoon/commit/c4aa6bc9002427f423c8224943a94af96682c700
部分だけ参照し、ステートメント番号がずれていないかのみ確認しながら、変更を当てて行けば良い様に思えます。
先ずはお礼までで、修正が完了してCopyできる様ななったら、「解決済み」としたいと思います。
わいひら reacted
2023年12月6日 17:25
@yamachan11 さん
SSLサイトでは、Clipbord.jsを使用しません。
これにより、書かれた通り、SILK自体も変更となっています。
SILKをコピーし、独自で直しているとの事。
結果、旧オリジナルのSILKでは動作しません。
余り良い方法ではないですが、Clipboard.jsを読み込めば動作するかと思います。
わいひら and Yamachan11 reacted
Topic starter
2023年12月6日 19:58
半分解決しました。
1の <>コードブロックで追加した部分の「Copyアイコン」クリックでのクリップボードへのコピーは、解決です。
対応は、Cocoon\Skins\silk\functions.phpで
・ CocoonChild\Silk-dark-j\functions.phpを上書きしました。
WinMergeでfunctions.phpを比較し、GitHubにあったステートメントが一致するかを確認。
\Silk-dark-j\に移したのが2年以上前であったため、GitHubにあるものに比べ圧倒的にステートメントが少ないですが、
(添付画像1:WinMerge.jpg)
・ エディタでも相互を比べ、内容が問題ないと判断し、入れ替えました。
(添付画像2:functions.php231206.jpg)
・尚、tmp/footter-javascript.phpは、親フォルダ(Cocoon)にしか存在しない為そのままです。
2. カスタムHTMLブロックに追加した「Copy機能」から呼び出す.jsでのCopyは相変わらずダメです。
先にも書いた通り2022年に非推奨となった
document.execCommand('copy');
を使用している為だと思いますが、これは独自カスタマイズの為、ここではサポート対象外と思われますので、
これにてクローズ「解決済み」としたいと思います。
ありがとうございました。
This post was modified 9か月前 4回 by Yamachan11
わいひら reacted
2023年12月7日 01:08
@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"); 以下省略 }
わいひら and Yamachan11 reacted
Topic starter
2023年12月7日 11:52
(@akira) さん
お陰様で、ご指摘頂いたエラーは回避できました。
が、デベロッパーツールで確認すると、他にもエラーが出ていました。
今まで動いていたのが何だったのか?
.HTMlと.cssの生成は出来ています。(以前動いていたCopyは、今できませんが)
エラー回避を進めて行きたいと思っています。
ありがとうございます。
This post was modified 9か月前 by Yamachan11
2023年12月8日 00:58
@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'); } );
わいひら reacted
Topic starter
2023年12月8日 09:39
(@akira) さん
いつもながら、ありがとうございます。
非推奨となったdocument.execCommand('copy');の代替として、Clipboard APIを使用する
const clipboard = document.querySelector('[data-clipboard-text]'); clipboard.textContent = str; clipboard.click();
を、行ってから
エラーの特定を進めていたところなので、ずいぶん助かっています。
ありがとうございます。
暫く、時間が取れそうにないので、
時間をみて、
教えて戴いたところを追ってみたいと思っています。
This post was modified 9か月前 2回 by Yamachan11
Topic starter
2023年12月11日 13:23
(@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; }
This post was modified 9か月前 5回 by Yamachan11
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。