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

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

スキンNAGIを作成しました
 
共有:
通知
すべてクリア

[解決済] スキンNAGIを作成しました

62 投稿
4 ユーザー
23 Reactions
1,900 表示
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

お世話になっております。

以前ハイジという名前でハイジブログというブログを運営していたものです。

今はごーという名前でごーブログ(go-blogs.com/cocoon)というブログを運営しています。

ハイジ時代はHygiene、oneというスキンを作成し同梱までしていただきました。その節は大変お世話になりました。

ハイジブログを閉鎖してしまい、スキンのダウンロードページが無くなってしまってご迷惑おかけして申し訳ありません。

ごーブログの方にダウンロードページを用意しています。

Hygiene

one

スキン情報のところは現在の情報に修正しています。Hygieneはcssをほんのちょっぴりだけ修正しています。だいぶ前に作ったスキンなので時間があるときバージョンアップしたいと思います。

さて、本題に入ります。

この度新たなスキン、NAGIを作成しました。主な特徴としては

  • アフィリエイトのボタンをフッターに固定表示できる
  • カテゴリーをアコーディオン形式にできる
  • カルーセルの設定を変更できる

といったところでしょうか。

ダウンロードページはこちらになります

お時間のある時で結構ですのでご確認いただければと思います。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

お世話になっております。

その節はスキンを同梱させていただきありがとうございました。

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/
こちら後で確認させていただきますね。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

Ver1.0.1

●現象

フッター固定CTA無のページの時、JSエラーが出力される


●原因

フッター固定CTA有無のページに関わらず、fix-cta.phpで生成しているJSが常に出力される


●対策

フッター固定CTA有の時、JSを出力する。
この時、containerにCSSクラスhas_fixed_contentsを追加する。
toggleBodyWrapClassの処理は、単にクリックされた時、has_fixed_contentsを削除するだけとする。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

Ver1.0.1

●アコーディオン化について

javascript.jsにアコーディオンボタンクリック動作の記述があり。
accordion.jsでアコーディオン化するJSが書かれているようです。

カテゴリーウィジェットの子カテゴリーをアコーディオン形式で開閉する」オンの時、JSを出力すればよく。

わざわざ、分ける必要がありますか?


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

Ver1.0.1

●現象

カルーセルの設定で、一旦、カスタマイザーを抜け再度、表示しても空白のままとなり、設定値が分からない。


●原因

範囲外か否かチェックをして、フォームに反映していない。

範囲外ならdefault値とする処理が漏れてませんか?
この為、範囲外の値を入力した場合、反映されてしまいませんか??


●補足

例えば、get_theme_mod('carousel_1083')?:'3'としています。
わざわざ、三項演算子で、未設定の時、default値としています。

get_theme_modは、default値を定義できます
値が未設定の時、default値を返却します。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 
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;

   
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

ご確認及びご指摘ありがとうございます!

本日は宿直でPCを触れないので明日以降対応致します。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

@go さん

スキンは、わいひらさんから委託され、期限を設け作ったものではありません。
各自が、勝手に売り込んだものと、私は思っています。

goさんの、隙間時間で、修正・完成させればよく。


   
ごー reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

投稿者:: @chu-ya

●改善点
カスタマイザー関連の処理、見直した方がいいかと思います。

上記でコード例を書いたのですが、丸みを持たせる要素が、複数個所あり。
各々border-raidusの値が異なるので、直値とせず、置き換えてるのですね。

本件は無視して下さい。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

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
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

わざわざ手直ししたファイルまでアップしていただきありがとうございます。

だいぶ時間はかかると思いますが、参考にさせていただき修正したいと思います。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

投稿者:: @go

だいぶ時間はかかると思いますが、参考にさせていただき修正したいと思います。

折角、作りのだから、勉強兼ね、良い物にしましょう。
お金を頂くなら、尚更です。
私は無償で提供しましたが笑

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;
}

   
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

かなりご無沙汰しております。

赤ちゃんが産まれて思いの外パソコンを触る時間がなく、また最初に取り掛かった修正でどうしてもうまくいかず全然進んでおりません。

