WordPressカスタム投稿の具体的な使い方【Web初学者必見】

WordPress

こんにちはTERUです。
フリーランスでWEB制作(コーディング or ディレクション業務)をしています。

読者の悩み

  • カスタム投稿の作成方法や表示方法など具体的な使い方が知りたい
  • 制作案件で良くあるカスタム投稿のカスタマイズが知りたい

本記事では、こういった疑問に答えます。

カスタム投稿は、制作案件でもよく利用するので、しっかりと学習しておく必要があります。
僕もカスタム投稿は、理解して使いこなせるまで苦労しました。。

本記事では、カスタム投稿の基本的な使い方(作成、表示方法)に加えて、カスタム投稿のよくあるカスタマイズについて、僕の経験から説明します。

目次

本記事の信頼性

  • Web制作会社にてWebディレクター経験あり
  • 現在フリーランスでWEB制作をしている
  • WordPressを使ったWeb制作を数多く経験している

スポンサードサーチ

WordPressカスタム投稿の作成と表示方法

PC作業する風景

カスタム投稿とは?

WordPressにデフォルトで用意されている「投稿」機能とは別に投稿する機能を追加することです。

一般的なコーポレートサイトでは、通常の投稿は「お知らせ」として使い、その他の更新コンテンツ(「業務内容」、「実績」等)でカスタム投稿を利用する場合が多いです。

通常の投稿と同様に、カスタム投稿もカテゴリを分けて管理をすることも可能です。
カスタム投稿のカテゴリーをタクソノミーと表現します。

カスタム投稿の設定方法

カスタム投稿の設定方法は大きく3つの方法があります。

  • プラグインを利用しない方法(タクソノミーなし)
  • プラグインを利用しない方法(タクソノミーあり)
  • プラグインを利用する方法

一つずつ説明しますね。

プラグインを利用しない方法(タクソノミーなし)

プラグインを利用しないで、カスタム投稿のみ作成する方法です。

(1)テーマディレクトリ直下のfunction.phpに以下のコードを追記します。

add_action('init', 'create_post_type');
function create_post_type()
{
	register_post_type('work', [ // 投稿タイプ名の定義
		'labels' => [
			'name'          => '業務内容', // 管理画面上で表示する投稿タイプ名
			'singular_name' => 'work',    // カスタム投稿の識別名
		],
		'public'        => true,  // 投稿タイプをpublicにするか
		'has_archive'   => true, // アーカイブ機能ON/OFF
		'menu_position' => 5,     // 管理画面上での配置場所(投稿の下に配置)
		'show_in_rest'  => true,  // wordpress5.x系から出てきた新エディタ「Gutenberg」を有効にする
		'supports' => array('title', 'editor', 'thumbnail'), // カスタム投稿で使用する項目を設定(タイトル、エディター、アイキャッチ)
	]);
}

(2)デフォルトの「投稿」の下にカスタム投稿[業務内容]が追加されました。

カスタム投稿のサンプル画像

プラグインを利用しない方法(タクソノミーあり)

プラグインを利用しないで、カスタム投稿とカスタム投稿に紐づくカテゴリー(タクソノミー)を作成する方法です。

(1)テーマディレクトリ直下のfunction.phpに以下のコードを追記します。

add_action('init', 'create_post_type');
function create_post_type()
{
	register_post_type('work', [ // 投稿タイプ名の定義
		'labels' => [
			'name'          => '業務内容', // 管理画面上で表示する投稿タイプ名
			'singular_name' => 'work',    // カスタム投稿の識別名
		],
		'public'        => true,  // 投稿タイプをpublicにするか
		'has_archive'   => true, // アーカイブ機能ON/OFF
		'menu_position' => 5,     // 管理画面上での配置場所(投稿の下に配置)
		'show_in_rest'  => true,  // wordpress5.x系から出てきた新エディタ「Gutenberg」を有効にする
		'supports' => array('title', 'editor', 'thumbnail'), // カスタム投稿で使用する項目を設定(タイトル、エディター、アイキャッチ)
	]);
  /* タクソノミー(カテゴリー分け)の定義 */
  register_taxonomy(
    'work-category', /* タクソノミーの名前 */
    'work', /* 使用するカスタム投稿タイプ名 */
    array(
      'hierarchical' => true, /* trueだと親子関係が使用可能。falseで使用不可 */
      'update_count_callback' => '_update_post_term_count',
      'label' => '業務内容カテゴリー',
      'singular_label' => '業務内容カテゴリー',
      'public' => true,
      'show_ui' => true,// 管理画面表示ON/OFF
    )
  );
}

