つぶやき
-ブログ-

WordPressの記事一覧を表示する方法|WordPressループを作成しよう

2022年2月16日
  giv_design

WordPressに記事一覧を表示させるには、WordPressループを作成する必要があります。

そしてループ内でタイトルやアイキャッチ画像を表示させる際には、テンプレートタグの記述も必要です。今回はWordPressループを作成する方法や、ループ内で使うテンプレートタグについて解説します。


WordPressループの作成

WordPressループを作成すると、下記の画像のように記事一覧を表示できます。下記の画像のサイトでは3つの記事を表示するように設定しています。

サンプルサイトのキャプチャー

上記の画像のサイトの記事一覧は、下記のコードで実装しています。本記事は下記のコードに触れながらループの作り方を解説しています。CSSファイルも合わせて載せているので、参考にしてみてください。

<div class="blog-content">
    <h2 class="blog-content-title">
        最新情報
    </h2>
    <?php if (have_posts()) : ?>
        <ul class="blog-box">
            <?php while (have_posts()) : the_post(); ?>
                <li>
                    <div class="blog-image">
                        <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail(''); ?>
                        </a>
                    </div>
                 
                        <div class="category">
                            <?php the_category(); ?>
                        </div>
                        <time class="blog-meta" deta-time="<?php the_time('Y-m-d'); ?>">
                             <?php the_time('Y-m-d'); ?>
                        </time>
                 
                    <h2 class="blog-title">
                        <a href="<?php the_permalink(); ?>">
                           <?php the_title(); ?>
                        </a>
                    </h2>
                    <div class="blog-desc"><?php the_excerpt(); ?></div>
                <?php endwhile; ?>
                </li>
        </ul>
    <?php endif; ?>
</div>

.blog-content .blog-content-title {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.blog-content .blog-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 900px;
  margin: 0 auto;
}

.blog-content .blog-box li:first-child {
  margin-left: 0px;
}

.blog-content .blog-box li {
  list-style: none;
  margin-left: 20px;
}

.blog-content .blog-box li .blog-image {
  width: 100%;
  height: 150px;
}

.blog-content .blog-box li .blog-image a img {
  width: 100%;
  height: 150px;
}

.blog-content .blog-box li .category {
  font-size: 14px;
}

.blog-content .blog-box li .category ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-flex: wrap;
      -ms-flex: wrap;
          flex: wrap;
  margin-top: 15px;
  margin-bottom: 10px;
}

.blog-content .blog-box li .category ul li {
  margin-left: 5px;
}

.blog-content .blog-box li .category ul li a {
  text-decoration: none;
  color: #95d4ec;
  border: solid 1px #95d4ec;
  padding: 5px 10px;
  font-weight: bold;
}

.blog-content .blog-box li .blog-meta {
  margin-left: 5px;
  font-size: 14px;
}

.blog-content .blog-box li .blog-title {
  margin-top: 10px;
  font-size: 16px;
}

.blog-content .blog-box li .blog-title a {
  text-decoration: none;
  color: black;
}

.blog-content .blog-box li .blog-desc {
  margin-top: 5px;
  font-size: 14px;
}

.blog-content .blog-box li .blog-continu {
  margin-top: 5px;
  font-size: 14px;
}

.blog-content .blog-box li .blog-continu a {
  text-decoration: none;
  color: black;
}

ではWordPressループに関わるコードを1つずつ触れていきましょう。

<?php if (have_posts()) : ?>

記事があるかどうかを確認するための記述です。記事があれば次の行のループ処理へ移ります 。


<?php while (have_posts()) : the_post(); ?>

「記事が存在するだけループする」という処理をするための記述です。

<?php endwhile; ?>

 </li>

 </ul>

 <?php endif; ?>

「endwhile」や「endif」は、while文とif文を終了させるために必要な記述です。この記述をしないとエラーが起きて、画面が表示されなくなるので、忘れずに記述しましょう。


記事の投稿数の設定する方法

人によって記事一覧で表示する記事を10つにしたい、5つにしたいなど、表示したい記事の数はそれぞれです。表示させたい記事の数はWordPressの管理画面から設定できます。設定するには「設定」→「表示設定」を開いて、ホームページの表示を「最近の投稿」にして「1ページに表示する最低投稿数」を指定の数にしましょう。設定が決まったら「変更を保存」をクリックしてください。

表示設定画面

今回は上記の画像のように3つの記事に設定しました。


ループ内ではテンプレートタグの記述も必要

さきほどのWordPressループの記述で「< ?php the_permalink(); ? >」や「< ?php the_post_thumbnail(''); ? >」というような、「?Php the~」から始まる見慣れないコードがありましたよね?

こちらのコードはテンプレートタグといって、WordPressループを作成するのに欠かせないものです。テンプレートタグを記述することで、記事のリンクやタイトルを表示してくれます。ここではループ内で使うテンプレートタグを紹介します。

記事のリンクやタイトル、抜粋を表示するテンプレートタグ

記事のリンクやタイトル、抜粋は次のテンプレートタグで表示できます。

  • < ?php the_permalink(); ? >」では記事のリンクを表示
  • < ?php the_title(); ? >」では記事のタイトルを表示
  • < ?php the_excerpt(); ? >」では記事の抜粋を表示

下記のコードは記事のタイトルを表示させて、記事のリンクを貼っている記述です。

<h2 class="blog-title">
  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<div class="blog-desc"><?php the_excerpt(); ?></div>

また抜粋の「< ?php the_excerpt(); ? >」ですが、表示できる文字の長さは55文字と決まっています。もしこの文字数を自由に設定したい場合は、functions.phpに以下の記述をしましょう。

function custom_excerpt_length( $length ) {
     return 20;	
}	
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );


上記の記述では20文字を上限にしています。この20の数字を変更すると、好きな文字の数に設定できます。


記事のカテゴリーと投稿時刻を表示するテンプレートタグ

記事のカテゴリーと投稿時刻は次のテンプレートタグで表示できます

  • カテゴリーを表示させるには< ?php the_category(); ? >
  • 記事の投稿時刻を表示させるには< ?php the_time(''); ? >
<div class="category-time">
   <div class="category"><?php the_category(); ?></div>
   <time class="blog-meta" deta-time="<?php the_time('Y-m-d'); ?>"><?php the_time('Y-m-d'); ?></time>
</div>

< ?php the_time(''); ? >では自由に書式が変えられます。例えば、< ?php the_time('Y-m-d'); ? >なら2022-2-1と表示され、< ?php the_time('Y年m月d日'); ? >なら2022年2月1日と表示されます。

timeタグにはdeta-time属性を指定することを推奨されていますが、こちらもテンプレートタグの記述で指定できます。


アイキャッチ画像を表示するテンプレートタグ

アイキャッチ画像はデフォルトでは利用できないようになっています。アイキャッチ画像を使えるようにするには、functions.phpに下記の記述をする必要があります。

<?php
add_action('init', function() {
    add_theme_support('post-thumbnails');  
});

functions.phpに上記の記述をしたら<?php the_post_thumbnail(”); ?>と記述すればアイキャッチ画像が表示されます。

<div class="blog-image">
 <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(''); ?></a></div>

また下記の記述でアイキャッチ画像の大きさも指定できます。

<?php the_post_thumbnail(array(100,100));

このようにWordPressループを作成すると記事一覧を表示できます。またテンプレートタグでは記事のタイトルやアイキャッチ画像、リンクなど出力できるのでループと合わせて使ってみましょう。


GIV株式会社は、埼玉県川越市にあるWEB(ホームページ)制作会社です。

お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。


制作に関する
ご相談はこちら