どうにか自力で頑張って取り組もうと思ってやっていたのですが、あまりにもどうにもならないので助言をいただければ幸いです。

投稿者:: @chu-ya

get_theme_modは、default値を定義できます
値が未設定の時、default値を返却します。

この部分です。

get_theme_mod($name,$default);

と設定しても値が未設定の時default値が反映されません。三項演算子で書いた場合は反映されます。

chu-yaさんがアップしてくださったファイルのコードを参考にしてもうまくいきませんでした。

アドバイス・ヒントだけでも頂ければまた頑張ってみます。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

@go さん

投稿者:: @go

設定しても値が未設定の時default値が反映されません

●回答

get_theme_modの仕様を理解しましょう。

カスタマイザーで1度でも設定、保存すると、デフォルト値とはなりません。
wp_optionsのテーマ名(例:theme_mods_cocoon_child_master)に、格納された値が未設定の時だけです。

[Cocoon設定]→[リセット]すると、設定値がクリアされます。
その上で確認してみて下さい。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

赤ちゃんのお誕生おめでとうございます!
今しかないプレミアムな時間を大事になさってください。

投稿者:: @go

三項演算子で書いた場合は反映されます。

このうまくいくケースってどのように書かれているのでしょうか。

※余裕がない時はスルーしていただいて大丈夫です。

この投稿は6か月前ずつわいひらに変更されました

   
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

投稿者:: @chu-ya

get_theme_modの仕様を理解しましょう。

投稿者:: @go

投稿者:: @go

 

三項演算子で書いた場合は反映されます。

 

 

このうまくいくケースってどのように書かれているのでしょうか。

ごめんなさい、根本的に勘違いしていましたのでスルーしてください。。。

とりあえず指摘箇所は修正できたと思います!

https://go-blogs.com/cocoon/skin-nagi/

に最新版をおいておりますのでお時間のある時にご確認ください。

 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

ありがとうございます!
確認してみます。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8118
 

ごーさん

スキンは試していないもので、余談ですみません。

現在、ファイルのリンク先が「http」になっています。

 
 
そのため、Chromeでは、ボタンやリンク先をクリックしても、何も反応がない状態です。
 
「右クリック」-「名前を付けてリンク先保存」した場合でも、ブロックされます。
 
 
Firefoxでは、クリックできますが、やはり同様にブロックされます。
 
 
分かっていれば、それでも保存できるのですけれど。
あまりこの辺りのことをご存知ない方は、こういう状態だと、敬遠してしまうような気がします。
(おそらく、Chromeをご利用の方は、クリックして無反応な時点で諦めると思います)

   
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

@mk2_mk2 さん

ダウンロードできない旨ご連絡ありがとうございます!

初歩的なミスをしてしまってました。

また、確認不足でご迷惑おかけしてしまってすみません。

今は大丈夫だと思われます。


   
mk2 reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

●現象

[Cocoon設定]→[カルーセル]を表示した際、図示のように、カルーセル動作にならない。


●その他

同梱されている以下のファイル、空なので削除してもいいのでは?

  • amp.css
  • javascript.js

   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

●現象

楽天アフェリエイトのリンクタイプ「画像とテキスト」を用いている。
このショートコードを、フッター固定CTAに設定した。
図示の通り、ボタンとならず、はみ出し表示される。


●原因

フッター固定CTAの入力仕様は、aタグに限られる
アフェリエイトタグは、画像を含んだものもあり、色々です。
この為、何も意識せず、ショートコードを入力すると図示のようになる。


●仮対策

使い方が限られ、少なくともマニュアルに注記が必要だと思います。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

●感想

アフェリエイトの場合、楽天、amazonなど複数のボタンを設置するのが、通例だと思います。

また、プラグイン「Pochipp」を用い設置している方が、多いと思われます。

この為、固定CTAですが、ボタンが一つしかなく、限定した使い方になるかと思います。

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

投稿者:: @chu-ya

[Cocoon設定]→[カルーセル]を表示した際、図示のように、カルーセル動作にならない。

これは、Cocoon設定のプレビュー表示だけっぽいですね。
カルーセルのプレビューを非表示にして、対応しても良いのかもしれません。

