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

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

にもカテゴリーラベルを付けたいです。
 
共有:
通知
すべてクリア

にもカテゴリーラベルを付けたいです。

9 投稿
2 ユーザー
4 Reactions
87 表示
(@yyy_mihimi)
Eminent Member Registered
結合: 10か月前
投稿: 14
トピックスターター  

こんにちは。

 

[new_list]にもカテゴリーラベルを付けたいのですが、

どのphpファイルを触っていいのかわからず解決策を教えていただきたいです。

([info_list]の方はHTMLのコード見つけれたのですが、、、)

 

希望は、日付の横に表示させたいです。


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

●回答

マニュアルを読みましょう。

https://wp-cocoon.com/category-label-hooks/

ソースコードの部位

https://github.com/xserver-inc/cocoon/blob/3a23ba47d805b9a88ed2d07e5a22e441edbf3c2b/lib/html-forms.php#L1402-L1406

add_filter('is_new_entry_card_category_label_visible', '__return_true');

   
わいひら reacted
返信引用
(@yyy_mihimi)
Eminent Member Registered
結合: 10か月前
投稿: 14
トピックスターター  

ありがとうございます。
アイキャッチ部分に追加することはできるんですね!

日付の横に表示させたい場合は、cssで移動するしか方法はないでしょうか?

もし可能なら、

日付 カテゴリータグ
タイトル

のような並びも変えたいと思っているのですが、難しいでしょうか?


   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3512
 

日付の横に表示させたい場合は、cssで移動するしか方法はないでしょうか?

●回答

以下の案が考えられます。
ご自身の実力にあった方法を選んでください。

なお、できない場合、有償にて業者に依頼願います。

△CSSでレイトを変更

カテゴリーラベルと日付で親要素が異なります
CSSで可能ですが、カテゴリーラベル(赤)の原点が日付(青)と異なるため、日付の後ろにカテゴリーラベルを綺麗に配置するのに調整が必要です。


×フックでレイアウトを変更

do_shortcode_tagを用いnew_listが出力するHTMLタグを操作します。
preg_replace_callbackで置き換えすれば可能ですが複雑です。


○JSでレイアウトを変更

フックで置き換える際、PHPのDOMDocumentで要素操作が可能でですが、それならJSで操作します。
簡単にできますが、ページを表示する際、動的にレイアウトを変更することとなります。


○new_listカードの関数を変更

以下の関数をfunctions.phpにコピーし、レイアウトを変更します。

https://github.com/xserver-inc/cocoon/blob/3a23ba47d805b9a88ed2d07e5a22e441edbf3c2b/lib/html-forms.php#L1596-L1698


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

●答え

別の方法。

  1. functions.phpに関数generate_widget_entry_card_dateをfunctions.phpにコピー。
  2. 以下に追加。
    get_the_nolink_category($post_id);

    https://github.com/xserver-inc/cocoon/blob/3a23ba47d805b9a88ed2d07e5a22e441edbf3c2b/lib/html-forms.php#L1452

  3. style.cssに以下を追加。
    /* カテゴリーラベル基準変更 */
    .new-entry-cards .cat-label {
    position: unset;
    }
    
    /* タイトル、日付の並び順変更 */
    .new-entry-card-content {
    display: flex;
    flex-direction: column-reverse;
    }

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

以下の誤記。

echo get_the_nolink_category($post_id);

   
わいひら reacted
返信引用
(@yyy_mihimi)
Eminent Member Registered
結合: 10か月前
投稿: 14
トピックスターター  

すいません。

私がやりたい部分はウィジェット部分に表示される新着記事なのですが、
教えていただいたコードでは発動しないですか?


   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3512
 

添付した画像はウィジェットエリア「サイドバー」に、新着記事を表示した結果です。

投稿者:: @yyy_mihimi

私がやりたい部分はウィジェット部分に表示される新着記事なのですが、
教えていただいたコードでは発動しないですか?

コードの中身を理解していますか?
単にコピペするのではなく、仕組みを理解してください。

まず[C]新着記事ウィジェットには日付を表示する設定はありません

日付はブロックとショートコードです。
結果、カスタムHTMLウィジェットに[new_list date=1]とショートコードを入力することになります。


   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3512
 
カスタマイズ以前に、まず基礎を勉強してください。
 
●PHPなら
以下のコードをfuncyions.phpに追加。
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)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

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

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

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

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