WordPress
カスタマイズ事例

WORDPRESS CUSTOMIZATION

カテゴリ、アイキャッチ付きの投稿の一覧を表示する テーマ販売あり

TOPページにニュースの一覧を表示しているサイトをよく見かけます、というかほとんどです。

そこでここでは、

・ニュース(投稿)へのリンクとタイトル
・カテゴリごとに背景色を設定したカテゴリタグ
・アイキャッチ画像

を1セットとして、最新順に一覧として表示する方法をご紹介します。

テーマのfunctions.phpに下記を記述します。

if ( ! function_exists( 'display_news' ) ){
function display_news() {
	$posts_news = get_posts( array(
		'post_status' => 'publish',
		'category'    => '1', //カテゴリID
		'posts_per_page' => 2, //件数
	) );

	$html = '';

	if ( $posts_news ) {
		$html = '<ul>';

		foreach ( $posts_news as $p ) {
			setup_postdata( $p );

			$time          = get_post_time( 'Y年m月d日', false, $p->ID );
			$news_cat      = get_the_category( $p->ID );
			$news_cat_link = get_category_link( $news_cat[0]->term_id );
			$news_cat_name = $news_cat[0]->cat_name;
			$news_cat_slug = $news_cat[0]->slug;
			$news_image    = get_the_post_thumbnail( $p->ID, "large" );

			$html .= '<li>
			<a href="' . get_the_permalink( $p->ID ) . '">' . $news_image . '</a>
			<a href="' . $news_cat_link . '" class="news-tag bg-' . $news_cat_slug . '">' . $news_cat_name . '</a>
			<span>' . $time . '</span><br>
			<a href="' . get_the_permalink( $p->ID ) . '">' . get_the_title( $p->ID ) . '</a>
			</li>';
		}
		$html .= '</ul>';
	}
	wp_reset_query();

	return $html;
}

add_shortcode( 'display_news', 'display_news' );
}

あとはWordPressの投稿欄(投稿や固定ページ)でショートコード

display_news

を呼び出せば完成。([ ]で囲うこと)

【この事例を解決するためのWordPressテーマを購入できます】

現在あなたが利用されているWordPressテーマを活かしたまま、このページの事例を解決できるWordPressテーマを、子テーマとして購入できます。
この子テーマを有効化するだけで、現在お使いのデザインテーマにこの事例解決の機能が自動付与されます。
デザインが入っていないため、一般より格段に低い価格(事例の難易度により200円~1.3万円)です。
※ テーマは買い切りです
※ 自由に改変してお使いいただいて構いません
※ すでに子テーマでサイト運用されている方は、当該子テーマをマージしてください

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!