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

ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

カスタム投稿をプラグイン「Toolset Types」で実装する@WordPress

Sponsored Links

WordPressで

  • カスタム投稿タイプ
  • カスタムフィールド
  • カスタムタクソノミー(カスタム分類)

の作成、管理をするプラグイン「Toolset Types」の実装例です。(他にもユーザーフィールドも追加、カスタマイズできます)

全部をひとつの記事で紹介するのは長大かつわかりにくくなってしまうので、まずはカスタム投稿タイプの作成から。

これらの「カスタム〜」はプラグインを使わずともfunctions.phpに自分で機能を追加すれば実装可能ですが、こういったプラグインを利用することで実装のハードルが大幅に低くなります。

他にも「Advanced Custom Field」等、この目的のためのプラグインには有名なものがありますが、私はこの「Toolset Types」が非常に高機能で使い勝手もいいので(しかも無償で使える)愛用しています。

実装における環境

WordPress:4.5.2
Toolset Types:2.1

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

まずはプラグインを検索し、インストールし

f:id:showjinx:20160628141211p:plain

プラグインの有効化

有効化します。

f:id:showjinx:20160628141235p:plain

作成画面へ進む

管理画面のサイドバー「Toolset」が「Toolset Types」を操作するメニューになります。

今回は「カスタム投稿タイプ」*WordPressデフォルトの「投稿」とは別に を作成するので

Toolset>Post Types

を選びます。

f:id:showjinx:20160628141306p:plain

WordPressが標準で用意している各投稿タイプ(メディア、固定ページ、投稿)が一覧に表示されています。

これとは別に、これから独自のカスタム投稿タイプを作っていきます。

f:id:showjinx:20160628141332p:plain

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

「Post Types」という文字列の右にある「新規追加」をクリックします。

f:id:showjinx:20160628141415p:plain

「新規の投稿Typeを追加」画面になります。

f:id:showjinx:20160628141424p:plain

  • Name plural:このカスタム投稿タイプを複数名で入力
  • Name singular:このカスタム投稿タイプを単数名で入力
  • スラグ:このカスタム投稿タイプのスラグを入力

この三つは必須です。

Name pluralとName singularが「複数名」、「単数名」とあるのがややこしいんですが、複数名とあるほうは、ここで設定した名称(日本語で大丈夫です)が管理画面のサイドバーに項目として表示されるものです。(WordPressデフォルトで言えば「投稿」や「固定ページ」)

このふたつは同一のものだとエラーになるので、別にします。

例えば、今回追加するカスタム投稿タイプは「セミナー情報」で、セミナーの開催情報(セミナーごとの詳細情報)を投稿していくものとすると

  • Name plural:セミナー情報の投稿
  • Name singular:セミナー情報

としておけばよいかと思います。あとで変更も出来るので、管理画面上で「あぁ、こっちの名称のほうがわかりやすいな」と思ったら変更すればよいです。

スラグのところは半角英小文字で。(このスラグでループにおける条件等の操作をするので適切なものを設定しておきます)

f:id:showjinx:20160628141536p:plain

「内容」は管理画面上で表示されるものなので、必要なければそのままで。「アイコン」は使用できるアイコンがすごくあって選ぶのが大変なので、デフォルトの「投稿」と同じピンのままでいいと思います。

この段階でまずは画面右上の「保存」ブロックから青い「Post Typeを保存する」をクリックし保存します。

f:id:showjinx:20160628141558p:plain

保存すると「Front-end Display」のところがこんなふうになりますが無視してかまいません。この例では私がまだ投稿やアーカイブを表示するためのテンプレートをテーマ内に作ってないので、そこを注意してくれているようです。

ですが、この「Front-end Display」自体、使ったこともなく(とくに不便も不具合も不都合もありません)何が出来るかも調べてないのでスルーします。

f:id:showjinx:20160628141622p:plain

他にも「ラベル」や「オプション」等、多くの設定項目がありますが、必要でなければ(必要になったら調べれば十分です)デフォルトのままで「カスタム投稿」は使えます。

今回作ったカスタム投稿で使えるタクソノミー(分類)として、既存(デフォルト)の「カテゴリー」と「タグ」があります。デフォルトの投稿とこれらを共用したい場合にはチェック(有効化)すればいいでしょう。

カスタム投稿はカスタム投稿で別のカテゴリ、分類を設けて利用したい場合には不要です。

f:id:showjinx:20160628141733p:plain

最初の保存以降、設定を変更していれば再度「Post Typeを保存する」をクリックして保存します。

これでもうオリジナルのカスタム投稿タイプが使えるようになりました。

f:id:showjinx:20160628141754p:plain

デフォルトの投稿と同じように、追加した「セミナー情報の投稿」というカスタム投稿タイプがサイドバーのメニューで確認出来ます。「投稿」と同じように「全アイテム」と「新規追加」のメニューがあります。

追加した投稿タイプで投稿してみる

投稿タイプを追加しただけでは何も起こらないので、まずは投稿をしてみます。そのうえでその投稿をユーザ側の画面で表示出来るようにしていきます。

f:id:showjinx:20160628141821p:plain

デフォルトの「投稿」と同じ要領です。

