creatersnest31

【WordPressテーマを作ろう!】カスタム投稿タイプを作成する手順書


こんにちは!
今回は、カスタム投稿タイプを作成する手順をご紹介させて頂きます。
カスタム投稿タイプとは、WordPressで元々ある「投稿」と「固定ページ」以外に、
追加できるものです。
つまり、独自に定義した投稿タイプを追加できる機能ですので、
通常の投稿記事と分けて記事を書きたい場合に大変便利です。

カスタム投稿タイプを作るには、主に下記の2つの方法があります。

  • プラグインを利用する方法
  • テーマ(function.php)を編集する方法

今回は、プラグインでの作成の方法を中心に説明します。

 

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

「CUSTOM POST TYPE UI」というプラグインを利用して設定する方法をご紹介します。
カスタム投稿タイプを簡単に追加・編集できるプラグインです。

「プラグイン」⇒「新規追加」⇒ 「Custom Post Type UI」
で検索してインストールして、有効化します。

 

新規追加の設定

新しく追加されたサイドバーの「CPT UI」をクリックします。

custom02
まずは、「Add Edit/ Post types」をクリックして新規追加を行います。

  • 投稿タイプ名:カスタム投稿タイプの名前(URL)
  • ラベル:カスタム投稿タイプのラベル(表示する際のラベル)
  • 単体系のラベル:カスタム投稿タイプ名の単数形
  • 説明:カスタム投稿タイプ名の説明

右側のLebelsは、管理画面に表示されるテキストです。
日本語にもできますし、そのままでも問題ないです。

また、その下のSettingsも特に設定しなくても問題ないですが、
もし新しく作った投稿もアーカイブ表示させたい場合は、
Has Archiveの所をtrueに変更して下さい。

入力が終わりましたら、『Add Post Type』ボタンをクリックします。
サイドバーに追加したカスタム投稿タイプが表示されるので、仮に投稿タイプ名を「news」にすると、下の画像のようになります。

custam03

 

カスタム投稿に登録

「Add ニュース」をクリックして、
通常の投稿と同じようにタイトルや内容、そしてカテゴリーを選択して登録します。

 

公開する方法

通常のpostとして扱われてないため表示は致しません。
直接コードを追加する必要があります。
index.php等任意の場所に追加してください。

 

カスタム投稿タイプの一覧ページを表示

カスタム投稿タイプの一覧ページは、page-投稿タイプ名(任意).phpを準備します。
今回は投稿タイプ名をnewsとしましたので、page-news.phpです。
index.php等をコピーして、名前を変更して内容を入れ替えて使用してください。

 

カスタム投稿タイプの詳細記事を表示

カスタム投稿タイプの詳細ページは、shingle-投稿タイプ名(任意).phpを準備します。
今回は投稿タイプ名をnewsとしましたので、shingle-news.phpとなります。

 

functions.phpを編集する方法

「ダッシュボード」⇒「外観」⇒「テーマ編集」
をクリックします。

custom01
そして、function.phpをクリックして開きます。
その中に、下記のコードを入力して更新しましょう。
名前等は、ご自身のサイトに合わせて変更してください。

末尾あたりに追加して保存するとカスタム投稿タイプの出来上がりです。
ダッシュボードに新たに「ニュース」という項目ができています。

 

まとめ

いかがでしょか。
コードを直接書き、若干難しく感じられる箇所があったかと思いますが、
プラグインを利用すれば大分簡単に導入できます。
これで、通常の投稿記事と分けて記事を書くことができるようになりました。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article雪をイメージさせるPhotoshopブラシ50選