WordPressでテーマを新規作成


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

## フォルダを作成

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/ccf57e4d-5f68-682f-bb90-e93a1a87bc27.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/1719a4bf-cc1a-cfe8-3b2c-6fcad5b3f2de.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/ae6e51a7-bcff-54d7-a5ca-2a094a0a8e60.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/78d3ad96-bebd-4870-64f3-cc1f59ae730e.png)

## index.php　と style.css を作る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/35f168a1-f50f-7dcb-9a31-3bdb626cbf0a.png)

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

WordPressで「外観」を確認。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/e32a3b21-fbd3-24a2-355a-6a7546e46069.png)

testoneが認識されてます



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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/a73f3427-dd0e-0b6d-9c5f-f41f6fa1a826.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/7dd3c8fc-8b35-eefe-09a7-232a67afb50b.png)

## テーマを適用する

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/1b6252ed-dbc4-2a28-b17b-e8385b7e2555.png)

Twenty Twenty-Twoというテーマが有効になっている状態。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/37541525-120c-b7a1-387c-cd0ff3519037.png)

新規作成したテーマを有効化する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/9d7a892c-0408-3aae-53c9-69016b6ca669.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/475d3571-aa7c-8fea-6b57-69531bad144b.png)

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


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

```index.php
index
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/8371f397-cdc5-975a-c69c-b542c1d0d93d.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/5b903fcb-51bf-57e7-9df7-3abe03071e83.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/0ecbc08a-3e95-40fc-e908-f2b3457fee77.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/7040a5ed-93bc-1002-3f4f-177ad69125d4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/5fbadf7b-43b6-4c67-51c0-5257329a6ea0.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/16ba13f1-b761-2f3a-66fb-61e9a946a791.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/e529de0f-65e1-dda7-9e24-3a6393408804.png)

↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/626afc5c-0435-5fae-e004-2292e5b55fca.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/16ba13f1-b761-2f3a-66fb-61e9a946a791.png)

残念ながら、まだ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>
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/5109bfba-e479-38d3-b358-20d22afa750b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/12bc283a-6fb6-4858-d2a5-4789ebdfd790.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/16ba13f1-b761-2f3a-66fb-61e9a946a791.png)

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

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>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/c4955e4b-770c-b8b6-ad17-6f0d539976ad.png)

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

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

index.phpの<head>タグの最後に
```php
<?php wp_head(); ?>
```
を追加する。
これでWordPressに必要なファイル群が読み込まれます。

index.phpの<body>タグの最後に
```php
<?php wp_footer(); ?>
```
を追加する。

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/3aa5645d-0148-c8a4-b019-ac97e680beb6.png)

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

```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">
          <?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>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/3aa32fd7-81d6-a78d-f574-7283b2c62676.png)

## CSSを適用する

index.phpの<head>内のCSS読込を編集する

```php
<link href="css/styles.css" rel="stylesheet" />
↓
<link href="<?php echo get_template_directory_uri(); ?>/css/styles.css" rel="stylesheet" />
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/30afe1d9-1350-546f-533d-7c44da5dad83.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/784c6826-4a05-def2-95af-32776b5bcb9e.png)

## <head>タグの余計な要素を削除する

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

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

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

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

```php
<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
<?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
<?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; ?>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/84ef05ca-32e5-ee96-1b21-5ae12c1c04d3.png)


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/343da73a-5b2a-7898-cd52-17018361cf3f.png)

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

```php 
<?php echo paginate_links(); ?>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/b27afabf-6bc4-668d-d11d-c9cfc9d57a5a.png)


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

```php
<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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/85bf0582-4cf8-4ad6-e49e-56e3fc5bd872.png)

記事のページを開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/29271573-b96c-d482-f8e9-3c78ea39120c.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/9e88b815-7a81-f3a6-e1cb-8edf39329a19.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/cbc42286-d9f1-a574-b116-71093b2ecb94.png)