わかりやすいカスタム投稿タイプ設定まで|セミナー一覧ページを自分でカスタマイズして思うように魅せたい

セミナー一覧ページをこのようにしたいんだけど出来ますか?

参考:Tech design

顧問契約をさせていただいている企業さんからのオーダーがありました。

  • 複数の講習会を列挙できるようにしたい
  • 開催終了したものは削除できるようにしたい
  • 「詳細・申込」ボタンのリンク先(二階層目)ページは現行のページのようなもの、かつ編集しやすいもの

この3つがオーダーの主な内容でした。

パワーポイントでこのように、思うように組み立てて見せるのはとっても簡単ですよね。
それがWEB上でとなると、これがまたとても大変なんです。

思うようにならないでイライラ。
インターネットで調べてもどう調べていいのかわからない。
結局はもういいやって。

そんな経験ありませんか?

そんな時に便利なのが、カスタムフィールド を用いた、投稿タイプを作成することです。

専用の投稿フォーマットを作る

わかりやすく言うと、専用のフォームに入力すれば誰が記事を作成しても同じように魅せることが出来る専用の投稿フォーマットを作ること。

WEB上でこれを行うには、

  1. カスタム投稿タイプを作る
  2. カスタムフィールド を作る
  3. 実際に記事を作る
  4. 表示させる為に必要な、カスタム投稿タイプ固有のphpを作成する

この4つの手順が必要になります。

1. カスタム投稿タイプを作る

カスタム投稿タイプとは?

WordPressには、「投稿」と「固定ページ」の2つが初めから用意されています。

ただのブログならば投稿で十分ですが…

サイトを作るうえでブログの他に、ニュースやセミナー情報、活動実績など様々なコンテンツが日々更新されることが考えられます。

それぞれのコンテンツでは、毎回必ず記載したいことや、表示のさせ方を変えたかったりと、様々かと思います。
通常の投稿でカテゴリーを分けて、カテゴリーごとに統一感を作り記事を作成するのも一つですが、結構面倒ですよね。

それを実現させるるのが、「カスタム投稿タイプ」という機能です。

プラグイン「Custom Post Type UI」インストール

「Custom Post Type UI」というプラグインを使えば、簡単にカスタム投稿タイプが作成できます。

  1. ダッシュボード → プラグイン → 新規追加 → キーワード「Custom Post Type UI」

  2. 「今すぐインストール」 → 「有効化」まで進めていきましょう!
  3. ツールバー(左側)「CPT UI」 → 「投稿タイプの追加と編集」

  4. 「基本設定」の項目に入力する


     投稿タイプスラッグ:ページのURLになる部分
     複数形のラベル:ツールバーに表示される名称
     単数形のラベル:複数形のラベルと同じでOK

  5. 「アーカイブあり」を「True」に設定する
     ※アーカイブページ が必要な場合の設定
     ※基本設定を入力し終えたら、スクロールして下の方に行くと項目があります。

  6. 設定はこれでOK
     ※左のツールバーに、作成したカスタム登校タイプが追加されているはずです。

2. カスタムフィールド を作る

カスタムフィールド とは

通常のWordPressの投稿では、次の様な項目があります。

  • タイトル
  • 本文
  • カテゴリー
  • タグ

でも、今回のオーダーのあった様なセミナーページを作りたいというのならば、セミナーの具体的な内容を出したいですよね。

  • セミナー名
  • 開催日時
  • 講師
  • セミナーの概要
  • 場所、地図
  • 参加費

この様な項目が最低でも欲しいですよね。
でも通常の状態ですと、その都度本文にこれらの情報を入れて、表などにして整えたりと結構大変。

それを解消するのがカスタムフィールド です。
毎回使う様な項目を一つ一つフィールドで準備して、一つのフォーマットを作ってしまえる優れものです。

ですので、毎回前の記事をコピーして修正してとか、前入れていた情報ってなんだっけ?と記事を遡らなくても常に同じ必要となる情報を入力することができます。

