カスタム投稿タイプで新着情報エリアを作成する方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは、WPホームページ研究所の運営サポートチーム(@WP_LABO)です。

以前に別の記事で「外部ブログのRSSを連携して新着情報を作成する手順」を解説いたしました。外部のブログサービスで記事を書いていてウェブサイトと連携させるには最適な方法です。本日はワードプレス内にお知らせを作成して投稿や固定ページとは別で新着情報を管理する方法をご紹介させていただきます。

カスタム投稿タイプで新着情報エリアを作成する方法

ワードプレスでは投稿と固定ページ以外で同様の機能を追加することが可能です。手順としてはワードプレスのカスタマイズ時に使える「カスタム投稿タイプ」というコンテンツを管理する方法で行います。

お知らせ用の管理メニューを設定

下記をfunctions.phpに追加すれば新着情報として使えます。

add_action( 'init', 'create_information_custom_post_type' );
function create_information_custom_post_type() {
 
	register_post_type( 'information', array (
			'labels'                => array(
			'name'                  => 'お知らせ',
			'singular_name'         => 'お知らせ',
			'all_items'             => 'お知らせ一覧',
			'add_new'               => 'お知らせ追加',
			'add_new_item'          => 'お知らせの追加',
			'edit_item'             => 'お知らせの編集',
			'new_item'              => 'お知らせ追加',
			'view_item'             => 'お知らせを表示',
			'search_items'          => 'お知らせを検索',
			'not_found'             => 'お知らせが見つかりません',
			'not_found_in_trash'    => 'ゴミ箱内にお知らせが見つかりませんでした。',
			'parent_item_colon'     => ''
		),
			'public'                => true,
			'show_ui'               => true,
			'query_var'             => true,
			'hierarchical'          => false,
			'supports'              => array('title','editor'),
			'menu_position'         => 5,
			'menu_icon'             => 'dashicons-info-outline',
			'has_archive'           => true,
			'rewrite'               => array(
			'slug'                  => 'information','with_front' => false)
			)
	);

}

上記を追加すれば「お知らせ」という機能が追加されます。

操作メニューは「一覧と追加」の2つ。

カテゴリー管理について

もしお知らせ機能に「カテゴリー管理」も導入したいなら下記でOKですね。

add_action( 'init', 'create_information_custom_post_type' );
function create_information_custom_post_type() {
	register_post_type( 'information', array (
			'labels'                => array(
			'name'                  => 'お知らせ',
			'singular_name'         => 'お知らせ',
			'all_items'             => 'お知らせ一覧',
			'add_new'               => 'お知らせ追加',
			'add_new_item'          => 'お知らせの追加',
			'edit_item'             => 'お知らせの編集',
			'new_item'              => 'お知らせ追加',
			'view_item'             => 'お知らせを表示',
			'search_items'          => 'お知らせを検索',
			'not_found'             => 'お知らせが見つかりません',
			'not_found_in_trash'    => 'ゴミ箱内にお知らせが見つかりませんでした。',
			'parent_item_colon'     => ''
		),
			'public'                => true,
			'show_ui'               => true,
			'query_var'             => true,
			'hierarchical'          => false,
			'supports'              => array('title','editor'),
			'menu_position'         => 5,
			'menu_icon'             => 'dashicons-info-outline',
			'has_archive'           => true,
			'rewrite'               => array(
			'slug'                  => 'information','with_front' => false)
			)
	);
	register_taxonomy('information_category','information', array(
			'hierarchical'              => false,
			'labels'                => array(
				'name'              => 'カテゴリー',
				'singular_name'     => 'カテゴリー',
				'search_items'      => 'カテゴリーを検索',
				'all_items'         => 'すべてのカテゴリー',
				'parent_item'       => '親分類',
				'parent_item_colon' => '親分類:',
				'edit_item'         => '編集',
				'update_item'       => '更新',
				'add_new_item'      => 'カテゴリーを追加',
				'new_item_name'     => '名前',
			),
		'show_ui'                   => true,
		'rewrite'                   => array(
			'slug'                  => 'information','with_front' => true,'hierarchical' => true)
	));
}

カテゴリー管理を有効にするとメニューが追加されます。お知らせを分類するならカテゴリーも便利ですよね。

お知らせの一覧

下記がお知らせを登録した状態です。

スラッグ設定を省略するには?

ただ、上記ではスラッグを毎回自分自身で手入力しなければなりません。

もし「お知らせごとでスラッグを毎回設定する手間を省きたい」なら下記を追記。ちなみに下記のカスタマイズについては「カスタム投稿タイプにパーマリンクを追加する方法」でも解説させていただきました。