カテゴリやタグを共用していないので、今の段階ではそれらは見当たりません。(これはカスタム分類で実装できます)

デフォルトの「投稿」と同じように操作してタイトル、本文を入力したら公開します。この例ではこんな感じで架空のセミナーを設定しました。

f:id:showjinx:20160628141846p:plain

この段階でもすでに稼働しているWordPressサイトでsingle.phpが存在すれば「投稿を表示」をクリックするとこの投稿を表示することが出来ます。(パーマリンクはすでに存在しているので)

ですが、この例では私がまだ投稿(デフォルト、カスタムに関係なく)を表示するためのsingle.phpを作っていませんので、一緒にこのテンプレートも作っていきます。

投稿を表示するテンプレートを作る

投稿を表示するにはsingle.phpを使います。

WordPressにはテンプレート階層というのがあり、デフォルト投稿でもカスタム投稿でも「投稿」はこのテンプレートが表示に使用されます。

デザイン等、変えたい(デフォルト投稿と)場合には、そのカスタム投稿タイプ専用のテンプレートを作りますが、まずはsingle.phpを作ります。

作成済みのindex.phpを複製し、投稿内容を表示する部分に以下の記述をします。

<?php if(have_posts()): while(have_posts()): the_post(); ?>
    <h2 class="title_post"><?php the_title(); ?></h2>
    <ul class="optional">
        <li class="date">Published: <?php echo get_post_time('M jS, Y'); ?></li>
    </ul>
    <?php echo the_content(); ?>
<?php endwhile; endif; ?>

<?php the_title(); ?>
で投稿のタイトルを

<?php echo get_post_time('M jS, Y'); ?>
で投稿年月日を

<?php echo the_content(); ?>
で投稿本文を出力しています。

これでデフォルト投稿、カスタム投稿、どちらも表示するsingle.phpが出来ました。

カスタム投稿用のテンプレートを作る

続けて、特定のカスタム投稿の投稿を表示する専用のテンプレートを作成してみます。

といってもとくに難しいことはないです。作成したカスタム投稿「セミナー情報」に設定した「スラッグ」を確認し、このスラッグをテンプレートのファイル名に追加するだけです。

スラッグは「seminar」なので、このスラッグ(カスタム投稿)による投稿は専用テンプレート「single-seminar.php」で表示するようにします。

さきほど作ったホヤホヤのsingle.phpを「single-seminar.php」として複製します。以上です。

実際にデフォルト投稿とこのカスタム投稿で使われているテンプレートファイルが区分されているか、single-seminar.phpのほうにそれとわかる記述をして確認してみます。

f:id:showjinx:20160628142224p:plain

single-seminar.phpのタイトルの上にhtmlで直接記述したものが確認できました。

念のため、デフォルト投稿(single.php)も確認してみます。

f:id:showjinx:20160628142253p:plain

こちらにはさきほどの赤文字がありません。投稿タイプごとに適用テンプレートが分けられていることが確認できました。

投稿タイプごとにデザインで見た目を変えたいとか、挙動や出力するものを変えたい場合等、このように使用するテンプレートをそれぞれ固有に設定することで制御が出来ます。

トップページで表示してみる

single.phpやsingle-seminar.phpで投稿本文を表示できても、そこにたどり着く導線がありません。

なので、トップページに「最近の投稿」のひとつとして追加、表示してみます。(メインループがすでに存在している場合がほとんどかと思うので、サブループを使うよう注意します)

<?php
$args = array(
    'post_type' => 'seminar', /* 投稿タイプを指定(単一の場合) */
    // 'post_type' => array('post', 'seminar'), /* 複数指定 の場合は配列を使う */
    'posts_per_page' => 6,
    'order'=> 'DESC', // ソート(降順:新しいものから古いものへ)
);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
    <div class="post">
        <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
        <ul class="optional">
            <li class="date">Published: <?php echo get_post_time('M jS, Y'); ?></li>
        </ul>
    <!-- / .post --></div>
<?php endforeach;
wp_reset_postdata();?>

この例では投稿タイプにセミナー情報(スラッグはseminar)を指定しています。なので、投稿タイプ「セミナー情報」として投稿されたものだけを出力するループです。

複数の投稿タイプをこのループに含める場合にはコメントアウトしている行を使います。

post_typeとしての指定先を配列を使ってカンマ区切りでつなげます。「post」はデフォルトの投稿タイプを指します。

posts_per_pageではこのループで出力する件数の上限を指定。

orderでソート(出力する順番)を降順としています。

あとはお好みでカテゴリやタグ(この例では設定していませんが)、本文の抜粋等をループに含める場合があるかと思いますが、はい、それはお好みで。

ひとまずこれが「Toolset Types」を使ったカスタム投稿タイプの追加、その表示の基本になります。

引き続き、カスタムフィールド、カスタムタクソノミー(分類)と、カスタムフィールドに入力された値をメールフォームに引き渡すやり方もこんご整理して投稿していく予定です。

基礎からのWordPress 改訂版 (BASIC LESSON For Web Engineers)

基礎からのWordPress 改訂版 (BASIC LESSON For Web Engineers)