PR

Cocoonでスニペット付き新着記事と人気記事一覧の作成ver1.9.1

ワードプレスのテーマCocoonについて
2019.02.12
この記事は約24分で読めます。

Cocoonではver1.8.9.4からver1.9.1にかけて、新着記事ウィジェット・人気記事ウィジェットに加えて新たにナビカードウィジェットの機能が追加されました。
この新機能のナビカードウィジェットの作成に合わせて新着記事ウィジェット・人気記事一覧ウィジェットのプログラムの見直しがされています。

そのため、いままでの記事は「Cocoonでスニペット付き新着記事と人気記事一覧の作成ver1.8.9.3まで」としてアーカイブさせていただき、ver1.9.1に対するコーディング修正の内容についてのみの記載に内容を変更いたしました。

なお本コーディンク修正で使用しています「get_additional_widget_entry_cards_classes関数名の修正」は2019/7/19日に実施されておりますが、その後新着・人気記事ショートコードや新着記事ウィジェット・人気記事ウィジェットの修正がver1.9.1まで複数回実施されているため、結果的に今回の対応が遅くなりましたことお詫び申し上げます。

【2020/5/19 追記】
Cocoon Ver2.1.5から新着記事のショートコードにsnipetを表示させるオプションが追加されました。
従いましてCocoon Ver2.1.5以降をご利用の場合は新着記事の本稿でのカスタマイズは必要ありませんので、お含み置きいただければ幸いです。

【2023/7/26【追記】
Cocoon Ver2.6.3で人気記事のショートコードにsnipetを表示させるオプションが追加されました。

※いままでご利用いただいていた方がCocoonの機能に切り替えるためには、バージョンアップ後、各投稿やウィジェットに埋め込んであるショートコードの設定を変更した上で、子テーマfunctions.phpから追加した関数を削除してください。

※この記事の内容は上記以前のバージョンをご利用の場合にのみ有効になりますのでご注意ください。

なお新着配信・人気記事のショートコードで表示された時に投稿日・更新日を表示させるコーディング事例を下記で紹介しています。

Cocoonの新着記事・人気記事ショートコードで投稿日・更新日を表示する
WordPressの無料テーマCocoonで、新着記事はVer2.1.5から、人気記事はVer2.6.3から、ショートコードでスニペットが表示できるようになりました。 ただし当該記...
neverendworks.com
2023.08.01
スポンサーリンク

「作成の背景」と「本来このような修正をすべきではない理由」

上記につきましては、「Cocoonでスニペット付き新着記事と人気記事一覧の作成ver1.8.9.3まで」に掲載いたしましたので、ここでは割愛いたします。

コーディング修正内容

※ここでは忘備録のために内容を記載しますが、もしも流用される場合は自己責任でお願いを致します。

子テーマのfunctions.phpに下記の関数を追加します。

新着記事

cocoon-masterでのフォルダーとファイル名元関数名子テーマfunctions.phpに追加する関数名
cocoon-master\lib\shortcodes.phpnew_entries_shortcodenewsnipet_entries_shortcode
cocoon-master\lib\html-forms.phpgenerate_widget_entries_taggenerate_widgetsnipet_entries_tag
　〃get_widget_entry_card_link_tagget_widgetsnipet_entry_card_link_tag

人気記事

cocoon-masterでのフォルダーとファイル名元関数名子テーマfunctions.phpに追加する関数名
cocoon-master\lib\shortcodes.phppopular_entries_shortcodepopularsnipet_entries_shortcode
cocoon-master\lib\html-forms.phpgenerate_popular_entries_taggenerate_popularsnipet_entries_tag

量は多いのですが、ほぼほぼ「snipet」がつかないもともとある関数に対してほんの少し変更しただけの内容になります。
※「snippet」が英語的には正しい綴りですがCocoon内では変数名として既に使用されているためあえて「p」が少ない綴りを使用しています。

なお関数以外にstyle.cssに下記のクラスを追記してください。
※style.cssはCocoon子テーマにあるファイルに追記します。
※この追記をしない場合は、記事の作成日と更新日が表示されなくなります。

.snipet-entry-card-date {
  display: block;
  font-size: 90%;
}

ショートコード関数の修正

新着記事

new_entries_shortcodeを子テーマのfunctions.phpにコピーして修正
※2,3,5,6,17,41,44行が修正箇所になります。

