Cocoonカスタマイズ まとめ記事公開中

【Cocoon】新着・人気記事のショートコードでカテゴリーを表示

WordPress

こんにちは!
CocoonカスタマイザーのYoshitaka(@yandkstudio_y)です!

Cocoonでは以下の様なショートコードで人気記事や新着記事を呼び出すことが可能です。

[new_list], [popular_list]

詳しい使い方に関しては、Cocoon作成者の「わいひら」さんが記事にしてくださっているので、そちらをご覧ください。

関連記事 新着記事一覧を表示するショートコードの利用方法

関連記事 意図した記事一覧を作成できる「ナビカード」ショートコードの使い方

さて、ショートコードを1度でも使ったことがある人なら知っていると思うのですが、Cocoonでは記事をショートコードで呼び出した場合、カテゴリーラベルが表示されません。

オレンジで囲んでいる部分がカテゴリーラベル

なので、今回は「Cocoonのショートコードで記事を呼び出す際にカテゴリーラベルも表示させる方法」をご紹介します。

追記
【2020/01/10】カテゴリーラベルの表示がlarge_thumb_on形式で上手く表示されない不具合に対応しました。

完成イメージ

今回、カスタマイズしたショートコードを用いて表示されるのはこんな感じです。

完成イメージ

カスタマイズ方法

手順は以下の通りです。

カスタマイズ手順

  • STEP1
    PHPをコピー & ペースト
    外観 > テーマエディター > function.phpにペーストします
  • STEP2
    CSSをコピー & ペースト
    外観 > テーマエディター > style.cssにペーストします

STEP1 : PHPをコピー & ペースト

先ずは新着記事ショートコードで呼び出した際のPHPです。
以下のコードをコピー&ペーストしてください。

function get_widget_entry_card_link_tag($atts){
  extract(shortcode_atts(array(
    'prefix' => WIDGET_NEW_ENTRY_CARD_PREFIX,
    'url' => null,
    'title' => null,
    'snippet' => null,
    'thumb_size' => null,
    'image_attributes' => null,
    'ribbon_no' => null,
    'type' => null,
  ), $atts));
  //リボンタグの取得
  $type_1 = 'large_thumb';
  $type_2 = 'large_thumb_on';
  $ribbon_tag = get_navi_card_ribbon_tag($ribbon_no);
  ob_start(); ?>
  <a href="<?php echo esc_url($url); ?>" class="<?php echo $prefix; ?>-entry-card-link widget-entry-card-link a-wrap" title="<?php echo esc_attr($title); ?>">
    <div class="<?php echo $prefix; ?>-entry-card widget-entry-card e-card cf">
      <?php echo $ribbon_tag; ?>
      <figure class="<?php echo $prefix; ?>-entry-card-thumb widget-entry-card-thumb card-thumb">
		  <?php if ($type == $type_2) the_nolink_category(); //カテゴリラベルの取得 ?>
        <?php
        if (is_widget_navi_entry_card_prefix($prefix)) {
          echo get_navi_entry_card_thumbnail_tag($image_attributes, $title);
        } else {
          echo get_widget_entry_card_thumbnail_tag($prefix, $thumb_size, $type);
        }
        ?>
      </figure><!-- /.entry-card-thumb -->
      <div class="<?php echo $prefix; ?>-entry-card-content widget-entry-card-content card-content">
        <div class="<?php echo $prefix; ?>-entry-card-title widget-entry-card-title card-title"><?php echo $title;?></div>
			<?php if ($type == $type_1) the_nolink_category(); //カテゴリラベルの取得 ?>
        <?php
        if (!is_widget_navi_entry_card_prefix($prefix)) {
          generate_widget_entry_card_date($prefix);
        } ?>
      </div><!-- /.entry-content -->
    </div><!-- /.entry-card -->
  </a><!-- /.entry-card-link -->
<?php
  return ob_get_clean();
}

続いて、人気記事ショートコードで呼び出した際のPHPです。
以下のコードをコピー&ペーストしてください。

