WordPress｜プラグイン無しで新着情報を表示するPHPの作り方

Wordpress
2018.11.19

プラグインを使用せずに、新着情報を表示するPHPの作り方を紹介します。
このPHPを使えば、どこでも好きな場所に新着情報を表示することが可能です。

スポンサーリンク

新着情報のサンプル

最新の更新情報を読み込むPHP

<!-- post_list contents -->
<div class="news_lists">
	<?php
	$args = array( 'posts_per_page' => 5, // ←載せたい投稿記事の数
	'category_name' => 'category',);// ←載せたいカテゴリー名を選択
	$the_query = new WP_Query( $args );
	if ( $the_query->have_posts() ):
	?>
	<?php
	while ( $the_query->have_posts() ): $the_query->the_post();
	?>

	<?php
	$cat = get_the_category(); // カテゴリー取得
	$catname = $cat[ 0 ]->cat_name;
	$catslug = $cat[ 0 ]->slug;
	$catId = $cat[ 0 ]->cat_ID; // ID取得
	$category = get_the_category();
	$link = get_category_link( $catId ); // リンクURL取得
	?>

	<article class="news_list <?php echo $catslug; ?>">
		<div class="list__body">
			<!--日時-->
			<span class="list__date">
				<?php the_time('y.m.d'); ?>　
			</span>
			<!--カテゴリー-->
			<span class="list__category list__<?php echo $catslug; ?>">
				<a href="<?php echo esc_url( $link ); ?>">
					<?php echo $catname; ?>
				</a>
			</span>
			<!--記事タイトル-->
			<div class="list__title">
				<a href="<?php the_permalink(); ?>">
					<?php the_title(); ?>
				</a>
			</div>
			<!--記事サムネイル-->
			<div class="list__thumb">
				<a href="<?php the_permalink(); ?>">
					<?php the_post_thumbnail('full'); ?>
				</a>
			</div>
		</div>
	</article>
	<?php
	endwhile;
	endif;
	// 投稿データをリセット
	wp_reset_postdata();
	?>
</div>

CSS

/*新着情報*/
.news_lists {
  font-size: 15px;
}

.news_list {
  border-bottom: 1px dashed #888;
  position: relative;
}

.list__body {
  display: block;
  margin: 10px 0 5px;
  line-height: 1.6;
}

.list__date {
  color: #9f5900;
  width: 100%;
  margin: 0;
  text-align: left;
}

.list__title a {
  color: #2D2D2D;

  text-decoration: none;
}

.list__thumb {
  overflow: hidden;
  width: 100px;
  height: 55px;
  right: 1%;
  position: absolute;
  margin-top: -55px;
}

.list__thumb img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 480px) {
  .list__ {
    /* @include mq(large) */
  }
  .list__thumb img {
    display: none;
  }
  .list__date {
    float: left;
  }
  .list__title {
    display: block;
    width: 100%;
    margin-top: 5px;
  }
  .list__body {
    display: contents;
  }
}

.list__category {
  position: relative;
  top: -2px;
  padding: 5px 15px;
  margin-left: 10px;
  background: #AAAAAA;
  color: #fff;
  font-size: 0.8em;
  line-height: 25px;
}

.list__category a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

.list__category a:hover {
  color: #efefef;
}

.list__wordpress {/*.list__〇〇←カテゴリー名を変えて、カテゴリー別に色を修正可能*/
  background-color: #42b8ef;
}
スポンサーリンク

コメント