WPテーマ作成でTOPページに記事一覧を表示させる【プラグイン無し】

Programming
2021.01.10

今回は、WordPress（ワードプレス）のテーマ作成で、プラグインを使用せずに投稿から作成した記事をTOPページで読み込んで表示させる方法を紹介します。CMSを使用する最大のメリットでもあるので必ず覚えましょう。

TOPページに記事一覧を表示させる方法【プラグイン無し】

TOPページに記事一覧を取得するにはindex.php（TOPページ用のテンプレート）を使用します。

テンプレートの基礎構成に関しては以下の記事を参照下さい。

ワードプレスのテーマに必要なphpファイルの構造と作り方
今回の記事はWordPress（ワードプレス）のテーマ作成に必要なphpファイルの構成を解説します。また最後には今回解説するファイルデータを一式無料提供します。
kt-life.net
2021.01.09

早速ですが、以下の記述が記事一覧を取得して表示させる内容です。そのままindex.php（TOPページ用のテンプレート）貼り付けても動作すると思います。見た目に関しては次のCSSで整えています。
*phpに理解の無い人は安易にコピペするのはやめて下さい。

<!-- 記事一覧 -->
<div class="container kijiitirann">
<?php
$information= get_posts( array(
'post_type' => 'post',
'posts_per_page' => 6　//ここで取得条件を指定する
));
if( $information):
?>
<ul class="kijiitirannblok">
<?php
foreach( $information as $post ):
setup_postdata( $post );
?>
<li>
<!-- サムネイル 取得-->
<?php if ( has_post_thumbnail() ): ?>
<?php echo the_post_thumbnail(); ?>
<?php else: ?>
<img src="ここに代替画像のURL">
<?php endif; ?> 
<!-- 記事取得 -->
<span class="kiji_category"><?php the_time('Y年n月j日'); ?> - <?php the_category(', '); ?></span> <br> <h5><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h5>
<div class="excerpt"><?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" class="btn btn-primary">詳しく見る</a>
</div>
</li>
<?php
endforeach;
wp_reset_postdata();
?>
</ul>
<?php else: ?>
<p>表示できる情報はありません。</p>
<?php endif; ?>
</div>
<!-- 記事一覧 end-->

解説

5行目（以下）の記述では、「post」のタイプのpostデータ＝WP標準の記事一覧データを取得する事を宣言しています。その条件に6記事としています。

<?php
$information= get_posts( array(
'post_type' => 'post',
'posts_per_page' => 6　//ここで取得条件を指定する
));
if( $information):
?>

14行目（以下）の記述では、postデータ＝記事データが存在すれば次を読み込んで下さい。という意味。

<?php
foreach( $information as $post ):
setup_postdata( $post );
?>

20行目（以下）の記述では、サムネイルを表示させます。投稿のアイキャッチ画像が設定されていればそれを表示します。存在しなければ代替画像を入れます。

<! – サムネイル 取得-->
<?php if ( has_post_thumbnail() ): ?>
<?php echo the_post_thumbnail(); ?>
<?php else: ?>
<img src="ここに代替画像のURL">
<?php endif; ?>

28行目（以下）の記述では、表示させる内容をHTMLとPHPで作成しています。

<! – 記事取得 -->
<span class="kiji_category"><?php the_time('Y年n月j日'); ?> - <?php the_category(', '); ?></span> <br> <h5><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h5>
<div class="excerpt"><?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" class="btn btn-primary">詳しく見る</a>
</div>
</li>

PHPで読み込める投稿データは以下の通り。

<?php the_time(‘Y年n月j日’); ?>投稿年月日
<?php the_category(‘, ‘); ?>カテゴリー
<?php the_permalink(); ?>投稿ページのURL
<?php the_title(); ?>投稿のタイトル
<?php the_excerpt(); ?>抜粋
<?php the_tags(”, ‘, ‘); ?>タグ

34行目（以下）の記述では、6記事読み込むまで処理をループさせてくれます。

<?php
endforeach;
wp_reset_postdata();
?>

41行目（以下）の記述では、記事が存在しなかったら読み込まれます。

<?php else: ?>
<p>表示できる情報はありません。</p>
<?php endif; ?>

CSS

上記のphpで読み込んだ記事一覧はhtmlのリスト形式で表示されます。そのままだと見た目が非常に残念な感じなのでCSSで整えてあげましょう。そのためにphpファイル上にもCSSのクラスを随所に入れています。

CSSの見本は以下です。

