サイト内検索
Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2025年5月6日 23:11
こんにちは。
[new_list]にもカテゴリーラベルを付けたいのですが、
どのphpファイルを触っていいのかわからず解決策を教えていただきたいです。
([info_list]の方はHTMLのコード見つけれたのですが、、、)
希望は、日付の横に表示させたいです。
2025年5月6日 23:41
●回答
マニュアルを読みましょう。
https://wp-cocoon.com/category-label-hooks/
ソースコードの部位
add_filter('is_new_entry_card_category_label_visible', '__return_true');
わいひら reacted
トピックスターター 2025年5月7日 14:20
ありがとうございます。
アイキャッチ部分に追加することはできるんですね!
日付の横に表示させたい場合は、cssで移動するしか方法はないでしょうか?
もし可能なら、
日付 カテゴリータグ
タイトル
のような並びも変えたいと思っているのですが、難しいでしょうか?
2025年5月7日 15:43
日付の横に表示させたい場合は、cssで移動するしか方法はないでしょうか?
●回答
以下の案が考えられます。
ご自身の実力にあった方法を選んでください。
なお、できない場合、有償にて業者に依頼願います。
△CSSでレイトを変更
カテゴリーラベルと日付で親要素が異なります。
CSSで可能ですが、カテゴリーラベル(赤)の原点が日付(青)と異なるため、日付の後ろにカテゴリーラベルを綺麗に配置するのに調整が必要です。
×フックでレイアウトを変更
do_shortcode_tagを用いnew_listが出力するHTMLタグを操作します。
preg_replace_callbackで置き換えすれば可能ですが複雑です。
○JSでレイアウトを変更
フックで置き換える際、PHPのDOMDocumentで要素操作が可能でですが、それならJSで操作します。
簡単にできますが、ページを表示する際、動的にレイアウトを変更することとなります。
○new_listカードの関数を変更
以下の関数をfunctions.phpにコピーし、レイアウトを変更します。
わいひら reacted
2025年5月7日 16:36
●答え
別の方法。
- functions.phpに関数generate_widget_entry_card_dateをfunctions.phpにコピー。
- 以下に追加。
get_the_nolink_category($post_id);
https://github.com/xserver-inc/cocoon/blob/3a23ba47d805b9a88ed2d07e5a22e441edbf3c2b/lib/html-forms.php#L1452
- style.cssに以下を追加。
/* カテゴリーラベル基準変更 */ .new-entry-cards .cat-label { position: unset; } /* タイトル、日付の並び順変更 */ .new-entry-card-content { display: flex; flex-direction: column-reverse; }
わいひら reacted
トピックスターター 2025年5月8日 20:22
すいません。
私がやりたい部分はウィジェット部分に表示される新着記事なのですが、
教えていただいたコードでは発動しないですか?
2025年5月8日 20:32
添付した画像はウィジェットエリア「サイドバー」に、新着記事を表示した結果です。
私がやりたい部分はウィジェット部分に表示される新着記事なのですが、
教えていただいたコードでは発動しないですか?
コードの中身を理解していますか?
単にコピペするのではなく、仕組みを理解してください。
まず[C]新着記事ウィジェットには日付を表示する設定はありません。
日付はブロックとショートコードです。
結果、カスタムHTMLウィジェットに[new_list date=1]とショートコードを入力することになります。
2025年5月8日 20:54
カスタマイズ以前に、まず基礎を勉強してください。
●PHPなら
以下のコードをfuncyions.phpに追加。
Cocoonの日付表示の関数にカテゴリーラベル出力を追加する。
Cocoonの日付表示の関数にカテゴリーラベル出力を追加する。
if ( !function_exists( 'generate_widget_entry_card_date' ) ) : function generate_widget_entry_card_date( $prefix, $post_id = null, $display = false ) { // クラスのON/OFFを制御するオプション $display_class = $display ? '' : ' display-none'; ?> <?php do_action( 'widget_entry_card_date_before', $prefix, $post_id ); ?> <div class="<?php echo $prefix; ?>-entry-card-date widget-entry-card-date<?php echo $display_class; ?>"> <span class="<?php echo $prefix; ?>-entry-card-post-date widget-entry-card-post-date post-date"> <span class="fa fa-clock-o" aria-hidden="true"></span> <span class="entry-date"> <?php echo get_the_time( get_site_date_format(), $post_id ); ?> </span> </span> <?php // 更新日の取得 $update_time = get_update_time( get_site_date_format(), $post_id ); if ( $update_time ) : ?> <span class="<?php echo $prefix; ?>-entry-card-update-date widget-entry-card-update-date post-update"> <span class="fa fa-history" aria-hidden="true"></span> <span class="entry-date"> <?php echo $update_time; ?> </span> </span> <?php endif; ?> // カテゴリーラベル <?php echo get_the_nolink_category( $post_id ); ?> </div> <?php } endif;
●[C]新着記事ウィジェットを用いたいなら
[C]新着記事ウィジェットは日付は出力されているが非表示となっているので、CSSで表示させる。
カテゴリーラベルは position: absolute;となっているため、解除する。
display:flexでタイトルと日付の並び順を逆にする。
以下をstyle.cssに追加。
/* ウィジェットは非表示となっておるので日付を表示に編変更 */ .new-entry-card-date { display:block; } /* カテゴリーラベル基準変更 */ .new-entry-cards .cat-label { position: unset; } /* タイトル、日付の並び順変更 */ .new-entry-card-content { display: flex; flex-direction: column-reverse; }
●JSなら
上記CSSを使う。
カテゴリーラベル表示
以下をfunctions.phpに追加。
add_filter('is_new_entry_card_category_label_visible', '__return_true');
新着記事のカテゴリーラベルを日付の最後に追加
標準サムネイルnew-entry-card-thumbの子要素のカテゴリーラベル(cat-label)を日付要素(new-entry-card-date)の最後に追加する。
以下をjavascript.jsに追加。
jQuery(function($) { $('.new-entry-card-link').each(function() { $('.cat-label', this).appendTo($('.new-entry-card-date', this)); }); });
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。