2020.4.12

wordpressで新着情報一覧ページを作る【ループ処理/投稿】

  • CSS
  • php
  • WEB
wordpressで新着情報一覧ページを作る【ループ処理/投稿】

wordpressで投稿した記事の一覧のページを作る手順を説明しています。コードをそのままコピぺするだけでOKです。ソースコードの後にそれぞれのコードの解説をしています。

 

一覧ページを作成る手順

  1. 固定ページを作る
  2. phpファイルを作る
  3. 表示したい項目を決めてcssで整える

 

固定ページを作る

まずは固定ページを作ります。

固定ページ > 新規追加

パーマリンクを任意の名前で変更しておきます。newsとか、blogとかがわかりやすいネーミングかもしれません。ここではblog-testとしています。

wordpressで新着情報一覧ページを作る【ループ処理/投稿】

 

phpファイルを作る

次にphpファイルを作ります。ファイル名は先ほど作った固定ページのパーマリンク(スラッグ名)と同じにします。

page-スラッグ名.phpです。

wordpressで新着情報一覧ページを作る【ループ処理/投稿】

 

作成したphpファイルの中身を書いていきます。投稿した記事をページに表示させるには、ループ処理という方法を使います。コードの説明については最後に記載していますので、とりあえず以下のコードをphpファイルにコピペしてください。

php

<?php
$args = array(
'posts_per_page' => -1,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ): ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('thumbnail'); ?></div>
<?php the_time( 'Y/m/d' ); ?><br />
<?php the_title(); ?></a>
<?php endwhile; ?>
<?php else: ?>
<p>新しい記事はありません</p>
<?php endif; ?>

 

コード解説

コードを1行ずつ解説していきます。

 

$args = array今から設定を書いていくよ、という記述です。この中に記事を表示させる際の設定を書いていきます。

 

'posts_per_page' => -1投稿を何件表示するか、という設定です。-1が全件表示で、設定しなければデフォルトで10件となります。

 

WordPressのメニューより、設定 > 表示設定で「1ページに表示する最大投稿数」からも設定可能ですが、これだと各ページごとに表示件数を設定できません。

 

例えば、「トップページには新着情報を3件だけ表示させて、一覧のページには10件表示したい」というふうな場合です。

 

'order' => 'DESC'投稿を表示する順番です。

‘DESC’は降順(大きい順)、ASCが昇順(小さい順)です。

 

'orderby' => 'post_date'投稿を表示する順番の定義です。’post_date’は日付に基づいて表示されます。
つまり、
'order' => 'DESC',
'orderby' => 'post_date',
だと、日付の降順(投稿した日付の新しい順)に表示されるということになります。

 

'post_type' => 'post'どこからデータを取得するかという設定です。
postは投稿から取得してね、という意味。

 

'post_status' => 'publish'どのステータスの記事を公開するかということ。
publishは公開設定になっている記事を表示させますよ、という意味です。

他にも、予約投稿:future、下書き:draft、保留:pending/レビュー待ち、非公開:privateなどの設定ができます。

 

$the_query = new WP_Query($args)上記で設定した内容ををループ処理で使うための定義文です。

 

ループ処理の表記

<?php if ( $the_query->have_posts() ): ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

//ここにループで表示させたい項目を書く
<?php endwhile; ?>
<?php else: ?>
<p>新しい記事はありません</p>
<?php endif; ?>

 

ここから投稿記事のループ処理になります。ループ処理させることで、投稿した記事が一覧となって表示されます。

 

具体的な表示項目として

<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('thumbnail'); ?>
<?php the_time( 'Y/m/d' ); ?>
<?php the_title(); ?></a>

などを設定しておけばいいかと思います。

 

<a href="<?php the_permalink(); ?>">記事のリンク

 

<?php the_post_thumbnail('thumbnail'); ?>アイキャッチの表示

 

<?php the_time( 'Y/m/d' ); ?>投稿された日付

 

<?php the_title(); ?></a>記事のタイトル

 

うまく表示されていることを確認できたら、あとはCSSで見た目を整えていくだけです。タイトルにあたる部分を<h2></h2>なんかで囲んであげるといいかもしれません。

 

最終的なphpコード例↓

 

お疲れ様でした。

Share Please

Read this too