プラグイン「Advanced Custom Fields」インストール

  1. ダッシュボード → プラグイン → 新規追加 → キーワード「Advanced Custom Fields」

  2. 「今すぐインストール」 → 「有効化」まで進めていきましょう!
  3. ツールバー(左側)「カスタムフィールド 」 → 「新規追加」

  4. 「位置」でフィールドグループを表示させる条件を設定します。
    今回の場合、前項で作成したカスタム投稿タイプ「食品安全セミナー」に表示させたいので画像の様に選びます。


    ちなみに、「このフィールドグループを表示する条件」には以下の様なものがあり、好きなよう定義できます。

  5. 「フィールドを追加」をクリック
    次に、フィールドを設定します。
    これは、カスタム投稿タイプ「食品安全セミナー」の記事にどんな項目のフィールドをフォーマットとして出すか設定することです。

  6. フィールド設定に必要な項目を設定する
    ・フィールドラベル:編集ページで表示される名称
    ・フィールド名:WEB上に表示させるために必要な情報(半角英数字)
    ・フィールドタイプ:テキストエリアやチェックボックス等のフォーマット
    ・必須か?:必要であればチェックを入れる

  7. それぞれ必要な項目の分だけ、フィールドを作成する

フィールドタイプについて

フィールドタイプには、たくさん用意されています。
よく使うものに関して少し紹介しますね。

主に使うものと言ったら、

  • テキスト
  • テキストエリア
  • 画像
  • チェックボックス  / ラジオボタン
  • Date Time Picker / デイトピッカー 
テキスト 短文用
テキストエリア 長文用
数値 数値用
メール メールアドレス用
画像 画像をアップロードできる
ファイル PDFなどのファイルをアップロードできる
Wysiwygエディタ
select  
チェックボックス

□ 選択肢1
☑︎選択肢2
□ 選択肢3

ラジオボタン ◯ 選択肢1
◉ 選択肢2
ページリンク 記事とリンクさせる
Googleマップ 住所を入れるとmapが表示される
Date Time Picker

どんな投稿タイプを作りたいかにもよりますが、この辺を使えば大抵はクリアするのではないでしょうか。

実際私が作成したものは以下の通りです。

3. 実際に記事を作る

さてここまでできたら次は、実際に記事を作ってみる段階に入ります。
セミナー記事を作る場合は、「投稿」からではなく、先ほど作ったカスタム投稿タイプ「食品安全セミナー」から新規で記事を書いていきます。

  1. ツールバーのカスタム投稿タイプ「食品安全セミナー」 → 「新規追加」

  2. 記事入力画面の下の方にカスタムフィールド が追加されている

    カスタムフィールド に内容を記載していく。
  3.  内容を入力したらいつも通り「公開」でOK

<注意>記事を作っただけでは表示されない

よしっ、記事もできたしあとは内容を確認するだけ!
そう思って「プレビュー」をクリックするとあれって思うはずです。

カスタムフィールド に入力した項目が全く表示されていないんです。
通常のコンテンツ部分に書いた文章はちゃんと表示されているのに、なんで??

↓「プレビュー」

そう思われるかもしれませんね。
私は最初の頃これで手こずり、挫折してしまいました笑

そう、カスタム投稿タイプにフィールドの内容を表示させるためのテンプレートを作成する必要があります。

ベースとしては、通常の投稿ページを表示させるテンプレートを用いますが、カスタム投稿タイプ専用のものを作らないといけないのです。

この作り方がまた、phpを勉強していない人にとっては難しいし、操作をするのが怖い笑

私も悪戦苦闘、試行錯誤しながら動作確認をし一つ一つ作っていきました。
これに関しては長くなるので、また次回に!

 

カスタム投稿に関して、私自身がつまづいた経験から記事にしようと思いました。
ネットにある記事はどれもわかりやすく書いてあるんだけど、私もそうだったように、初めての人にとってはそれすらわからないことがたくさんあります。

そのよくわからないをこの記事で解消したら嬉しいです。

次回は、「カスタム投稿タイプを思うままに表示させる」についてです。