こんにちは、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 でブログ投稿の記事一覧を表示するを作成したので、そのソースコードをシェア。
コピペで使えるのでよければどうぞ。