//カルーセル
add_filter('cocoon_setting_preview_carousel', '__return_false');

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

当サイトにも適用して、確認してみました。
https://wp-cocoon.com/?theme-switch=nagi
現時点での同サイトの設定では、問題ないように思います。

今回のスキンも同梱させて頂いてよろしいでしょうか。
同梱テーマが公開の際には、こちらの同梱のお礼をもさせて頂ければ幸いです。
https://wp-cocoon.com/skin-make/


   
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

投稿者:: @chu-ya

アフェリエイトの場合、楽天、amazonなど複数のボタンを設置するのが、通例だと思います。

また、プラグイン「Pochipp」を用い設置している方が、多いと思われます。

この為、固定CTAですが、ボタンが一つしかなく、限定した使い方になるかと思います。

コメントありがとうございます!

ですが、楽天・Amazon以外のアフィリエイトを利用している方も相当数いらっしゃいますし、工夫次第でメルマガ登録・フォローや記事の導線にも使えるんじゃないかなと思います。

しかし、ご指摘の通り何の説明もない状態だと画像等含んだショートコードを入力する可能性もあるので、ショートコード入力欄の近くにマニュアルへのリンクを追加しました。

 


   
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

@yhira さん

以下の修正を行った最新版をサイトにおいています。

  • フッター固定CTAのショートコード入力欄の近くにマニュアルへのリンク追加
  • カルーセルのプレビューの非表示

https://go-blogs.com/cocoon/skin-nagi/

 

投稿者:: @yhira

今回のスキンも同梱させて頂いてよろしいでしょうか。
同梱テーマが公開の際には、こちらの同梱のお礼をもさせて頂ければ幸いです。

ぜひ同梱して頂ければ幸いです!

投稿者:: @chu-ya

お金を頂くなら、尚更です。
私は無償で提供しましたが笑

修正箇所も多く、メイド・イン・ヘブンのような超多機能スキンを無償で提供されたあとにお礼をいただくのもなんか申し訳ないんですが、赤ちゃん産まれて色々お金かかるんで頂けるのであれば有り難く頂戴させて頂ければ、と思います。

 

 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

修正いただきありがとうございます。
GitHubのファイルをアップデートし、同サイトにも適用しておきました。

投稿者:: @go

ぜひ同梱して頂ければ幸いです!

ありがとうございます。次のバージョンあたりで同梱させていただければと考えております。

投稿者:: @go

赤ちゃん産まれて色々お金かかるんで頂けるのであれば有り難く頂戴させて頂ければ、と思います。

こちらにあるように現金ではなく、Amazonギフト券になるのですが、問題ないでしょうか。
ごーさんは、今回3回目(であってます?)となるので、3万円のAmazonギフト券になると思うのですが、大丈夫でしょうか。

この投稿は6か月前ずつわいひらに変更されました

   
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

投稿者:: @yhira

こちらにあるように現金ではなく、Amazonギフト券になるのですが、問題ないでしょうか。
ごーさんは、今回3回目(であってます?)となるので、3万円のAmazonギフト券になると思うのですが、大丈夫でしょうか。

はい、大丈夫です!

アマゾンギフト券でオムツ代やらに充てさせていただきます。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

ありがとうございます。Amazonギフト券で送付させて頂きます。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

@go さん

カスタムCSSの出力で重複して出力しており。
問題となりませんが、少し見直した方がいいのでは?

●現象

[トップページの記事一覧タブの設定]→トップページのタブのデザインをオリジナルのものにする
にチェックを入れた。
この時、図に示すようCSSが2重で出力される。


●原因

アイコン設定されると、その部分のCSSが生成される。
それとは別に固定で、同様のタブ部分のCSSを出力している。


●補足

アイコン部(content:"\f15c")のみ出力すればいいのでは?


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

@go さん

●現象

本体と、文言が統一していません。全体の見直しを。

[全体設定]
sns→SNS
コクーン→Cocoon(誤記では?)
snsトップシェアボタンを画面左に固定する
PC表示でのみ固定。コクーン設定でメインカラムトップシェアボタンを表示にチェックを入れる必要があります。

