ズボラ応援ブログ始めました

WordPressでランダムに取得した記事をトップページにピックアップ記事として表示する

WordPressでサイトのトップページのデザインをインパクトあるものにしたいなーと思ったときのカスタマイズです。

上の画像のように、マガジンサイトでよく見るようなデザインにしていきます。

ランダムに記事を取得する方法

下記のコードを、ランダム記事を表示させたい場所に記述します。

<?php if(is_home()){ ?>
<div class="pickup">
<div class="pickup-inner">
<?php
$args = array(
'numberposts'   => 3,
'orderby'       => 'rand'
);
$rand_posts = get_posts( $args );
?>
<?php foreach ( $rand_posts as $rand_post ) : ?>
<?php $rand_post_id = $rand_post->ID; ?>
<div class="pickup-content">
<a href="<?php echo get_permalink( $rand_post_id ); ?>"><?php echo get_the_post_thumbnail( $rand_post_id,'full' ); ?>
<div class="pickup-title"><?php echo get_the_title( $rand_post_id ); ?></div>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
<?php } ?>

get_postsとは

get_postsは指定したパラメータを条件に、投稿を取得する関数です。

今回は取得件数(numberposts)と取得順(orderby)を指定しました。取得順にrandを指定すると、投稿をランダムに取得できます。


ピックアップ記事のデザイン設定

cssファイルに下記の内容を追記します。

.pickup{
background: #f4f4f4;
border-bottom: 1px solid #e9e9e9;
border-top: 1px solid #e9e9e9;
margin-bottom: 20px;
}
.pickup-inner{
max-width:1024px;
margin: 0 auto;
padding:20px 0;
display:table;
table-layout:fixed;
}
.pickup-content{
position:relative;
display:table-cell;
vertical-align:top;
}
.pickup-title{
position:absolute;
bottom:0;
left:0;
background-color: rgba(0,0,0,0.4);
color: #fff;
padding: 10px;
width: 100%;
}
.pickup-inner img {
display: block;
}
タイトルとURLをコピーしました