![見出し画像](https://assets.st-note.com/production/uploads/images/60732196/rectangle_large_type_2_ac423cfb4db9a51c39d42d578f31b45b.png?width=1200)
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で作り直しても反映されないので、優先度が低いものから使っていきましょう。
この記事が気に入ったらサポートをしてみませんか?