[トップページの記事一覧タブ設定]
フロントページのタブ一覧の設定


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

@go さん

●現象
[フッター固定CTAの色]→フッター固定CTAのマイクロコピーの色を変更した。
取説ではマイクロコピーとなっているが、図示のように、ボタンのテキストも色が変わった。

https://go-blogs.com/cocoon/skin-nagi-fix-cta/


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

ごーさんもお忙しいかもしれないので、不具合部分は修正しておきました。

投稿者:: @chu-ya

[トップページの記事一覧タブの設定]→トップページのタブのデザインをオリジナルのものにする
にチェックを入れた。
この時、図に示すようCSSが2重で出力される。

Cocoon設定保存で反映かも。
https://github.com/xserver-inc/cocoon/commit/e38ea3a750e026c91d29db2470b128c26bd5673c

投稿者:: @chu-ya

本体と、文言が統一していません。全体の見直しを。

文言を修正しました。
https://github.com/xserver-inc/cocoon/commit/7c9736460a33ef9695ce84c238255136f8c5973c

投稿者:: @chu-ya

●現象
[フッター固定CTAの色]→フッター固定CTAのマイクロコピーの色を変更した。
取説ではマイクロコピーとなっているが、図示のように、ボタンのテキストも色が変わった。

これ僕の環境で試してみたんですが、ちょっと再現がされませんでした。
CSSはどのようになっていますか。

この投稿は5か月前 2回ずつわいひらに変更されました

   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

投稿者:: @yhira

ごーさんもお忙しいかもしれないので、不具合部分は修正しておきました。

わいひらさん、これは間違っていると思います。
お金を受け取ったなら、責任を持って本人が対応すべき話だと思います。
人が良すぎます。

他にもバグがありますし。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

●現象

初期値の時、スキンが生成するカスタムCSSがエラーとなる。
.mobile-header-menu-buttonsの、background-color、colorの値が空となっている。


●原因

get_header_container_background_color
get_header_container_text_color
はCocoon設定→ヘッダーで設定保存しないと、返却値が空となる。


   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

●現象

以下の時、「影をつけるか」が反映されない。
・エントリーカード
・大きなカード(先頭のみ)
・大きなカード


●原因

一覧ページの上記は反映していない。


   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

●現象

カルーセルの設定で指定枚数とならない。
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);

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

僕もまだCocoonに同梱していない(ダウンロードで入手するケース)なら修正はしてないと思います。
ただ現時点でGitHubのファイルはスキンを事実上同梱しています(表示されていないだけで)。
なので、こちらの「同梱後、スキンに不具合を発見したり、バージョンアップにより不具合が発生した場合は連絡なくこちら側で不具合修正させていただければと思います。」にあるようにこちらで修正させて頂きました。
https://wp-cocoon.com/skin-make/

同梱料も本来ならもっと労力に見合ったものにすべきとも思うのですが、運営上なかなかそうもいきません。
なので、余裕があればお手伝いくらいならできればと。
もちろん、単純な不具合とかでなく作者の判断を仰がなければならないところは、作者にしかできないところなので、ここはお任せすると思います。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

投稿者:: @yhira

Cocoon設定保存で反映かも。

修正されている事を確認しました。

投稿者:: @yhira

文言を修正しました。

修正されている事を確認しました。

投稿者:: @yhira

これ僕の環境で試してみたんですが、ちょっと再現がされませんでした。
CSSはどのようになっていますか。

入力ミスで、affiショートコードリンクがありませんでした。
この為、マイクロコピーの色がそのまま反映され。

 

 

 


   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

2点あります。

カルーセルの仕様、勘違いしてました。
slick.jsのbreakpointですが、carousel-content幅でした。
以前、以下で修正したが、余り意味がなかったです。申し訳なく。

https://wp-cocoon.com/community/postid/65520/


以下ですが、画面幅でない為、説明が難しいと思います。

[Cocoon設定]→[カラム]のコンテンツ幅に応じ、初期に表示されるカード表示枚数が変わり。
先述の通り、1023px以下で、carousel-content幅に応じ変化する事となり。

この為、各スキンのデザイン、carousel-content幅の変化に応じ、それぞれ表示が異なると思います。

