WordPressカスタム投稿へ通常のタグ機能を追加し、アーカイブ表示にも対応させる方法を解説

update 最終更新日:2024年2月3日 at 1:52 PM

兼ねてからの懸案事項だったのですが、WordPress のカスタム投稿タイプで作成されたニュースの記事ではタグが使用できませんでした。
そこで、これまで通常のブログで作成されているタグをニュースの記事から使用できるようにテーマのプログラムならびに、WordPress のシステムを改修しました。
表題の画像は、WP管理画面のカスタム投稿一覧にリンク付きのタグ一覧を追加した例です。

今回対応した内容は、以下の4点です。

  • カスタム投稿タイプにタグ付け機能を追加する
  • WP管理画面のカスタム投稿一覧にタグの項目を追加する
  • タグのアーカイブページにカスタム投稿を含める
  • パーマリンク構造の更新

上記の機能は、プラグインを一切使わずに、テーマのプログラム functions.php への追記と パーマリンク構造の更新操作のみで実現できます。
プラグイン「Custom Post Type UI」を使う方法もありますが、実際のところは案外面倒であり、上手くいかないこともありますので、プラグインを使わない方法をお勧めします。

以降、その詳細について説明します。

カスタム投稿タイプにタグ付け機能を追加する

WordPress のコアで作成されたタグをカスタム投稿タイプの記事で利用できるようにします。
functions.php に以下のスニペットを追記します。ブロックエディタにも対応させます。
マークされた行の ‘news’ と ‘gallery’ がカスタム投稿タイプ(ニュース、ギャラリー)のタクソノミーです。

* 2023.04.29 更新
パーマリンク構造の変更で、タグアーカイブの URL が “/post_tag/タグ名/” となるのを防ぐため slug の rewrite により、本来の設定である “/tag/タグ名/” で表示されるようプログラムを修正(9行目のパラメータを追加)

/* カスタム投稿タイプにタグ付け機能を追加する
---------------------------------------------------------------- */
add_action( 'init', function () {
		register_taxonomy( 'post_tag', [ 'post', 'news', 'gallery' ],
		[
			'hierarchical' => false,
			'query_var'    => 'tag',
			'show_in_rest' => true, // ブロックエディタ対応
			'rewrite' => array( 'slug' => 'tag' ), // *スラッグを更新 … 2023.04.29			
		]
	);
});
add_action('pre_get_posts', function ($query){
	if ( is_admin() && ! $query->is_main_query() ) {
		return;
	}
	if ( $query->is_category() || $query->is_tag() ) {
		$query->set('post_type', ['post','news','gallery']);
	}
});

WP管理画面のカスタム投稿一覧にタグの項目を追加する

WordPress 管理画面のカスタム投稿一覧にタグを表示できるようにします。
タグ一覧を簡素なプレーンで表示するスクリプトと、リンク付きで表示するスクリプト、リンク付きのリスト形式で表示するスクリプトの3種類を用意しました!

(1) カスタム投稿のタグ一覧をプレーン表示するスクリプト

functions.php に以下のスニペットを追記します。マークされた行の ‘news’ の文字列がカスタム投稿タイプ(ニュースの記事)のタクソノミーです。
このスクリプトでは、タグ一覧がリンクなしでプレーン表示されます。’#’ のプレフィックスは省略しています。

/* カスタム投稿一覧(管理画面)にタグの項目を追加する
---------------------------------------------------------------- */
function add_tag_post_column_title( $columns ) {
	$columns[ 'slug' ] = "タグ";
	return $columns;
}
function add_tag_post_column( $column_name, $post_id ) {
	if( $column_name == 'slug' ) {
		$tags = get_the_tags();
		if($tags){
			foreach ( $tags as $tag ) {
				echo $tag->name .' ';
			}
		}
	}
}
add_filter( 'manage_news_posts_columns', 'add_tag_post_column_title' );
add_action( 'manage_news_posts_custom_column', 'add_tag_post_column', 10, 2 );

(2) カスタム投稿のタグ一覧をリンク付きで表示するスクリプト

functions.php に以下のスニペットを追記します。マークされた行の ‘news’ の文字列がカスタム投稿タイプ(ニュースの記事)のタクソノミーです。
このスクリプトでは、タグ一覧がリンク付きで表示されます。’#’ のプレフィックスも付加されます。

