「メイド・イン・ヘブン」スキン適用中

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カスタマイズ依頼

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

いつからなのか不明なのですが、記事アイ...
 
共有:
通知
すべてクリア

[解決済] いつからなのか不明なのですが、記事アイコンクリックでのクリップボードへのコピーが出来なくなりました。

14 投稿
3 ユーザー
11 Reactions
419 表示
(@yamachan11)
Honorable Member Registered
結合: 4年前
投稿: 389
Topic starter  

お世話様です。
長文になってしまい失礼します。

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 8か月前 4回 by Yamachan11

   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

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

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

This post was modified 8か月前 by Akira

   
(@yamachan11)
Honorable Member Registered
結合: 4年前
投稿: 389
Topic starter  

投稿者:: @akira

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

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

 Akira さん

ありがとうございます。

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

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

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

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

 


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2494

   
Yamachan11 reacted
(@yamachan11)
Honorable Member Registered
結合: 4年前
投稿: 389
Topic starter  

(@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
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2494
 

@yamachan11 さん

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

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

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


   
(@yamachan11)
Honorable Member Registered
結合: 4年前
投稿: 389
Topic starter  

半分解決しました。

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 8か月前 4回 by Yamachan11

   
わいひら reacted
(@yamachan11)
Honorable Member Registered
結合: 4年前
投稿: 389
Topic starter  

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


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@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");

  以下省略
}

   
(@yamachan11)
Honorable Member Registered
結合: 4年前
投稿: 389
Topic starter  

(@akira) さん

ありがとうございます。


   
(@yamachan11)
Honorable Member Registered
結合: 4年前
投稿: 389
Topic starter  

(@akira) さん

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

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

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

ありがとうございます。

This post was modified 8か月前 by Yamachan11

   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@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
(@yamachan11)
Honorable Member Registered
結合: 4年前
投稿: 389
Topic starter  

(@akira) さん

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

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

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

を、行ってから

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

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

 

This post was modified 8か月前 2回 by Yamachan11

   
(@yamachan11)
Honorable Member Registered
結合: 4年前
投稿: 389
Topic starter  

(@akira) さん

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

カスタムHTMLブロックの定義と<Link部分の.jsしか見ていなかった為、
copy_CSS_buttoncopy_HTML_button)しかなく、
問題部分(copy_buttonCSScopy_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 7か月前 5回 by Yamachan11

   
わいひら reacted
共有:

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

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

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

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

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

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

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

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