今回はWordPressでカスタム投稿タイプ（CPT UI）用の記事一覧の作成方法を解説していきます。カスタム投稿タイプ（CPT UI）はデフォルトでWordPressのarchive.phpを呼び出して記事一覧を表示しますが、カスタム投稿の記事一覧は別のものを表示したい場合があります。そのような時にどうすればいいかを初心者にもわかりやすく、コピペで進めていけるように解説していきます。
目次
今回つくるもの
今回は業務実績一覧を作成していきます。
環境・前提条件
作業環境のOS
WindowsOSを使用します
作業ツール・前提条件
- VSCodeのインストール
- Local by FlywheelにてWordPress作成済み
- オリジナルテーマの作成済み
- 記事一覧の作成済み
- カスタム投稿タイプ（CPT UI）の導入済み
環境が整っていない方はこちらの記事も併せてご確認ください！
必要ファイルを作成しよう
テーマフォルダ[ sample_theme ]をVSCodeで開いて必要なファイルを作成していきます。
archive-works.php
VSCodeでarchive-works.phpを作成して以下のコードを記述します。
<?php get_header(); ?>
<main class="archive works">
<div class="page-header">
<div class="container">
<span class="sub-title">業務実績</span>
<h1>WORKS</h1>
</div>
</div>
<div class="container">
<div class="post-list">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<a class="post" href="<?php the_permalink(); ?>">
<div class="eye-catch">
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('full'); ?>
<?php else : ?>
<img src="https://images.pexels.com/photos/1181360/pexels-photo-1181360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
<?php endif; ?>
</div>
<div class="post-body">
<p class="post-title">
<?php the_title(); ?>
</p>
<div class="post-info">
<span class="post-date"><?php echo get_the_date('Y.m.d'); ?></span>
<?php
$terms = get_the_terms(get_the_ID(), 'works_category');
if ($terms && !is_wp_error($terms)) :
foreach ($terms as $term) : ?>
<span class="post-category"><?php echo esc_html($term->name); ?></span>
<?php endforeach;
endif; ?>
</div>
</div>
</a>
<?php endwhile; ?>
<?php else : ?>
<p>業務実績が見つかりませんでした。</p>
<?php endif; ?>
</div>
<div class="pagenation">
<?php
the_posts_pagination(array(
'prev_text' => '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#9e9e9e" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6"/></svg>',
'next_text' => '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#9e9e9e" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6"/></svg>',
));
?>
</div>
</div>
</main>
<?php get_footer(); ?>archive-works.phpというファイル名の「works」部分はカスタム投稿タイプのスラッグ名と一致していることが必須です。worksというスラッグ名じゃない場合は、スラッグ名に併せてarchive-スラッグ名.phpを作成してください。
style.css
既存のsample_theme/style.cssの末尾に以下のコードを追記しましょう。
/* archive-works settings */
main.archive.works .container .post-list .post .eye-catch {
width: 100%;
}
main.archive.works .container .post-list .post .eye-catch img {
width: 100%;
height: auto;
aspect-ratio: 16/9;
-o-object-fit: cover;
object-fit: cover;
}
main.archive.works .container .post-list .post .post-body p.post-title {
margin-top: 20px;
}
main.archive.works .container .post-list .post .post-body .post-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 20px;
}
main.archive.works .container .post-list .post .post-body .post-info span.post-category {
display: block;
font-size: 12px;
font-weight: 500;
background-color: #eaeaea;
padding: 5px;
margin: 0px 5px;
}
動作確認
ファイルを作成したらさっそく動作確認をしていきましょう。
トップ画面から遷移出来るか
トップページのWORKS部分の「記事一覧へ」をクリックした時に記事一覧画面へ遷移するか確認しましょう。
記事一覧が正しく表示されているか
画像のように表示されていたら完了です！
ページネーションが表示されていない場合は業務実績の記事数を５件作成し、管理画面の「設定」＞「表示設定」から１ページに表示する最大投稿数を４件に設定してください。
カスタム投稿タイプ（CPT UI)用の個別記事画面を作成するには？
記事一覧が正しく表示され、記事をクリックすると以前作成したsingle.phpの記事画面が表示されると思います。
最後に、カスタム投稿記事専用の記事画面を作成するためにはどうすればいいかを少しだけ紹介して終わります。
single-works.phpを作成する
カスタム投稿記事専用の記事画面を作成するには今回カスタム投稿記事専用の記事一覧を作成したように、single-スラッグ名.phpを作成します。
今回でいうとそれがsingle-works.phpになります。
WordPressではデフォルトで記事画面はsingle.phpが呼び出されるようになっており、カスタム投稿の記事に対しても気を利かせてsingle.phpを呼び出してくれます。
single-works.phpを作成するとこちらを優先して呼び出してくれるようになるので、カスタム投稿記事専用の記事画面が必要な場合はsingle-works.phpを作成しましょう。
次回はsingle-works.phpの作成方法について紹介していきます。
まとめ
今回はWordPressでカスタム投稿タイプ（CPT UI）用の記事一覧の作成方法について紹介しました。カスタム投稿タイプを使用したオリジナルテーマ作成が出来ると、ホームページの規模が広がりテーマの質も一段階上がると思います。専門知識を要する部分ではありますので、お困りの時はプロにご相談ください。
ZeroStartでは初期費用０円でお客様に合わせたオリジナルテーマを使用したホームページ作成を行っています！ホームページ作成についてご相談がございましたらお気軽にご連絡ください！