//新着記事ショートコード関数
if (!shortcode_exists('newsnipet_list')) {
  add_shortcode('newsnipet_list', 'newsnipet_entries_shortcode');
}
if ( !function_exists( 'newsnipet_entries_shortcode' ) ):
function newsnipet_entries_shortcode($atts) {
  extract(shortcode_atts(array(
    'count' => 5,
    'cats' => 'all',
                ----- 省略 -----
    'modified' => 0,
    'order' => 'desc',
    'action' => null,
    'bold' => 0,
    'arrow' => 0,
    'class' => null,
    'snipet' => 1,   //追加
  ), $atts));

  //カテゴリを配列化
  $cat_ids = array();
  if ($cats && $cats != 'all') {
    $cat_ids = explode(',', $cats);
  }
  //タグを配列化
  $tag_ids = array();
  if ($tags && $tags != 'all') {
    $tag_ids = explode(',', $tags);
  }
  //引数配列のセット
  $atts = array(
    'entry_count' => $count,
    'cat_ids' => $cat_ids,
                ----- 省略 -----
    'modified' => $modified,
    'order' => $order,
    'action' => $action,
    'bold' => $bold,
    'arrow' => $arrow,
    'class' => $class,
    'snipet' => $snipet,  //追加
  );
  ob_start();
  generate_widgetsnipet_entries_tag($atts);
  $res = ob_get_clean();
  return $res;
}
endif;

人気記事

popular_entries_shortcodeを子テーマのfunctions,phpにコピーして修正
※2,3,5,6,15,29,32行が修正箇所になります。

//人気記事ショートコード関数
if (!shortcode_exists('popularsnipet_list')) {
  add_shortcode('popularsnipet_list', 'popularsnipet_entries_shortcode');
}
if ( !function_exists( 'popularsnipet_entries_shortcode' ) ):
function popularsnipet_entries_shortcode($atts) {
  extract(shortcode_atts(array(
    'days' => 'all',
    'count' => 5,
                ----- 省略 -----
    'cats' => 'all',
    'bold' => 0,
    'arrow' => 0,
    'class' => null,
    'snipet' => 1,   //追加
  ), $atts));
  $cat_ids = array();
  if ($cats && $cats != 'all') {
    $cat_ids = explode(',', $cats);
  }
  $atts = array(
    'days' => $days,
    'entry_count' => $count,
                ----- 省略 -----
    'cat_ids' => $cat_ids,
    'bold' => $bold,
    'arrow' => $arrow,
    'class' => $class,
    'snipet' => $snipet,  //追加
  );
  ob_start();
  generate_popularsnipet_entries_tag($atts);
  $res = ob_get_clean();
  return $res;
}
endif;
アイコン

新着人気記事一覧ver1.9.1

1 ファイル 3.73 KB
全5 function

文字コード：UTF-8N　改行コード：CR+LF

タグ関数の修正

新着記事

generate_widget_entries_tagを子テーマのfunctions.phpにコピーして修正
※2,3,15,59-61,66,69,71行が修正箇所になります。

//汎用エントリーウィジェットのタグ生成
if ( !function_exists( 'generate_widgetsnipet_entries_tag' ) ):
function generate_widgetsnipet_entries_tag($atts){
  extract(shortcode_atts(array(
    'entry_count' => 5,
    'cat_ids' => array(),
                ----- 省略 -----
    'modified' => 0,
    'order' => 'desc',
    'action' => null,
    'exclude_cat_ids' => array(),
    'bold' => 0,
    'arrow' => 0,
    'class' => null,
    'snipet' => 1,  //追加
  ), $atts));
  global $post;

  //ランダムが有効な時は関連記事
  if ($random) {
    $prefix = WIDGET_RELATED_ENTRY_CARD_PREFIX;
                ----- 省略 -----
  //関連記事の場合は表示ページを除外
  if ($random) {
    $post_id = get_the_ID();
    if (isset($args['post__not_in'])) {
      $args['post__not_in'][] = $post_id;
    } else {
      $args['post__not_in'] = array($post_id);
    }
  }

  //除外カテゴリーの設定
  if (!empty($exclude_cat_ids)) {
    $cat_ids = array_diff($cat_ids, $exclude_cat_ids);
                ----- 省略 -----
  $thumb_size = get_widget_entries_thumbnail_size($type);

  if ($random) {
    $args = apply_filters('widget_related_entries_args', $args);
    $thumb_size = apply_filters('get_related_entries_thumbnail_size', $thumb_size, $type);
  } else {
    $args = apply_filters('widget_new_entries_args', $args);
    $thumb_size = apply_filters('get_new_entries_thumbnail_size', $thumb_size, $type);
  }
  $args = apply_filters('widget_entries_args', $args);
  $query = new WP_Query( $args );
  $atts = array(
    'type' => $type,
    'bold' => $bold,
    'arrow' => $arrow,
    'class' => $class,
  );
  $cards_classes = get_additional_widget_entry_cards_classes($atts);
  ?>
  <div class="<?php echo $prefix; ?>-entry-cards widget-entry-cards no-icon cf<?php echo $cards_classes; ?>">
  <?php if ( $query -> have_posts() ) : while ( $query -> have_posts() ) : $query -> the_post(); ?>
    <?php //エントリーカードリンクタグの生成
    if ($snipet) {  //追加↓
      $excerpt = get_the_excerpt();
    }  //追加↑
    $atts = array(
      'prefix' => $prefix,
      'url' => get_the_permalink(),
      'title' => get_the_title(),
      'snippet' => $excerpt,  //追加
      'thumb_size' => $thumb_size,
      'type' => $type,
      'id' => get_the_ID(),  //追加
    );
    echo get_widgetsnipet_entry_card_link_tag($atts); ?>
  <?php endwhile;
  else :
    echo '<p>'.__( '記事は見つかりませんでした。', THEME_NAME ).'</p>';//見つからない時のメッセージ
  endif; ?>
  <?php wp_reset_postdata(); ?>
  <?php //wp_reset_query(); ?>
  </div>
<?php
}
endif;

get_widget_entry_card_link_tagを子テーマのfunctions.phpにコピーして修正
※2,3,16,66-91,95行が修正箇所になります。

//ウィジェットエントリーカードリンクタグの取得
if ( !function_exists( 'get_widgetsnipet_entry_card_link_tag' ) ):
function get_widgetsnipet_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,
    'id' => null,
  ), $atts));
  //リボンタグの取得
  $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 (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 ($snippet): ?>
        <div class="<?php echo $prefix; ?>-entry-card-snippet widget-entry-card-snippet card-snippet"><?php echo $snippet; ?></div>
        <?php generate_widget_entry_card_date('snipet',$id); ?>
        <?php endif; ?>
        <?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();
}
endif;