function generate_popular_entries_tag($atts){
  extract(shortcode_atts(array(
    'days' => 'all',
    'entry_count' => 5,
    'entry_type' => ET_DEFAULT,
    'ranking_visible' => 0,
    'pv_visible' => 0,
    'cat_ids' => array(),
    'exclude_post_ids' => array(),
    'exclude_cat_ids' => array(),
    'bold' => 0,
    'arrow' => 0,
    'class' => null,
  ), $atts));
  $records = get_access_ranking_records($days, $entry_count, $entry_type, $cat_ids, $exclude_post_ids, $exclude_cat_ids);
  $thumb_size = get_popular_entries_thumbnail_size($entry_type);
  $atts = array(
    'type' => $entry_type,
    'ranking_visible' => $ranking_visible,
    'pv_visible' => $pv_visible,
    'bold' => $bold,
    'arrow' => $arrow,
    'class' => $class,
  );
  $cards_classes = get_additional_widget_entry_cards_classes($atts);
  ?>
  <div class="popular-entry-cards widget-entry-cards no-icon cf<?php echo $cards_classes; ?>">
  <?php if ( $records ) :
    $i = 1;
    foreach ($records as $post):
      $permalink = get_permalink( $post->ID );
      $title = $post->post_title;
      //$no_thumbnail_url = get_template_directory_uri().'/images/no-image-320.png';
      $no_thumbnail_url = ($entry_type == ET_DEFAULT) ? get_no_image_120x68_url() : get_no_image_320x180_url();
      $w   = ($entry_type == ET_DEFAULT) ? THUMB120WIDTH  : THUMB320WIDTH;
      $h   = ($entry_type == ET_DEFAULT) ? THUMB120HEIGHT : THUMB320HEIGHT;
      //$no_thumbnail_url = get_no_image_320x180_url();
      $post_thumbnail = get_the_post_thumbnail( $post->ID, $thumb_size, array('alt' => '') );
      $pv = $post->sum_count;
      if ($post_thumbnail) {
        $post_thumbnail_img = $post_thumbnail;
      } else {
        $post_thumbnail_img = '<img src="'.esc_url($no_thumbnail_url).'" alt="" class="no-image popular-entry-card-thumb-no-image widget-entry-card-thumb-no-image" width="'.$w.'" height="'.$h.'" />';
      }
      $pv_tag = null;
      if ($pv_visible){
        $pv_text = $pv == '1' ? $pv.' view' : $pv.' views';
        $pv_tag = '<span class="popular-entry-card-pv widget-entry-card-pv">'.$pv_text.'</span>';
      }
      ?>
  <a href="<?php echo $permalink; ?>" class="popular-entry-card-link a-wrap no-<?php echo $i; ?>" title="<?php echo esc_attr($title); ?>">
    <div class="popular-entry-card widget-entry-card e-card cf">
      <figure class="popular-entry-card-thumb widget-entry-card-thumb card-thumb">
        <?php echo $post_thumbnail_img; ?>
        <?php
        $is_visible = apply_filters('is_popular_entry_card_category_label_visible', true);
        $is_visible = apply_filters('is_widget_entry_card_category_label_visible', $is_visible);
        the_nolink_category($post->ID, $is_visible); //カテゴリラベルの取得 ?>
      </figure><!-- /.popular-entry-card-thumb -->
      <div class="popular-entry-card-content widget-entry-card-content card-content">
        <span class="popular-entry-card-title widget-entry-card-title card-title"><?php echo $title;?></span>
		  		  
        <?php generate_widget_entry_card_date('popular', $post->ID); ?>
      </div><!-- /.popular-entry-content -->
      <?php if ($entry_type == ET_LARGE_THUMB_ON): ?>
        <?php echo $pv_tag; ?>
      <?php endif ?>
    </div><!-- /.popular-entry-card -->
  </a><!-- /.popular-entry-card-link -->
  <?php
  $i++;
  endforeach;
  else :
    echo '<p>'.__( '人気記事は見つかりませんでした。', THEME_NAME ).'</p>';//見つからない時のメッセージ
  endif; ?>
  </div>
<?php
}

上記のコードをコピー&ペーストしたら、従来のショートコードを使って完成イメージと同じ結果が表示されると思います。

STEP2 : CSSをコピー & ペースト

上記のPHPのコードを使用すると、デフォルトの新着記事や人気記事を呼び出すショートコードでカテゴリーラベルが表示されます。
しかし、上記のままですと、サイドバーにウィジェットで人気記事や新着記事を呼び出している場合でもカテゴリーラベルが表示されてしまいます。

なのでサイドバーやフッターなどカテゴリーラベルを表示する必要のない場所は非表示設定しておきましょう!

/* おすすめカードで非表示に */
.navi-entry-card-content .cat-label {
	display: none;
}
/* サイドバーで非表示に */
.widget-sidebar .cat-label{
	display: none;
}
/* フッターで非表示に */
.widget-footer-mobile .cat-label,
.widget-footer-center .cat-label,
.widget-footer-right .cat-label {
	display: none
}

固定ページをフロントページにする場合などにショートコードは重宝されると思われるので、是非そういう場合にお使いください!

他にもCocoonカスタマイズをしています

これ以外にもWordPress全般に関するカスタマイズやCocoon限定のカスタマイズ記事を書いていますので、良かったらご覧ください。

★193万円受給しながら転職可能★
「MamaEdu」プロジェクトは、Web・ITの専門スキルを持ち、活き活きと働く女性を増やしていくことを目的とした活動!

自立支援教育訓練給付金や高等職業訓練促進給付金のフォローを受けることができるため、最大193万円の給付金を貰いながら転職活動が可能です!
この記事を書いた人

Y&K Studioの管理人・執筆担当。
現役エンジニアで趣味は写真撮影や動画制作
Weebill LabとSony α7iiiが相棒。

詳しいプロフィールはこちらから。

\Y&K Studio のフォローはこちら/
WordPress
スポンサーリンク
Y&K Studio – 二人三脚ブログ –

コメント

  1. 探していた解決策に出会えて助かりました、公開ありがとうございます。

    1点だけ、例えば[new_list count=3 type=large_thumb_on cats=2 children=1 post_type=post]のように表示形式をlarge_thumb_onにした場合、サムネイル画像ではなく記事タイトルの左上にタグが付いてしまう気がします。勘違いでしたらすみません、お礼とご報告までです。

    • ソラさん
      弊ブログの記事が役にたったようで何よりです。

      ご指摘の件ですが、ソラさんの指摘通りlarge_thumb_on形式の場合に対応していません。
      large_thumb_on形式に対応することを忘れておりました(汗)

      なるべく早めに対応できるようにしたいと思います。

      • Yoshitakaさん、早速のご返信ありがとうございました! large_thumbの場合では完璧に動作していますので、onの方は、またお時間のあるときにでもご対応頂ける日を楽しみにしております! 貴重なコードをご提供頂いてありがとうございます。

        • ソラさん
          遅くなりましたが、large_thumb_on形式にも対応いたしました。

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