WordPressの独自テーマ作成方法3【トップ動的部分の作成】

2021年9月28日
誤字を修正しました。
「投稿年日時を表示」に文を追記しました。

※自分用備忘録
※下記の手順はローカルでの作業です
※作成したテーマは、実際に稼働させるWordPressのテーマに追加する必要があります

トップページに最新記事を表示させる

コード例

 <ul class="postslist">
 <?php if (have_posts()): while(have_posts()): the_post(); ?>
 <li>
   <a href="<?php the_permalink(); ?>">
   <?php //the_post_thumbnail();// ?>
     <h3><?php the_title(); ?></h3>
     <time datetime="<?php echo get_the_date('y-m-d') ?>"><?php echo get_the_date('y/m/d') ?></time>
     <p><?php the_excerpt(); ?></p>
   </a>
   <?php the_category(); ?>
 </li>
 <?php endwhile; endif; ?>
 </ul>

記事のパーマリンクを取得

<?php the_permalink(); ?>

記事のパーマリンク（URL）を取得します。
アンカーリンクなどをつけて記事本文にリンクさせることができます。

<a href="<?php the_permalink(); ?>">

</a>

記事のタイトルを表示

<?php the_title(); ?>

記事の本文の抜粋を表示

<?php the_excerpt(); ?>

記事の全文を表示させる場合は下記のテンプレートタグになります。

<?php the_content(); ?>

カテゴリーを出力

<?php the_category(); ?>

post-categoriesというclassが自動的に生成されます。
ブラウザからソースコードを開くと自動生成されたclass名などが確認できます。

投稿年日時を表示

<?php echo get_the_date('y/m/d'); ?>

y/m/dの部分は色々な書き方ができます。
HTMLのtimeタグを使う場合は下記のように記述します。

<time datetime="<?php echo get_the_date('y-m-d'); ?>"><?php echo get_the_date('y/m/d'); ?></time>

timeタグを使用する場合はdatetimeを忘れないようにしましょう。

2021年9月28日追記
年日時は「php echo get_the_date();」の()の中を空にしておいて、WordPressの「設定」の「一般」にある「日付のフォーマット」から設定することもできます。

サムネイル画像を表示させる

サムネイル画像を表示させるには、サムネイル画像を設定できるようにするための記述が必要です。
functions.phpに以下を記述をしましょう。

add_theme_support( 'post-thumbnails' );

上記を記述すると、投稿画面からサムネイルを設定する項目が出現します。

imgでサムネイルを表示

<?php the_post_thumbnail(); ?>

background-imageで画像を表示

<div class="thumbnail" style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>)"></div>

background-imageで画像を表示させる場合はhightの設定が必ず必要です。
classを作り、cssで調整しましょう。

css例

.thumbnail {
 height: 100px;
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
}

記事を繰り返す

<?php if (have_posts()): while(have_posts()): the_post(); ?>
  繰り返す中身
<?php endwhile; endif; ?>

記事の数だけコードをループさせます。
<?php if (have_posts()): while(have_posts()): the_post(); ?>と<?php endwhile; endif; ?>の間に繰り返させるものを記述しましょう。

記事の数

表示させる記事の最大数はWordPressのダッシュボードから変更ができます。

「設定」にある「表示設定」から1ページに表示させる最大投稿数を調整しましょう。

トップページのテンプレートについて

index.phpというのは、WordPressではトップページを作るためのテンプレートではありません。
しかし、トップページとしても使うことができます。

トップページのテンプレートとしては下記のファイルを定めたりもします。

home.php

 front-page.php

front-page.php、home.php、index.phpの順番で優先されます。
front-page.phpを最初に作り、後からトップページをhome.phpで作り直しても反映されないので、優先度が低いものから使っていきましょう。