読者です 読者をやめる 読者になる 読者になる

まちいろエンジニアブログ

南池袋のWebサービス開発会社、株式会社まちいろのエンジニアブログです。

WordPressでオリジナルの投稿タイプを作成しよう

f:id:s_kadota:20161115171712p:plain

こんにちは、まちいろの門田です。

ブログやコーポレートサイト、ECサイトなど様々な用途に WordPressを利用されている方も多いかと思います。 プログラムがわからなくても最低限ブログサイトを立ち上げられますし
(環境を作るだけでも色々と調べる必要ははありますが)
PHPをかじっている方であれば自分好みにテンプレートをカスタマイズできます。

そんなwordpressですが、基本的な記事作成の項目は「投稿」と「固定ページ」の2種類のみとなっています。
カテゴリやタグ、親ページの指定などでグループを分けて管理できますが......
そのソート作業をして該当カテゴリの記事だけを表示する、というのも都度都度行うのも何かと手間です。
「○○のカテゴリ記事」専用の投稿タイプがあれば作成も管理もかなり捗りますし、 記事作成のみを受け持っている担当者なども操作しやすくなるでしょう。

ですので今回は投稿や固定ページとは別に、カスタムフィールドと組み合わせて独自の記事作成フォームを作成する手順をご紹介します。

使用するプラグイン

「Custom Post Type UI」

新しい投稿タイプを作成できるプラグインです。 こちらを使用して新しい投稿タイプを設定します。

「Advanced Custom Fields」

記事作成時やカテゴリ作成時等に独自で設定した入力フォームを設定できるプラグインです。 使用用途は様々で、使いようによってはかなり自由度の高いWEBサイトを作成することができます。 今回新たに作成する投稿タイプ内の入力項目はこちらを使用して作成いたします。

1・プラグインのインストール

まずは二つのプラグインをインストールします。
WordPress管理画面の「プラグイン」、あるいはWordPress.orgより直接ダウンロードしてインストールしてください。

wordpress.orgのプラグインページ

インストールが完了し有効化が完了しますと、管理画面サイドバーに「CPT UI」と「カスタムフィールド」という項目が増えます。
f:id:s_kadota:20161115173052p:plain

2・新しい投稿タイプの設定

まず「CPT UI」より新しい投稿タイプを作成します。
「Add New Post Types」タブ内で新規の投稿タイプの設定をしていきます。
f:id:s_kadota:20161115181432p:plain


項目 内容
Post Type Slug 新しい投稿タイプの基本スラッグを設定します。 カテゴリのスラッグと同様のものであると捉えてください。
Plural Label 管理画面のサイドバーに表示される名前になります。 カテゴリの名前と同様のものと考えてもらって大丈夫です。
Singular Label 単数系のラベル設定です。 Plural Labelと同じで問題ありません。

上記三つを入力したら「Add Post Type」をクリックして作成しましょう。
ここでは新しく「お知らせ」専用の投稿フォームをテストで作成いたします。
サイドバー内に作成した新しい投稿タイプが追加されているはずです。
f:id:s_kadota:20161115181741p:plain

このままでもそのままお知らせ専用の投稿タイプとして使用できますが、
「Advanced Custom Fields」を用いてより専用らしい投稿タイプに作り変えてしまいましょう。

3・専用入力フォームの作成

今回作成した「お知らせ」にあると便利な入力フォームを設定します。基本的な

  • タイトル
  • 本文
  • 投稿日時

は既に元から設定されている入力フォームを使用すれば大丈夫ですが
ここに新たに投稿されるお知らせの種類と、サムネイル画像を設定しましょう。

  • お知らせの種類
  • サムネイル画像

カスタムフィールドを選択し、新規追加を選択します。
新規カスタムフィールド設定画面が開きますので、まずは今から作成するカスタムフィールドが
投稿タイプ「お知らせ」の時のみ表示される様に設定します。

f:id:s_kadota:20161116095925p:plain

次に投稿編集画面内での、カスタムフィールドの表示位置を設定します。
サムネイルやカテゴリの設定なのでタイトルのすぐ下に表示してしまいたいので、ここでは「High」を選びます。

f:id:s_kadota:20161116100403p:plain

そして「お知らせの種類」と「サムネイル画像」の項目を作成していきます。

「お知らせの種類」はセレクトボックスから選択する形式に。
f:id:s_kadota:20161116101124p:plain





「サムネイル画像」は画像アップロード形式で画像URLを取得できる形にします。

f:id:s_kadota:20161116101339p:plain





これで保存すれば、投稿タイプ「お知らせ」でのみサムネイル画像とお知らせの種類を選択することができるようになります。
実際の投稿画面はこちら。

f:id:s_kadota:20161116102748p:plain


いかがでしょうか、投稿内で全て管理するよりもカテゴリごとで投稿タイプを区切り、
それぞれ独自の投稿フォームを作成しておけば記事の管理や作成がグッと楽になりますし
htmlやcssphpにあまり詳しくない方にも
記事を作成していただくことがより容易になるかと思います。