WordPressの「Custom Post Type UI」「Advanced Custom Fields」を使ってリスト投稿を行う

WordPressのプラグイン「Custom Post Type UI」と「Advanced Custom Fields」を使ってオリジナルのリストを作る方法についてメモしていきます。

##概要
１．カスタム投稿タイプで投稿タイプを作成する（Custom Post Type UI）
２．タクソノミーを設定する（Custom Post Type UI）
３．フィールドを設定する(Advanced Custom Fields)
４．紐づけをする（Advanced Custom Fields）

###投稿タイプとタクソノミーとフィールドについて
投稿タイプにフィールドを紐づけて投稿する（レコード追加）
タクソノミーはレコードのグループのイメージ

https://test.com/mobile/mobilephone

**mobileがタクソノミー**
**mobilephoneが投稿タイプ**

正確には違うと思いますが、ざっくりこんな感じです。

##Custom Post Type UI

###まずは、Custom Post Type UIをインストールしていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/6cae27cc-b333-28b1-fe62-9ce9532fdfbe.png)


###インストールが完了すると「CPT UI」というタブが現れます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/4ec7463d-33ae-d263-c17b-85881129398a.png)




###投稿タイプの追加と編集
投稿タイプを追加します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/c2a8a7d0-633d-814f-50d9-393f1109e15a.png)

####個別ページを作成します
single-{カスタム投稿タイプのスラッグ名}.phpと作成します
single-mobilephone.php

####アーカイブをTrueにすると一覧が作成されます
一覧ページは　archive-{カスタム投稿タイプのスラッグ名}.phpで作成します。
archive-mobilephone.phpを作成すればOKです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/6f2289d4-31da-d9ad-810a-45f1ef195106.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/ca212388-8fb1-9492-e44a-2d14af5a2243.png)

###「カスタムリライトスラッグ」を使うと自由にURLを操作できます
https://hogehoge/activity/kotoridiary/diary1
みたいな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/ec3b6adf-de74-5a3f-63d4-4ebfaa6efdb1.png)


完了すると管理画面にメニューが追加されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/d5a2ba62-c0a7-4944-5190-c02e129b1667.png)


##CPT UI タクソノミーの追加と編集

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/91dabaf7-5c5e-77d6-36ff-ee4b6f850e05.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/e7096cbb-b2a5-f20f-2ede-d56b126d0bc9.png)



##Advanced Custom Fields
　参考:https://blog.s-giken.net/288.html

###続いてAdvanced Custom Fieldsをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/4b495bff-4280-3670-71b7-30cefe54b0ed.png)


###カスタムフィールドというタブが現れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/fb769656-05f2-933c-50b4-42e8b4333a78.png)


###新規追加(Advanced Custom Fields)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/5073b179-0bc2-4ec5-e382-d51d3a2ca3e7.png)

必要なフィールドを追加していく。


###ルールを設定する

ルールを「携帯電話」とすることで、投稿時にカスタムフィールドで設定したフォーマットが呼び出される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346533/9a45f695-19a1-e4bc-c9de-5368530b12aa.png)





##アーカイブページで一覧が確認できる

https://ホームページ/スラック文字
https://xxxxx.com/clinic

###アーカイブページを編集することで、オリジナルスラックページが作れる



親テーマのarchive.phpをコピーして

- ルートフォルダ/wp-content/themes/diver/archive.php


子テーマに貼り付け。archive-clinic.phpとリネームする。

- ルートフォルダ/wp-content/themes/diver_child/archive-clinic.php 


##タクソノミー別に一覧表示する
タクソノミー：area
ターム：福岡

taxonomy-(タクソノミーのスラッグ名)-(ターム).php
https://xxxxx.com/area/fukuoka

archive.phpを子テーマに貼り付け。taxonomy.phpとリネームする。

- ルートフォルダ/wp-content/themes/diver_child/taxonomy.php 

参考：https://upd.world/custom-post-type-ui/#i-11