何番煎じだっていう、HTMLをWordPress化する具体的な組み込み方

特定の人に向けて書いていますが、この記事がそのまま誰かの役に立てばと思います。

今回使うコード
https://github.com/naka0000/kaigo-theme

## 具体的な前提

何番煎じとタイトルには書いてますが、冗長な構成にして初心者(HTMLとCSSでページが作れる層)にわかりやすくしたつもりです。

実践して、実戦に耐える構成を習得してから[リファクタリング](https://wa3.i-3-i.info/word1494.html)などして本番に挑んでください。
パフォーマンスだったり、Wordpressらしい構成など他の方法を想像して読む記事になります。

簡単に言うと、この記事は間違いなく**答えではありません**。

本当の初学者が慣れるために作った題材です。
Web制作、Web開発は公開して終わりではありませんので、この記事を題材に少しずつ良いコードだったり構成が作れるようになればと思います。

<hr>

今回の題材は「採用を目的としたコーポレートサイト」~~な気がします~~です。

あれやこれや目的を入れたいところですが、主軸となる目的はしっかり定めましょう。
別の目的があれば別のホームページを作ればいいのです。


現段階でこんなファイル群でHTMLファイルの介護サイトのデザインまで作りました。


|ページ内容  |ファイル名  |
|---|---|
|トップページ | index.html |
|私たちについて | about.html |
|サービス | service.html |
|会社案内 | company.html |
|新着情報 | news.html |
|採用情報 (お問い合わせ) | recuit.html |
|CSSフォルダ | css/ |
|Javascriptフォルダ | js/ |
|画像フォルダ | image/  |

コンテンツは少ないですが、「マイクロコピー」なんていう単語で検索してみるといいじゃないでしょうか。
[本とかもあります](https://www.amazon.co.jp/Web%E3%82%B3%E3%83%94%E3%83%BC%E3%83%A9%E3%82%A4%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E6%96%B0%E5%B8%B8%E8%AD%98-%E3%82%B6%E3%83%BB%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B3%E3%83%94%E3%83%BC-%E5%B1%B1%E6%9C%AC-%E7%90%A2%E7%A3%A8/dp/4798049247)ので図書館で借りて読みましょう。~~買わなくていいです。~~


## Local by flywheelをインストールする。

日本語化ができないソフトですが、、、
HTMLを読めれば英語も読めるでしょう。
実戦でサーバーと戦うときには英語だけが頼りです。粘り強く読みましょう。

ローカルのテスト環境として[Local by flywheel](https://localwp.com/)を使っていきます。
メールアドレスの入力だけでダウンロードできます。
~~もしイヤであれば、`aaa@test.com`とか入力すればダウンロードできます。~~

![local_homepage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/32170b98-299c-2f08-0eff-183273ff7cd3.png)
![local_download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/d59e0a3f-68d7-39a2-1722-4b25dfd63021.png)

インストールしましょう。
ブラックボックス感満載ですが、余計なものを省いた[仮想環境](https://wa3.i-3-i.info/word15456.html)ソフトでしょう。VagrantとかVirtualBoxと同じだと思います。


## WordPressを環境を作成。
起動します。

![a.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/de98b431-c44f-5184-0a9f-88f04225877c.jpeg)


起動したら`Create New Site`で早速WordPressを作りたいところですが、ちょっとだけ設定を見てみます。
どこにWordPressが作られるんでしょうか。

左上ハンバーガーメニューからPreferenceに入り、
![local_preference.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/e32c1f6e-4d7a-a135-c75d-cb181c8a7210.png)
New Site Defaultsを覗いてみます。
![local_save_folder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/29bc9750-d2e2-f3c6-1939-dfd971b3f4b0.png)

サイトのパスの設定が`~/Local Site/`となっていますね。
`~`は**ホームフォルダ**という意味の省略語で、Windowsの場合は、`ローカルディスク(C):\Users\user`のフォルダですね。
そこに`Local Site` というフォルダはまだありませんが、新しく作られて、`Local Siteフォルダ`の中にWordPressのコードが入ります。

では、`Create New Site`しましょう。
何度でも作り直せるのがLocal by flywheelのいいところなので、考えずに適当に入れていきます。

はい
![local_my_first_test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/981aed51-9f97-35de-d817-a1028dacf24c.png)

次
![local_my_first_test2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/d554bcc8-64b1-166e-834c-3f42b6e724d0.png)

次
![local_my_first_test3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/8b5d71b1-f726-0aa0-be17-5839062a66b8.png)


初回は警告が出てきますが、OKするしか進めません。焦っていきましょう。良いことです。
![keikoku1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/7a9bc1e4-7015-1fbb-46ae-03069bd4bbc5.png)
![keikoku4(1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/f9f9064e-5657-38e4-ac9a-c5104542907b.jpeg)


![keikoku2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/82be75dc-8608-bdaf-617d-1cc353511e68.png)
![keikoku3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/47f247ab-dad5-bdec-757d-7e86e7c5b01c.png)

出来上がりました。
画像のとおりクリックするとWordpressのテスト環境が見れます。
![local_can_open_site.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/0ebde2ba-8445-32c7-c1bc-39381ac44a32.png)

ここでいったんファイルエクスプローラを覗いてみます。
![local_explorer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/11fdc760-5e59-47ce-ec40-294cb4274399.png)


ホームフォルダに`Local Site`というフォルダができていて、そこの中にインストールされていることが確認できます。
設定どおりです。

## HTMLをWordPressのテーマフォルダへ入れる

`Local Site\myfirsttest\app\public\wp-content\themes`のフォルダにテーマが入っています。
- twentytwenty
- twentytwentyone
- twentytwentytwo
- index.php

とありますが、これらは初期テーマです。
それに平行する形で今回の介護テーマを入れます。

`kaigo-theme`という新しくフォルダを作って冒頭のファイルをぶち込みます。
以下の図な感じのツリーです。

```: ローカルディスク(C):\Users\userLocal Site\myfirsttest\app\public\
wp-content\themes\kaigo-theme
                          |- css/
                          |- js/
                          |- image/
                          |- about.html
                          |- company.html
                          |- index.html
                          |- news.html
                          |- recuit.html
                          |- service.html

```

ここまでではまだテーマは表示されません。次の項目に行きます。

## テーマフォルダへscreenshot.pngを追加する。

※上では`myfirstTest`という名前で環境を作ってましたが、削除して作り直したため、ここからは`kaigo`というLocal by flywheelの環境で作業を行っていきます。気になりそうな方は削除して同じ名前で作り直してください。

まずは`index.html`をブラウザで開きましょう。
キレイにできている今のうちに[スクリーンショットを撮って](https://www.pc-koubou.jp/magazine/35994)サムネイルを作ります。大事。

`Windowsボタン＋PrintScreen`で[スクリーンショットを撮り](https://www.pc-koubou.jp/magazine/35994)ます。
`Windowsボタンを押して、"paint"`と入力してペイントでも開いて、
`Ctrl＋V`で貼り付け。
範囲選択して`Ctrl＋Shift＋X`でトリミングしましょう。
`Ctrl＋S`で保存は書かなくてもいいですね。

![kaigo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/3f214a38-2786-f377-0db6-0025b1fb867a.png)


こんな風にスクリーンショットが撮れたら、Wordpressのテーマフォルダ`kaigo-theme`へぶち込みます。
名前を変更して`screenshot.png`とすることでサムネイルとして自動で読み込んでくれます。
まだ表示はされません。次の項目へ行きましょう。

## index.htmlをindex.phpに名前変更し、さらにstyle.cssを追加する。

~~ここからの作業はタイトルごとに[Git](https://wa3.i-3-i.info/word12778.html)のcommitを重ねていけばキレイなんじゃないでしょうか。
developって名前でブランチなんて切っておくと、動くコードになるまでそのdevelopブランチで作業できるので、単独での開発でもそう言った開発でいいんじゃないですかね。
今回はファイルをいじる量が多いので、どっちにしろチーム作業ではコンフリクト（チーム作業において、同じコード行を修正して衝突すること）起きると思うのであまり意味はありませんが。
Gitを使ってない方はどんどん進んでいきましょう。~~

ここまでで、HTMLファイル群がWordpressのテーマフォルダに入って、サムネイル用の`screenshot.png`が追加できましね。
さらに少し手を加えます。
`index.html`を`index.php`と名前の変更し、`style.css`というファイルを新規作成します。

```: ローカルディスク(C):\Users\user\Local Site\kaigo\app\public\
wp-content\themes\kaigo-theme
                          |- css/
                          |- js/
                          |- image/
                          |- about.html
                          |- company.html
                          |- index.php 👈ファイル名を変更
                          |- news.html
                          |- recuit.html
                          |- service.html
                          |- style.css 👈 Ｎｅｗ！

```

style.cssを開いて4行だけ書いて保存しましょう。

```css: kaigo-theme\style.css
@charset "UTF-8";
/*
Theme Name: 介護テーマ
*/ 
```

では、`Local by flywheel`を起動してWordpressを開いて、見てみましょう。
![local_open_site.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/aa720237-1f71-1d57-b905-78fe60a441f6.png)

左サイドバーから外観→テーマを選ぶと「介護テーマ」が追加されています！
![wp_added_theme.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/dd606132-53cd-adf2-43cc-24d8121bcccf.png)

ではテーマを有効化する前にライブプレビューでもしてみましょう。

![wp_add_new.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/6b4ff317-522c-4533-b155-e114de9b4960.png)

はい、ぐちゃぐちゃです。
ここからビビらず直していきましょう、というのがこの記事で、ここからが本番です。
初心者はこうなっちゃうと壊れたと思っちゃいますが、なんというか、何も壊れてないので落ち着きましょう。

壊れてはいませんが、コードをWordpressに合わせて追加、改変していきます。
大丈夫です。直しますが、壊れていません。

## CSS、JS、画像の参照先を修正する。

ここから先の作業は簡便な方法なので、冒頭で書いた通り[リファクタリング](https://wa3.i-3-i.info/word1494.html)なりするつもりでやっていきましょう。
とりあえず見た目だけでも先にキレイに表示して安心したいですね。

結論から言うと、これが原因です。
```php: kaigo-theme\index.php
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/anm.css" rel="stylesheet" type="text/css">
```

Wordpressではすでに`index.php`を表示していません。
特にトップページは`kaigo.local/`というアドレスに`index.php`の内容を差し込んでるだけです。
つまり参照元ファイルが変わっているので、相対参照のアドレスでは参照先が見つからないということですね。
`F12`でコンソール(標準出力)を見てみましょう。

![wp_new_console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/7c9103c3-69f8-496e-4ef7-8b48bf9cb1c1.png)

404 （Not Found）がでていますね。
この表示されているファイルの参照箇所を書き換えていけばキレイに表示されます。
（あとで[リファクタリング](https://wa3.i-3-i.info/word1494.html)は必要）

CSSのHTML参照先(html reference)をWordpressに合わせて`<?= get_template_directory_uri(); ?>/`追記します。
```php: kaigo-theme\index.php
<link href="<?= get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<link href="<?= get_template_directory_uri(); ?>/css/responsive.css" rel="stylesheet" type="text/css">
<link href="<?= get_template_directory_uri(); ?>/css/anm.css" rel="stylesheet" type="text/css">
```

ちなみに`<?=`の読み方は**PHPエコー**です。
省略しない形が`<?php echo`なので、そう呼んでいます。

3行だけでもだいぶキレイになって、安心して作業が進められそうですね。
![wp_css_daibu_anshin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/390aba5a-c978-085b-18ab-64e72d24d523.png)

<hr>

では、同様にJavascriptと画像のリンクを修正していきましょう。

CSSのリンクを直したのと同じ作業をします。

`F12`でコンソールを確認しながらリンク切れ(404NotFound)だけ直して行きましょう。
まだ3行しか直していないので、Javascriptと画像がリンク切れが残ったままですね。
`Ctrl＋F`で`js/`と検索して直して、同じように`images/`も検索して、置き換えるのがいいですね。

コンソールがキレイに問題なしになります。
![wp_console_no_wenti.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/cab747a5-2ea6-9d13-ff78-f20316695af8.png)

もしかすると他にエラーが出る可能性もありますが、今回は404NotFoundのエラーだけ消せればOKです。

## ページ遷移のリンク切れを修正する

トップページから別のページへのリンクも、相対参照しているため、リンク切れを起こしています。
現象としては、リンク切れページすらも用意していないので、Wordpressがindex.phpを表示してくれています。
つまり、トップページを表示してくれる状態ですね。
でも、たとえば「私たちについて」のページをクリックしてから、アドレスバーを見てください。
![address.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/5e349af9-c27c-25c5-7a1c-df2f394c452c.jpeg)
でも表示されてるデザインは、トップページのはずです。おかしいですね。

このままではエラーリンクに気付きにくいので、まず簡易的に404 Not Foundのページを作りましょうか。

### 404.phpを追加する。

テーマフォルダ内に404.phpというファイルを追加します。デザインはあとで直すとして、次のようにします。
```php:kaigo-theme\404.php
<?php
/**
 * The template for displaying 404 pages (not found)
 */
?>
<h1>404 Not Found</h1>
<p>ページが見つかりませんでした</p>
<a href="<?= get_site_url(); ?>">トップページへ戻る</a>
```

これのファイルを追加した状態でトップページを開いて「私たちについて」のリンクをクリックしてみましょう。

![Not Found.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/7c80cae0-9ef9-8dd5-8480-5c6098d544d8.png)

これで一旦、すべてのリンク切れはWordPressがよしなにしてくれます。

デザインはあとで修正するとして、これで作業を進めましょう。

### about.htmlを修正する。

`about.html`を例に変更していきます。

まずは`about.html`を`about.php`に名前変更します。
しかしこのままではWordpressがまだ認識してくれません。
そこで、ファイルの先頭に次の5行を追記します。

```php:kaigo-theme\about.php
<?php
/**　　　　　　　　　　　　　　　　　
 * Template Name: 私たちについて
 */
?>
<!doctype html>   👈ここ以下はひとまずそのままで。
<html lang="ja">
︙
```

これでWordPressが認識してくれますので、ページ作成をしてそのページに紐づけます。

Wordpress管理画面の左サイドバー、固定ページに入って、新規追加します。
![wp_new_add.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/76a871bb-308e-651e-727f-38ef6ce5cb45.png)

- タイトルにページ名を記載 (私たちについて)
- テンプレートを指定 (私たちについて)
- アドレスを指定 (about)

３つを指定して公開します。

![wp_new_template.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/0697c37a-b448-62fe-b065-19d57e55b859.png)

アドレスに`kaigo.local/about/`を指定したので、アドレスバーに`kaigo.local/about/`と入れれば開けます。

<hr>

`index.php`のリンクを書き換えましょう。

```php:kaigo-theme\index.php
<a href="about.html" class="animoBubble5">
```
書き換えます。
```php:kaigo-theme\index.php
<a href="kaigo.local/about/" class="animoBubble5">
```
**違いますね。**

Wordpressの[関数](https://wa3.i-3-i.info/word1905.html)を使いましょう。
今回はトップページのアドレスが返ってくる[関数](https://wa3.i-3-i.info/word1905.html)`<?= get_site_url(); ?>/`を使います。

```php:kaigo-theme\index.php
<a href="<?= get_site_url(); ?>/about/" class="animoBubble5">
```
これで動きます。

![wp_return_home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/a0da7a03-c0d6-541f-9e53-1acf03444677.png)

またCSSがリンクが切れてますけど、動いてることが確認できたら、`index.php`内のすべての`href="about.html"`を書き換えましょう。
すべて書き換えたら`index.php`内で検索を書けても、`about.html`は検索に引っかからないはずですので、そこまで書き換えましょう。

また逆方向のリンクとして、`index.html`へのリンクになっている箇所も変更しましょう。
このリンクのみ少し特殊で`index.html`を`index.php`に名前の変更をした時点でWordpressが`index.php`を[ルートドメイン](https://wa3.i-3-i.info/word13896.html)として表示するようになったため、以下のように変更しましょう。

```php:kaigo-theme\about.html
<a href="index.html">
```
上の`index.html`を次のように書き換えます。

```php:kaigo-theme\about.html
<a href="<?= get_site_url(); ?>">
```

この記載でドメイン（正確には違いますが）である`kaigo.local`というアドレスが返ってくるので、トップページにアクセスできます。
（このあたりも正確ではありませんが）

一度、書き換えたアドレスを`F12`を押して、ブラウザのデベロッパーツールで確認してみましょう。
`<?= get_site_url(); ?>`と記載した箇所が、実際のホームページでは、どういう文字列に変換されて出力されているかをその目で確認しましょう。

`kaigo.local`であったり、`http://localhost:10003/`だったり、環境によりますが、Wordpressのルートドメインが出力されているはずです。

<hr>

遷移のリンクの修正が済んだら、
トップページでやったように`about.php`内のCSS、Javascript、画像のリンクに`<?= get_template_directory_uri(); ?>/`を追記しましょう。
コンソールでエラー箇所を確認すると良いでしょう。

キレイになるはずです。

### service.htmlを修正する

あとは同じ作業を各ページ、各リンクで繰り返していくだけです。

Wordpressに呼んでもらえるように拡張子をphpに変更して、テンプレート化しましょう。忘れずに、
```
<?php
/**　　　　　　　　　　　　　　　　　
 * Template Name: サービス
 */
?>
```
を先頭にいれましょう。
WordPressのルーティングの設定ができたらアドレス直打ちでWordPressから呼び出せるかを確認しましょう。
テストができたらGitコミットできますよね。

<hr>

また、リンクを直す際は、
- ページ内遷移の#を使った箇所のアドレス
- アドレスに`.html`が残ったままになっていないか
- `index.html`が`<?= get_site_url(); ?>`に置き換える

あたりを注意して直すと良いでしょ
終わったらきちんとテストしましょう。

### company.htmlを修正する

同じですね。
`Template Name`はかぶっても動きますが、わけがわかんなくなるので、適切に名前をつけましょうね。

 同じような作業ですが、一気に作業せず、なるべく細かい単位でテスト、コミットしましょう。
~~Wordpress自体がクソ面倒くさいですからね。自分が使いたくないからこんなマニュアルを書いているわけで~~

### recuit.htmlを修正する。

この機会にスペルミスを直しましょう。recruitのことですよね。
「修正: スペルミス」で1文字の修正でコミットしましょう。どうせリンクは切れてますから。

<hr>

ページのCSS、JS、画像のリンクを修正しましょう

<hr>

ここからやっとPHPを使う意味が出てきたところになりますね。

リンクを修正していく前に、問い合わせフォームを作りましょう。
その後リンクを貼る手順で作業を進めていきます。

Contact Form 7プラグインを入れます。
![wp_contact_form_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/48748dbd-2156-03f5-3a45-ff3139ac7861.png)

recruit.phpのすでに作ってあるフォームの下に埋め込みコードを追記します。
追記して、CSSを移して、今あるフォームを削除する手順で行きますので。

```php:kaigo-theme\recruit.php
  <section id="form">
    ︙
  </section>
</main>
```

あとでセクションにぶち込みますが、

```php:kaigo-theme\recruit.php
  <section id="form">
    ︙
  </section>

  <?= apply_shortcodes(''); ?>　　👈New!

</main>
```

実際のショートコードを`('')`の中に埋め込みます。
次の画像の箇所に埋め込むべきショートコードが記載されています。

![form7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/b8695add-bfd8-6c55-c379-4a43c7d40c40.jpeg)
![form7_shortcode.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/8f7a3be7-f884-f51e-f26e-88de232c5eb9.jpeg)

これを`('')`埋め込んで次の形にしましょう。idとかは環境によると思います。

```php:kaigo-theme\recruit.php
  <section id="form">
    ︙
  </section>

  <?= apply_shortcodes('[contact-form-7 id="20" title="コンタクトフォーム 1"]'); ?>　　👈New!

</main>
```

これでフォームが表示されるはずです。

ここからはかなり具体的に今回の例に合わせていますので、環境によって対処しましょう。

ContactForm7の初期設定では自動で`<p>` `<span>`などが追加されますが、**今回は**必要ありませんどころか邪魔です。（あくまで今回不要で邪魔なだけで毎回必要な作業ではありません）

ContactForm7に標準でカスタマイズするための受け口（フック）が用意されています。

- wpcf7_autop_or_not
- wpcf7_form_elements

これを利用します。

`kaigo-theme`フォルダに`functions.php`という名前でファイルを作り、以下の12行だけのファイルを作ります。
どちらも第二引数に無名関数を取る書き方をしています。~~ちょっとむずかしい書き方ですが面倒なので。~~
```php:kaigo-theme\functions.php
// Contact Form 7の自動pタグ無効
<?php
add_filter('wpcf7_autop_or_not', function () {
    return false;
});

// Contact Form 7の自動spanタグ無効
add_filter('wpcf7_form_elements', function($content) {
    $content = preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $content);

    return $content;
});

```

今回作っている`<form>`には`id`が振られていますので、コンタクトフォームで表示されるフォームにもidを加えます。
```php:kaigo-theme\recruit.php
<?= apply_shortcodes('[contact-form-7 id="20" title="コンタクトフォーム 1" html_id="form"]'); ?>
```

コンタクトフォーム7の画面でフォームを作ります。
作っているHTMLフォームはこんな形ですね。
```html
<form action="" method="post">	
  <div class="Form-Item">
    <p class="Form-Item-Label">
      <span class="Form-Item-Label-Required">必須</span>ご用件
    </p>
    <select class="Form-Item-Select" name="choice" id="yoken-select">
      <option class="Form-Item-Select" value="選んでください▽">選んでください</option>
      <option class="Form-Item-Select" value="介護保険サービスについて">介護保険サービスについて</option>
      <option class="Form-Item-Select" value="障害福祉サービスについて">障害福祉サービスについて</option>
      <option class="Form-Item-Select" value="採用情報について">採用情報について</option>
      <option class="Form-Item-Select" value="その他">その他</option>
    </select>
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>お名前</p>
    <input type="text" class="Form-Item-Input" placeholder="例）山田 太郎">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>メールアドレス</p>
    <input type="email" class="Form-Item-Input" placeholder="例）example@gmail.com">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>電話番号</p>
    <input type="text" class="Form-Item-Input" placeholder="例）000-0000-0000">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label">件名</p>
    <input type="text" class="Form-Item-Input">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label isMsg"><span class="Form-Item-Label-Required">必須</span>お問い合わせ内容</p>
    <textarea class="Form-Item-Textarea"></textarea>
  </div>
  <input type="submit" class="btn Form-Btn" value="送信する">
</form>
```

この中のインプット要素`<select>` `<input>` `<textarea>`をContactForm7のGUIで作って置き換えて行きます。
Form要素とインプット要素を消して、

```html
  <div class="Form-Item">
    <p class="Form-Item-Label">
      <span class="Form-Item-Label-Required">必須</span>ご用件
    </p>
👉
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>お名前</p>
👉
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>メールアドレス</p>
👉
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>電話番号</p>
👉
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label">件名</p>
👉
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label isMsg"><span class="Form-Item-Label-Required">必須</span>お問い合わせ内容</p>
👉
  </div>
👉
```

それを、コンタクトフォーム7の画面へいったん貼り付け。
![wp_contact_form.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/6035ab64-56c0-7987-bb99-3336a2687e5a.png)

で、作っていきます。
セレクトボックスですね。
セレクトボックスがあった位置にカーソルを合わせてから、、ドロップダウンメニューを選択。
![wp_contact_form.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/969bf5bb-66ce-b4d8-4e63-ef283a1e26f0.jpeg)

選択肢やid,classを書き加えます。
![wp_contact_form_select.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/e14e2f01-768d-208a-54bc-dd9117a05e2b.png)

そしたらContactFormが読める様式で書き出されますので、似たような感じのことを繰り返します。

実際に送信はされませんが、必須項目を入力して、ありがとうございましたが表示されればコードとしては完成です。
なんかよくわかりませんが、バリデーションエラーのCSSなどを後で整えれば良いでしょう。

実際の送信の機能はローカル環境ではなく、サーバー環境じゃないと入れにくいと思います。

<hr>
では忘れないように、他ページからのリンク切れを修正もしておきましょう。

## ブログページを修正する

### news.html(記事一覧)を修正する。

ここらからWordpressに組み込んだ意味が出てきますね。

とりあえず、他のページと同じように、CSS、JS、画像のリンクを直してたりして、普通にリンクが表示されるようにしてみましょう。
その後、仮で入れてあるブログ記事部分にWordpressのブログ表示用コードを埋め込みます。

### ブログ表示ページを追加する。

初期のブログページが表示できるようにしましょう。
テーマフォルダに`single.php`というページを作ると表示されます。
Wordpressらしい書き方ではないですが、コード自体は勉強してください。

```php:kaigo-theme\single.php
<?php
/**
 * The template for displaying all single posts
 */
?>
<main>
	
	<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

        <div class="post">
            <?php if(have_posts()): ?>
                <?php while(have_posts()): ?>
                    <?php the_post(); ?>
                    <div class="date"><?php the_time('Y年n月j日'); ?></div>
                    <?php the_content(); ?>
                <?php endwhile; ?>
            <?php endif; ?>
        </div>
	
</main>
<?php
```

とりあえずこれを保存するとブログ記事が表示できるはずです。
管理画面からリンクを踏んでみましょう。

![wp_single.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/23e9e78b-9c99-9c57-6172-b3cf7d641fff.jpeg)
![wp_single_slug.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/6d7bacbd-6449-2ba3-19e9-0d6b8a4fbbe8.jpeg)

デザインは組んでないので、デザインのかけらもないブログページが表示されます。
![wp_single_hello_world.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/958ea066-4642-ecc9-939b-523da481a031.png)

ヘッダーとフッターだけ`index.php`からコピペして`<main>`タグを挟み込むと、、

![wp_single.php.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/07467e7f-8a6a-04c5-4f5f-9d0feace2c99.png)


素直に動きます。
CSS当てていけば、キレイになりそうですよね。

<hr>

### 一覧画面に表示する。

まず今回はWordpressのブログ機能を「新着情報」と「ブログ」というカテゴリを2つ作って運用しそうです。
![wp_blog_category.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/102c3e4e-54a4-16a1-fff2-197b622a27b8.png)

なので、Wordpressの管理画面から2つのカテゴリを作っておきましょう。
新着情報 → news
ブログ → blog
とスラッグをつけて作成しました。
サンプルデータとして2記事ずつ作成していますので、カウントがそれぞれ2になっています。

![wp_category_add.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/f1aa1a74-f268-d244-9b8c-e20e29f45be2.jpeg)

さきほどのデザインの表示されている中身のコードはこうなっています。

```php:kaigo-theme\news.php
<div class="news-sub">
  <dl>
    <dt>2022.02.04</dt>
    <dd>新型コロナウイルスによる当社事業所の運関事業所の運営に関...</dd>
    <dt>2022.02.04</dt>
    <dd>新型コロナウイルスによる当社事業所の運関事業所の運営に関...</dd>
    <dt>2022.02.04</dt>
    <dd>新型コロナウイルスによる当社事業所の運関事業所の運営に関...</dd>
    <dt>2022.02.04</dt>
    <dd>新型コロナウイルスによる当社事業所の運関事業所の運営に関...</dd>
  </dl>
</div>
```
Wordpressらしくない書き方ですが、次のように書き換えました。

```php:kaigo-theme\news.php
<div class="news-sub">
  <dl>
    <?php $the_query = new WP_Query(['category_name' => 'news', 'post_status' => 'publish' ]); ?>
    <?php if ( $the_query->have_posts() ) : ?>
      <?php while ( $the_query->have_posts() ) : ?>
        <?php $the_query->the_post(); ?>
        <a href="<?php the_permalink(); ?>">
          <dt><?php the_time('Y.m.d'); ?></dt>
          <dd><?php the_title(); ?></dd>
        </a>
      <?php endwhile; ?>
    <?php endif; ?>
  </dl>
</div>
```

非常にWordpressらしくない書き方ではありますが、Wordpressが異常なので、苦肉の策な書き方で、なんかいい方法あったら教えて欲しいです。~~そうだ！Wordpressを使わなければいいんじゃ・・・~~

WP_Queryにカテゴリ名`news`でかつ`公開中`のものを指定して`$the_query`という名前の変数にWP_Queryのインスタンスを格納しています。（使い方だけ調べてなんとなく使えたらいいと思います。果てしない道だと思うので。）
その`$the_query`から記事を一つ一つ取り出すのを、ループで回しています。
（ページネーションなどする場合は、WP_Queryにページ番号や、ページごとの取得件数を引き渡したりします。）

同じように、配列のキー`category_name`に対する値を`blog`に書き換え、ブログのコード箇所にコピーすると動くでしょう。

![wp_kanseikei.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/27c7fbc4-377f-9837-b37f-31af94dac55a.png)

<hr>

トップページの新着一覧も同じように変更しましょう。トップページからはページネーションではなく、最新の6件だけ表示するように`posts_per_page`の値を`6`にする設定をWP_Queryのインスタンス作成の引数に設定しましょう。
また、カテゴリ分けをしないため、`category_name`の設定を外しましょう。
できればカテゴリ名を取得して、カテゴリ名の表示もしてみましょう。

```php:kaigo-theme\index.php
<?php $the_query = new WP_Query(['posts_per_page' => 6, 'post_status' => 'publish' ]); ?>
<?php if ( $the_query->have_posts() ) : ?>
  <?php while ( $the_query->have_posts() ) : ?>
    <?php $the_query->the_post(); ?>
    <a href="<?php the_permalink(); ?>">
      <dt class="bounceInLeftTrigger animated.slower"><?php the_time('Y.m.d'); ?>
        <span><?= get_the_category()[0]->cat_name ?></span>             👈New‼
      </dt>
      <dd><?php the_title(); ?></dd>
    </a>
  <?php endwhile; ?>
<?php endif; ?>
```

新着情報カテゴリか、ブログかが判別できるように表示されていますね。

![index.php.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285882/dd3d1733-6300-ce9f-b5e2-4633ac32451a.png)

ここまででGitのコミットが22〜28コミットくらいになっていれば、細かく分けられていていいと思いますね。
Web制作だとそれくらいの粒度だと思います。

## 最低限まだ直すところ
最低限は動いたので、説明はこのあたりにします。
あとの項目は調べて独自で直していってみましょう。

- `news.php`である記事一覧ページにページネーションを組み込む。かなり難しいかもしれませんが。
- `category.php`を用意して新着情報だけの記事一覧、ブログだけの記事一覧ページを作成する。
- ヘッダーを`header.php`に、フッターを`footer.php`に分ける。
- `functions.php`をもっと書く。
  - 無駄なデフォルトのコードを消すために、消すためのコードを書く。
  - CSSの読み込みコードを書いて`wp_footer関数`を各ページに追加し、`link rel="stylesheet"`を消す。
  - Javascriptの読み込みコードを書いて`wp_head関数`を各ページに追加し、`script src`を消す。
  - jsフォルダのJQueryとWordpress組み込みの`JQuery`が二重になっているのでどちらかを消す。
  - ~~JQuery使わない~~
- `index.php`を`front-page.php`に直す。テンプレート化もする。
- テンプレートページを`page-slug.php`とかにする。slugとはRoutingのこと。
- ~~定数を使ったり（Wordpressの機能でもあるかも）打ち間違いしやすい電話番号などをphpで出力する~~


## これから先について
圧倒的にこの本をおすすめします。
https://www.amazon.co.jp/%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AEWordPress%E9%96%8B%E7%99%BA%E5%85%A5%E9%96%80-Engineers-Library-%E9%87%8E%E5%B3%B6-%E7%A5%90%E6%85%88/dp/4774187062