/* カスタム投稿一覧(管理画面)にリンク付きでタグの項目を追加する
---------------------------------------------------------------- */
function add_tag_post_column_title( $columns ) {
	$columns[ 'slug' ] = "タグ";
	return $columns;
}
function add_tag_post_column( $column_name, $post_id ) {
	if( $column_name == 'slug' ) {
		$posttags = get_the_tags();
		if( $posttags ){
			foreach ( $posttags as $tag ) {
				echo '<a href="' . get_tag_link( $tag->term_id ) . '">#' . $tag->name . '</a> ';
			}
		}
	}
}
add_filter( 'manage_news_posts_columns', 'add_tag_post_column_title' );
add_action( 'manage_news_posts_custom_column', 'add_tag_post_column', 10, 2 );

(3) カスタム投稿のタグ一覧をリンク付きリスト形式で表示するスクリプト

functions.php に以下のスニペットを追記します。マークされた行の ‘news’ の文字列がカスタム投稿タイプ(ニュースの記事)のタクソノミーです。
このスクリプトでは、タグ一覧がリンク付きのリスト形式で表示されます。’#’ のプレフィックスも付加されます。

/* カスタム投稿一覧(管理画面)にリンク付きのリスト形式でタグの項目を追加する
---------------------------------------------------------------- */
function add_tag_post_column_title( $columns ) {
	$columns[ 'slug' ] = "タグ";
	return $columns;
}
function add_tag_post_column( $column_name, $post_id ) {
	if( $column_name == 'slug' ) {
		$posttags = get_the_tags();
		if( $posttags ){
			echo '<ul class="tag-list">';
			foreach ( $posttags as $tag ) {
				echo '<li><a href="' . get_tag_link( $tag->term_id ) . '">#' . $tag->name . '</a></li>';
			}
			echo '</ul>';
		}
	}
}
add_filter( 'manage_news_posts_columns', 'add_tag_post_column_title' );
add_action( 'manage_news_posts_custom_column', 'add_tag_post_column', 10, 2 );

タグのアーカイブページにカスタム投稿を含める

タグのアーカイブページにカスタム投稿も含めるようにします。
functions.php に以下のスニペットを追記します。マークされた行の ‘news’, ‘gallery’ の2つがカスタム投稿タイプのタクソノミーです。

/* タグのアーカイブページにカスタム投稿を含める
// 【注意】 functions.php を変更後、以下のパーマリンク構造の更新操作が必要
//  ☞ WP設定→ パーマリンク→ 「変更を保存」を選択
---------------------------------------------------------------- */
function add_post_tag_archive( $wp_query ) {
	if ($wp_query->is_main_query() && $wp_query->is_tag()) {
		$wp_query->set( 'post_type', array('post','news','gallery'));
	}
}
add_action( 'pre_get_posts', 'add_post_tag_archive' , 10 , 1);

パーマリンク構造の更新

カスタム投稿でタグを利用できるようにするためには、functions.php を変更後、以下のようにパーマリンク構造の更新操作が必要となります。

WP設定 → パーマリンク → 「変更を保存」を選択

2024.01.16 追記

カスタム投稿の管理画面一覧にカテゴリーを表示

一例として、カスタム投稿(ニュース)の管理画面一覧に「ニュースのカテゴリー」を表示させるためのコードは以下の通りです。functions.php への追記です。

/* 管理画面一覧にニュースのカテゴリを表示 */
function manage_news_columns( $columns ) {
	$columns['news_category'] = 'ニュースのカテゴリー';
	return $columns;
}

function add_news_column( $column_name, $post_id ){
	if ( 'news_category' == $column_name ) {
		$fcategory = get_the_term_list( $post_id, 'newscat', '', '' );
		if ( $fcategory ) {
			echo $fcategory;
		} else {
			echo __( 'None', '_hpb' );
		}
	}
}

add_filter( 'manage_edit-news_columns', 'manage_news_columns' );
add_action( 'manage_news_posts_custom_column', 'add_news_column', 10, 2 );

参考記事

カスタム投稿に関連する記事へのリンクを以下に示します。

このエントリーをはてなブックマークに追加
X(ポスト)

コメントを残す