Web

WordPressテーマ開発その4（カスタム投稿タイプ）

  1. 設計・デザイン編
  2. 環境構築編
  3. News投稿編
    までできました。

今回はカスタム投稿タイプで、夜のお店に絶対ある、キャストの一覧が表示されるように投稿を作っていきます。

例えばこんな感じで。
やはり夜のお店といえばユーザーはキャストにはどんな女性がいるのかな？って気になりますからとても重要です。
そして、クライアントが直感的に使えるようにしなくてはいけないので、シンプルに作っていきます。

目標

  1. トップページに任意の数のキャストの顔写真と名前が並ぶ
  2. 写真ないし、名前を押すと個別のキャスト別のページに飛ぶページを作成(/cast/キャスト名）single-cast.php
  3. 全部のキャスト一覧のページも別で作る(/cast/)archive-cast.php

できればトップページ内で在籍しているキャストの写真などがスライダーで4~5枚出るような表示にするのも良いなと思います。今回はひとまず登録して最新の4人が表示されるようにしようと思います。(デザインでは5人にしてましたが便宜上4人に変更しました。任意の数でどうぞ）
情報はシンプルに、顔写真・名前のみ。

トップページに任意の数を表示させる

カスタム投稿タイプを作っていくので、簡単なプラグインを使いました。（function.phpに書き込む方法もあります）
色々なプラグインがあるかと思いますが、私の使用したのは

Custom Post type UI
こちらをインストールして、有効化をします。
custom postに移動して、追加したいページの設定をしていきます。


今回はキャストにしたいので、このようにしました。名前は任意のわかりやすい、表現できるもので。

ダッシュボードに"キャスト"という項目が増えているので、そこから、今回は投稿という形でキャスト名（タイトル）アイキャッチ画像（サムネイル）というようにしておきます。（今回は単純にキャストのプロフィールをが見れる、程度の作りにしています）

ひとまずいくつか投稿をしておきます。4人表示させたいので4人分追加しておきました。

カスタム投稿タイプの表示をさせるためにfunction.phpに以下を追加します。

<?php

register_post_type(
    'cast',
    array(
        'supports' => array('title', 'thumbnail', 'editor')
    )
);

トップページとしているindex.phpに
４人のキャストが表示されるようにコードを追記します。

  <ul>
       <?php $args = array(
                        'numberposts' => 4, //表示する記事の数の指定
                        'post_type' => 'cast' //投稿タイプの指定
                    );
                    $posts = get_posts($args);
                    if ($posts) : foreach ($posts as $post) : setup_postdata($post); ?>
                            <li><a href="<?php the_permalink(); >"><span class="cast__image"><?php the_post_thumbnail('thumbnail'); ?></span><span class="cast__name"><?php the_title(); ?></span></a>

                            </li>
                        <?php endforeach; ?>
                    <?php else : ?> //投稿が無い場合
                        <li>投稿はまだありません。</li>
                    <?php endif;
                    wp_reset_postdata(); //クエリのリセット
                    ?>
  </ul>

個別ページ

single-cast.phpファイルを作ると、キャストの個別の情報が出るようにカスタマイズできます。（現状だとsingle.phpのテンプレートが当たるので、最初に作ったNewsの詳細ページと同じ内容）
違うテンプレートにしたい場合は、single-cast.phpを作成し、登録した内容（名前・キャストで投稿した内容）
が表示されるようにします。例えば

<?php get_header(); ?>
キャスト詳細
<?php the_title(); ?>//キャスト名
<?php the_content(); ?>//投稿した内容
<?php get_footer(); ?>

cssなどで調整して見やすくすると良いと思います。

一覧表示

archive-cast.phpのファイルを作成します。
投稿タイプを指定し、
その中にトップページの一覧に欲しい内容。liタグの中にキャスト名とサムネイルを表示させ、それを４人分表示させます。

4人のサムネイルと名前が並びました。
次に/cast/とした時に飛ぶ一覧に飛べるようにします。
archive-cast.phpのファイルを作成します。
その中に投稿された全てのキャストの一覧が並ぶようにします。（ひとまず名前だけ羅列）

<ul>
    <?php $args = array(
        'numberposts' => 20,    //表示する記事の数の指定
        'post_type' => 'cast'   //投稿タイプの指定
    );
    $posts = get_posts($args);
    if ($posts) : foreach ($posts as $post) : setup_postdata($post); ?>
            <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?>//キャストの名前
</a></li>
        <?php endforeach; ?>
    <?php else : ?> //記事が無い場合
        <li>記事はまだありません。</li>
    <?php endif;
    wp_reset_postdata(); //クエリのリセット
    ?>
</ul>

現在登録されているキャストが全て並びました。
できたらキャストであれば、今日が出勤なのか否か、とかプロフィールの投稿内容ももっとクライアント（夜のお店とかだったら店長さんとかですかね）簡単に項目を埋められるようにカスタマイズしていくともっとわかりやすくなるかなと思います。（この辺りはまた別途）

その5に続きます。

-Web