ブログを一覧表示するphp

ブログを一覧表示するPHPをメモとして残しておきます。

これはWPのサイトのトップページで使用していたコードです。

制作しているページでは必要なくなりましたが、また作り直すのが面倒であるためここに残すことにしました。

<?php
global $post;
$cat_slug = 'blog'; // カテゴリーのスラッグ
$cat_posts = get_posts(array(
'post_type' => 'post', // 投稿タイプ
//'category' => 1, カテゴリIDを番号で指定する場合
'category_name' => $cat_slug, // カテゴリをスラッグで指定する場合
'posts_per_page' => 6, // 表示件数
'orderby' => 'date', // 基準になる表示順
'order' => 'DESC', // 昇順・降順
'post_author' => '1,2,3' // 昇順・降順

));

if($cat_posts):
foreach($cat_posts as $post):
setup_postdata($post);
?>

<!– ここから先は各々のフォーマットで利用 –>
<div class="b-list">
<span class="date"><?php the_time('Y年m月d日'); ?></span> <span class="sp-none">｜</span> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>　 <span class="small-f">（<?php the_author(); ?>）</span><br />
</div>
<?php
endforeach;
endif;
// ループ後のリセット処理
wp_reset_postdata();
?>

<div align="center">
<a href="/blog/" class="bloglistbutton">BLOG一覧</a>
</div>

</div>

</section>　

CSSは以下のような感じ・・・のはず。

.blog-list-area , .top-news a{
text-decoration:none;
}

.top-news-area span.date {
color: #444;
font-weight: bold;
padding-right: 12px;
color: #af1e23;
}

.top-news-area .top-news {
border: 2px solid #edebf0;
border-radius: 6px;
padding: 15px 30px;
margin-bottom: 30px;
text-align:center;
margin-top: 50px;
font-size: 90%;
}

.blog-list-area .blog-list {
border: 2px solid #edebf0;
border-radius: 6px;
padding: 15px 30px;
margin-bottom: 50px;
}

.blog-list-area span.date {
color: #444;
font-weight: bold;
padding-right: 12px;
color: #af1e23;
}

.b-list {
text-align: left;
border-bottom: 1px solid;
padding: 15px 0;
font-size: 90%;
}

.b-list a{
text-decoration: none;
color: #000;
}

.blogmaintitle {
padding-bottom: 25px;
text-align: center;
}

.blogtitle {
font-size: 25px;
border-bottom: 0px solid #7cb545;
font-weight: bold;
font-family: source-han-serif-japanese,serif;
}

.bloglistbutton {
border: 1px solid #333;
padding: 0.45em 1em;
border-radius: 3px;
cursor: pointer;
transition: all .25s;
margin: 20px auto 10px auto;
box-sizing: border-box;
max-width: 55%;
display: block;
font-weight: 700;
font-size: 80%;
color: #000;
text-align: center;
text-decoration: none;
position: relative;
}

.bloglistbutton:after {
content: "\f054";
font-family: "Font Awesome 5 Free";
position: absolute;
right: 24px;
margin: auto;
vertical-align: middle;
width: 0.4em;
height: 0.4em;
}

.bloglistbutton:hover {
background-color: #444;
color: #fff;
}

@media screen and (max-width: 768px){
.bloglistbutton {
border: 1px solid #333;
padding: 0.45em 1em!important;
border-radius: 3px;
cursor: pointer;
transition: all .25s;
margin: 20px auto 10px auto;
box-sizing: border-box;
max-width: 55%;
display: block!important;
font-weight: 700;
font-size: 80%;
color: #000;
text-align: center;
text-decoration: none;
position: relative;
}
}