Custom Post Type UI　使用見本・ポイント

2023年06月28日

WordPress

今回はワードプレスのプラグインCustom Post Type UIの使用方法・見本・ポイントをチョー簡単に説明していきます。

投稿機能を増やしたい
ブログ以外の最新情報がほしい
記事は若干いい加減でもいい
少しでも為になれば

詳しくは、説明しません、できません。

ってことで端的に

どのようなときに使うのか

Custom Post Type UIは投稿方法を増やすことができます。ワードプレスは初期状態で投稿（ブログなどに使用）があり、次々とぺージを更新することができます。

しかし、投稿（ブログなどに使用）以外にもつぎつぎと更新したいぺージってでてきますよね。
当サイトでいうと、最新情報ぺージが、つぎつぎと更新したいぺージです。

でもワードプレスの管理画面には投稿しかない・・・

そこで登場するのがCustom Post Type UIです。このプラグインを使うと簡単に投稿タイプを増やすことができます。

当サイトでいうところの最新情報はこんな感じ。

コメントの２つ下に最新情報って項目ありますよね、
こんな感じで投稿タイプを増やすことができるプラグインです。

設置が超簡単

Custom Post Type UIは簡単に投稿タイプを増やすことができます。
簡単に説明
①インストール
ワードプレス管理画面のプラグイン新規追加からCustom Post Type UIを検索窓口にいれて下記を有効化

②有効化したら左にCPT UIってメニューがでてくる

③CPT　UIにマウスを置くと投稿タイプの追加と編集が出てくるのでクリック

下記画面が出てきます。

投稿タイプスラッグには英語でいれる
複数形のラベルと単数系のラベルはワードプレスの管理画面に表示される項目なのでわかりやすく入れる。

当サイトの最新情報の記入見本はこんな感じ

スラッグはnews
ラベルは最新情報

で下に追加ラベルの項目と設定の項目がずらーって並んでると思いますが

設定の中のほうにずーーーといくと

「アーカイブあり」って項目があるので

もともとFalsになっているのを

Trueに変えてください。
※Trueにすることによって一覧ページを作れるようになります。

「アーカイブあり」はTrueに

以上設定はたったこれだけ

インストールして新規作成してちょっと文字入力して、アーカイブありをTrueに

これだけで

ワードプレスの管理画面左側に新規投稿（今回は最新情報）がでてきて新規追加で記事が書けるようになりました。

で、今回新たに作ったカスタム投稿（今回は最新情報）はどのファイルで表示されるのってことで

投稿は

single.php

で出力されます。

今回新たに作った

カスタム投稿（今回は最新情報）

は

single-投稿タイプのスラッグ.php

で出力されます。

今回のカスタム投稿（今回は最新情報）のスラッグはnewsだったので

single-news,php

を作ってあげればOKです。

カスタム投稿を表示するファイルはsingle-投稿タイプのスラッグ.php

最後に今回新たに作ったカスタム投稿（今回は制作実績）の一覧ページは

archive-投稿タイプのスラッグ.php

で出力されるので

archive-news.php

を作ってあげればOK。

カスタム投稿の一覧を表示するファイルはarchive-投稿タイプのスラッグ.php

表示方法見本

最後に表示方法をご説明させていただきます。

マリオ君の最新情報を例にご説明させていただきます。

記述見本

マリオ君の最新情報個別ぺージの記述見本です。

最新情報個別ぺージはsingle-news.phpに記述します。

完成見本はこんな感じ

一番上にタイトルを表示して
日付
対象のカスタムタクソノミー
そして本文を出力して

右側にはカスタムタクソノミーの一覧を表示しています。

コードはこちら

<article class="left">
	
<!--ループスタート文章-->
<?PHP if(have_posts()):while(have_posts()):the_post();?>
<!--ループスタート文章-->

	<h2 class="bh2"><?PHP the_title();//記事のタイトルを出力?></h2>
	
	<p class="day"><?PHP echo get_the_date();//投稿日を出力?></p>
	
	<ul class="post-categories newscat">		
	<?php
		$terms = get_the_terms($post->ID, 'newscat');//関連のあるタクソノミーのみ出力
		if ($terms) :
		foreach ($terms as $term) {
		echo '<li><a href="'.get_term_link($term->slug, 'newscat').'">'.$term->name.'</a></li>';
		}
		endif;
	?>
</ul>
	
	<section class="blogmain">
		
		<?PHP the_content();//記事の本文を出力?>
		
	</section>

	
	<!--ページネーションコンテンツ-->
<div class="pagenation blogyou">
	<div class="old"><?PHP previous_post_link('%link', '<span>前の記事へ</span>');//古い個別ページへのリンク?></div>
	<div class="goall"><a href="<?PHP echo esc_url( home_url() ); ?>/news/">一覧へ</a></div>
	<div class="new"><?PHP next_post_link('%link', '<span>次の記事へ</span>');//新しい個別ページへのリンク?></div>
</div>
<!--ページネーションコンテンツ-->

	
	
<!--ループ終わり文章-->
<?PHP endwhile;endif;?>
<!--ループ終わり文章-->
			

	
</article>
<article class="right">
	<h4>カテゴリー</h4>
	<ul>
    <?php
        $terms = get_terms('newscat');//関係のないやつも一覧で出力
        if ($terms) :
        foreach ($terms as $term) {
        echo '<li><a href="'.get_term_link($term->slug, 'newscat').'">'.$term->name.'</a></li>';
        }
        endif;
    ?>

	</ul>
</article>

簡単にご説明

メインループの中で書いています。
ループに関しては下記の記事にてご説明しておりますので、興味のある方はご覧ください。

ワードプレスオリジナルテーマ作り方⑥　記事ぺージsingle.phpを作成

■タイトルをh2タグで出力しています。

<?PHP the_title();//記事のタイトルを出力?>

■投稿した日付を出力

<?PHP echo get_the_date();//投稿日を出力?>

■関連のあるタクソノミーをリストで出力

	<ul class="post-categories newscat">		
	<?php
		$terms = get_the_terms($post->ID, 'newscat');//関連のあるタクソノミーのみ出力
		if ($terms) :
		foreach ($terms as $term) {
		echo '<li><a href="'.get_term_link($term->slug, 'newscat').'">'.$term->name.'</a></li>';
		}
		endif;
	?>
</ul>

ここはカスタムタクソノミーのスラッグは状況に応じて書き換えてください。
今回は最新情報のカスタムタクソノミーのスラッグnewscatを入れております。
※カスタムタクソノミーに関する詳しくご説明した記事はページ下部にのせております。

■本文出力

<?PHP the_content();//記事の本文を出力?>

■右がのカテゴリー一覧をリストで表示

	<ul>
    <?php
        $terms = get_terms('newscat');//関係のないやつも一覧で出力
        if ($terms) :
        foreach ($terms as $term) {
        echo '<li><a href="'.get_term_link($term->slug, 'newscat').'">'.$term->name.'</a></li>';
        }
        endif;
    ?>

	</ul>

こちらは上記の関連のあるタクソノミーを出力とは違い、登録されているカスタムタクソノミーすべて表示されます。

29行目から35行目のページャに関しては下記で詳しく説明しておりますのでご覧ください。