(2)カスタム投稿[業務内容]の中にタクソノミー[業務内容カテゴリー]が追加されました。

タクソノミーのサンプル画面

プラグインを利用する方法

プラグインを利用する場合、カスタム投稿とタクソノミーを別々に作成して、紐づける必要があります。

カスタム投稿の作成

Custom Post Type UI」というプラグインを利用します。

(1)プラグインの新規追加画面で「Custom Post Type UI」と検索してプラグインをインストール→有効化します。
プラグインインストール画面

(2)[CPT UI]-[投稿タイプの追加と編集]を選択します。
WordPress管理画面

(3)[新規投稿タイプの追加]画面の基本設定で、投稿のスラッグとラベルを入力します。
WordPress設定画面

(4)またアーカイブページが必要な場合、設定項目の「アーカイブあり」を[True]に設定しておきます。
※通常のカスタム投稿は、この設定のみで十分です。
WordPress設定画面

タクソノミーの作成

(1)[CPT UI]-[タクソノミーの追加と編集]を選択します。
WordPress管理画面

(2)[新規タクソノミーを追加]画面の基本設定で、タクソノミーのスラッグとラベルを入力します。
また、[利用する投稿タイプ]で紐付けするカスタム投稿を選択します。※ここでは、「業務内容」
WordPress設定画面

基本設定以外で、よく設定する項目を説明します。
(3)カスタム投稿の一覧画面にタクソノミーを表示する場合、「True」に設定します。
WordPress設定画面

(4)カテゴリーをチェックボックスで選択したい場合、 「True」に設定します。
WordPress設定画面

カスタム投稿の表示方法

カスタム投稿を表示する方法を2パターン紹介します。

  • タクソノミー指定なしパターン
  • タクソノミー指定ありパターン

カスタム投稿を出力する場合、基本的にメインループではなくサブループ処理を利用します。
投稿内容の出力については、デフォルト投稿で出力する方法と同じです。
※メインループとサブループの違いについては以下の記事が参考になります。
 「【第8回】WordPressのメインループとサブループを理解する

タクソノミー指定なしパターン

タクソノミーを指定せずにカスタム投稿(work)に該当する投稿を全て出力する方法です。

<?php
  $args = array(
  'post_type' => 'work',//設定したカスタム投稿名※ここではwork
  'posts_per_page' => '3'//表示させたい件数を指定
   );
?>
<?php $my_query = new WP_Query($args); ?>
//ループ処理開始
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
//表示する中身(ここから)
 <div class="work-box">
   <?php echo get_the_date("Y.m.d"); ?>//公開日を出力
   <?php the_title(); ?>//記事タイトルを出力
  </div>
//表示する中身(ここまで)
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
//ループ処理終了

タクソノミー指定ありパターン

タクソノミーを指定してカスタム投稿(work)の中から該当する投稿を出力する方法です。

<?php
  $args = array(
  'post_type' => 'work',//設定したカスタム投稿名※ここではwork
  'posts_per_page' => '3'//表示させたい件数を指定
  'tax_query' => array(
   'relation' => 'OR',
    array(
     'taxonomy' => 'work-category',// タクソノミー名の指定
     'field' => 'slug',// タームの指定方法を設定(ここではスラッグ)
     'terms' => 'work-term01',// タームのスラッグを指定
     ),
    ),
   );
?>
<?php $my_query = new WP_Query($args); ?>
//ループ処理開始
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
//表示する中身(ここから)
 <div class="work-box">
   <?php echo get_the_date("Y.m.d"); ?>//公開日を出力
   <?php the_title(); ?>//記事タイトルを出力
  </div>
//表示する中身(ここまで)
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
//ループ処理終了

上記のループ処理では、タームのスラッグを指定しています。
ターム情報の取得方法については下記の記事がすごく参考になります。

