WordPressを使用したサイトでは、プレスリリースなどの「お知らせ」は、1回1回の分を投稿(Post)ページで作成することになります。
投稿はカテゴリやタグで分類でき、公開月ごとの分類もされますが、いざホームページのトップページに最新のお知らせを表示しようとすると、困ってしまいます。
WordPressにはデフォルトでは、「新着情報」(最新のお知らせ)を表示する機能はないのです。
ですから、自社の(自分の)ホームページに新着情報を表示させようとすると、最低限のHTML、PHPの知識を前提にして、若干のカスタマイズが必要になります。
以下では、①テンプレートに直接記述する方法と、②ショートコードを利用する方法とで、WordPressのページに新着情報を表示させる方法を説明します。
新着情報を表示させるのはトップページになることが多いと思います。
利用するテーマによりますが、WordPressのテーマでは、トップページ用に特別のテンプレートを使用している場合があります(home.php など)。その場合は、それらのテンプレートに直接、コードを書き込んでしまうことができます。
あるいは、トップページでない場合も含めて、そのページ用のテンプレートを新たに作成して、コードを書き込むことも可能です。
テンプレートタグget_posts()で投稿を取得しますが、その際に、パラメータを指定して、該当する投稿を選択、ソートします。
ポイントは、PHPモードで以下のような2ブロックを作成し、PHPのforeach文が実行されるその2ブロックの間に、トップページの新着情報に表示させる情報を記述することです。
<?php $args = array( 'posts_per_page' => 5, 'category_name' => 'News', 'order' => 'DESC', 'orderby' => 'date' ); $postslist = get_posts( $args ); foreach ( $postslist as $post ) : setup_postdata( $post ); ?>
<?php endforeach; wp_reset_postdata(); ?>
上記の例で、get_posts()のパラメータ指定の意味は次のとおりです。
category_nameパラメータは、取得対象となるカテゴリの名前(News)
orderパラメータは、ソートの方向(降順)
orderbyパラメータは、ソートの対象(日付)
これで、Newsカテゴリの投稿のうち、日付で降順にソートして5件(つまり、最新の5件)の投稿が、トップページの新着情報欄に表示されます。
指定しなかったパラメータは、デフォルトの値が適用されます。
また、トップページの新着情報欄に表示させる情報は、各投稿(「お知らせ」)のタイトル、日付、抜粋ぐらいでよいでしょう。他に、リンク先URLであるパーマリンクも必要になります。
それらの情報は、以下のテンプレートタグで取得します。
get_the_date()テンプレートタグは、投稿の日付
get_the_excerpt()テンプレートタグは、投稿の抜粋
get_permalink()テンプレートタグは、投稿のパーマリンクのURL
これらのテンプレートタグもPHPモードで記述する必要があります。その前後はHTMLモードなので、例えば次のようになります。
<h3><a href="<?php get_permalink(false); ?>"><?php get_the_title(); ?></a></h3>
あとは、HTMLで適切にマークアップして、テンプレートファイルに書き込んでください。
<div class="bloc_content"> <div class="news_information"> <?php $args = array( 'posts_per_page' => 5, 'category_name' => 'News', 'order' => 'DESC', 'orderby' => 'date' ); $postslist = get_posts( $args ); foreach ( $postslist as $post ) : setup_postdata( $post ); ?> <div class="each_news"> <h3><a href="<?php get_permalink(false); ?>"><?php get_the_title(); ?></a></h3> <?php get_the_date(); ?><br /> <?php get_the_excerpt(); ?> </div> <?php endforeach; wp_reset_postdata(); ?> </div> </div>
必要に応じて、PHPコード書き込み箇所の直前に、”?>” タグを挿入してHTMLモードにし、PHPコード書き込み箇所の直後に、”<?php” タグを挿入してPHPモードに戻します。
WordPressにはショートコードの機能があるので、テンプレートに直接書き込まなくても、ショートコードを用いて新着情報を表示させることもできます。
その場合、ショートコードの内容を定義するコードを子テーマの functions.php に記述します。
今の例では、以下の記述を追加すればよいでしょう。
// [news_5]
function latest_news_func( $atts ){
global $post;
$temp_post = $post;
$args = array( 'posts_per_page' => 5, 'order'=> 'DESC', 'orderby' => 'date' );
$postslist = get_posts( $args );
$RET = null;
foreach ( $postslist as $post ) :
setup_postdata( $post );
$des = "<div class=\"news_info_row\">
<div class=\"news_info_subtitle\">
<a href=\"" . get_permalink(false)= . "\">" . get_the_title() . "</a>
</div>
<div class=\"news_info_date\">" . get_the_date() . "</div>
<div class=\"news_info_text\">" . get_the_excerpt() . "</div>
</div>";
$RET .= $des;
endforeach;
wp_reset_postdata();
$post = $temp_post;
return $RET;
}
add_shortcode( 'news_5', 'latest_news_func' );
foreachループの内部で何を行っているかというと、$desという変数を定義して1つ1つ$RETに追加していっているわけですが、$des変数の記述が複雑になっています。
$des変数はピックアップする1つ1つの投稿に関して、そのままWordPressページのソースコードになるわけですが、HTML要素とPHP要素が入り混じっています。
HTML要素は “” で囲む必要があり、また、その内部で実際に ” が使用される場合(<a href=””> のように)は、エスケープ処理するために \” と記述する必要があります。
そこの部分を取り去って、ソースコード上どのようになるかを確認すると、次のようになります。(PHP要素は【】で囲っています)
$des = <div class="news_info_row">
<div class="news_info_subtitle">
<a href=" 【get_permalink(false)】 "> 【get_the_title()】 </a>
</div>
<div class="news_info_date"> 【get_the_date()】 </div>
<div class="news_info_text"> 【get_the_excerpt()】 </div>
</div>;
また、$post変数はそのままでは当該ページの情報を取得してしまうので、一時的に $temp_post に退避しています。
functions.phpに前記のコードを記述すると、新たなショートコードが定義されましたので、固定ページや投稿といったコンテンツの対象箇所に、ショートコード
を書き込みます。
すると、その箇所(例えば、トップページ内の新着情報欄)に、Newsカテゴリの投稿のうち、最新の5つが表示されます。
スニペットの記述は以下のようになります。
global $post;
$tmp_post = $post;
$args = array( ‘posts_per_page’ => 5, ‘order’=> ‘DESC’, ‘orderby’ => ‘date’ );
$postslist = get_posts( $args );
foreach ( $postslist as $post ) :
setup_postdata( $post ); ?>
<div class=”news_info_row”>
<div class=”news_info_date”><?php the_date(); ?></div>
<div class=”news_info_subtitle>
<a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
</div>
<div class=”news_info_text”><?php the_excerpt(); ?></div>
</div>
<?php
endforeach;
wp_reset_postdata();
$post = $tmp_post;
Variable欄にある、Shortcode と PHP Code の各チェックボックスにチェックを入れるのを忘れないでください。