サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2024-04-21 22:52
お世話になっております。
以前ハイジという名前でハイジブログというブログを運営していたものです。
今はごーという名前でごーブログ（go-blogs.com/cocoon）というブログを運営しています。
ハイジ時代はHygiene、oneというスキンを作成し同梱までしていただきました。その節は大変お世話になりました。
ハイジブログを閉鎖してしまい、スキンのダウンロードページが無くなってしまってご迷惑おかけして申し訳ありません。
ごーブログの方にダウンロードページを用意しています。
スキン情報のところは現在の情報に修正しています。Hygieneはcssをほんのちょっぴりだけ修正しています。だいぶ前に作ったスキンなので時間があるときバージョンアップしたいと思います。
さて、本題に入ります。
この度新たなスキン、NAGIを作成しました。主な特徴としては
- アフィリエイトのボタンをフッターに固定表示できる
- カテゴリーをアコーディオン形式にできる
- カルーセルの設定を変更できる
といったところでしょうか。
ダウンロードページはこちらになります。
お時間のある時で結構ですのでご確認いただければと思います。
わいひら reacted
2024-04-22 20:00
お世話になっております。
その節はスキンを同梱させていただきありがとうございました。
Hygieneスキンをアップデートさせていただきました。
https://github.com/xserver-inc/cocoon/commit/32d926948df2f43b41cff309f5bc7171d5348793
※内容も変わっていたので、バージョンを一つ繰り上げさせて頂きました。
※シェアボタンのBluesky部分を書き加えさせていただきました。
https://github.com/xserver-inc/cocoon/commit/32d926948df2f43b41cff309f5bc7171d5348793#diff-da0699082d1458bf8113728f267d14fd8c9ec4a5cf4d77c24540ba7400c6e63eR804
one付近の情報も更新させていただきました。
https://github.com/xserver-inc/cocoon/commit/19641e4fab4c4f42f0b49248ce2d94565104e111
新スキンありがとうございます！
ソースコードを見てみたところ、こちらのサイトって使われているのがNAGIスキンなんですね。
https://go-blogs.com/cocoon/skin-nagi/
こちら後で確認させていただきますね。
2024-04-23 13:28
Ver1.0.1
●現象
フッター固定CTA無のページの時、JSエラーが出力される。
●原因
フッター固定CTA有無のページに関わらず、fix-cta.phpで生成しているJSが常に出力される。
●対策
フッター固定CTA有の時、JSを出力する。
この時、containerにCSSクラスhas_fixed_contentsを追加する。
toggleBodyWrapClassの処理は、単にクリックされた時、has_fixed_contentsを削除するだけとする。
2024-04-23 13:37
Ver1.0.1
●アコーディオン化について
javascript.jsにアコーディオンボタンクリック動作の記述があり。
accordion.jsでアコーディオン化するJSが書かれているようです。
「カテゴリーウィジェットの子カテゴリーをアコーディオン形式で開閉する」オンの時、JSを出力すればよく。
わざわざ、分ける必要がありますか？
2024-04-23 13:56
Ver1.0.1
●現象
カルーセルの設定で、一旦、カスタマイザーを抜け再度、表示しても空白のままとなり、設定値が分からない。
●原因
範囲外か否かチェックをして、フォームに反映していない。
範囲外ならdefault値とする処理が漏れてませんか？
この為、範囲外の値を入力した場合、反映されてしまいませんか？？
●補足
例えば、get_theme_mod('carousel_1083')?:'3'としています。
わざわざ、三項演算子で、未設定の時、default値としています。
get_theme_modは、default値を定義できます。
値が未設定の時、default値を返却します。
2024-04-23 14:19
Ver1.0.1
●改善点
カスタマイザー関連の処理、見直した方がいいかと思います。
例えば以下となっており。
例えば以下となっており。
$wp_customize->add_control(new WP_Customize_Control(
$wp_customize,
'nagi_radius_radio',
array(
'section' => 'nagi_customizer_sct',
'settings' => 'radius_radio',
'label' => '丸みをつけるか',
'type' => 'radio',
'choices' => array(
'radius0' => '丸みをつけない',
'radius1' => 'ちょっぴり丸みをつける',
'radius2' => 'くっきり丸みをつける',
),
) )
);
if(!function_exists('skin_get_nagi_radius_l')):
function skin_get_nagi_radius_l(){
$nagi_b_radius_l = get_theme_mod('radius_radio');
switch ($nagi_b_radius_l){
case 'radius1':
return '8px';
break;
case 'radius2':
return '30px';
break;
case 'radius0':
return '0px';
}
}
endif;
カスタマイザーのHTML見ると、分かりますが、radius0は、value="radius0"となります。
skin_get_nagi_radiusのcase文で、radius0を0pxに置き換え。
私なら、以下とします。
$wp_customize->add_setting('nagi_radius_radio', array('default' => '8'));
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'nagi_radius_radio',
array(
'section' => 'nagi_customizer_sct',
'settings' => 'radius_radio',
'label' => '丸みをつけるか',
'type' => 'radio',
'choices' => array(
'0' => '丸みをつけない',
'8' => 'ちょっぴり丸みをつける',
'30' => 'くっきり丸みをつける',
),
)
)
);
if(!function_exists('skin_get_nagi_radius_l')):
function skin_get_nagi_radius_l(){
return get_theme_mod('radius_radio', '8') . 'px';
}
endif;
Topic starter
2024-04-23 20:07
ご確認及びご指摘ありがとうございます！
本日は宿直でPCを触れないので明日以降対応致します。
2024-04-24 01:16
●改善点カスタマイザー関連の処理、見直した方がいいかと思います。
上記でコード例を書いたのですが、丸みを持たせる要素が、複数個所あり。
各々border-raidusの値が異なるので、直値とせず、置き換えてるのですね。
本件は無視して下さい。
2024-04-24 20:48
Ver1.0.1
●現象
カルーセルを表示に切り替えると、図示のエラーとなる。
この為、カスタマイザーで設定した値で動作しない。
●原因
carousel-contentに対し、Slick用JSが2つ存在する。
●注意
ソースコードを全て確認させて頂きました。
nagi-css-custom.phpで行うべき事と、style.cssで行う事が整理されていません。
JSのエラーの件もですが、コード全を整理し、見直して下さい。
また、時間のある時に、十分テスト・確認を願います。
以下に私が手直ししたファイルを置いておきます。
https://drive.google.com/file/d/1Yvlr8befWcYhOlCbVxDgD-abp9JQqwTU/view?usp=sharing
ごー reacted
Topic starter
2024-04-25 10:18
わざわざ手直ししたファイルまでアップしていただきありがとうございます。
だいぶ時間はかかると思いますが、参考にさせていただき修正したいと思います。
chu-ya reacted
2024-04-25 15:30
だいぶ時間はかかると思いますが、参考にさせていただき修正したいと思います。
折角、作りのだから、勉強兼ね、良い物にしましょう。
お金を頂くなら、尚更です。
私は無償で提供しましたが笑
Ver1.0.1
●改善点
fit-cta.phpで追加するJSの代わりに、CSSでも実現可能です。
●現状の動作
JSの役割
fix-cta.phpで、固定CTAがある場合、CSSクラスhas_fixed_contentsを追加する。
CSSクラスhas_fixed_contentsがある場合、コンテンツ全体を、固定CTA表示分85pxの余白を設ける。
固定CTA閉じるボタンがクリックされると、CSSクラスhas_fixed_contentsが削除される。
固定CTA分の余白がなくなり、コンテンツ全体が元に戻る。（下がる）
CSSの役割
固定CTA自体、閉じるのは、CSSで行っている。
●改善策
JSを削除し、CSSで行う。
以下の時、contenerに余白を設ける。
- 固定CTAを表示対象。
- 固定CTA閉じていない。(チェックボックがオンでない)
.body:has(.fixed_contents):not(:has(#fixed_close:checked)) #container {
margin-bottom: 85px;
}
Topic starter
2024-07-05 22:24
かなりご無沙汰しております。
赤ちゃんが産まれて思いの外パソコンを触る時間がなく、また最初に取り掛かった修正でどうしてもうまくいかず全然進んでおりません。
どうにか自力で頑張って取り組もうと思ってやっていたのですが、あまりにもどうにもならないので助言をいただければ幸いです。
get_theme_modは、default値を定義できます。
値が未設定の時、default値を返却します。
この部分です。
get_theme_mod($name,$default);
と設定しても値が未設定の時default値が反映されません。三項演算子で書いた場合は反映されます。
chu-yaさんがアップしてくださったファイルのコードを参考にしてもうまくいきませんでした。
アドバイス・ヒントだけでも頂ければまた頑張ってみます。
Topic starter
2024-07-11 00:07
get_theme_modの仕様を理解しましょう。
三項演算子で書いた場合は反映されます。
このうまくいくケースってどのように書かれているのでしょうか。
ごめんなさい、根本的に勘違いしていましたのでスルーしてください。。。
とりあえず指摘箇所は修正できたと思います！
https://go-blogs.com/cocoon/skin-nagi/
に最新版をおいておりますのでお時間のある時にご確認ください。
わいひら reacted
2024-07-12 19:25
ありがとうございます！
確認してみます。
2024-07-13 06:10
ごーさん
スキンは試していないもので、余談ですみません。
現在、ファイルのリンク先が「http」になっています。
そのため、Chromeでは、ボタンやリンク先をクリックしても、何も反応がない状態です。
「右クリック」－「名前を付けてリンク先保存」した場合でも、ブロックされます。
Firefoxでは、クリックできますが、やはり同様にブロックされます。
分かっていれば、それでも保存できるのですけれど。
あまりこの辺りのことをご存知ない方は、こういう状態だと、敬遠してしまうような気がします。
あまりこの辺りのことをご存知ない方は、こういう状態だと、敬遠してしまうような気がします。
（おそらく、Chromeをご利用の方は、クリックして無反応な時点で諦めると思います）
2024-07-13 13:38
●現象
[Cocoon設定]→[カルーセル]を表示した際、図示のように、カルーセル動作にならない。
●その他
同梱されている以下のファイル、空なので削除してもいいのでは？
- amp.css
- javascript.js
2024-07-13 13:55
●現象
楽天アフェリエイトのリンクタイプ「画像とテキスト」を用いている。
このショートコードを、フッター固定CTAに設定した。
図示の通り、ボタンとならず、はみ出し表示される。
●原因
フッター固定CTAの入力仕様は、aタグに限られる。
アフェリエイトタグは、画像を含んだものもあり、色々です。
この為、何も意識せず、ショートコードを入力すると図示のようになる。
●仮対策
使い方が限られ、少なくともマニュアルに注記が必要だと思います。
2024-07-13 14:40
●感想
アフェリエイトの場合、楽天、amazonなど複数のボタンを設置するのが、通例だと思います。
また、プラグイン「Pochipp」を用い設置している方が、多いと思われます。
この為、固定CTAですが、ボタンが一つしかなく、限定した使い方になるかと思います。
2024-07-13 19:50
[Cocoon設定]→[カルーセル]を表示した際、図示のように、カルーセル動作にならない。
これは、Cocoon設定のプレビュー表示だけっぽいですね。
カルーセルのプレビューを非表示にして、対応しても良いのかもしれません。
//カルーセル
add_filter('cocoon_setting_preview_carousel', '__return_false');
2024-07-13 19:58
当サイトにも適用して、確認してみました。
https://wp-cocoon.com/?theme-switch=nagi
現時点での同サイトの設定では、問題ないように思います。
今回のスキンも同梱させて頂いてよろしいでしょうか。
同梱テーマが公開の際には、こちらの同梱のお礼をもさせて頂ければ幸いです。
https://wp-cocoon.com/skin-make/
Topic starter
2024-07-13 22:07
アフェリエイトの場合、楽天、amazonなど複数のボタンを設置するのが、通例だと思います。
また、プラグイン「Pochipp」を用い設置している方が、多いと思われます。
この為、固定CTAですが、ボタンが一つしかなく、限定した使い方になるかと思います。
コメントありがとうございます！
ですが、楽天・Amazon以外のアフィリエイトを利用している方も相当数いらっしゃいますし、工夫次第でメルマガ登録・フォローや記事の導線にも使えるんじゃないかなと思います。
しかし、ご指摘の通り何の説明もない状態だと画像等含んだショートコードを入力する可能性もあるので、ショートコード入力欄の近くにマニュアルへのリンクを追加しました。
Topic starter
2024-07-13 22:17
@yhira さん
以下の修正を行った最新版をサイトにおいています。
- フッター固定CTAのショートコード入力欄の近くにマニュアルへのリンク追加
- カルーセルのプレビューの非表示
https://go-blogs.com/cocoon/skin-nagi/
今回のスキンも同梱させて頂いてよろしいでしょうか。
同梱テーマが公開の際には、こちらの同梱のお礼をもさせて頂ければ幸いです。
ぜひ同梱して頂ければ幸いです！
お金を頂くなら、尚更です。
私は無償で提供しましたが笑
修正箇所も多く、メイド・イン・ヘブンのような超多機能スキンを無償で提供されたあとにお礼をいただくのもなんか申し訳ないんですが、赤ちゃん産まれて色々お金かかるんで頂けるのであれば有り難く頂戴させて頂ければ、と思います。
わいひら reacted
2024-07-14 18:13
修正いただきありがとうございます。
GitHubのファイルをアップデートし、同サイトにも適用しておきました。
ぜひ同梱して頂ければ幸いです！
ありがとうございます。次のバージョンあたりで同梱させていただければと考えております。
赤ちゃん産まれて色々お金かかるんで頂けるのであれば有り難く頂戴させて頂ければ、と思います。
こちらにあるように現金ではなく、Amazonギフト券になるのですが、問題ないでしょうか。
ごーさんは、今回3回目（であってます？）となるので、3万円のAmazonギフト券になると思うのですが、大丈夫でしょうか。
This post was modified 2週間前 by わいひら
2024-07-15 18:58
ありがとうございます。Amazonギフト券で送付させて頂きます。
2024-07-23 17:19
@go さん
カスタムCSSの出力で重複して出力しており。
問題となりませんが、少し見直した方がいいのでは？
●現象
[トップページの記事一覧タブの設定]→トップページのタブのデザインをオリジナルのものにする
にチェックを入れた。
この時、図に示すようCSSが2重で出力される。
●原因
アイコン設定されると、その部分のCSSが生成される。
それとは別に固定で、同様のタブ部分のCSSを出力している。
●補足
アイコン部(content:"\f15c")のみ出力すればいいのでは？
2024-07-23 17:20
@go さん
●現象
本体と、文言が統一していません。全体の見直しを。
[全体設定]
sns→SNS
コクーン→Cocoon（誤記では？）
snsトップシェアボタンを画面左に固定する
PC表示でのみ固定。コクーン設定でメインカラムトップシェアボタンを表示にチェックを入れる必要があります。
[トップページの記事一覧タブ設定]
フロントページのタブ一覧の設定
2024-07-23 17:29
@go さん
●現象
[フッター固定CTAの色]→フッター固定CTAのマイクロコピーの色を変更した。
取説ではマイクロコピーとなっているが、図示のように、ボタンのテキストも色が変わった。
https://go-blogs.com/cocoon/skin-nagi-fix-cta/
2024-07-24 19:53
ごーさんもお忙しいかもしれないので、不具合部分は修正しておきました。
[トップページの記事一覧タブの設定]→トップページのタブのデザインをオリジナルのものにする
にチェックを入れた。
この時、図に示すようCSSが2重で出力される。
Cocoon設定保存で反映かも。
https://github.com/xserver-inc/cocoon/commit/e38ea3a750e026c91d29db2470b128c26bd5673c
本体と、文言が統一していません。全体の見直しを。
文言を修正しました。
https://github.com/xserver-inc/cocoon/commit/7c9736460a33ef9695ce84c238255136f8c5973c
●現象
[フッター固定CTAの色]→フッター固定CTAのマイクロコピーの色を変更した。
取説ではマイクロコピーとなっているが、図示のように、ボタンのテキストも色が変わった。
これ僕の環境で試してみたんですが、ちょっと再現がされませんでした。
CSSはどのようになっていますか。
This post was modified 3日前 2回 by わいひら
2024-07-24 20:04
ごーさんもお忙しいかもしれないので、不具合部分は修正しておきました。
わいひらさん、これは間違っていると思います。
お金を受け取ったなら、責任を持って本人が対応すべき話だと思います。
人が良すぎます。
他にもバグがありますし。
2024-07-24 20:05
●現象
初期値の時、スキンが生成するカスタムCSSがエラーとなる。
.mobile-header-menu-buttonsの、background-color、colorの値が空となっている。
●原因
get_header_container_background_color
get_header_container_text_color
はCocoon設定→ヘッダーで設定保存しないと、返却値が空となる。
わいひら reacted
2024-07-24 20:06
●現象
以下の時、「影をつけるか」が反映されない。
・エントリーカード
・大きなカード（先頭のみ）
・大きなカード
●原因
一覧ページの上記は反映していない。
わいひら reacted
2024-07-24 20:07
●現象
カルーセルの設定で指定枚数とならない。
breakポイントが、全く設定画面の範囲と異なる。
●補足
説明分で、PC、タブレット、スマホの文言、デバイスを認識しておらず単に画面幅のみなので、誤解を生みます。
(function($){
$(".custom-carousel-content").slick({
dots: true,autoplaySpeed: 5000,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
respondTo: "slider",
responsive: [
{
breakpoint: 1241, // 1024～1240px
settings: {
slidesToShow: 4,
slidesToScroll: 1
}
},
{
breakpoint: 1024, // 835～1023px
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 835, // 481～834px
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 481, // ～480px
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
})(jQuery);
2024-07-24 20:20
僕もまだCocoonに同梱していない（ダウンロードで入手するケース）なら修正はしてないと思います。
ただ現時点でGitHubのファイルはスキンを事実上同梱しています（表示されていないだけで）。
なので、こちらの「同梱後、スキンに不具合を発見したり、バージョンアップにより不具合が発生した場合は連絡なくこちら側で不具合修正させていただければと思います。」にあるようにこちらで修正させて頂きました。
https://wp-cocoon.com/skin-make/
同梱料も本来ならもっと労力に見合ったものにすべきとも思うのですが、運営上なかなかそうもいきません。
なので、余裕があればお手伝いくらいならできればと。
もちろん、単純な不具合とかでなく作者の判断を仰がなければならないところは、作者にしかできないところなので、ここはお任せすると思います。
2024-07-25 01:04
2点あります。
カルーセルの仕様、勘違いしてました。
slick.jsのbreakpointですが、carousel-content幅でした。
以前、以下で修正したが、余り意味がなかったです。申し訳なく。
https://wp-cocoon.com/community/postid/65520/
以下ですが、画面幅でない為、説明が難しいと思います。
[Cocoon設定]→[カラム]のコンテンツ幅に応じ、初期に表示されるカード表示枚数が変わり。
先述の通り、1023px以下で、carousel-content幅に応じ変化する事となり。
この為、各スキンのデザイン、carousel-content幅の変化に応じ、それぞれ表示が異なると思います。
わいひら reacted
2024-07-25 01:39
●補足
スキン「NAGI」の場合、カルーセルのページボタン<>がwrapの外にあり。
画面幅1023px以下の時、画面幅=carousel-contentとなり。
この為、画面幅を記しても問題ないかもしれません。
※スキンなしの場合、ページボタン分のmarginが左右に30px付くので、breakpoint=画面幅とはならず。
●余談
wp_enqueue_slick()のJS($data)を、書き替えるフック追加と思いましたが、
今回の件もあり、下手に弄らせない方が良いのでは？と思い、要望を止めました。
わいひら reacted
2024-07-26 19:10
初期値の時、スキンが生成するカスタムCSSがエラーとなる。
「影をつけるか」が反映されない。
入力ミスで、affiショートコードリンクがありませんでした。
この為、マイクロコピーの色がそのまま反映され。
上記を修正しました。以下引用順
https://github.com/xserver-inc/cocoon/commit/cbb77340cc07812b62cb26040bb681f886187721
https://github.com/xserver-inc/cocoon/commit/566b46286894fe94bd0df5722a76b7f815dee2dc
https://github.com/xserver-inc/cocoon/commit/c3bddb9ef8d012be14ca9f9d27c19c19b0223c12
アフィリエイトショートコード入れてないテキスト状態でもボタンスタイル表示されると、アフィリエイトショートコード使用していないと気づきにくいのでaタグがある場合のみボタンスタイルとなるように変更しました。
※ごーさんの意図に合わない変更だった場合はリバート（元に戻す）処理を行います
2024-07-26 20:07
@yhira さん
修正がされている事を確認しました。
アフィリエイトショートコード入れてないテキスト状態でもボタンスタイル表示されると、アフィリエイトショートコード使用していないと気づきにくいのでaタグがある場合のみボタンスタイルとなるように変更しました。
変更文をよく読まなかったので、何が起きたか分からず。
リンクなしの時、ボタンの色が反映されなくなり。
私は、変更しなくてもいいのでは？と思います。これは判断できません。
https://github.com/xserver-inc/cocoon/commit/c3bddb9ef8d012be14ca9f9d27c19c19b0223c12
2024-07-26 20:31
私なら以下とします。
マイクロコピー、ボタンと正しく表示されますが、ボタンをクリックしてもリンクしません。
●上記について
マイクロコピーのみ文字色変更。
リンク有無に関わらずボタンとする。
●変更
以下を削除
①マイクロコピーのみ設定した色を反映。
以下を追加し、マイクロコピーのみ設定色反映。
.footer_micro {
color: var(--nagi_cta_color);
}
②リンク有無に関係なく、ボタンを表示。
以下に変更。
span.footer_button a→span.footer_button
https://github.com/xserver-inc/cocoon/blob/c3bddb9ef8d012be14ca9f9d27c19c19b0223c12/skins/nagi/style.css#L965
https://github.com/xserver-inc/cocoon/blob/c3bddb9ef8d012be14ca9f9d27c19c19b0223c12/skins/nagi/style.css#L984
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。