【WordPress】カスタム投稿タイプ-追加から表示までの一連の流れ-

Pocket

投稿とは別に、テキストのURLリンクやテキストPDFリンクさせる「ニュース」という投稿タイプを作成し、トップページに一覧を表示させる、という設置をしたので、まとめてみました。


【流れのポイント】
1、カスタム投稿タイプを作成する
  ・functions.phpにカスタム投稿タイプを追加するタグを入力

2、プラグイン「Custome Field Suite」インストール
  フィールドグループの設定
  ・プラグインインストール
  ・フィールドグループ入力

3、1で作成したカスタム投稿タイプで新規追加

4、表示したいページのテンプレートに表示させるためのループタグ入力

1. カスタム投稿タイプを作成する(functions.phpに書き込み)

「News」というカスタム投稿タイプを作成するとします。
最初にfunctions.phpに以下タグを入力します。

add_action( 'init', 'create_post_type01' );
function create_post_type01() {
  register_post_type( 'news',
    array(
      'labels' => array(
        'name' => __( 'News' ), // 管理画面上で表示する投稿タイプ名
        'singular_name' => __( 'News' ), // 識別名
        'add_new_item' => __('Newsを追加'),
        'edit_item' => __('Newsを編集'),
        'new_item' => __('Newsを追加')
      ),
      'public' => true,
      'supports' => array('title'),
      'menu_position' =>5,  // 管理画面上での配置場所
      'show_ui' => true,
      'has_archive' => true
    )
  );
}

‘labels’の‘name’は管理画面上で表示する投稿タイプ名です。 
‘singular_name’はカスタム投稿の識別名です。後ほど2のカスタムフィールドで使用します。

‘menu_position’は管理画面上での配置場所で、5は「投稿」の下になります。

この入力後ダッシュボード画面を開くと「投稿」の下に作成したカスタム投稿タイプが表示されているはずです。

2.プラグイン「Custome Field Suite」インストールしてフィールドグループを設定

WordPressには標準で「カスタムフィールド」機能がありますが、「Custome Field Suite」というプラグインをインストールとより使い勝手が良くなります。

インストール → 有効化すると、ダッシュボードメニューの「設定」の下辺りに「フィールドグループ」というメニューが追加されます。

「フィールドグループ」→「新規追加」するとカスタムフィールドのテンプレート登録画面が開きます。

今回はPDFのニュース書面のニュース、もしくは、テキストのニュースを表示させたいので、下記のように入力しました。

タイトルは「pdfデータ」としました。ここはダッシュボードに表示されるだけで公開ページ表示には一切関係ないため自分がわかりやすい内容でOKです。

①のラベルは投稿や固定ページの編集画面に表示されるカスタム投稿タイプの名前になるため、何を入力するのかがわかりやすい名前をつけます。

②の名前はカスタムフィールドを表示させる命令をテンプレートファイルに書き込むときに使う、カスタムフィールドの識別名になります。
日本語は使えず、半角英数字かアンダースコア「_」の入力が必須です。今回は「pdf_data」としました。

③はカスタムフィールドの種類を指定します。今回はPDFをアップロードしてそのファイルにリンクさせるので、「ファイルアップロード」を選択しました。

選択肢はたくさんあります。
詳しくはWordPressプラグイン 「Custom Field Suite」使い方まとめを参考にしていただくといいと思います。

④のFileType以降は③のフィールドの種類の選択によって表示が異なります。

③で「ファイルのアップロード」を選択した場合は上記内容になります。
アップロードさせたいファイルを指定できます。今回はAnyとしました。

⑤の返り値は、公開ページでファイルのパス(URL)を使いたい場合は「ファイルURL」、その他メディアライブラリに登録した「タイトル」「キャプション」「代替テキスト」「説明」などの付属情報も使いたい場合は「添付ファイルID」を選択します。

フィールドには複数条件を追加できます。

PDFファイルへのリンクとテキストのみを表示させたいため、「新規フィールドを追加」でもう一つフィールドを追加しました。

テキストのみの場合は②の名前を「pdf_no」として、③のカスタムフィールドの種類を「単一行テキスト」としました。⑤の概要は入力欄の上に表示する説明文になります。

「フィールド」の下の「配置ルール」は、どのページでこのカスタムフィールドを入力できるようにするか割り当てる場所です。

投稿タイプの入力スペースをクリックすると、選択肢が表示されます。

今回は新しく作成したカスタム投稿タイプで使うため、1.のfunctions.phpでsingular_nameに指定した識別名「news」を選択しました。

3、カスタム投稿タイプで新規追加

1.で作成した新しいカスタム投稿タイプの「ニュース」で新規追加すると、
2のフィールドグループ「PDFデータ」で設定したPDFをアップロードする欄とリンク先を入力する欄が表示されました。

ニュースタイトルを入力し、リンクさせたいPDFファイルをアップロードして、「公開」をクリックします。

4、表示したいページのテンプレートに表示させるためのループタグ入力

最後、表示させたいページのテンプレートファイルにタグを入力します。
今回はトップページのテンプレートに入力しました。

<div class="main_contents">
			<h2>News</h2>
<?php
$myQuery = new WP_Query();
$args = array(
		'post_type' => 'news',
		'posts_per_page' => 3, //ニュースを3件表示
		'orderby' => 'date',
		'order' => 'DESC'
	);
$myQuery->query($args);
?>
<?php if($myQuery->have_posts()): while($myQuery->have_posts()) : $myQuery->the_post();
$pdf_data = $cfs->get('pdf_data');  //フィールド1つめ「pdfデータ」を表示
$pdf_no = $cfs->get('pdf_no'); //フィールド2つめ「リンク先」を表示
?>
			<dl>
			<dt><?php echo the_time('y.m.d')?>
			<dd><?php if($pdf_data): ?><a href="" target="_blank"><?php the_title();?></a>  
			<?php elseif($pdf_no): ?>	
			<a href="<?php echo $pdf_no;?>" target="_blank"><?php the_title();?>
		    <?php else: ?>
		    <?php the_title();?>
		    <?php endif; ?>
			</dd> 
                        <!--「pdfデータ」があれば「pdfデータ」を表示なければ「リンク先」を表示-->
			</dl>
			<?php endwhile;endif;wp_reset_postdata();?>

</div>

ニュースを3件表示させて、PDFデータの登録があればPDFへのリンクを表示、リンク先にURL入力があればURLへのリンクを表示、どちらも入力がなければタイトルテキストだけ表示させる、というような内容です。

参考になった本

今回は結構地味なpdfリンクのニュースの例でしたが、カスタム投稿タイプはスライダーや画像も簡単に入力できたり、もっと色々便利な使い方があるので、他の本やサイトを参考にしてください。

なかなかカスタム投稿タイプにとっつきにくかった私が、これを読んでやっと触れるようになってきました。
なぜこのコードをここで使うのか、という説明がきっちりされているので、わかりやすいです。

この記事が気に入ったら
いいね ! しよう

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です