Wordpressの独自テーマに投稿記事を表示してみた。

今回はWordpressの独自テーマに投稿記事を表示してみました。
この記事は実施内容の備忘録となります。

1. 環境
2. 作業前の状態
3. 準備
- (1) 記事の投稿
- (2) デザイン(HTML/CSS)の作成
4. 記事が存在したら表示する
5. 公開日を表示する
6. タイトルを表示する
7. カテゴリー名を表示する
8. 記事本文を表示する

1. 環境

Windows7 Home Premium
VirtualBox 5.2
CentOS 8.0.1905
Apache 2.4.37
PHP 7.2
MariaDB 10.3.11
WordPress 5.3.1

2. 作業前の状態

single.php上でヘッダーとフッターを呼び出しているだけの状態です。

f:id:edasaka:20191220121037p:plain — single.php

f:id:edasaka:20191220121131p:plain — プレビュー

3. 準備

まずは記事を表示する前の準備をしていきます。

(1) 記事の投稿

プレビュー用に下記の記事を投稿します。

f:id:edasaka:20191220121933p:plain — 記事の投稿

(2) デザイン(HTML/CSS)の作成

表示する記事のデザインをHTMLとCSSを使用して作成します。
今回はこんな感じで作成しました。

f:id:edasaka:20191220122347p:plain — デザイン

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>タイトル</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header id="header">ヘッダー</header>
    <div id="content">
        <article id="article">
            <time id="article-datetime">2019-12-17</time>
            <h1 id="article-title">タイトル</h1>
            <ul id="article-category">
                <li>カテゴリ①</li>
                <li>カテゴリ②</li>
            </ul>
            <div id="article-text">
                <h2>見出し2</h2>
                <p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
                <h3>見出し3</h3>
                <ul>
                    <li>リスト</li>
                </ul>
                <h4>見出し4</h4>
                <ol>
                    <li>ナンバリングリスト</li>
                </ol>
            </div>
        </article>
    </div>
    <footer id="footer">フッター</footer>
</body>
</html>

@import url("reset.css");
#header, #footer {
  background: #ccc;
  clear: both;
  padding: 2rem;
  text-align: center;
}
#article {
  padding: 1rem;
}

#article-datetime {
  display: block;
  margin-bottom: 0.5rem;
}

#article-title {
  clear: both;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 1rem;
}

#article-category {
  padding: 0 0 2rem 0.5rem ;
}

#article-category li {
  background: #f4f4f4;
  color: #333;
  display: inline;
  font-size: 0.8em;
  font-weight: bold;
  margin-right: 0.5rem;
  padding: 0.2rem 0.5rem;
}

#article-text h2, #article-text h3, #article-text h4, #article-text p, #article-text ul, #article-text ol {
  line-height: 2rem;
}

#article-text h2, #article-text h3, #article-text h4 {
  font-weight: bold;
}

#article-text h2 {
  text-decoration: underline;
  -webkit-text-decoration-style: double;
          text-decoration-style: double;
  padding-left: 1.25rem;
}

#article-text h3 {
  text-decoration: underline;
  padding-left: 1.5rem;
}

#article-text h4 {
  padding-left: 1.75rem;
}

#article-text p, #article-text ul, #article-text ol{
  margin: 0 0 2rem;
  padding-left: 2rem;
}

4. 記事が存在したら表示する

記事が存在したら表示する記載方法が下記となります。

    <?php if(have_posts()) : ?>
        <?php while(have_posts()) : the_post();?>
        <!-- ここに記事の内容が表示される -->
        <?php endwhile; ?>
    <?php endif; ?>

用意したデザインを含めて、single.phpを編集します。

<?php get_header(); ?>

<!-- ↓↓↓↓  追加 ↓↓↓↓  -->
<div id="content">
    <?php if(have_posts()) : ?>
        <?php while(have_posts()) : the_post();?>
        <article id="article">
            <!-- ここに記事の内容が表示される -->
        </article>
        <?php endwhile; ?>
    <?php endif; ?>
</div>
<!-- ↑↑↑↑  追加 ↑↑↑↑  -->

<?php get_footer(); ?>

まだ、何も表示されません。

f:id:edasaka:20191220132921p:plain — プレビュー

5. 公開日を表示する