add_filter( 'post_type_link', 'information_custom_post_type_link', 1, 2 );
function information_custom_post_type_link( $link, $post ){
	if ( 'information' === $post->post_type ) {
		return home_url( '/information/' . $post->ID );
	} else {
		return $link;
	}
}
 
add_filter( 'rewrite_rules_array', 'information_custom_post_rewrite_rules_array' );
function information_custom_post_rewrite_rules_array( $rules ) {
	$new_rules = array( 
		'information/([0-9]+)/?$' => 'index.php?post_type=information&p=$matches[1]',
	);
	return $new_rules + $rules;
}

下記の通り自動でお知らせIDを振り分けることで手間を最小限に抑えられます。

新着情報を表示する命令文

そして新着情報を表示するエリアに下記を追記。テーマによってトップページで読み込まれるテンプレートファイルが違うので差し込む場所は注意しておきましょう。PHPの開始タグなども要確認ですね。

<?php
	$news_posts = get_posts('post_type=information&posts_per_page=5');
	if ( !empty($news_posts) ): ?>
		<div id="info">
		<h3>新着情報</h3>
		<dl class="topic">
		<?php 
		foreach ( $news_posts as $post ):
			setup_postdata($post); ?>
				<dt><?php the_time('Y年m月d日') ?></dt>
				<dd><span>NEW!</span> <a href="<?php the_permalink();?>"><?php the_title();?></a></dd>
		<?php endforeach;
		wp_reset_postdata(); ?>
		</dl>
		</div>
	<?php endif;
?>

下記が実際に表示された例です。

CSSでカンタンにレイアウト調整。

下記がCSSのサンプルです。

/* CSSでレイアウト調整 */
#info {
	width:610px;
	margin:0px auto;
	font-size:80%;
}
#info h3 {
	font-weight:bold;
	padding:0 0 11px 0;
	margin:0 0 11px 0;
	border-bottom:1px solid #868686;
}
#info dt {
	font-weight:lighter;
	float: left;
	padding:0 11px 11px 0;
	margin:0 0 11px 0;
	border-bottom:1px solid #868686;
}
#info dd {
	padding:0 0 11px 0;
	margin:0 0 11px 85px;
	border-bottom:1px solid #868686;
}
#info dd span {
	background:#db311d;
	display:inline-block;
	padding:0 5px;
	color:#ffffff;
	font-size:12px;
}
#info dd a {
	text-decoration:none;
}
#info dd a:hover {
	text-decoration:underline;
}

上記スタイルシートは簡易的なサンプルなのでぜひお好みで調整してみてください。お知らせにはタイトルと本文しか管理項目として追加していませんが下記に編集すればアイキャッチ画像の追加も可能です。

💻ウェブサイト運営でお困りの方へ

⇒ WordPressの設定ミスを即日で解決  安心の定額サポート
'supports' => array('title','editor','thumbnail'),

アイキャッチ画像を追加する

配列で「thumbnail」を指定すれば機能を追加できます。

お知らせ管理で使いやすいオプションは下記ですね。

・author(作成者)
・revisions(保存履歴を残す)

担当者が複数いれば「author」を追加したり、お知らせの変更履歴を残すなら「revisions」を追加すればOK。

'supports' => array('title','editor','thumbnail','author','revisions'),

他にも追加オプションは色々とあるので興味があればぜひお調べくださいね。

外部プラグインとの連携方法

カスタム投稿タイプで作るメリットはさまざまなプラグインと連携可能な点です。たとえば当研究所で大人気の投稿や固定ページなどで「メモを追加するプラグイン」も動くのでお知らせの管理メモを残せます。

お知らせに公開期限を持たせる場合は「Future Post Switch」も便利です。

まとめ

本日は「カスタム投稿タイプでお知らせを管理する手順」を解説いたしました。

お知らせと言っても色々なパターンがありますよね。場合によっては「タイトル」と「タイトルに貼るリンク」のみで良いといった状況もあるかもしれません。そうなるとカスタム投稿タイプではタイトルだけ追加しておき残りはカスタムフィールドとしてリンクURLの入力欄を独自で設定して追加するだけの流れになります。

リンクURLの入力がなければリンクなしのタイトルを出すといった条件分岐も絡んでくるので少し上級者向け。上記に書いた管理方法もシンプルで使いやすいのでぜひともご活用くださいませ。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報だけでなくお好みの機能をいただければ専属スタッフが心を込めて真摯に対応させていただきます。お気軽にお問い合わせください。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください