WordPressでテーマを新規作成

WordPressでテーマを新規作成する方法のメモです。

フォルダを作成

WordPressフォルダの中の
「wp-content」の中の「themes」にフォルダを作る

index.php　と style.css を作る

とりあえず、中身は空の状態でファイルを作りました

WordPressで「外観」を確認。

testoneが認識されてます

style.cssにヘッダーコメントを記述する

style.css

/*
Theme Name: わーどぷれすのてーまてすと
Author: BlueMountain
Version: 1.0
Description: WordPressのテスト用テーマです
*/

テーマを適用する

適用する前に現在の画面を確認する

Twenty Twenty-Twoというテーマが有効になっている状態。

新規作成したテーマを有効化する。

再び、サイトの画面を確認する。

真っ白けの状態になっている。
　→現時点では、これで正解。

index.phpに何か書いてみる。

index.php

index

ベースとなるテーマを探す

Start Bootstrapというサイト
https://startbootstrap.com/

Clean Blog というThemeを今回ダウンロードしてみる。

ダウンロードしたThemeを適用していく。

ダウンロードしたThemeの中のindex.htmlの中身をindex.phpにコピーする。

この状態で、テストサイトを再度確認すると、

Clean Blogのページが表示されました。

css, img, jsのフォルダをコピーする。

↓

テストサイトを再度確認すると、

残念ながら、まだCSSなどは効いていません。

投稿のタイトルを表示する

Man must explore, and this is exploration at its greatest
と表示されている投稿タイトルは、現在は固定値が表示されています。

index.php

...
<!-- Main Content-->
<div class="container px-4 px-lg-5">
    <div class="row gx-4 gx-lg-5 justify-content-center">
        <div class="col-md-10 col-lg-8 col-xl-7">
            <!-- Post preview-->
            <div class="post-preview">
                <a href="post.html">
                    <h2 class="post-title">Man must explore, and this is exploration at its greatest</h2>
                    <h3 class="post-subtitle">Problems look mighty small from 150 miles up</h3>

管理画面で投稿を新規作成します。

テストサイトを再度確認すると、

残念ながら、反映されていません。

the_title()というテンプレートタグを使います。

index.php

...
<!-- Main Content-->
<div class="container px-4 px-lg-5">
    <div class="row gx-4 gx-lg-5 justify-content-center">
        <div class="col-md-10 col-lg-8 col-xl-7">
            <!-- Post preview-->
            <div class="post-preview">
                <a href="post.html">
                    <h2 class="post-title"><?php the_title() ?></h2>
                    <h3 class="post-subtitle">Problems look mighty small from 150 miles up</h3>

「投稿テスト」というタイトルが表示されました。

お約束のテンプレートタグ。wp_head() wp_footer()

index.phpの

タグの最後に

<?php wp_head(); ?>

を追加する。
これでWordPressに必要なファイル群が読み込まれます。

index.phpの

タグの最後に

<?php wp_footer(); ?>

を追加する。

投稿日時を表示する。wp_time()

index.php

on September 24, 2022
↓
on <?php the_time( "Y年n月j日 l" ); ?>

本文、著者を表示する。wp_content() wp_author() wp_pos()

<!-- Main Content-->
<div class="container px-4 px-lg-5">
    <div class="row gx-4 gx-lg-5 justify-content-center">
        <div class="col-md-10 col-lg-8 col-xl-7">
          <?php the_post(); ?>
            <!-- Post preview-->
            <div class="post-preview">
                <a href="post.html">
                    <h2 class="post-title">
                    <?php the_title(); ?>
                    </h2>
                    <h3 class="post-subtitle">
                      <?php the_content(); ?>
                    </h3>
                </a>
                <p class="post-meta">
                    Posted by
                    <?php the_author(); ?>
                    on <?php the_time( "Y年n月j日 l" ); ?>
                </p>
            </div>

CSSを適用する

index.phpの

内のCSS読込を編集する

<link href="css/styles.css" rel="stylesheet" />
↓
<link href="<?php echo get_template_directory_uri(); ?>/css/styles.css" rel="stylesheet" />

このように、パスを相対パスで参照している箇所を上記のように書き直します。

タグの余計な要素を削除する

        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Clean Blog - Start Bootstrap Theme</title>

ブログタイトル bloginfo('name')

<a class="navbar-brand" href="index.html">Start Bootstrap</a>
↓
<a class="navbar-brand" href="index.html"><?php bloginfo('name'); ?></a>

トップページのURL取得。 home_url()

<a class="navbar-brand" href="index.html"><?php bloginfo('name'); ?></a>
↓
<a class="navbar-brand" href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>

投稿をループで表示する。 while

<?php the_post(); ?>
  <!-- Post preview-->
  <div class="post-preview">
      <a href="post.html">
          <h2 class="post-title">
          <?php the_title(); ?>
          </h2>
          <h3 class="post-subtitle">
            <?php the_content(); ?>
          </h3>
      </a>
      <p class="post-meta">
          Posted by
          <?php the_author(); ?>
          on <?php the_time( "Y年n月j日 l" ); ?>
      </p>
  </div>
  <!-- Divider-->
  <hr class="my-4" />

↓

<?php while (have_posts()): the_post(); ?>
  <!-- Post preview-->
  <div class="post-preview">
      <a href="post.html">
          <h2 class="post-title">
          <?php the_title(); ?>
          </h2>
          <h3 class="post-subtitle">
            <?php the_content(); ?>
          </h3>
      </a>
      <p class="post-meta">
          Posted by
          <?php the_author(); ?>
          on <?php the_time( "Y年n月j日 l" ); ?>
      </p>
  </div>
  <!-- Divider-->
  <hr class="my-4" />
<?php endwhile; ?>

前のページ、次のページ。 previous_posts_link() next_posts_link()

<?php previous_posts_link(); ?>
<?php next_posts_link(); ?>

ページネーション。 paginate_links()

<?php echo paginate_links(); ?>

記事のURLを取得。 the_permalink())

<a href="post.html">
↓
<a href="<?php the_permalink(); ?>">

記事のページのテンプレート

single.php というファイルを作る。
※テンプレート階層という概念を要チェック。
　https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

記事のページを開く

Start Bootstrapのダウンロードファイルの中の post.html の中身を single.phpに貼り付け。

index.phpでやったことを再び行う。URLの参照など。