PR
スポンサーリンク

ターム付カスタム投稿 一覧をショートコードで好きなところに表示

SHORTCODE ワードプレス関連
この記事は約5分で読めます。

カスタム投稿の一覧をショートコードで好きなところに表示できればと思いいろいろと調べていたところとても参考になるサイトを見つけたので早速設定してみることにしました。

スポンサーリンク

ショートコードの編集

今回はとても分かりやすいhirashimatakumi.comさんご紹介の内容を参考にさせていただき、そこにちょっと付け加えて、タイトルの前にターム(カテゴリー?)の表示もさせることにしました。
初心者なのでおかしいところもあるかもしれませんがとりあえず動いているので…。

PHPの記述

下記内容を子テーマ等のFunction.PHP に張り付け

/*カスタム投稿 一覧 ターム付 ショートコード */
function shortcode_post_list($atts) {
  extract(shortcode_atts(array(
    'num' => '3', // 初期設定 表示件数
    'post_type' => 'post' // 初期設定 投稿タイプ
  ), $atts));
  global $post; 
  $args = array( 
  	'posts_per_page' => $num, // 表示件数
  	'post_type'      => $post_type, // 投稿タイプ
  	'post_status'    => 'publish' // 投稿ステータス
	  );

	$posts_array = get_posts($args); // 投稿情報を取得

	
  $html = '<ul>';

	  foreach($posts_array as $post): 
	$terms = get_the_terms($post->ID, 'category_news'); //設定しているタクソノミー名
             foreach ($terms as $term) {
        $term_slug = $term->slug; // CSS クラス指定用
	}

    setup_postdata($post); // 投稿のセットアップ
	$html .= '<li>';
    $html .= get_the_date().'<span class= '.$term_slug.' >'.get_the_term_list($post->ID,'category_news').'</span>'."&nbsp". '<a href="'.get_permalink().'">'.get_the_title().'</a>'; 
	$html .= '</li>';

  endforeach; 
  $html.='</ul>';
  wp_reset_postdata(); 
  return $html;
}
add_shortcode('post_list', 'shortcode_post_list');

追記したところ
1つ目は、19-23行目の部分
タームのSlugを取得するために追記。

  foreach($posts_array as $post): 
	$terms = get_the_terms($post->ID, 'category_news'); //設定しているタクソノミー名
             foreach ($terms as $term) {
        $term_slug = $term->slug; // CSS クラス指定用
	}

※ ‘category_news’の部分を必要に応じて付け替えてください。

そして2つ目は、27行目のところで CSSのClassをタームのSlugで指定できるように<span class= ‘.$term_slug.’>、リンク付ターム名を表示するために、.get_the_term_list($term->ID,’category_new’)を追記しています。

 $html .= get_the_date().'<span class= '.$term_slug.' >'.get_the_term_list($post->ID,'category_news').'</span>'."&nbsp".

※ category_news’の部分を必要に応じて付け替えてください。
“&nbsp”はスペースを入れるために追記しています。

CSS 追記

クラス別に装飾を行います。
PHPに記述でターム別にクラス指定がされるのですが、CSSはあらかじめターム別で設定することにしました。
サンプルを記載しておきます。

CSS
.hawaii-news a
 {
        background-color: #e0ffff;
	border: 2px solid #2f5fff;
	border-radius: 12px;
        font-size     : 8pt;
        text-decoration:none

}

.news1 a
 {
	background-color: #ffeaff;
	border: 2px solid #ff00ff;
	border-radius: 12px;
        font-size     : 8pt;
        text-decoration:none

}

get_the_term_listを使うとリンクとしてアンダーラインも表示されるので
text-decoration:noneでアンダーラインを非表示にしています。

ショートコード

ショートコードは
[post_list num="表示したい記事数" post_type="投稿タイプ"]となります。
ちなみに
[post_list num="8" post_type="news"] とするとこんな感じで表示されます。

カスタム投稿の設定についてはこちらを参考ください。

コメント

x  Powerful Protection for WordPress, from Shield Security
このサイトは
Shield Security によって保護されています →
タイトルとURLをコピーしました