ワードプレス　カスタムフィールド・カスタム投稿タイプ・カスタムタクソノミーの使い方　メモ

##Smart Custom Fieldsとadvanced custom fieldsの違い

大きな違いがカスタムフィールドの繰り返し機能
Smart Custom Fields　　　⇒無料
advanced custom fields　 ⇒有料

▼参考
https://idotdesign.net/blog/web/wordpress/smart-custom-fields/

##Smart Custom Fieldsの使い方

①プラグインの追加
　Smart Custom Fields
　カスタムフィールドを管理するシンプルなプラグインです。

②カスタムフィールドの設定
　管理画面のサイドメニュー>Smart Custom Fields
　▼参考
　https://xn--web-oi9du9bc8tgu2a.com/wordpress-customfields-basis/
　1.カスタムフィールドの追加
　　テキストで作成（お試しなので、シンプルなテキストで）
　2.表示条件（投稿）の固定ページを選択
　　⇒これにより、固定ページに追加したカスタムフィールドの設定が表示される
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/51f83ac5-0660-2244-3dbf-d911553d31b5.jpeg)

③固定ページのカスタムフィールドの設定
　下の方にカスタムフィールドの設定が表示されるので、適宜設定値の変更
![キャプチャ5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/d42638e8-4030-f6d1-81fc-d61ceadd15ba.jpeg)

④PHPファイルを修正
　⇒これにより、固定ページにカスタムフィールドが表示される

　固定ページの場合は下記のファイルを修正する。
　/public_html/wp-content/themes/★現在有効化しているテーマ/page.php

　下記を追加

```
<?php echo SCF::get('[カスタムフィールドの名前]');?>
```
![キャプチャ4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/5485c76c-1a33-af0b-e919-f36f41216c87.jpeg)
![キャプチャ3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/85d92478-09ac-fe78-e479-e8952785f746.jpeg)


##Advanced Custom Fieldsの使い方


①プラグインの追加
　Advanced Custom Fields

②カスタムフィールドの設定
　管理画面のサイドメニュー>カスタムフィールド
　▼参考
　https://haniwaman.com/advanced-custom-fields/
　1.カスタムフィールドの追加
　　テキストで作成（お試しなので、シンプルなテキストで）
　2.投稿タイプに固定ページを選択
　　⇒これにより、固定ページに追加したカスタムフィールドの設定が表示される
![2キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/d0acb83a-d9cd-4434-8063-dc7a51c13208.jpeg)

③固定ページのカスタムフィールドの設定
　下の方にカスタムフィールドの設定が表示されるので、適宜設定値の変更
![2キャプチャ2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/0d5cb2dd-0ad9-5bb4-9ce0-f2ce620cf150.jpeg)

④PHPファイルを修正
　⇒これにより、固定ページにカスタムフィールドが表示される

　固定ページの場合は下記のファイルを修正する。
　/public_html/wp-content/themes/★現在有効化しているテーマ/page.php

　下記を追加

```
<?php echo get_field('[カスタムフィールドの名前]'); ?>
```
![2キャプチャ3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/1425c2aa-fd28-e949-6ad2-68e3bb2cd1dc.jpeg)
![2キャプチャ4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/8c7196da-5619-f293-eebb-53d776a23d88.jpeg)

##カスタム投稿タイプ、カスタムタクソノミーとは
▼そもそもなんなのか
https://wp-principle.net/taxonomy/
#####カスタム投稿タイプ
投稿、固定ページ以外の新しい投稿タイプを作成
#####カスタムタクソノミー
新しい投稿タイプでは、既存のカテゴリーやタグは使えないらしいので、それを自分で作成
※taxonomy＝分類
⇒要は、ただのカテゴリー（orタグ）※新しい投稿タイプ用！

▼どういうときに使うの
https://xxxx7.com/2014/04/28/100055
例）
ブログ記事の投稿とお知らせの投稿の併用
⇒1ページにブログ記事の一覧とお知らせの一覧を表示する場合
　　
そんなの、カテゴリで分ければいいじゃないかという意見もあるかもしれませんが、その場合はトップページが下記の表示になってしまう。（ブログ記事とお知らせがごちゃまぜで表示　　
－－－－－－－－－－－－－－－－－－
2019/09/07　本「ソバニイルヨ」レビュー
2019/09/06　WORDPRESS勉強会のお知らせ
2019/09/07　本「星の王子様」レビュー
－－－－－－－－－－－－－－－－－－