/* 記事一覧 */
  .kijiitirann img {
    width: 100%;
    max-height: 240px;
  }
  .kijiitirannblok {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-row-gap: 6px;
    grid-column-gap: 6px;
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  .kijiitirannblok li {
    box-sizing: border-box;
    margin: 10px;
  }
  .kijiitirann .kiji_category,
  .kijiitirann h5,
  .kijiitirann .excerpt p {   
    margin: 0px 10px 0px 10px;
  }
  .kijiitirann .excerpt p {
    font-size: 0.9em;
    color: #777;
  }
  .kijiitirann a {
    color: #333;
  }
  .excerpt {
    position: relative;
    height: 174px;
  }
  .excerpt a {
    color: white;
  }
  .btn-primary {
    position: absolute;
    bottom: 10px;
    left: 10px;
  }
  /* 記事一覧 end*/

すると以下のような形で記事一覧が読み込まれます。CSSに関しては好みで編集して下さい。

先程のphpをブラウザで読み込むと以下のHTMLに吐き出されます。6回読み込むまで中の要素を同じように読み込んでいます。

<div class="container kijiitirann">
<ul class="kijiitirannblok">
<li>
<!-- サムネイル -->
<img width="604" height="403" src="http://localhost/wp-content/uploads/2021/01/画像01.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="http://localhost/wp-content/uploads/2021/01/画像01.jpg 604w, http://localhost/wp-content/uploads/2021/01/画像01-300x200.jpg 300w" sizes="(max-width: 604px) 100vw, 604px"> 
<!-- 記事取得 -->
<span class="kiji_category">2021年1月9日 - <a href="http://localhost/category/uncategorized/" rel="category tag">未分類</a></span> <br> <h5><a href="http://localhost/%e3%83%86%e3%82%b9%e3%83%886/"> テスト6</a></h5>
<div class="excerpt"><p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテス […]</p>
<a href="http://localhost/%e3%83%86%e3%82%b9%e3%83%886/" class="btn btn-primary">詳しく見る</a>
</div>
</li>
<li>
<!-- サムネイル -->
<img width="604" height="403" src="http://localhost/wp-content/uploads/2021/01/画像01.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="http://localhost/wp-content/uploads/2021/01/画像01.jpg 604w, http://localhost/wp-content/uploads/2021/01/画像01-300x200.jpg 300w" sizes="(max-width: 604px) 100vw, 604px"> 
<!-- 記事取得 -->
<span class="kiji_category">2021年1月9日 - <a href="http://localhost/category/uncategorized/" rel="category tag">未分類</a></span> <br> <h5><a href="http://localhost/%e3%83%86%e3%82%b9%e3%83%885/"> テスト5</a></h5>
<div class="excerpt"><p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテス […]</p>
<a href="http://localhost/%e3%83%86%e3%82%b9%e3%83%885/" class="btn btn-primary">詳しく見る</a>
</div>
</li>
<li>
<!-- サムネイル -->
<img width="604" height="403" src="http://localhost/wp-content/uploads/2021/01/画像01.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="http://localhost/wp-content/uploads/2021/01/画像01.jpg 604w, http://localhost/wp-content/uploads/2021/01/画像01-300x200.jpg 300w" sizes="(max-width: 604px) 100vw, 604px"> 
<!-- 記事取得 -->
<span class="kiji_category">2021年1月9日 - <a href="http://localhost/category/uncategorized/" rel="category tag">未分類</a></span> <br> <h5><a href="http://localhost/%e3%83%86%e3%82%b9%e3%83%884/"> テスト4</a></h5>
<div class="excerpt"><p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテス […]</p>
<a href="http://localhost/%e3%83%86%e3%82%b9%e3%83%884/" class="btn btn-primary">詳しく見る</a>
</div>
</li>
<li>
<!-- サムネイル -->
<img width="604" height="403" src="http://localhost/wp-content/uploads/2021/01/画像01.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="http://localhost/wp-content/uploads/2021/01/画像01.jpg 604w, http://localhost/wp-content/uploads/2021/01/画像01-300x200.jpg 300w" sizes="(max-width: 604px) 100vw, 604px"> 
<!-- 記事取得 -->
<span class="kiji_category">2021年1月9日 - <a href="http://localhost/category/uncategorized/" rel="category tag">未分類</a></span> <br> <h5><a href="http://localhost/%e3%83%86%e3%82%b9%e3%83%883/"> テスト3</a></h5>
<div class="excerpt"><p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテス […]</p>
<a href="http://localhost/%e3%83%86%e3%82%b9%e3%83%883/" class="btn btn-primary">詳しく見る</a>
</div>
</li>
<li>
<!-- サムネイル -->
<img width="604" height="403" src="http://localhost/wp-content/uploads/2021/01/画像01.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="http://localhost/wp-content/uploads/2021/01/画像01.jpg 604w, http://localhost/wp-content/uploads/2021/01/画像01-300x200.jpg 300w" sizes="(max-width: 604px) 100vw, 604px"> 
<!-- 記事取得 -->
<span class="kiji_category">2021年1月9日 - <a href="http://localhost/category/uncategorized/" rel="category tag">未分類</a></span> <br> <h5><a href="http://localhost/%e3%83%86%e3%82%b9%e3%83%882/"> テスト2</a></h5>
<div class="excerpt"><p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテス […]</p>
<a href="http://localhost/%e3%83%86%e3%82%b9%e3%83%882/" class="btn btn-primary">詳しく見る</a>
</div>
</li>
<li>
<!-- サムネイル -->
<img width="604" height="403" src="http://localhost/wp-content/uploads/2021/01/画像01.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="http://localhost/wp-content/uploads/2021/01/画像01.jpg 604w, http://localhost/wp-content/uploads/2021/01/画像01-300x200.jpg 300w" sizes="(max-width: 604px) 100vw, 604px"> 
<!-- 記事取得 -->
<span class="kiji_category">2021年1月6日 - <a href="http://localhost/category/uncategorized/" rel="category tag">未分類</a></span> <br> <h5><a href="http://localhost/%e3%83%86%e3%82%b9%e3%83%88/"> テスト1</a></h5>
<div class="excerpt"><p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト。</p>
<a href="http://localhost/%e3%83%86%e3%82%b9%e3%83%88/" class="btn btn-primary">詳しく見る</a>
</div>
</li>
</ul>
</div>

以上が「WPテーマ作成でTOPページに記事一覧を表示させる【プラグイン無し】」でした。

この記事を書いた人
KEITO
KEITO

AI × IT × WEB3｜関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
phpThemaWP
この記事を共有する
KEITO
KT LIFE
タイトルとURLをコピーしました