当サイトには広告が含まれております

カスタム投稿タイプを使って、絵日記投稿タイプを作ってみた

この記事は最終更新日から9年経過しています。内容が古い可能性があります。

WordPressにはカスタム投稿タイプ、カスタムフィールド、カスタムタクソノミーなど便利な機能が色々あるらしいのですがどうもちょっと混乱します。一度ちゃんと整理して考えたいと思いました。
まずは、「絵日記」を入れやすいカスタム投稿タイプというものを作ってみてカスタム投稿タイプについて勉強してみようと思います。

記事をざっと見る

カスタム投稿タイプってなに?

同じ カスタム とつく名称がカスタム投稿タイプ、カスタムフィールド、カスタムタクソノミーと、3つもあるので混乱してしまいますね(^_^;。まず、カスタム投稿タイプを極めたいと思います。

そもそもそれってなに?と思うようなときはまずWordPress Codex日本語版を見ることにしています。

投稿タイプ

ここに説明が書いてありました。読んでみるとそもそもデフォルトで投稿タイプというものが存在していてそれは5種類あるということが分かりました。

コンテンツはすべてデータベースの wp-posts(プレフィックスがwp-だったとき) というテーブルに保存されます。各データには post_type という項目があります。
デフォルトだとこれは

post(投稿)
page(固定ページ)
attachment(添付ファイル)
revision(リビジョン)
nav_menu(ナビゲーションメニュー)

の5種類のいずれかになるようです。なるほど…

このタイプに新しいタイプを追加することを新しいカスタム投稿タイプを追加する、というようです。

そもそもなんで新しいカスタム投稿タイプを追加するか、ということを考えてみました。たとえば、今回作ってみようと思っている絵日記だとある程度決まったフォーマットがあってそれ専用の表示方法をしたいなーと思うようなときに使うのではないかと思います。

絵日記カスタム投稿タイプを作ってみる

では実際に絵日記カスタム投稿タイプを作ってみます。先ほど見た投稿タイプに入れる新しいタイプ名を考えます。WordPress Codexには「名前空間を付けた方がいい」と書いてあります。名前空間?と思いますが例えば

 ”acme_product” または “aw_product” – 仮想の ACMEWidgets.com で使用する製品投稿タイプ

とあったので、真似してみます。ryus.co.jpで使用する絵日記投稿タイプ ということで ryus_enikki としてみました。名前空間にあたる部分はこの場合、 ryus_ です。名前空間を付けることで他のタイプと重複を避けることができるようです。

WordPress Codexにあったコードを使って、使っている子テーマの functions.php に以下のコードを追加します。

add_action( 'init', 'create_post_type' );
function create_post_type() {
  register_post_type( 'ryus_enikki',
    array(
      'labels' => array(
        'name' => __( '絵日記' ),
        'singular_name' => __( '絵日記' )
      ),
      'public' => true
    )
  );
}


register_post_type( ‘ryus_enikki’,
 で、先ほど決めた投稿タイプ名 ryus_enikki を追加します。
name singular_name は表示される名前を入れるので 絵日記 としました。singular_nameは単数形の時の名前のようですが日本語だと同じですね

ダッシュボードを見ると

このような感じだったのが、

絵日記、というメニューが追加されました。

クリックすると

こんな感じで、普通の投稿や固定ページのようです。

絵日記カスタム投稿タイプに新規投稿してみる

絵日記カスタム投稿タイプに新規投稿してみます。

入力して公開をクリック。

一覧から表示をクリックしてみます

あぅ(>_<)…、表示されませんでした。

色々試行錯誤したり調べたりした結果、「WordPress私的マニュアル flush_rewrite_rules」 で解決しました。

カスタム投稿タイプを登録した場合、内部ではadd_permastruct関数が呼び出され、パーマリンク設定を追加されるが、本関数を呼び出さないと有効にならない。なお、本関数の実行はパーマリンクの設定が変わったタイミングに一度実行するだけでいいため、管理者ページの「設定」-「パーマリンク設定」を開き、「変更を更新」ボタンを押すほうが手軽かもしれない。

とあります。「設定」-「パーマリンク設定」で「変更を更新」でもOKそうなのでrすが、カスタム投稿タイプを追加するときに操作を忘れそうな気がするので、先ほど書いたfunctions.phpの関数 create_post_type

function create_post_type() {
(略)
  flush_rewrite_rules( false );
(略)
}

1行追加しました。

これで実行すると、

ちゃんと表示されました(^^)/

せっかくカスタム投稿タイプだから違う表示にしたい

とカスタム投稿タイプを追加しましたが、これだけだと他の投稿とまったく同じ表示になってしまいます。

カスタム投稿タイプを違うように表示するには、WordPress Codexに書いてある

シングルテンプレート
テーマシステムでも、single-type テンプレート形式で投稿タイプをサポートします。single.php で投稿を表示するのと同様に、カスタム投稿タイプは(存在するなら) single-type.php を使用します。上記例では、single-acme_product.php ファイルを作成して、このテンプレートを使用して product 投稿を表示できます。

これを参考に、single-ryus_enikki.phpを作ってみようと思います。

親テーマからsingle.phpをコピーして子テーマのフォルダに貼り付け、名前をsingle-ryus_enikki.phpにします。

絵日記投稿タイプのときは背景色を変えてみたいと思うので、

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

の部分を

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main" style="background-color:#7fffd4">

このように background-color:#7fffd4 としてみました。これで表示すると、

こんな感じで背景色が変わり、絵日記投稿タイプらしくなってきました。

投稿日も表示したいのですが、コンテンツ部分はこのテンプレートではないようです。親テーマからcontent.phpをコピーして子テーマにペーストして、名前をcontent-ryus_enikki.phpとします。

single-ryus_enikki.php
でコンテンツを表示している部分

            get_template_part( 'content', get_post_format() );

を、

            get_template_part( 'content', 'ryus_enikki' );

と変更します。これで絵日記投稿タイプのときは、content-ryus_enikki.phpを呼び出すようになりました。

content-ryus_enikki.phpを開いてタイトルに日付が入るようにしてみます。

        <?php
            if ( is_single() ) :
                the_title( '<h1 class="entry-title">', '</h1>' );
            else :

という部分でタイトルを表示しているのでついでに絵日記という文字と【】も追加して、 【絵日記 日付】タイトル と表示されるように、

        <?php
            if ( is_single() ) :
                the_title( '<h1 class="entry-title">【絵日記 '.substr($post->post_date, 0, 10).'】', '</h1>' );
            else :

このように修正しました。これで表示すると、

こんな感じにタイトルに日付が入って表示されました(^^)/

絵日記に投稿を追加してみます。

背景色が入り、日付がタイトルに追加された形で表示されました(^^)/。絵日記なのに絵が入ってなかったので ぱくたそ さんよりひまわりの絵をダウンロードして貼りました。

絵日記専用の入力項目を作り、入力も簡単にできるようにしたい

と、こんな感じでカスタム投稿タイプは使うんだなぁということがほんのりわかってきました。

しかしまだ、絵日記 カスタム投稿タイプはこうしたい!という構想があります

投稿ごとに、通常のタイトルと本文以外に

背景の色:指定できる
本文の色:指定できる
天気:選ぶ(天気に合わせたアイコンが表示される)
今日の絵:画像アップロード
今日の一言:1行でなにか入力

みたいな専用の入力項目が表示されて、表示もそれによって変更される、ということにできるといいなぁと思っています。

これを実現するにはたぶんなんですがカスタムフィールドを追加してやらないといけなさそうです。
カスタムフィールドを追加するのは割と簡単そうだったのですが、絵日記投稿タイプの時には最初からこれらの入力項目を表示したり、入力しやすい工夫もしたいと思います。

どうやって実現するかについてはプラグインなども含めて色々ためしているので、もう少し考えてまた書いてみたいと思います♪

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る