人気記事

generate_popular_entries_tagを子テーマのfunctions.phpにコピーして修正
※2,3,16,66-91,95行が修正箇所になります。

//人気ランキングリストの取得
if ( !function_exists( 'generate_popularsnipet_entries_tag' ) ):
function generate_popularsnipet_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,
    'snipet' => 1,  //追加
  ), $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.'" />';
      }

      ?>
  <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', false);
        $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  //スニペット追加↓
        if ($snipet) {
            //global $post;
            $post_data = get_post($post->ID);

            //メタディスクリプションの取得
            $snipetdata = get_the_page_meta_description($post->ID);

            //投稿管理画面の抜粋を取得
            if (!$snipetdata) {
              $snipetdata = $post_data->post_excerpt;
            }
            //All in One SEO Packのメタディスクリプションを取得
            if (!$snipetdata) {
              $snipetdata = get_the_all_in_one_seo_pack_meta_description($post->ID);
            }
            //記事本文の抜粋文を取得
            if (!$snipetdata) {
              $snipetdata = get_content_excerpt($post_data->post_content, get_entry_card_excerpt_max_length());
            }
            $snipetdata = preg_replace('/\n/', '', $snipetdata);
            echo '<br><div class="popular-entry-card-snippet widget-entry-card-snippet card-snippet">';
            echo $snipetdata;
            echo '</div>';
          }
        ?>
        <?php if ($pv_visible): ?>
          <span class="popular-entry-card-pv widget-entry-card-pv"><?php echo $pv == '1' ? $pv.' view' : $pv.' views';?></span>
        <?php endif ?>
        <?php generate_widget_entry_card_date('snipet', $post->ID); ?>
      </div><!-- /.popular-entry-content -->
    </div><!-- /.popular-entry-card -->
  </a><!-- /.popular-entry-card-link -->

  <?php
  $i++;
  endforeach;
  else :
    echo '<p>'.__( '人気記事は見つかりませんでした。', THEME_NAME ).'</p>';//見つからない時のメッセージ
  endif; ?>
  </div>
<?php
}
endif;
アイコン

新着人気記事一覧ver1.9.1

1 ファイル 3.73 KB
全5 function

文字コード：UTF-8N　改行コード：CR+LF

使い方

標準の新着／人気記事一覧の使い方と同じですが、ともにsnipetの有無をオプション(引数)で指定できます。
またもともと標準で設定されているオプション(引き通)及びver1.8.9.4からver1.9.1で追加されたオプションも同様に使用できるるようにしている認識です。

新着記事一覧：［newsnipet_list snipet=1］　人気記事一覧：［popularsnipet_list snipet=1］

  • snipet=1がデフォルトになるのでオプション(引数)は省略できます。
  • 上記[]は全角になっていますので、そのままコピペはできません。
新着記事一覧：［newsnipet_list snipet=0］　人気記事一覧：［popularsnipet_list snipet=0］
  • スニペットと作成日、変更日を表示しない場合
  • 上記[]は全角になっていますので、そのままコピペはできません。

以上、ご報告申し上げます。

スポンサーリンク