サイドバーウィジェットの動作について - CSSカスタマイズ相談 https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/ Cocoon ディスカッション掲示板 ja Thu, 12 Mar 2026 16:37:27 +0000 wpForo 60 RE: サイドバーウィジェットの動作について https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-57445 Thu, 14 Oct 2021 11:30:43 +0000 安心しました。

この度はいろいろとありがとうございました。

]]> CSSカスタマイズ相談 river https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-57445 RE: サイドバーウィジェットの動作について https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-57438 Thu, 14 Oct 2021 10:41:28 +0000

最初の質問でソースコードを直接貼り付けてしまいました。

編集できないようですが、どのようにしたらよいでしょうか。

問題ないと思います。

私が notepad にコードを貼り付けたのは、コードを書くとコメントを送信できなかったためです。このフォーラムで PHP を書くと、たまに攻撃者と判断され、コメントを送信できない時があるんです。

]]> CSSカスタマイズ相談 Akira https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-57438 RE: サイドバーウィジェットの動作について https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-57430 Thu, 14 Oct 2021 00:11:21 +0000 ルールをよく読まず、申し訳ございません。

最初の質問でソースコードを直接貼り付けてしまいました。

編集できないようですが、どのようにしたらよいでしょうか。

 

]]> CSSカスタマイズ相談 river https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-57430 RE: サイドバーウィジェットの動作について https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-57429 Wed, 13 Oct 2021 22:40:03 +0000 ご丁寧なご回答をいただき、ありがとうございます。

コードを追加したら上手く表示されました！

モバイルメニューが関係していたとは思いもかけませんでした。

勉強になりました。

 

]]> CSSカスタマイズ相談 river https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-57429 RE: サイドバーウィジェットの動作について https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-57418 Wed, 13 Oct 2021 06:32:13 +0000 ● 原因

サイドバーで動作しないのは、「モバイルメニュー」が原因です。

Cocoon では、レスポンシブ対応や AMP 対応のために、サイドバーのウィジェットは、モバイルメニューで開くサイドバーでも使われます。つまり、1 つのウィジェットが 2 つあります。

id などは重複しない処理がされているのですが、name は重複します。そのため、同じ name を持つ input が 4 つあります。

その結果、モバイルメニューで開くサイドバーでは動作しています（※ 添付画像）。一方、パソコンで確認できるサイドバーでは動作していません。

※ type="radio" は同時に 1 つしか選択できないため、HTML で後にあるモバイルメニューで開くサイドバーの input が選択されている。

● 解決方法

name を置換すれば解決します。

下記リンクのコードを子テーマの functions.php に追加します。モバイルメニューで開くサイドバーの name を置換するものです。手間をかけずに書いたため、str_replace で置換しています。

https://notepad.pw/share/83cvtx41y

name の slideTAB は適当につけました。

]]> CSSカスタマイズ相談 Akira https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-57418 サイドバーウィジェットの動作について https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-57410 Wed, 13 Oct 2021 02:21:12 +0000 素晴らしいテーマありがとうございます。

●カスタマイズ内容：サイドバーにタブ切り替えを付ける

●相談内容：読み込み時にサイドバーウィジェットのみ「checked="checked"」が反映されない

他のサイトを参考にして、タブ切り替え用のコード（ラジオボタン使用）を記載し、サイドバーウィジェットに記載しました。

（目的はランキングの月間、週間の切り替え表示。後でショートコードを使う）

HTMLでラジオボタンの2つのうち、1つ目のタブにデフォルトでチェックを入れ、読み込んだ際にはその内容が表示されるコードです。

しかし、読み込んだ際に１の内容が表示されず、2つのラジオボタンのどちらもチェックが入っていない状態です。（読み込んだ後にタブをクリックした時は正常に表示されます。）

https://test03.tsuchie.org

不思議なことに「サイドバースクロール追従」「コンテンツ上部」など、「サイドバー」以外では、狙い通りに表示されます。

「サイドバー」だけなぜ動作しないのか分かりません。

※サイトはテスト用サイトで、ほぼデフォルトのままです。高速化設定も行っていません。

何か分かることがあれば、どうぞよろしくお願い申し上げます。

（HTML）

<div class="tab-wrap">
<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">All</label>
<div class="tab-content">ALLの内容
</div>
<input id="TAB-02" type="radio" name="TAB" class="tab-switch"/><label class="tab-label" for="TAB-02">Weekly</label>
<div class="tab-content">Weeklyの内容
</div>
</div>

（CSS）

https://codepen.io/mt1212/pen/abyOZjP

サイトの現状

----------------------------------------------
サイト名：テストサイト
サイトURL：https://test03.tsuchie.org
ホームURL：https://test03.tsuchie.org
コンテンツ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バージョン：5.8.1
PHPバージョン：7.4.23
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.3.6.3
カテゴリ数：1
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：1696バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
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
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
SiteGuard WP Plugin 1.6.0
----------------------------------------------

]]> CSSカスタマイズ相談 river https://wp-cocoon.com/community/customs/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-57410