スポンサードサーチ

WordPressカスタム投稿でよくあるカスタマイズ3選

WordPressのコード
よく使うカスタム投稿のカスタマイズは限られています。
なぜなら、Web制作でクライアントから求められる要望は、同じものが多いからです。
※もちろん特殊なケースもあります

具体的に僕がこれまで経験してきたWeb制作の中で、カスタム投稿によくあるカスタマイズについて紹介します。

カスタム投稿独自のページング設定

ページング処理で1ページに表示する投稿数をカスタマイズする方法です。
function.phpに追記する参考コードがこちらです。
posts_per_pageに各投稿の表示件数(1ページ)を記述します。


//投稿のページネーション設定
function custom_pre_get_posts($query)
{
	if (is_admin())
		return;
	// 1ページの表示件数を設定(デフォルトの投稿)
	if ($query->is_post_type_archive('post') && $query->is_main_query()) {
		$query->set('posts_per_page', 5);
		return;
	}
	// 1ページの表示件数を設定(カスタム投稿[work])
	if ($query->is_post_type_archive('work') && $query->is_main_query()) {
		$query->set('posts_per_page', 3);
		return;
	}
}
add_action('pre_get_posts', 'custom_pre_get_posts');

カスタム投稿独自のパーマリンク 設定

タクソノミーのアーカイブページURLを変更する方法です。

WordPressのデフォルト設定では、ドメイン名以下がタクソノミー名から始まるパーマリンクになってしまいます。

本設定により、パーマリンク 設定を以下のように変更できます。

変更前:https://teru1213.com/タクソノミー名/ターム名
変更後:https://teru1213.com/投稿タイプ名/タクソノミー名/ターム名

Custom Post Type Permalinks」というプラグインを利用します。
(1)プラグインの新規追加画面で「Custom Post Type Permalinks」と検索してプラグインをインストール→有効化します。
プラグイン検索結果

(2)「設定」→「パーマリンク設定」を選択します。
Wordpress管理画面

(3)「カスタム投稿タイプのパーマリンクの設定」項目で、「カスタマイズされたカスタムタクソノミーのパーマリンク を使用する。」をチェックして、「変更を保存」を選択します。
パーマリンク設定画面

設定はこれだけ。
複数のカスタム投稿が存在する場合も、カスタム投稿タイプ毎に設定ができるので便利です。

カスタム投稿一覧のアイキャッチ画像サイズ統一

アイキャッチの画像サイズをどの画像を設定してもサイズを統一する方法です。
カスタム投稿に関係なく、デフォルトの投稿機能でも利用可能です。

画像サイズ統一設定

アップロードした画像のサイズ指定と指定した画像を出力するための参考コードがこちらです。
function.phpに記載します。

//アップロードした際にサムネイル画像のサイズを指定
//add_image_size(任意のサイズ名,横サイズ,縦サイズ,画像を切り抜くかどうか)
add_image_size('work-img', 200, 200, true);

//画像出力関数
function get_thumb_img($size = 'work-img')//上記のサイズ名を指定
{
	$thumb_id = get_post_thumbnail_id();                         // アイキャッチ画像のIDを取得
	$thumb_img = wp_get_attachment_image_src($thumb_id, $size);  // $sizeサイズの画像内容を取得
	$thumb_src = $thumb_img[0];    // 画像のurlだけ取得
	$thumb_alt = get_the_title();  //alt属性に入れるもの(記事のタイトルにしています)
	return '<img src="' . $thumb_src . '" alt="' . $thumb_alt . '">';
}

画像出力方法

サイズ指定した画像を出力するためのコードがこちらです。
ループ処理内で使用します。

<?php if (has_post_thumbnail()) {
 /* サムネイル(アイキャッチ画像)がある時 */
 echo get_thumb_img('work-img');//サイズ指定したwork-imgを出力
} else {
/* 設定されていない時に出力する画像を記載 */
 echo "<img src=\"/image/sample.png\" alt=\"No Image\" />";
} ?>

今回は、WordPressでよく利用するカスタム投稿の具体的な使い方と良くあるカスタマイズ方法についてまとめてみました。

何かご質問がありましたら、気軽にご連絡ください。
以上です。

スポンサードサーチ