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

@niketcha

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

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

Sponsored Link

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

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

php
<?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ファイルに下記の内容を追記します。

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;
}

-ウェブサイト構築, word press

コメントを残す

お名前もメールも入力は任意です。お気軽に指摘や質問などしていただけると嬉しいです。

Gravatarに登録すると、お好きな画像をアバターに設定できます。

Copyright© ニケッチャニッキ , 2017-2019 All Rights Reserved.