WordPress備忘録　カスタム投稿を使ってお知らせを作る

ＨＰだと、お知らせなんて項目が必要になってきたりします。ブログの投稿に「お知らせ」というカテゴリを作って、それを表示させれば、簡単だし、事足りるような気もしますけど、以前、触った事のあるCMSには、「お知らせ管理」なんていう、お知らせの投稿専用の項目が有ったので、それと、同じように作ってみたいと思い、カスタム投稿を使ってみる事にしました。(^^;

WordPressには、デフォで、ブログの投稿（post）と固定ページの投稿（page）の2つがありますが、カスタム投稿と言って、これ以外に自分の好きな投稿タイプを作る事ができます。本来、このオリジナルの投稿タイプを作る為には、function.phpに色々と記述しないといけないらしいんですが、そんなややこしい事を知らなくても、「Custom Post Type UI」というプラグインを使うと、簡単にオリジナルの投稿タイプを追加する事ができます。このプラグインもとても有名なので、使い方は検索すれば、いくらでも出ています。

今回は「Custom Post Type UI」を使って、お知らせ（information）という投稿タイプを作ってみました。すると、ブログの投稿や固定ページの投稿のように、ダッシュボードのメニューに「お知らせ」の項目が表示されるので、お知らせの投稿は、ここから、普通にブログを投稿するように投稿すればよいわけです。

投稿タイプは出来たんですが、まだ必要になるものがあります。それが、個々のお知らせページ、お知らせ一覧ページ、トップページなどに表示させるお知らせ一覧の３つです。大体、どこのサイトも、こんな感じですよね。(^^;

まず、個々のお知らせページですが、これは簡単です。single.phpをコピーして、single-information.phpと名前をつけて保存します。あとは、お知らせ用なので、ファイルを開いて、不要なタグとかカテゴリ、コメント欄とかを削除するだけです。僕は、タイトルと記事内容、日付だけにしました。

ちょっと、ややこしかったのが、お知らせ一覧ページです。こちらは、固定ページを使うので、それ用のテンプレートファイルを作ります。まずは、例えばpage.phpをコピーして、ファイル冒頭に「お知らせ」とか好きなテンプレートネームを書き込んで、固定ページの編集画面から、このテンプレートを選択できるようにします。

<?php
/* Template Name: お知らせ */
get_header(); ?>

このテンプレートは、お知らせ一覧を掲載するページなので、その為のループと、もともとの固定ページで記述する部分のループと、２つのループが必要になってきます。あとで、ページャーをつける関係上、お知らせ一覧を query_posts()を使ってメインループに変更し、元々の固定ページ部分をサブループにします。元々の固定ページ部分に何も書かないのであれば、サブループはいらないんですけどね・・・。(^^;

この辺りの詳しい説明は、こちらのページで、とても親切に分かりやすく解説してくれてるので、ご覧頂ければと思います。ついでに、メインループ部分とサブループ部分のソースも、こちらのページから拝借させて頂くと、こんな感じです。(^^;

お知らせ一覧のメインループ部分

<?php
$args = array(
     'post_type' => 'informations', /* 投稿タイプを指定 */
     'paged' => $paged,
); ?>
<?php query_posts( $args ); ?>
<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); 
	/* ループ開始 */ ?>
    <div class="post">
    	<h3><?php the_title(); ?></h3>
    	<p class="post-date"><?php the_time("Y年m月j日") ?></p>
    	<?php the_content(); ?>
    </div>
	<?php endwhile; ?>     
<?php else : ?>
    <div class="post">
		<h3>記事がありません</h3>
		<p>表示する記事はありませんでした。</p>
    </div>
<?php endif; ?>

元々の固定ページのサブループ部分

<?php $loop = new WP_Query('page_id='.$post->ID); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post();
	/* ループ開始 */ ?>
	<div  class="page">
		<?php the_content(); ?>
	</div>
<?php endwhile; ?>

これらで、コピーしたpage.phpのループ部分を置き換えれば、とりあえずは、お知らせ一覧ページのテンプレートは出来上がりです。

最後は、トップページなどで、お知らせを表示する部分です。僕は、日付とタイトルだけを表示するようにしました。

<ul>
<?php query_posts( array(
     'post_type' => array('information'),
     'posts_per_page' => 20 ));
 ?>
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
<div style="margin-bottom:10px; padding-bottom:10px; border-bottom: 1px dotted #999">
<li><span style="color:#cea669"><?php the_time("Y年m月j日") ?></span>　　<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>

<?php endwhile; endif; wp_reset_query(); ?>

</ul>

これを、前回の記事でご紹介した、Page Builder by SiteOriginを使ってPHP Code Widgetを配置し、そこに書き込めばOKです。後は、スタイルシートで好きに装飾って感じです。

ここでも、query_posts()が出てきますが、query_posts()はメインループだけに使えるタグのようです。上記の最後の方に出てくるwp_reset_query()は、カスタマイズしたループをリセットして、もとの WordPress ループに戻すもので、ミソだと思いやす。(^^;

Share on Tumblr

Pocket