##カスタム投稿タイプ、カスタムタクソノミーを試す！
⇒カスタム投稿タイプと、カスタム分類をつくり、メニューに表示する('ω')

①Custom Post Type UIプラグインをインストール
▼Custom Post Type UIとは
WordPress のカスタム投稿タイプとカスタム分類を作成する管理 UI
▼参考ページ
https://haniwaman.com/custom-post-type-ui/

②カスタム投稿タイプを作成
　サイドメニューのCPT UI>新規投稿タイプを追加
　【投稿タイプスラッグ】※入力
　【複数形のラベル　　】※入力
　【単数形のラベル　　】※入力
　【アーカイブあり　　】true　※一覧ページを持つ場合（デフォルトのfalseでは一覧ページを持たない設定らしい）
![3キャプチャ5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/d8e447b9-33d6-86f4-1698-75ac94d60ecd.jpeg)

![3キャプチャ2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/a0b207e0-7865-db6b-d004-a23b0cb3e135.jpeg)


③タクソノミーの追加（"②"用のカテゴリを追加）
　サイドメニューのCPT UI>タクソノミーの追加と編集>新規タクソノミーを追加
　
　【タクソノミースラッグ】※入力
　【複数形のラベル　　　】※入力
　【単数形のラベル　　　】※入力
　【利用する投稿タイプ　】※①で新規追加したタイプを選択
　　　　　　　　　　　　（これで、新規追加した投稿タイプでカテゴリを選択できるようになる）
　【階層　　　　　　　　】true⇒カテゴリぽくなる。 false⇒タグぽくなる。
![4キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/ed80a8c7-0d18-f0e5-b57e-390126ee3106.jpeg)

④"③"のカテゴリの選択肢を追加
　サイドメニューの"①の投稿タイプラベル"＞"②のタクソノミーラベル"
　1.名前を入力
　2.新規エリアを追加を押す
![6キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/3ee8957d-7940-59f8-49f8-e82b9d87276d.jpeg)

④"②"で追加したカスタム投稿タイプで記事を投稿
　サイドメニューの"①の投稿タイプラベル"＞新規追加
　
　1.記事を記載し投稿
　　※ここで、カテゴリ（③、④のタクソノミーが選択できる）
![7キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/fd0f3bc4-0242-64f8-e434-35f27d3bb901.jpeg)

⑤カスタム投稿タイプのデータを表示する
　▼下記ページにお任せします(笑)
　＜メニューに追加したい場合＞
　https://freyjasrm.com/2015/02/23/%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3custom-post-type-ui%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9/#5
![8キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350277/e1ecc452-f85d-7685-2fac-691ccb0ff801.jpeg)

　＜トップページに記事の一覧を表示-index.php直す＞
　http://www.webcyou.com/?p=2183

###その他（カスタム投稿タイプ独自のデザインテンプレートを用意する場合）
　【個別ページ】　single-(スラッグ名).php
　【一覧ページ】　archive-(スラッグ名).php

https://upd.world/custom-post-type-ui/#i-5

#ひとり言

ワードプレスの仕事を受けたことがないのだけど、どんな感じなのだろう。

例えば、お菓子屋さんのホームページを作ってくれと言われた場合、
下記のような作業になるのかなぁ。

①レンタルサーバ契約
②ドメイン購入
③レンタルサーバとドメインの紐づけ
④ワードプレスインストール
⑤外観のテーマを設定
　既存のもの（無料、有料） or デザイン会社にテーマ作成を頼む？
⑥ページを作成
　・トップページ
　　⇒投稿で作成（お知らせを時系列に表示）
　　　あとは、カテゴリの表示、デザインのカスタマイズ
　・会社説明
　　⇒固定ページで作成
　　　※SmartCustomFieldを使う。
　　　　納品後にお客さんが変更できるように。
　・お菓子メニュー
　　⇒固定ページで作成
　　　※SmartCustomFieldを使う。
　　　　納品後にお客さんが商品・説明を管理画面から変更できるように
　　　　SmartCustomFieldの繰り返し（無料）が効いてきそう。
　・アクセス
　　⇒固定ページで作成
⑦納品
　・ホームページ
　・ドキュメント/マニュアル/ソース一式
　　※レンタルサーバとドメインの延長や停止の説明含む

こんな感じかなぁという予想を立てて、遊んでみました(゜-゜)