こんにちは!
CocoonカスタマイザーのYoshitaka(@yandkstudio_y)です!
Cocoonでは以下の様なショートコードで人気記事や新着記事を呼び出すことが可能です。
[new_list], [popular_list]
詳しい使い方に関しては、Cocoon作成者の「わいひら」さんが記事にしてくださっているので、そちらをご覧ください。
関連記事 意図した記事一覧を作成できる「ナビカード」ショートコードの使い方
さて、ショートコードを1度でも使ったことがある人なら知っていると思うのですが、Cocoonでは記事をショートコードで呼び出した場合、カテゴリーラベルが表示されません。
なので、今回は「Cocoonのショートコードで記事を呼び出す際にカテゴリーラベルも表示させる方法」をご紹介します。
完成イメージ
今回、カスタマイズしたショートコードを用いて表示されるのはこんな感じです。
カスタマイズ方法
手順は以下の通りです。
- STEP1PHPをコピー & ペースト外観 > テーマエディター > function.phpにペーストします
- STEP2CSSをコピー & ペースト外観 > テーマエディター > 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限定のカスタマイズ記事を書いていますので、良かったらご覧ください。
コメント
探していた解決策に出会えて助かりました、公開ありがとうございます。
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形式にも対応いたしました。