grayishスキン適用中

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

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

JavaScriptが動作しなくなった...
 
共有:
通知
すべてクリア

JavaScriptが動作しなくなった 2

20 投稿
4 ユーザー
23 Likes
430 表示
(@sato3)
Eminent Member Registered
結合: 2年前
投稿: 18
Topic starter  

不具合・カスタマイズ対象ページのURL: https://radiological.site/archives/%e7%ac%ac71%e5%9b%9e%e8%a8%ba%e7%99%82%e6%94%be%e5%b0%84%e7%b7%9a%e6%8a%80%e5%b8%ab%e5%9b%bd%e5%ae%b6%e8%a9%a6%e9%a8%93-%e5%8d%88%e5%89%8d-1-2.html

相談内容:

上記のようなページで、JSが動作しなくなりました

各記事のカスタムJavaScriptに以下のコードを書いております

$(function(){
$('.btn').on('click', function(event){
event.preventDefault();
$(this).toggleClass('active');

if($(this).hasClass('active')){
var text = $(this).data('text-clicked');
} else {
var text = $(this).data('text-default');
}

$(this).html(text);
});
});

記事HTMLには下記のようなコードを書いております

<!--<a class="btn" data-text-default="正答" data-text-clicked="4">正答</a>-->

以前まではPCでもスマホでも「正答」と書かれたボタンを押すと「2」という文字列が表示されていたのですが、ここ数日で動作しなくなっておりました(正確な日は不明

 

実は去年にも同様のトピックを立てさせていただき、その時はヘッド用コードのスクリプトミスがあり、ご指摘頂いて解決させて頂きました

今回も前回同様かと思い、こちらでも見直したのですが、原因が見当たらず、改めてご相談させて頂きました

よろしくお願い致します

 

環境情報:

----------------------------------------------
サイト名:診療放射線技師国家試験 対策ノート
サイトURL: https://radiological.site
ホームURL: https://radiological.site
コンテンツ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.0.1
PHPバージョン:7.4.30
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.7
カテゴリ数:26
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.6
style.cssサイズ:3871バイト
functions.phpサイズ:388バイト
----------------------------------------------
Gutenberg:0
AMP:1
PWA:0
Font Awesome:4
Auto Post Thumbnail:1
Retina:1
ホームイメージ:/wp-content/uploads/2019/03/技師アイコン.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1
----------------------------------------------
利用中のプラグイン:
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
BackWPup 3.10.0
Category Order and Taxonomy Terms Order 1.6.1
Customizer Export/Import 0.9.4
Edit Author Slug 1.8.4
EWWW Image Optimizer 6.7.0
Google XML Sitemaps 4.1.5
Limit Login Attempts Reloaded 2.25.3
MathJax-LaTeX 1.3.11
Regenerate Thumbnails 3.1.5
SiteGuard WP Plugin 1.6.1
Uji Countdown 2.2
WP Content Copy Protection & No Right Click 3.5.1
----------------------------------------------

 


   
引用
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1644
 

親テーマの CSS が変わったのでしょうか。文字色が白のため見えていないだけです。文字色を赤にすれば、添付画像のように見えます。

尚、このようなボタンは <a> ではなく、<button> でお作りになるのがいいです。

This post was modified 8か月前 by Akira

   
わいひら and sato3 reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6678
 

sato3さん

動作していると思います。

 
 
色が真っ白なんだと思います。
 
ただ、HTMLやCSS等圧縮が掛かっており、何が当たっているのか分からないです。(親テーマぽいですが)
投稿者:: @sato3

ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1

 

フォーラム上部の案内にありますように、お問い合わせ時には高速化設定の無効化をお願い致します。

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

環境情報の取得方法はこちら。
→  https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→  https://wp-cocoon.com/theme-trouble/

フォーラムマナー・ルールにご協力をお願い致します。

 

【追記】

すみません、Akiraさんと被ってしまいました。


   
わいひら and sato3 reacted
返信引用
(@sato3)
Eminent Member Registered
結合: 2年前
投稿: 18
Topic starter  

ご回答ありがとうございます
高速化を無効致しました
失礼致しました


   
返信引用
(@sato3)
Eminent Member Registered
結合: 2年前
投稿: 18
Topic starter  

連投で恐縮ですが、突然色指定が変更された理由などはわかりますでしょうか
当方では特に弄った記憶がないのですが……


   
返信引用
(@sato3)
Eminent Member Registered
結合: 2年前
投稿: 18
Topic starter  

立て続けに恐縮です
追加CSSにて色指定をボタンと文字に対して行ったところ、見えるようになったのですが、マウスオンの状態で消えていることが確認されてしまいました

https://radiological.site/archives/%e7%ac%ac73%e5%9b%9e%e8%a8%ba%e7%99%82%e6%94%be%e5%b0%84%e7%b7%9a%e6%8a%80%e5%b8%ab%e5%9b%bd%e5%ae%b6%e8%a9%a6%e9%a8%93-%e5%8d%88%e5%89%8d-1-2.html


   
返信引用
(@sato3)
Eminent Member Registered
結合: 2年前
投稿: 18
Topic starter  

上記を含めて追加CSSでホバーの動作も色指定で分からなくしてしまいましたので、疑似的に解決させて頂きました

今回のようなことが起きたのはAkira様のおっしゃるようにbuttonではなくaによって書いている弊害なのでしょうか

ご参考までにお聞かせいただけると幸いです

 


   
返信引用
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1644
 

@sato3 さん

親テーマのバージョンが古いですね。また、2 週間前に親テーマに修正が入っています。

ボタンブロックの文字色の不具合修正

親テーマを最新バージョンにされるとどうなるでしょうか?

buttonではなくaによって書いている弊害なのでしょうか

<button> がいいと言ったのは、アクセシビリティの観点からです。ページを表示して tab キーを押し続けるとお分かりになると思います。「正答」にフォーカスが当たりません。つまり、スクリーンリーダーなどの支援技術をお使いの方は、「正答」をクリックできないかもしれません。

そのため、<button type="button"> がいいです。どうしても <a> がいい場合は、 <a role="button" tabindex="0"> とするのがいいと思います。

※ href 属性がない場合にのみ <a> に role="button" が書けます。


   
sato3 and わいひら reacted
返信引用
(@sato3)
Eminent Member Registered
結合: 2年前
投稿: 18
Topic starter  

ご丁寧な回答ありがとうございます

今気づいたのですが、上記の環境情報に誤りがありました

----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.1.2
カテゴリー数:28
タグ数:1
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.6
style.cssサイズ:3871バイト
functions.phpサイズ:679バイト
----------------------------------------------

でしたので、最新版になっているかと思います
なので、前回の不具合更新に伴い、私の環境では新たな不具合が起きたという認識でしょうか

<button> の件に関しては、次回の記事より参考させて頂きます
大変参考になりました

 


   
返信引用
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1644
 

@sato3 さん

ボタンはどのようにしてお作りになったのでしょうか?

私のテスト環境でボタンブロックを使った場合、このような HTML になります。

<div class="wp-block-cocoon-blocks-button-1 button-block">
  <a href="" class="btn" target="_self">ボタン</a>
</div>

対して、sato3 さんのサイトのボタンの HTML は、<div> で囲まれていません。

<p>
  <a target="_self " class="btn " data-text-default="正答 " data-text-clicked="2 ">正答</a>
</p>

<div> の class の button-block の背景色は、初期値が #333 です。その <div> がないために、ボタンの背景色が #fff になっています。また、<a> の class の btn の文字色は、初期値が #fff です。#fff の背景色に #fff の文字色ではボタンが見えないですね。

This post was modified 8か月前 by Akira

   
わいひら and sato3 reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6678
 

sato3さんは、クラシックエディタをご利用みたいです。

クラシックエディタの「ボタン(小)」だと、以下みたいです。
(以下は、アンバーです。)

<p><a class="btn btn-amber">ボタン</a></p>

sato3さんは、以下のような感じですから。

<p>
  <a target="_self " class="btn " data-text-default="正答 " data-text-clicked="2 ">正答</a>
</p>

classには"btn"しか残していませんから、背景色はない状態です。
そして、ボタンの文字色は、テーマデフォルトでは白です。

文字色と背景色は、上記のことから見えなくなると思います。
(何もカスタマイズがなければ)

残りは、ボーダーですが、テーマデフォルトでは、sato3さんのサイトは「--cocoon-custom-border-color」が適用されて、#cccなのですが・・・。
(追加CSSがないとして考えると)

アップデート後のボタンが見えなかった時がどんな状態だったのか、ちょっと記憶にないです。

それと、アップデート前の状態を確認するためには、アップデート前のCocoonのバージョンが分かると良い気はします。
(以前の状態をこちらで確認できるので)


   
わいひら and sato3 reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6678
 

カスタムCSSに、ボーダーは「transparent」で書かれていますね。

もし、カスタムCSSは、以前から今の状態。
そして、追加CSSは、以前はなかったと仮定すると。
(前がどうだったのかが、良く分からないので・・・)

全部、白ないし透明で、ボタンは見えないと思います。

あとは、以前どうだったかでしょうか。
(今、手元の環境には古いテーマが入っておらず、本番で見ているので入れられないです)


   
わいひら and sato3 reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6678
 

ボタンに関しては、もう1つ不具合対応が。

ボタンブロックにカスタム色が反映されない不具合修正
https://github.com/xserver-inc/cocoon/commit/8e51bcf9473427bb0f24091d8c7709ef664fee03

これらのことがありますので、以前の親テーマのバージョンを教えていただきたいです。

(私は今確認できないですが、後程なら)


   
わいひら and sato3 reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6678
 

ローカル環境が使える状態になりましたので、いくつかのバージョンで確認を行いました。

sato3さんのサイトのボタンの以下を、クラシックエディタに貼り付けました。

<p>
  <a class="btn" target="_self" data-text-default="正答" data-text-clicked="2">正答</a>
</p>

 

その下には、テーマデフォルトのボタン(レッド(小))を作りました。

 


まずは、現状のバージョン。
「Cocoon 2.6.1.2」です。

 
CSSは、何も当てていません。
もし、現状のカスタムCSSの以下が有効であったならば、sato3さんのボタンは、まったく見えないと思います。
.btn {
    font-size: 20px;
    border-radius: 40px;
    border: 4px solid transparent;
}

 


続いては、2つのボタンの不具合対応が入る前のバージョン。
「Cocoon 2.6.0」です。

 
この状態だと、文字が見えます。
 
ただ、テーマデフォルトのボタンを見ていただくと。
  • 文字色が黒く、見づらい
  • 薄いグレーの枠線がある

 
これらは、不具合のある状態でした。

 

 
どのバージョンを確認するのが適切かは分からないのですが、少し前のバージョンで確認しました。
「Cocoon 2.5.5」です。
 
 
これが、本来のボタンだったのだと思います。
 

 
おそらく、sato3が投稿を更新なさった時は、②の状態だったのではないかと思います。
 
しかし、それは不具合がある状態だった。
そして、不具合を解消したら、ボタンが見えなくなってしまった。
 
そういう感じではないかと思われます。

   
わいひら and sato3 reacted
返信引用
(@sato3)
Eminent Member Registered
結合: 2年前
投稿: 18
Topic starter  

Akira様、mk2様、ご丁寧な回答ありがとうございます

直近でCSSを弄った記憶はないのですが、前回の投稿のときに触っているかもしれません(2022/8)

https://wp-cocoon.com/community/bugs/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%81%a7javascript%e3%81%8c%e5%8b%95%e4%bd%9c%e3%81%97%e3%81%aa%e3%81%8f%e3%81%aa%e3%81%a3%e3%81%9f/

 

クラシックエディターは使用していますが、今回問題になっているbtnに関してはテキストエディターで手打ちして作ったものです
他のサイトのものをアレンジして流用してありますので、色々不具合も出ているのかと……
ご迷惑をお掛けしております

 

また、以前の親テーマのバージョンに関して、知識不足で申し訳ないのですが、確認の方法がわかりません

 

 

追記:

ご確認ありがとうございます

このボタンを導入し始めて、私が正常に動作していると認識していたのは

③「Cocoon 2.5.5」の状態です

 

その後、最近になって②「Cocoon 2.6.0」の状態になり、違和感を感じ始めて、①「Cocoon 2.6.1.2」の現在の状況になりました

なので、おっしゃる通り、③「Cocoon 2.5.5」の状態を思っていたが、不具合含めたいくつかの更新で、現在の状況に落ち着いたのだと考えます

This post was modified 8か月前 by sato3

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6678
 

sato3さん

私の1つ前の返信をご覧ください。
https://wp-cocoon.com/community/postid/71648/

画像を途中に数枚入れる都合上、何回か再編集しております。

今、全量書いてありますので、ご確認いただければ、今回の経緯がこんな感じだったのかなということをお分かりいただけるのではないかと思います。
(推測ではありますけれど)


   
わいひら reacted
返信引用
(@sato3)
Eminent Member Registered
結合: 2年前
投稿: 18
Topic starter  

@mk2_mk2 

追記:

ご確認ありがとうございます

このボタンを導入し始めて、私が正常に動作していると認識していたのは

③「Cocoon 2.5.5」の状態です

その後、最近になって②「Cocoon 2.6.0」の状態になり、違和感を感じ始めて、①「Cocoon 2.6.1.2」の現在の状況になりました

なので、おっしゃる通り、③「Cocoon 2.5.5」の状態を思っていたが、不具合含めたいくつかの更新で、現在の状況に落ち着いたのだと考えます


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6678
 

わいひらさん

クラシックエディタの「ボタン」は、必ずクラスが「btn btn-xxxxx」のようになり、背景色のためのclassがあるかと思います。
(「スタイル」のプルダウンから入力すると、背景色のclassは必ずある)

しかし、sato3さんは、背景色のclassを削除なさっており、今回の事象になった様子です。

「Cocoon 2.5.5」を今回確認してみると、「btn」だけでも背景色がありますね。(#32373c)

 
 
現状では「btn」だけにすると、以下のように「inherit」になって色がない?状態みたいです。
 
 
「スタイル」のプルダウンから入力する分には、必ず色のclassがある訳ですが・・・。
「2.5.5」と比べると、現状とは違うということは言えてしまいます。
 
ここをどう捉えるか・・・でしょうか。
(背景色のclassは、個別カスタマイズで削除したものであり、そこは個別に対応・・・とも考えられる気はしますけれど。以前とは違うとも言えるとも思いますので)

   
わいひら and sato3 reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6678
 

ちなみにですが。

以下のようにすると・・・。

 
background-colorのところに、以下のように代替値を入れました。
background-color: var(--cocoon-custom-background-color, #32373c);

 

すると、こんな感じになるみたいです。
(なかった背景色が、黒っぽくなった)

 
 
代替値で表示されるということは、カスタムプロパティは空というのか無効な状態みたいです。
 
そもそも代替値で良いのかどうかというのは、あるのかもしれないです。

   
わいひら and sato3 reacted
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16126
 

投稿者:: @mk2_mk2

現状では「btn」だけにすると、以下のように「inherit」になって色がない?状態みたいです。

mk2さんが書かれたようにサブ値を設定することで対応してみました。
mk2さんありがとうございます!
ボーダー色は灰色(本来は透明)が入ってしまいますが本来.btnクラスのみで使うようなケースはあまりないためそのままとします。
というかブロックエディターのカスタム色に対応しつつ変更する方法が今のところ思いついてません。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------


   
mk2 and sato3 reacted
返信引用
共有:

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

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

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

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

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

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

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

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