【WordPress】ブログ投稿記事一覧のサンプル【レスポンシブ】

【Wordpress】ブログ投稿記事一覧のサンプル【レスポンシブ】 WordPress

こんにちは、mickです。

最近、Wordpress の LP(ランディングページ)でブログ投稿の記事一覧を表示する部分を作成。
せっかく作ったのでシェアすることにしました。

ここでは次のようなものが出来上がります。
(レスポンシブ対応のため、ウィンドウのサイズを変えると変化します)

サンプルコード(コピペOK)

サンプルコードは、こちらです。
ひとつは、HTML(とPHP)、もうひとつは CSS です。
両方ともコピペで使えます。

HTML(とPHP)

HTML に PHP を使って、Wordpress の記事のタイトル( the_title() )や投稿の日付( the_time(‘Y.n.j’) )、投稿へのリンク( the_permalink() )を埋め込んでいます。

<section class="news">
<div class="news_inner">
<hr class="news_inner_line"/>
<ul class="news_inner_list">
	<?php
	            $args = array(
	                'post_type' => 'post', /* 投稿タイプ */
	                'paged' => $paged,
	                'order' => 'DESC',
	                'posts_per_page' => 4 /* 表示記事数 */
	            );
	            query_posts( $args );
	            if (have_posts()) :
	                while (have_posts()) : the_post();
	            ?>
	<li><time><?php the_time('Y.n.j'); ?></time><br class="news_responsive"/><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
	<?php
	            endwhile;
	            endif;
	            ?>
</ul>
<hr class="news_inner_line"/>
</div>
</section>

CSS

CSS の部分です。
レスポンシブ対応のため、メディアクエリの記述を使っています。
結果として、CSSコードが長い。

.news {
	width: 100%;
}
.news hr {
	border-top: 1px solid #291e1e;
}
.news_inner_line {
  width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.news_inner_list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.news_inner_list li {
	padding: 12px 24px 12px 34%;
	position: relative;
	font-size: 1.2rem;
}
.news_inner_list li:last-child {
}
.news_inner_list time {
	color: #291e1e;
	font-weight: 700;
	left: 15%;
	position: absolute;
	top: 12px;
}
.news_inner_list a {
    color: #291e1e;
}
.news_inner_list a:hover {
    opacity: 0.5;
	  transition: 0.3s;
}
.news_responsive {
  display: none;
}
.news_inner_foot {
  text-align: right;
  width: 100%;
	padding-right: 5%;
}
.news_inner_foot img:hover {
	opacity: 0.5;
	transition: 0.3s;
}
.news_inner_foot img {
  width: 135px;
}

@media (max-width:830px) {
	.news_inner_list li {
		font-size: 1rem;
	}
}
@media (max-width:640px) {
.news_responsive {
  display: inline-block;
}
	.news_inner_list li {
		padding-left: 15%;
		line-height: 1.5;
	}
		.news_inner_list time {
			font-weight: 400;
	}
.news_inner_foot img {
  width: 100px;
}
}

まとめ。

WordPress でブログ投稿の記事一覧を表示するを作成したので、そのソースコードをシェア。
コピペで使えるのでよければどうぞ。

参考URL:WordPressの投稿日と記事タイトルを反映させてお知らせ欄を作ろう!【html→php】 | ずくろぐ

タイトルとURLをコピーしました