公開日を表示する記載方法が下記となります。

<?php echo get_the_date("Y-m-d"); ?>

用意したデザインを含めて、公開日が表示されるようsingle.phpを編集します。

<?php get_header(); ?>
<div id="content">
    <?php if(have_posts()) : ?>
        <?php while(have_posts()) : the_post();?>
        <article id="article">

            <!-- ↓↓↓↓  追加 ↓↓↓↓  -->
            <time id="article-datetime">
                <?php echo get_the_date("Y-m-d"); ?>
            </time>
            <!-- ↑↑↑↑  追加 ↑↑↑↑  -->

        </article>
        <?php endwhile; ?>
    <?php endif; ?>
</div>
<?php get_footer(); ?>

公開日が表示されました。

f:id:edasaka:20191220134038p:plain — プレビュー

6. タイトルを表示する

タイトルを表示する記載方法が下記となります。

<?php echo get_the_title(); ?>

用意したデザインを含めて、タイトルが表示されるようsingle.phpを編集します。

<?php get_header(); ?>
<div id="content">
    <?php if(have_posts()) : ?>
        <?php while(have_posts()) : the_post();?>
        <article id="article">
            <time id="article-datetime">
                <?php echo get_the_date("Y-m-d"); ?>
            </time>

            <!-- ↓↓↓↓  追加 ↓↓↓↓  -->
            <h1 id="article-title">
                <?php echo get_the_title(); ?>
            </h1>
            <!-- ↑↑↑↑  追加 ↑↑↑↑  -->

        </article>
        <?php endwhile; ?>
    <?php endif; ?>
</div>
<?php get_footer(); ?>

タイトルが表示されました。

f:id:edasaka:20191220134652p:plain — プレビュー

7. カテゴリー名を表示する

カテゴリー名を表示する記載方法が下記となります。

<?php foreach (get_the_category() as $categoty ):?>
    <?php echo $categoty->name;?>
<?php endforeach;?>

用意したデザインを含めて、カテゴリー名が表示されるようsingle.phpを編集します。

<?php get_header(); ?>
<div id="content">
    <?php if(have_posts()) : ?>
        <?php while(have_posts()) : the_post();?>
        <article id="article">
            <time id="article-datetime">
                <?php echo get_the_date("Y-m-d"); ?>
            </time>
            <h1 id="article-title">
                <?php echo get_the_title(); ?>
            </h1>

            <!-- ↓↓↓↓  追加 ↓↓↓↓  -->
            <ul id="article-category">
            <?php foreach (get_the_category() as $categoty ):?>
                <li>
                    <?php echo $categoty->name;?>
                </li>
            <?php endforeach;?>
            </ul>
            <!-- ↑↑↑↑  追加 ↑↑↑↑  -->

        </article>
        <?php endwhile; ?>
    <?php endif; ?>
</div>
<?php get_footer(); ?>

カテゴリー名が表示されました。

f:id:edasaka:20191220140003p:plain — プレビュー

8. 記事本文を表示する

記事本文を表示する記載方法が下記となります。

<?php echo get_the_content(); ?>

用意したデザインを含めて、記事本文が表示されるようsingle.phpを編集します。

<?php get_header(); ?>
<div id="content">
    <?php if(have_posts()) : ?>
        <?php while(have_posts()) : the_post();?>
        <article id="article">
            <time id="article-datetime">
                <?php echo get_the_date("Y-m-d"); ?>
            </time>
            <h1 id="article-title">
                <?php echo get_the_title(); ?>
            </h1>
            <ul  id="article-category">
            <?php foreach (get_the_category() as $categoty ):?>
                <li>
                    <?php echo $categoty->name;?>
                </li>
            <?php endforeach;?>
            </ul>

            <!-- ↓↓↓↓  追加 ↓↓↓↓  -->
            <div id="article-text">
                <?php echo get_the_content(); ?>
            </div>
            <!-- ↑↑↑↑  追加 ↑↑↑↑  -->

        </article>
        <?php endwhile; ?>
    <?php endif; ?>
</div>
<?php get_footer(); ?>

記事本文が表示されました。

f:id:edasaka:20191220140843p:plain — プレビュー

以上、Wordpressの独自テーマに投稿記事を表示してみた。でした。