WordPress：テーマをゼロから作ってみる（2）

2022.05.29 Wordpress

WordPress のテーマを自作するのは簡単だろうということで始めた「テーマをゼロから作ってみる」の２回目です。

WordPress：テーマをゼロから作ってみる（１） – IMUZA.com

当面 WordPress の仕組みを理解するためにすべて index.php で処理する方法を取っています。つまり、投稿ページ以外はすべてリクエスト（カテゴリーや検索ワードという意味）に該当する最新記事の一覧が表示されるということです。

html テンプレを入れる
テンプレートタグを入れる
投稿ページはどうなるか？

01html テンプレを入れる

前回はヘッダ要素を作成しました。次はボディ要素 <body></body> です。

まずは、html のテンプレを index.php に入れてみます。

<body>
<header>
    <h1>サイトのタイトル</h1>
    <p>キャッチフレーズ</p>
</header>
<nav>メニュー</nav>
<main>
    <nav>パンくずリスト</nav>
    <article>
        <header>
            <h2>投稿タイトル</h2>
            <p>投稿日付</p>
            <p>カテゴリー</p>
        </header>
        <div>記事</div>
    </article>
</main>
<aside>サイドバー</aside>
<footer>フッター</footer>
</body>

当然ですが、こうなります。

02テンプレートタグを入れる

この html テンプレに WordPress のテンプレートタグを入れていきます。

テンプレートタグ – WordPress Codex 日本語版

<body>
<header>
    <h1>
        <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
    </h1>
    <p><?php bloginfo('description'); ?></p>
</header>
<nav>メニュー</nav>
<main>
    <nav>パンくずリスト</nav>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article>
        <header>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p><?php the_date(); ?></p>
            <p><?php the_category( ', '); ?></p>
        </header>
        <div><?php (is_single()) ? the_content() : the_excerpt(); ?></div>
    </article>
    <?php endwhile; endif; ?>
</main>
<aside>サイドバー</aside>
<footer>フッター</footer>
</body>

こうなります。使っているテンプレートタグは次のとおりです。

本文表示では、

<?php (is_single()) ? the_content() : the_excerpt(); ?>

としていますので、投稿ページでは全文を表示し、その他ホームなどでは抜粋を表示します。

なお、サンプルとして使っているデータは次のサイトのものです。

そんなには褒めないよ。映画評 – ネタバレレビュー・あらすじ

03投稿ページはどうなるか？

記事タイトルに各記事へのリンクが張ってありますのでクリックすれば投稿ページへ飛びます。

こうなります。記事本文については、CSS で配置などを見やすく整理すれば完成しそうです。

ただ、ここでひとつやっておくべきことは、<h1></h1> タグの付け替えです。上記の index.php では投稿ページでも <h1></h1> がサイトタイトルになってしまい、記事タイトルが <h2></h2> のままです。これを変えます。

<body>
<header>
    <?php echo (is_home()) ? '<h1>' : '<p>'; ?>
        <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
    <?php echo (is_home()) ? '</h1>' : '</p>'; ?>
    <p><?php bloginfo('description'); ?></p>
</header>


略


    <article>
        <header>
            <?php echo (is_single()) ? '<h1>' : '<h2>'; ?>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            <?php echo (is_single()) ? '</h1>' : '</h2>'; ?>
            <p><?php the_date(); ?></p>
            <p><?php the_category( ', '); ?></p>
        </header>
        <div><?php (is_single()) ? the_content() : the_excerpt(); ?></div>
    </article>

これで、ホームではサイトタイトルが h1 になり、投稿ページでは記事タイトルが h1 になります。

なお、ここで使っている is_home() や is_single() による分岐はすべての表示を index.php で行っているから可能な分岐です。現実的なテーマでホームを固定ページで作ったりする場合はこの限りではありません。

条件分岐タグ – WordPress Codex 日本語版

次はメニューとサイドバーへのウィジェット登録です。

Nintendo Switch Sports(ニンテンドースイッチスポーツ) -Switch

任天堂

Amazon

#WordPress