WordPressで固定ページを使ったトップページを作るときに必要なのが「新着記事」などの一覧。WordPressは基本として投稿や固定ページの本文内でphpコードを動作させることができませんから、カスタムテンプレートを作って実装するか、記事一覧を表示する機能を持ったプラグインを使うというのが一般的な方法ですね。
でもテンプレートは投稿（固定ページ）編集画面の本文を呼び出すことはできても、本文の途中に何かを呼び出すということはできませんから、本文の上または下に新着記事の表示をするという対応しかできないですから、後者の新着記事リスト作成プラグインを使うのが一番手っ取り早いのかも知れません。
プラグインでおすすめなのは
いろいろな条件を指定して記事を抽出し、一覧表示できるのでとても重宝します。もちろんカスタム投稿タイプの記事にも使えます。個人的には一覧系プラグインの中では最強だと思ってます。
ただ、いろいろな場所でこうしたリストを出すならともかく、ある固定ページ、ある投稿だけに表示したいだけのためにプラグインを使う？？ということで、【ha-Basic】テーマではショートコードを挿入するだけで、固定ページや投稿の任意の場所へ簡単に新着記事の表示ができるようにしています。
表示は以下の２種類です。基本的なCSS要素は記述してありますので、ショートコードを挿入するだけです。
ショートコードで簡単挿入できる記事一覧の使い方
２列表示
カードを横に２列並べたような記事一覧が表示できます（最近のテーマではこれが主流だと思います）
挿入するショートコードは
[myphp file='post-list2x5']です（現在使用していないため、デモがなくてスミマセン）
出力する件数を変更したいときは
「外観」→「テーマエディタ」を開き、右のリンクから「post-list2x5.php」をクリックします。
10行目付近に
'posts_per_page' => 10,という記述がありますので、「10」を変更することで自由に表示する記事数を指定できます。
※2列表示ですので偶数にするといいでしょう。
関連記事一覧風の表示
【ha-Basic】テーマで標準の投稿本文一番下に自動表示される関連記事。これとほぼ同じデザインの記事リスト表示ができます。
挿入するショートコードは
[myphp file='news-list']です。
出力する件数を変更したいときは
「外観」→「テーマエディタ」を開き、右のリンクから「news-list.php」をクリックします。
10行目付近に
'posts_per_page' => 10,という記述がありますので、「10」を変更することで自由に表示する記事数を指定できます。
どうですか？？便利で簡単、しかもプラグインなし！テーマ作者、そして【ha-Basic】の使用者として大変気に入ってる機能です。
ショートコードで記事一覧リスト 応用編
この仕組みは【ha-Basic】テーマのファイル類の中に「post-list2x5.php」と「news-list.php」という２つのファイルがあり、前述したショートコードを投稿や固定ページの本文へ挿入することでこれらのphpファイルに書かれている内容を出力するという動作をさせています。
この仕組みは汎用なので、きちんとテンプレートになったものであればショートコードの「”」の中にファイル名を入れれば出力されるようになっているということになります。これを使っていろいろな切り口で絞り込んだ投稿リストを「post-list2x5.php」を元に作ってみましょう。
まずは「post-list2x5.php」内のコードは以下のようになっています（長いコードなので「コードをすべて表示する」をクリックして表示ください）。
<?php
// ① ↓ 今現在のページ位置を取得
$paged = (int) get_query_var('paged');
$args = array(
// ② get_option('posts_per_page') ← で管理画面で設定した、記事一覧で表示するページ数を取得
//'posts_per_page' => get_option('posts_per_page'),
//記事数を指定する
'posts_per_page' => 10,
// ③ (int) get_query_var('paged') ← で取得した、$pagedを挿入
'paged' => $paged,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => array('post'),
'post_status' => 'publish'
);
$the_query = new WP_Query($args);
?>
<div id="entry-list">
<?php
// 記事一覧のループスタート
if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- ここにループを回して表示させるhtmlを -->
<a href="<?php the_permalink(); ?>" class="title_2type">
<article
<?php post_class('entry-content'); ?>>
<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('post_large-thumbnail'); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img"/>
<?php endif; ?>
<div class="text">
<h3>
<?php the_title(); ?>
</h3>
<span class="cat-data">
<?php if( has_category() ): ?>
<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
<?php endif; ?>
</span>
</div>
<div class="excerpt">
<?php echo mb_substr(get_the_excerpt(), 0, 80); ?>
</div>
<span class="kiji-date">
<i class="fa fa-pencil">
</i>
<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<?php echo get_the_date(); ?>
</time>
</span>
<?php if( time() - get_the_time('G') < 259200 ): ?>
<div class="New-caption"></div>
<?php elseif( time() - get_the_time('G') < 604800 ): ?>
<div class="StillHot-caption"></div>
<?php endif; ?>
</article>
</a>
<?php endwhile; endif;
// 記事一覧のループ終わり
wp_reset_postdata(); ?>
<!-- entry-list -->
</div>パソコンでこのコードをコピーしてテキストエディタなどへ貼り付け、または、テーマファイルの「post-list2x5.php」をコピーして名前を適当なものにしてください（今回はカテゴリーで限定したものを紹介しますので「cat-postlist.php」とすることにします）。
コードの中の
// ③ (int) get_query_var('paged') ← で取得した、$pagedを挿入
'paged' => $paged,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => array('post'),
'post_status' => 'publish'
);の部分が記事を抽出する条件になります。
今回はカテゴリーを絞りこんで表示させますので、そのようにコードを変更します。
変更したものがこちら
// ③ (int) get_query_var('paged') ← で取得した、$pagedを挿入
'paged' => $paged,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => array('post'),
'cat' => array('カテゴリーid'),
'post_status' => 'publish'
);cat' => array('カテゴリーid'),という行が追加されてますね
ここのカテゴリーidという部分に表示するカテゴリーのIDを入力します。
※カテゴリーIDは管理画面のカテゴリー設定画面でカテゴリー名にマウスオーバーすると画面一番下の長いURL内に「id=〇〇」と表示される〇〇の数字になります。
複数のカテゴリーを指定する場合には
'cat' => array('カテゴリーid','カテゴリーid'),という風に追加していってください。
出来上がったらテーマフォルダにアップロードして、固定ページや投稿本文へ
[myphp file='cat-postlist']というショートコードを挿入すれば、作成した記事一覧が表示されるようになります。
今回はカテゴリーを限定するように条件を追加しましたが、それ以外にもいろいろな条件を追加・削除できます。
指定できるその他のパラメーターについては公式ページを見て試してみてください。
ポチップ
ポチップ
