IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / Wordpress / WordPress:テーマをゼロから作ってみる(2)

WordPress:テーマをゼロから作ってみる(2)

2022/05/29 Wordpress

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

  • WordPress:テーマをゼロから作ってみる(1) – IMUZA.com

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

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

html テンプレを入れる

前回はヘッダ要素を作成しました。次はボディ要素 <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>

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

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

この 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>

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

  • テンプレートタグ/bloginfo – WordPress Codex 日本語版
  • テンプレートタグ/the permalink – WordPress Codex 日本語版
  • テンプレートタグ/the title – WordPress Codex 日本語版
  • テンプレートタグ/the date – WordPress Codex 日本語版
  • テンプレートタグ/the category – WordPress Codex 日本語版

  • テンプレートタグ/the content – WordPress Codex 日本語版
  • テンプレートタグ/the excerpt – WordPress Codex 日本語版

本文表示では、

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

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

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

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

投稿ページはどうなるか?

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

こうなります。記事本文については、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

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

  • 任天堂

Amazon

WordPress:テーマをゼロから作ってみる(1)
WordPress Popular Posts 表示されない(解決だが…)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/05/25

WordPress:リビジョン削除、回数制限

2023/05/10

WordPress:裏技的サイトリニューアル

2023/04/28

XserverへのSSH接続がエラーになってしまった

2023/04/16

正規表現の最短一致でミスる

2023/04/4

WordPress:公開中サイトをサブディレクトリでリニューアルし公開する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips109
  • javascript98
  • Joomla!88
  • Wordpress70
  • Windows68
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com