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

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を作成しました

12 投稿
3 ユーザー
4 Reactions
279 表示
ごー
(@go)
Eminent Member Registered
結合: 6年前
投稿: 13
Topic starter  

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

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

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

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

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

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

Hygiene

one

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

さて、本題に入ります。

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

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

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

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

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


   
わいひら reacted
引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

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

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

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

Ver1.0.1

●現象

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


●原因

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


●対策

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


   
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2325
 

Ver1.0.1

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

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

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

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


   
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2325
 

Ver1.0.1

●現象

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


●原因

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

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


●補足

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

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


   
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2325
 
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
結合: 6年前
投稿: 13
Topic starter  

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

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


   
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2325
 

@go さん

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

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


   
ごー reacted
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2325
 

投稿者:: @chu-ya

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

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

本件は無視して下さい。


   
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2325
 

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
結合: 6年前
投稿: 13
Topic starter  

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

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


   
chu-ya reacted
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2325
 

投稿者:: @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;
}

   
返信引用
共有:

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

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

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

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

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

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

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

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