https://wp-cocoon.com/community/postid/80291/


   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

●補足

スキン「NAGI」の場合、カルーセルのページボタン<>がwrapの外にあり。
画面幅1023px以下の時、画面幅=carousel-contentとなり。
この為、画面幅を記しても問題ないかもしれません。

※スキンなしの場合、ページボタン分のmarginが左右に30px付くので、breakpoint=画面幅とはならず。

 


●余談

wp_enqueue_slick()のJS($data)を、書き替えるフック追加と思いましたが、
今回の件もあり、下手に弄らせない方が良いのでは?と思い、要望を止めました。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

投稿者:: @chu-ya

初期値の時、スキンが生成するカスタムCSSがエラーとなる。

投稿者:: @chu-ya

「影をつけるか」が反映されない。

投稿者:: @chu-ya

入力ミスで、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タグがある場合のみボタンスタイルとなるように変更しました。
※ごーさんの意図に合わない変更だった場合はリバート(元に戻す)処理を行います

 


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

@yhira さん

修正がされている事を確認しました。

投稿者:: @yhira

アフィリエイトショートコード入れてないテキスト状態でもボタンスタイル表示されると、アフィリエイトショートコード使用していないと気づきにくいのでaタグがある場合のみボタンスタイルとなるように変更しました。

変更文をよく読まなかったので、何が起きたか分からず。

リンクなしの時、ボタンの色が反映されなくなり。
私は、変更しなくてもいいのでは?と思います。これは判断できません。

https://github.com/xserver-inc/cocoon/commit/c3bddb9ef8d012be14ca9f9d27c19c19b0223c12


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

私なら以下とします。
マイクロコピー、ボタンと正しく表示されますが、ボタンをクリックしてもリンクしません。

●上記について

マイクロコピーのみ文字色変更。
リンク有無に関わらずボタンとする。

●変更

以下を削除
①マイクロコピーのみ設定した色を反映。

https://github.com/xserver-inc/cocoon/blob/c3bddb9ef8d012be14ca9f9d27c19c19b0223c12/skins/nagi/style.css#L879

以下を追加し、マイクロコピーのみ設定色反映。

.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


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

投稿者:: @chu-ya

以下を追加し、マイクロコピーのみ設定色反映。

これを修正する意味はわかるんです。

投稿者:: @chu-ya

②リンク有無に関係なく、ボタンを表示。

けれど、リンクにならないのにボタン表示にする意味って何かあります?
ユーザーがコンバージョンページへのリンクへと勘違いしてクリックしても動作しないなんて事になりませんか。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

投稿者:: @yhira

けれど、リンクにならないのにボタン表示にする意味って何かあります?
ユーザーがコンバージョンページへのリンクへと勘違いしてクリックしても動作しないなんて事になりませんか。

ボタンが消えてしまうので、何が起きたか?と思い。
これは、作り手の判断だと思います。

リンクが未設定の場合の動作、注意点を、取説に書けば解決かと思います。


   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

●現象

カルーセルの設定が以下の時、表示カード位置がおかしくなる。
アクティブのドットが2個となっている。

slidesToShow < slidesToScroll

カルーセルのslick.jsを変更した事ありますが、利用する上で、色々、面倒だった覚えがあります。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

FirefoxとChromeで確認してみましたが、アクティブドットが2個になる不具合は僕の環境では確認できませんでした。スライドしていない状態でそうなるということですよね。
何か他のトリガーみたいなのが、あるのかもしれませんね。

この投稿は5か月前ずつわいひらに変更されました

   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3162
 

投稿者:: @yhira

FirefoxとChromeで確認してみましたが、アクティブドットが2個になる不具合は僕の環境では確認できませんでした。

ドットをクリック直後、Firefox、Chromeともアクティブのドットが2つになります。
その後、他の画面をクリックすると、非アクティブになりますが。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

表示枚数がスライド枚数を超えないように修正し、説明文の文言を追加しておきました。
https://github.com/xserver-inc/cocoon/commit/107098a30b2793a431e40f4c55a144c031afccb8


   
固定ページ 1 / 2
共有:

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

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

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

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

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

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

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

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