カテゴリによる関連記事リストの下に「もっと読む」リンクを付ける

@niketcha

WordPressで関連記事リストと、「○○(カテゴリ名)に関する記事をもっと読む」というリンクを表示する方法です。プラグインを使わずに表示します。リンクをクリックするとカテゴリ別記事一覧に飛ぶようにします。

下の画像が見本です。

Sponsored Link

PHPの追加

関連記事を表示したい箇所に下記のコードを追記します。

<p class="headline">関連する記事</p>
<div class="related-list">
<?php
    $category = get_the_category()[0];
    $args = array(
            'posts_per_page' => 3, // 表示件数
            'category'       => $category->term_id,
            'exclude'        => $post->ID,// 現在の投稿を除外
    );
    $posts = get_posts( $args );
    if($posts){
        foreach ( $posts as $post ): // ループの開始
            setup_postdata( $post ); // 記事データの取得
?>
            <div class="post-info">
                <div class="imgcell">
                    <!-- サムネイルの表示 -->
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'thumbnail' ); ?></a>
                </div>
                <div class="titlecell">
                    <!-- タイトルの表示 -->
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </div>
            </div>
<?php
        endforeach; // ループの終了
        wp_reset_postdata(); // 直前のクエリを復元する 
        echo '<p><a href="' . home_url() . '/category/' . $category->slug . '">' . $category->cat_name . 'に関する記事をもっと見る</a></p>';
    }else{
        echo '<p>関連記事はまだ投稿されていません。</p>';
    }
?>
</div>

cssの設定

cssに下記の内容を追加します。

.headline {
    font-size: 16px;
    font-weight: bold;
}
.related-list{
    margin-left:20px;	
}
.post-info{
    display:table;
    font-size:12px;
    border-bottom: 1px dotted #e9e9e9;
    margin-bottom: 5px;
    padding-bottom:5px;
}
.post-info .imgcell{
    display:table-cell;
    width:50px;
}
.post-info .imgcell img{
    width:50px;
    height:50px;
    object-fit:cover;
}
.post-info .titlecell{
    display:table-cell;
    padding-left:10px;
    vertical-align:top;
}

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

コメントを残す

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

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

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