今回はWordPressのオリジナルテーマ作成でほぼ必須となる「記事一覧画面」の作成方法について解説していきます。初めてWordPressのオリジナルテーマを作成する方も安心できるように、基本的にコピペで進めていけるようにしています。
今回つくるもの
環境・前提条件
作業環境のOS
WindowsOSを使用します
作業ツール・前提条件
- VSCodeのインストール
- Local by FlywheelにてWordPress作成済み
- 画面モックの開発済み
- オリジナルテーマの作成済み
- 投稿データの作成 / カテゴリの作成済み
環境が整っていない方はこちらの記事も併せてご確認ください！
画面モックを作成しよう
まずはWordPress化する前にhtml/cssだけで画面モックを作成していきます。
以前作成したbusiness_sampleの画面モックフォルダ内にarchive.htmlを作成しましょう。
archive.html
archive.htmlのコードは下記の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<title>ZeroStart サンプルサイト</title>
</head>
<body>
<header>
<div class="container">
<nav>
<div class="logo">
TechForward
</div>
<ul>
<a href="">
事業内容
</a>
<a href="">
業務実績
</a>
<a href="">
会社概要
</a>
<a href="">
お知らせ
</a>
<a href="">
お問合せ
</a>
</ul>
</nav>
</div>
</header>
<!--archive.php化するコンテンツ-->
<main class="archive">
<div class="page-header">
<div class="container">
<span class="sub-title">お知らせ一覧</span>
<h1>NEWS</h1>
</div>
</div>
<div class="container">
<div class="post-list">
<a class="post" href="#">
<div class="post-info">
<span>2024.06.04</span>
</div>
<p class="post-title">
【6月】営業時間変更についてのお知らせ
</p>
<p class="post-text">
ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。
</p>
</a>
<a class="post" href="#">
<div class="post-info">
<span>2024.06.04</span>
</div>
<p class="post-title">
【6月】営業時間変更についてのお知らせ
</p>
<p class="post-text">
ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。
</p>
</a>
<a class="post" href="#">
<div class="post-info">
<span>2024.06.04</span>
</div>
<p class="post-title">
【6月】営業時間変更についてのお知らせ
</p>
<p class="post-text">
ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。
</p>
</a>
<a class="post" href="#">
<div class="post-info">
<span>2024.06.04</span>
</div>
<p class="post-title">
【6月】営業時間変更についてのお知らせ
</p>
<p class="post-text">
ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。
</p>
</a>
</div>
<div class="pagenation">
<a class="prev">
<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>
</a>
<span class="on">1</span>
<a>2</a>
<a>3</a>
<a class="next">
<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>
</a>
</div>
</div>
</main>
<footer class="contact">
<div class="container flex">
<div class="left">
<p class="company-name">TechForward</p>
<a class="service-name" href="">ZEROSTART ホームページ作成</a>
<ul>
<a href="">
事業内容
</a>
<a href="">
業務実績
</a>
<a href="">
会社概要
</a>
<a href="">
お知らせ
</a>
<a href="">
お問合せ
</a>
</ul>
</div>
<div class="right">
<span class="sub-title">お問合せ</span>
<h2>CONTACT</h2>
<p>
ご質問、ご相談、サービスの詳細についてのお問い合わせなど、どんなことでもお気軽にご連絡ください。専門のスタッフが迅速に対応いたします。
</p>
<div class="wrapper">
<div class="view-more">
<a href="#">お問合せ</a>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-right"
width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l14 0" />
<path d="M13 18l6 -6" />
<path d="M13 6l6 6" />
</svg>
</div>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="./index.js"></script>
</body>
</html>WordPress化する際はmainタグ内の部分だけを使用します。
style.css
続いてstyle.cssに下記のコードを追加します。
main.archive {
min-height: 100vh;
}
main.archive .page-header {
padding-top: 100px;
background-color: #f9f8ff;
padding-bottom: 1px;
}
main.archive .container h1,
main.archive .container h2 {
font-size: calc(24px + 3vw);
font-weight: 300;
margin-bottom: 2.5vw;
}
main.archive .container span.sub-title {
position: relative;
color: #005bac;
font-weight: 500;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
main.archive .container span.sub-title::before {
content: '';
display: block;
height: 1px;
width: 75px;
margin-right: 20px;
background-color: #005bac;
}
main.archive .container .post-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-top: 50px;
padding-bottom: 2.5vw;
}
main.archive .container .post-list .post {
display: block;
position: relative;
width: 45%;
border-bottom: 1px solid #eaeaea;
padding: 2em;
text-decoration: none;
cursor: pointer;
}
@media (max-width: 750px) {
main.archive .container .post-list .post {
width: 100%;
}
}
main.archive .container .post-list .post .post-info span {
color: #005bac;
}
main.archive .container .post-list .post p.post-title {
font-size: calc(16px + 0.4vw);
-webkit-transition: .2s;
transition: .2s;
}
main.archive .container .post-list .post p.post-text {
padding: 1em;
font-size: 14px;
}
main.archive .container .post-list .post:hover .post-title {
color: #005bac;
}
main.archive .container .pagenation {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0px auto;
padding: 50px 0px;
}
main.archive .container .pagenation span,
main.archive .container .pagenation a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid #eaeaea;
margin: 5px;
cursor: pointer;
text-decoration: none;
}
main.archive .container .pagenation .on {
background-color: #005bac;
color: #fff;
}こちらのコードは既存のstyle.cssの末尾に追加しましょう。
index.js
現在のindex.jsはトップ画面のアニメーション処理しか記載されていないのですが、archive.htmlの時はヘッダーの出現タイミングを早めたいのでこちらも修正します。
document.addEventListener("DOMContentLoaded", function () {
ScrollReveal().reveal('.headline', { delay: 500 });
// mainタグのclassを取得
var mainTag = document.querySelector("main");
// mainタグにclassが付与されていない場合だけ実行する
if (!mainTag.classList.length) {
gsap.timeline()
.to(".text-wrapper", {
duration: 1,
y: "0%",
opacity: 1,
ease: "power3.out"
})
.to("p.sub-text", {
duration: 0.5,
opacity: 1,
ease: "power1.inOut"
})
.to(".middle", {
duration: 0.5,
opacity: 1,
ease: "power1.inOut"
})
.to(".large", {
duration: 0.5,
opacity: 1,
ease: "power1.inOut"
})
.to(".small", {
duration: 0.5,
opacity: 1,
ease: "power1.inOut"
})
.to("header", {
duration: 0.5,
y: "0",
opacity: 1,
ease: "power2.out"
});
} else {
// mainタグにclassが付与されている場合はこちらを実行
gsap.timeline()
.to("header", {
duration: 0.5,
y: "0",
opacity: 1,
ease: "power2.out"
});
}
});
mainタグにクラスが付与されている場合の分岐を追加して、その分岐に入る場合はヘッダーがすぐ表示されるようにしています。今後他のファイルを作成するときもmainタグにclassを付与することでヘッダー出現タイミングを管理出来ます。
画面モック完成イメージ
作成した画面モックがこんな感じになってたらOKです！
画面モックをテーマ化しよう
画面モックを作成したら、次はWordPressのテーマ化を行っていきましょう。
ここからの作業は[business_sample]フォルダ内ではなく、[sample_theme]内のテーマファイルの編集を行っていきます。
archive.phpを作成する
VSCode上からsample_themeフォルダ内にarchive.phpを作成していきましょう。
ChatGPTに丸投げする
先ほど作成した画面モックのmainタグ内の部分をWordPress化していきたいので、ChatGPTに丸投げしていきます。
ChatGPTには以下の内容で注文をしていきます。
<!--archive.php化するコンテンツ-->
<main class="archive">
<div class="page-header">
<div class="container">
<span class="sub-title">お知らせ一覧</span>
<h1>NEWS</h1>
</div>
</div>
<div class="container">
<div class="post-list">
<a class="post" href="#">
<div class="post-info">
<span>2024.06.04</span>
</div>
<p class="post-title">
【6月】営業時間変更についてのお知らせ
</p>
<p class="post-text">
ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。
</p>
</a>
<a class="post" href="#">
<div class="post-info">
<span>2024.06.04</span>
</div>
<p class="post-title">
【6月】営業時間変更についてのお知らせ
</p>
<p class="post-text">
ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。
</p>
</a>
<a class="post" href="#">
<div class="post-info">
<span>2024.06.04</span>
</div>
<p class="post-title">
【6月】営業時間変更についてのお知らせ
</p>
<p class="post-text">
ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。
</p>
</a>
<a class="post" href="#">
<div class="post-info">
<span>2024.06.04</span>
</div>
<p class="post-title">
【6月】営業時間変更についてのお知らせ
</p>
<p class="post-text">
ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。ここに記事の本文を冒頭から一部抜粋して表示します。
</p>
</a>
</div>
<div class="pagenation">
<a class="prev">
<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>
</a>
<span class="on">1</span>
<a>2</a>
<a>3</a>
<a class="next">
<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>
</a>
</div>
</div>
</main>上記のコードをWordPressのarchive.php化してもらえますか？a class=”post”の部分のリンクには記事のURLを設定してほしいです。DOM構成はこの状態から変更を行わず、p class=”post-text”部分の本文テキストは50文字ぐらいで留めてください！
ChatGPTは以下のコードを生成してくれます。
<?php get_header(); ?>
<main class="archive">
<div class="page-header">
<div class="container">
<span class="sub-title">お知らせ一覧</span>
<h1>NEWS</h1>
</div>
</div>
<div class="container">
<div class="post-list">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a class="post" href="<?php the_permalink(); ?>">
<div class="post-info">
<span><?php echo get_the_date('Y.m.d'); ?></span>
</div>
<p class="post-title">
<?php the_title(); ?>
</p>
<p class="post-text">
<?php echo wp_trim_words( get_the_excerpt(), 25, '...' ); ?>
</p>
</a>
<?php endwhile; 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.phpに貼り付けていきましょう。
ChatGPTに注文を行う時はなるべく詳細に指示を出すと手直し不要なコードが出てくる可能性が高いです。特に「DOMの構成を変えないでください。」という指示を出しておくと色々便利です。
style.cssに追記する
[business_sample]フォルダで作成した今回のarchive.htmlに適用させたcssを、[sample_theme]内のstyle.cssにも追記していきましょう。
紛らわしいと思うのでstyle.cssの全文を貼りますので、それをそのまま[sample_theme]内のstyle.cssに貼り付けてください。
/*
Theme Name: Sample Theme
Theme URI: http://example.com/sample-theme
Author: Your Name
Author URI: http://example.com
Description: これはサンプルのWordPressテーマです。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sample-theme
Tags: custom-colors, custom-logo, custom-menu, featured-images, flexible-header, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/* WP-Settings START */
html {
margin-top: 0 !important;
}
#wpadminbar {
position: fixed;
top: unset !important;
bottom: 0 !important;
z-index: 3 !important;
}
/* WP-Settings END */
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #333;
font-size: calc(12px + 0.21vw);
font-family: "Oswald", "Noto Sans JP", sans-serif;
}
.container {
width: 100%;
padding: 0 10vw;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9;
border-bottom: 1px solid #eaeaea;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
header .container {
background-color: #fff;
padding-top: 10px;
padding-bottom: 10px;
}
header .container nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
header .container nav .logo {
font-size: 24px;
font-weight: 400;
color: #005bac;
}
header .container nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media (max-width: 750px) {
header .container nav ul {
display: none;
}
}
header .container nav ul a {
text-decoration: none;
font-weight: 600;
font-size: 14px;
padding: 1em 2em;
}
@media (max-width: 500px) {
main .off-mobile {
display: none;
}
}
main section {
padding: 10vw 0;
}
main section .flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
main section .container {
position: relative;
}
main section .container h1,
main section .container h2 {
font-size: calc(24px + 3vw);
font-weight: 300;
margin-bottom: 2.5vw;
}
main section .container span.sub-title {
position: relative;
color: #005bac;
font-weight: 500;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
main section .container span.sub-title::before {
content: '';
display: block;
height: 1px;
width: 75px;
margin-right: 20px;
background-color: #005bac;
}
main section .container p {
line-height: 2;
}
main section .container .wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 50px;
margin-bottom: 50px;
}
main section .container .wrapper::before {
content: '';
display: block;
height: 1px;
width: 100%;
background-color: #005bac;
margin-right: 20px;
}
main section .container .wrapper .view-more {
position: relative;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #fff;
padding: 0.5em 1.5em;
border: 1px solid #005bac;
-webkit-transition: .5s;
transition: .5s;
}
main section .container .wrapper .view-more a {
color: #005bac;
font-weight: 400;
text-decoration: none;
text-wrap: nowrap;
-webkit-transition: .5s;
transition: .5s;
}
main section .container .wrapper .view-more svg {
margin-left: 20px;
height: 30px;
width: 30px;
stroke: #005bac !important;
stroke-width: 1px !important;
-webkit-transition: .5s;
transition: .5s;
}
main section .container .wrapper .view-more:hover {
background-color: #005bac;
}
main section .container .wrapper .view-more:hover a {
color: #fff;
}
main section .container .wrapper .view-more:hover svg {
stroke: #fff !important;
}
main section.top {
padding-top: 100px;
min-height: 100vh;
background-color: #fff;
}
@media (max-width: 750px) {
main section.top {
min-height: unset;
}
}
main section.top .container {
position: relative;
}
main section.top .container .left {
position: relative;
padding: 4em;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
border-radius: 15px;
-webkit-transform: translateY(15vh);
transform: translateY(15vh);
z-index: 5;
mix-blend-mode: difference;
}
@media (max-width: 750px) {
main section.top .container .left {
padding: 0px;
-webkit-transform: unset;
transform: unset;
width: 100%;
}
}
@media (max-width: 500px) {
main section.top .container .left {
padding-top: 10vh;
padding-bottom: 10vh;
}
}
main section.top .container .left h1 {
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
overflow: hidden;
}
main section.top .container .left h1 .text-wrapper {
font-size: calc(24px + 2vw);
font-weight: 600;
color: #fff;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
main section.top .container .left p.sub-text {
color: #fff;
opacity: 0;
}
main section.top .container .small {
position: absolute;
top: 5%;
left: 55%;
-webkit-filter: blur(0.5px);
filter: blur(0.5px);
z-index: 2;
width: 35vw;
overflow: hidden;
border-radius: 20%;
border-top-left-radius: 0%;
border-bottom-right-radius: 0%;
-webkit-box-shadow: 0px 0px 10px #eaeaea;
box-shadow: 0px 0px 10px #eaeaea;
opacity: 0;
}
main section.top .container .small img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 500px) {
main section.top .container .small {
top: 40%;
left: 45%;
width: 50vw;
}
}
main section.top .container .middle {
position: absolute;
top: 0;
left: 10%;
-webkit-filter: blur(2px);
filter: blur(2px);
z-index: 1;
width: 15vw;
overflow: hidden;
border-radius: 20%;
border-top-left-radius: 0%;
border-bottom-right-radius: 0%;
-webkit-box-shadow: 0px 0px 10px #eaeaea;
box-shadow: 0px 0px 10px #eaeaea;
opacity: 0;
}
main section.top .container .middle img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 500px) {
main section.top .container .middle {
width: 25vw;
}
}
main section.top .container .large {
position: absolute;
top: 85%;
left: 45%;
-webkit-filter: blur(1px);
filter: blur(1px);
z-index: 1;
width: 25vw;
overflow: hidden;
border-radius: 20%;
border-top-right-radius: 0%;
border-bottom-left-radius: 0%;
-webkit-box-shadow: 0px 0px 10px #eaeaea;
box-shadow: 0px 0px 10px #eaeaea;
opacity: 0;
}
main section.top .container .large img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 500px) {
main section.top .container .large {
width: 35vw;
left: 15vw;
}
}
main section.greeting {
padding-bottom: 0px;
}
main section.greeting .container.flex {
padding-right: unset;
}
main section.greeting .container.flex .left {
width: 50%;
padding-right: 10vw;
}
@media (max-width: 750px) {
main section.greeting .container.flex .left {
width: 100%;
margin-bottom: 2.5vw;
}
}
main section.greeting .container.flex .right {
width: 50%;
}
@media (max-width: 750px) {
main section.greeting .container.flex .right {
width: 100%;
}
main section.greeting .container.flex .right .image-wrapper {
height: 200px;
}
main section.greeting .container.flex .right .image-wrapper img {
height: 200px;
-o-object-fit: cover;
object-fit: cover;
}
}
main section.greeting .container.flex .right .image-wrapper {
width: 100%;
overflow: hidden;
border-top-left-radius: 200px;
}
main section.greeting .container.flex .right .image-wrapper img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
main section.works .container .post-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
main section.works .container .post-list .post {
width: 24%;
border-radius: 15px;
overflow: hidden;
padding: 2em;
-webkit-box-shadow: 0px 0px 6px 0px #eaeaea;
box-shadow: 0px 0px 6px 0px #eaeaea;
margin-right: auto;
margin-bottom: 25px;
}
@media (max-width: 1400px) {
main section.works .container .post-list .post {
width: 45%;
}
}
@media (max-width: 750px) {
main section.works .container .post-list .post {
width: 100%;
}
}
main section.works .container .post-list .post .eye-catch {
width: 100%;
aspect-ratio: 16/10;
background-color: #eaeaea;
overflow: hidden;
}
main section.works .container .post-list .post .eye-catch img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
main section.works .container .post-list .post .post-body p.post-title {
padding: 20px 0px;
font-weight: 600;
border-bottom: 1px solid #eaeaea;
min-height: 105px;
}
main section.works .container .post-list .post .post-body .post-info {
padding-top: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
main section.works .container .post-list .post .post-body .post-info span.post-date {
color: #005bac;
font-weight: 500;
}
main section.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;
}
main section.works .container .post-list .post .post-foot {
padding-top: 20px;
}
main section.works .container .post-list .post .post-foot span {
display: block;
font-size: 14px;
font-weight: 600;
color: #fff;
background-color: #005bac;
border-radius: 50px;
padding: 12px;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
width: 100%;
margin: auto;
text-align: center;
}
main section.about .container.flex {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
main section.about .container.flex .left {
width: 30%;
height: 100%;
}
@media (max-width: 750px) {
main section.about .container.flex .left {
width: 100%;
}
}
main section.about .container.flex .left .image-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
border-top-right-radius: 200px;
}
main section.about .container.flex .left .image-wrapper img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
main section.about .container.flex .right {
width: 70%;
padding: 0 5vw;
-webkit-box-shadow: 20px 15px 5px #eaeaea;
box-shadow: 20px 15px 5px #eaeaea;
}
@media (max-width: 750px) {
main section.about .container.flex .right {
width: 100%;
background-color: #fff;
padding-top: 2em;
}
}
@media (max-width: 500px) {
main section.about .container.flex .right {
padding-left: 0;
padding-right: 0;
-webkit-box-shadow: unset;
box-shadow: unset;
}
}
main section.about .container.flex .right h3 {
font-size: calc(24px + 0.4vw);
margin-bottom: 2.5vw;
}
main section.service {
background-color: #f9f8ff;
}
main section.service .container.flex .left,
main section.service .container.flex .right,
main section.service .container.flex .middle {
width: 33.33%;
padding: 2em;
border-right: 1px solid #eaeaea;
}
@media (max-width: 500px) {
main section.service .container.flex .left,
main section.service .container.flex .right,
main section.service .container.flex .middle {
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 1400px) {
main section.service .container.flex .left {
width: 100%;
border-right-width: 0px;
}
}
@media (max-width: 1400px) {
main section.service .container.flex .middle,
main section.service .container.flex .right {
width: 50%;
}
}
@media (max-width: 750px) {
main section.service .container.flex .middle,
main section.service .container.flex .right {
width: 100%;
border-right-width: 0px;
border-bottom: 1px solid #eaeaea;
}
}
main section.service .container.flex .middle .content-head,
main section.service .container.flex .right .content-head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 5vw;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
main section.service .container.flex .middle .content-head span,
main section.service .container.flex .right .content-head span {
font-size: calc(24px + 4vw);
font-weight: 300;
color: #005bac;
}
main section.service .container.flex .middle .content-head .icon-wrapper,
main section.service .container.flex .right .content-head .icon-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: 1px solid #fff;
border-radius: 50%;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
min-height: 100px;
min-width: 100px;
border-color: #005bac;
}
@media (max-width: 500px) {
main section.service .container.flex .middle .content-head .icon-wrapper,
main section.service .container.flex .right .content-head .icon-wrapper {
min-height: 75px;
min-width: 75px;
}
}
main section.service .container.flex .middle .content-head .icon-wrapper .icon,
main section.service .container.flex .right .content-head .icon-wrapper .icon {
height: 50px;
width: 50px;
stroke: #005bac !important;
}
main section.service .container.flex .middle h3,
main section.service .container.flex .right h3 {
font-size: calc(22px + 0.4vw);
margin: 25px 0px;
}
@media (max-width: 500px) {
main section.service .container.flex .middle h3,
main section.service .container.flex .right h3 {
font-size: calc(22px + 0.2vw);
}
}
main section.service .container.flex .middle ul,
main section.service .container.flex .right ul {
padding-left: 2em;
}
main section.service .container.flex .middle ul li,
main section.service .container.flex .right ul li {
list-style: none;
}
main section.news {
padding: 5vw 0;
}
main section.news .container .post-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-bottom: 2.5vw;
}
main section.news .container .post-list .post {
position: relative;
width: 45%;
border-bottom: 1px solid #eaeaea;
padding: 2em;
}
@media (max-width: 750px) {
main section.news .container .post-list .post {
width: 100%;
}
}
main section.news .container .post-list .post .post-info span {
color: #005bac;
}
main.archive {
min-height: 100vh;
}
main.archive .page-header {
padding-top: 100px;
background-color: #f9f8ff;
padding-bottom: 1px;
}
main.archive .container h1,
main.archive .container h2 {
font-size: calc(24px + 3vw);
font-weight: 300;
margin-bottom: 2.5vw;
}
main.archive .container span.sub-title {
position: relative;
color: #005bac;
font-weight: 500;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
main.archive .container span.sub-title::before {
content: '';
display: block;
height: 1px;
width: 75px;
margin-right: 20px;
background-color: #005bac;
}
main.archive .container .post-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-top: 50px;
padding-bottom: 2.5vw;
}
main.archive .container .post-list .post {
display: block;
position: relative;
width: 45%;
border-bottom: 1px solid #eaeaea;
padding: 2em;
text-decoration: none;
cursor: pointer;
}
@media (max-width: 750px) {
main.archive .container .post-list .post {
width: 100%;
}
}
main.archive .container .post-list .post .post-info span {
color: #005bac;
}
main.archive .container .post-list .post p.post-title {
font-size: calc(16px + 0.4vw);
-webkit-transition: .2s;
transition: .2s;
}
main.archive .container .post-list .post p.post-text {
padding: 1em;
font-size: 14px;
}
main.archive .container .post-list .post:hover .post-title {
color: #005bac;
}
main.archive .container .pagenation {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0px auto;
padding: 50px 0px;
}
main.archive .container .pagenation span,
main.archive .container .pagenation a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid #eaeaea;
margin: 5px;
cursor: pointer;
text-decoration: none;
}
main.archive .container .pagenation .on {
background-color: #005bac;
color: #fff;
}
footer.contact {
padding: 10vw 0;
background-color: #f9f8ff;
}
footer.contact .flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
footer.contact .container {
position: relative;
}
footer.contact .container h1,
footer.contact .container h2 {
font-size: calc(24px + 3vw);
font-weight: 300;
margin-bottom: 2.5vw;
}
footer.contact .container span.sub-title {
position: relative;
color: #005bac;
font-weight: 500;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
footer.contact .container span.sub-title::before {
content: '';
display: block;
height: 1px;
width: 75px;
margin-right: 20px;
background-color: #005bac;
}
footer.contact .container p {
line-height: 2;
}
footer.contact .container .wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 50px;
margin-bottom: 50px;
}
footer.contact .container .wrapper::before {
content: '';
display: block;
height: 1px;
width: 100%;
background-color: #005bac;
margin-right: 20px;
}
footer.contact .container .wrapper .view-more {
position: relative;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #fff;
padding: 0.5em 1.5em;
border: 1px solid #005bac;
-webkit-transition: .5s;
transition: .5s;
}
footer.contact .container .wrapper .view-more a {
color: #005bac;
font-weight: 400;
text-decoration: none;
text-wrap: nowrap;
-webkit-transition: .5s;
transition: .5s;
}
footer.contact .container .wrapper .view-more svg {
margin-left: 20px;
height: 30px;
width: 30px;
stroke: #005bac !important;
stroke-width: 1px !important;
-webkit-transition: .5s;
transition: .5s;
}
footer.contact .container .wrapper .view-more:hover {
background-color: #005bac;
}
footer.contact .container .wrapper .view-more:hover a {
color: #fff;
}
footer.contact .container .wrapper .view-more:hover svg {
stroke: #fff !important;
}
@media (max-width: 750px) {
footer.contact .container.flex {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
footer.contact .container.flex .left {
width: 50%;
}
@media (max-width: 750px) {
footer.contact .container.flex .left {
width: 100%;
margin-bottom: 5vw;
}
}
footer.contact .container.flex .left .company-name {
font-size: calc(24px + 2vw);
line-height: 2;
color: #005bac;
}
footer.contact .container.flex .left .service-name {
font-size: calc(16px + 0.2vw);
text-decoration: none;
}
footer.contact .container.flex .left ul {
margin-top: 2.5vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
footer.contact .container.flex .left ul a {
width: 33.33%;
display: block;
text-decoration: none;
padding: 1em 0;
margin: 10px;
border-bottom: 1px solid #eaeaea;
font-weight: 600;
}
footer.contact .container.flex .right {
width: 50%;
margin-bottom: 5vw;
}
@media (max-width: 750px) {
footer.contact .container.flex .right {
width: 100%;
}
}
/*# sourceMappingURL=style.css.map */index.phpを微修正する
archive.phpを作成し記事一覧を表示する準備が出来ましたが、現在作成しているindex.phpはリンク機能を持っていないので、記事一覧へ遷移できるように修正します。
<section class="news">
<div class="container headline">
<span class="sub-title">お知らせ</span>
<h2>News</h2>
<div class="post-list">
<?php
// カテゴリー "news" の最新4件の投稿を取得
$args = array(
'category_name' => 'news', // カテゴリーを指定
'posts_per_page' => 4 // 取得する投稿数を指定
);
$news_posts = new WP_Query($args);
// 取得した投稿がある場合、ループで表示
if ($news_posts->have_posts()) :
while ($news_posts->have_posts()) : $news_posts->the_post();
?>
<div class="post">
<div class="post-info">
<span><?php echo get_the_date('Y.m.d'); ?></span>
</div>
<p class="post-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</p>
</div>
<?php
endwhile;
wp_reset_postdata();
else :
?>
<p>現在、お知らせはありません。</p>
<?php
endif;
?>
</div>
<div class="wrapper">
<div class="view-more">
<a href="<?php echo esc_url(home_url('/category/news/')); ?>">お知らせ一覧へ</a>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-right"
width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l14 0" />
<path d="M13 18l6 -6" />
<path d="M13 6l6 6" />
</svg>
</div>
</div>
</div>
</section>index.phpのsection.news部分をまるっと上記のコードに書き換えてください。
index.jsを編集する
画面モックでindex.jsに条件分岐を追加したので、そちらをテーマフォルダ内のindex.jsに反映させるためにそのままコピーして貼り付けましょう。
document.addEventListener("DOMContentLoaded", function () {
ScrollReveal().reveal('.headline', { delay: 500 });
// mainタグのclassを取得
var mainTag = document.querySelector("main");
// mainタグにclassが付与されていない場合だけ実行する
if (!mainTag.classList.length) {
gsap.timeline()
.to(".text-wrapper", {
duration: 1,
y: "0%",
opacity: 1,
ease: "power3.out"
})
.to("p.sub-text", {
duration: 0.5,
opacity: 1,
ease: "power1.inOut"
})
.to(".middle", {
duration: 0.5,
opacity: 1,
ease: "power1.inOut"
})
.to(".large", {
duration: 0.5,
opacity: 1,
ease: "power1.inOut"
})
.to(".small", {
duration: 0.5,
opacity: 1,
ease: "power1.inOut"
})
.to("header", {
duration: 0.5,
y: "0",
opacity: 1,
ease: "power2.out"
});
} else {
// mainタグにclassが付与されている場合はこちらを実行
gsap.timeline()
.to("header", {
duration: 0.5,
y: "0",
opacity: 1,
ease: "power2.out"
});
}
});
動作確認
リンクを生成して記事一覧画面が見れるようになったら早速動作確認をしていきましょう。
いい感じですが、ページネーション部分のレイアウトが崩れていますね。おそらくWordPressで生成してくれたページネーションのDOM要素と画面モックで使用していたDOM要素に違いがあってこうなっています。
生成されたコードに微調整を加える
main.archive .container .pagenation {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0px auto;
padding: 50px 0px;
}
main.archive .container .pagenation span,
main.archive .container .pagenation a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid #eaeaea;
margin: 5px;
cursor: pointer;
text-decoration: none;
}
main.archive .container .pagenation .on {
background-color: #005bac;
color: #fff;
}style.cssの840行目付近のコードを修正していきます。
main.archive .container .nav-links {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0px auto;
padding: 50px 0px;
}
main.archive .container .pagenation span,
main.archive .container .pagenation a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid #eaeaea;
margin: 5px;
cursor: pointer;
text-decoration: none;
}
main.archive .container .pagenation .current {
background-color: #005bac;
color: #fff;
}プロパティの変更は特になく、クラス等のセレクタ部分を修正しています。
修正後のコードを修正前のコードと置き換えるだけでオッケーです。
ついでに記事一覧の本文抜粋部分の文字量が想定より少ないので、こちらも少し修正してみましょう。
archive.phpのwp_trim_words(get_the_excerpt(), 25, ‘…’);部分をwp_trim_words(get_the_excerpt(), 100, ‘…’);に変更します。
<div class="post-list">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<a class="post" href="<?php the_permalink(); ?>">
<div class="post-info">
<span><?php echo get_the_date('Y.m.d'); ?></span>
</div>
<p class="post-title">
<?php the_title(); ?>
</p>
<p class="post-text">
<?php echo wp_trim_words(get_the_excerpt(), 100, '...'); ?>
</p>
</a>
<?php endwhile;
else : ?>
<p>投稿が見つかりませんでした。</p>
<?php endif; ?>
</div>修正後の画面はこんな感じになりました。概ね画面モック通りの形になっています。
記事データが不足していたり環境によってはページネーションが表示されない場合があります。ページネーションを表示するための方法については次章で解説します。
投稿の表示数設定方法について
WordPressでは記事一覧に表示する記事数の設定が可能で、デフォルトでは1ページあたり10件表示となっています。
環境によっては記事データが不足していたり表示数設定の違いからページネーション有無が変わることがあるので、今回の開発での投稿数の設定周りを紹介します。
投稿の表示数を設定する
管理画面＞設定＞表示設定から投稿表示数の設定を行いましょう。
１ページに表示する最大投稿数を「４件」に設定します。
投稿データを用意する
最大投稿数を４件に設定が完了したら、投稿データを最低５件用意しましょう。
これで先程の記事一覧画面でページネーションが表示されるようになります。
実際にホームページを運用する際はどれぐらいの表示件数が閲覧者にとって読みやすいかを考えながら表示数を設定していきましょう
記事画面を表示するには？
記事一覧画面(archive.php)を作成しいい感じにデータと連携が出来てきましたが、まだ記事タイトルをクリックした時に記事画面へ遷移しません。
記事画面へ遷移するにはテーマファイルのsingle.phpが必要になります。
次回はsingle.phpの作成方法について解説していきます。
まとめ
今回はWordPressのオリジナルテーマで、記事一覧画面(archive.php)を作成する方法について紹介しました。記事一覧生成系はChatGPTにお任せするとちゃんと動くものが本当に爆速で生成されるので、是非有効活用してみてください！
ZeroStartでは初期費用０円でお客様に合わせたオリジナルテーマを使用したホームページ作成を行っています！ホームページ作成についてご相談がございましたらお気軽にご連絡ください！
