【WordPress】無料テーマ「Simplicity2」で投稿や固定ページの中にブログカードを使った一覧を作る方法|Knowledge Base

公開日：2016(平成28)年1月19日／最終更新日： 2017(平成29)年10月29日

WordPressで記事や固定ページの中に何等かのリンクリスト（記事一覧）を作成したい機会は多々あると思います。ただ、CSSの知識がないと思ったような表示にならず、単純にリンクのタイトルだけの羅列で我慢という方も多いと思います。

当サイトではテーマにSimplicity2を使っていて、このテーマにははてなのブログカード機能が使えるので、それを使って抽出した一覧をブログカード表示にする方法を紹介します。

ブログカードを使用する準備

まずは、ブログカードの使用を有効にするために、「外観」→「カスタマイズ」から「ブログカード」を選択して、以下のオプションにチェックを入れます。

ブログカード有効
外部リンクのブログカード有効

記事や固定ページに一覧を挿入するコード

Simplicity2では、ブログカード化して表示する方法として、

単純にURLのみが表示される場合(http://アドレス)
URLでのアンカーリンクがある場合(aタグを使ってリンク表示する場合)

の２通りがあります。どちらで作ってもブログカードで表示されますが、１では機能を使わなくなったときにリンクにならなくなってしまいますので、安全性から２の方法を使うことをおすすめします。

単純にURLのみを抽出するコード

<?php
$wp_query = new WP_Query();
$param = array(
'posts_per_page' => '3', //表示件数。-1なら全件表示
'post_type' => array('post'), //投稿タイプ
'post_status' => 'publish', //取得するステータス。publishなら一般公開のもののみ
'orderby' => 'rand', //抽出条件
'order' => 'asc'//並び順
);
$wp_query->query($param);
if($wp_query->have_posts()): while($wp_query->have_posts()) : $wp_query->the_post();
?>
<?php the_permalink(); ?><br>
<?php endwhile; endif; ?>

URLでのアンカーリンクを抽出する方法

<?php
$wp_query = new WP_Query();
$param = array(
'posts_per_page' => '3', //表示件数。-1なら全件表示
'post_type' => array('post'), //投稿タイプ
'post_status' => 'publish', //取得するステータス。publishなら一般公開のもののみ
'orderby' => 'rand', //抽出条件
'order' => 'asc'//並び順
);
$wp_query->query($param);
if($wp_query->have_posts()): while($wp_query->have_posts()) : $wp_query->the_post();
?>
<a href="<?php the_permalink(); ?>"><?php the_permalink(); ?></a>
<?php endwhile; endif; ?>

コード内のカスタマイズ

コードをコピペしたら自分の表示したい内容にカスタマイズしていきます
‘posts_per_page’ => ‘3’, //表示件数。-1なら全件表示
‘3’の部分を修正して、表示件数を指定します

‘post_type’ => array(‘post’),//投稿タイプ
‘post’の部分を変更して、一覧に含める投稿タイプを選択します
postは通常の「投稿」です。カスタム投稿タイプを指定するにはカスタム投稿タイプ名を入力します。また、コードの中は複数のタイプを指定できるようにarray()で囲んであります。
例えば「test」というカスタム投稿タイプと通常の「投稿」を混ぜて表示するには
array(‘post’,’test’)
というように「,’投稿タイプ’」を追加していきます

‘post_status’ => ‘publish’, //取得するステータス。publishなら一般公開のもののみ
通常はpublish（公開済み）のものを表示すると思うので変更する必要はないと思います

‘orderby’ => ‘rand’, //抽出条件
コピペ用コードでは’rand’（ランダム）になっています。これを’ID’にすると記事IDを元に抽出します

‘order’ => ‘asc’//並び順
コピペ用コードでは’asc’（昇順）になっています。ブログでは昇順は基本的に古い順になりますので、基本は’DESC'(降順)にするといいでしょう

以上の設定でブログカードを使った一覧を記事や固定ページへ自由に挿入できるようになります。

このコードを使って出来ること

まずは、通常の記事一覧（カテゴリー一覧やタブ一覧など）でブログカードを使っているならその他のリストもブログカード表示にすることでサイト全体に統一感が出ます。

そして、条件を変更することで、同一タイプ内の記事をランダムに表示する（いわゆる関連記事一覧）、投稿タイプをすべて設定してサイト全体の中からランダム記事を表示するなどいろいろな使い方ができます。

また、コードを変更することでカテゴリーで絞ったりタグで絞ったりできるようになりますから、リストの表示内容は思いのままになります。

ちょっと脱線

ちなみに通常通りリスト表示するのであれば下のコードのようにリストタグを使って表現するのですが、リストタグを使ってしまうとブログカードに変換されませんので除外しています。

<ul style="list-style:none">
<?php
$wp_query = new WP_Query();
$param = array(
'posts_per_page' => '10', //表示件数。-1なら全件表示
'post_type' => 'post', //カスタム投稿タイプの名称を入れる
'post_status' => 'publish', //取得するステータス。publishなら一般公開のもののみ
'orderby' => 'ID', //ID順に並び替え
'order' => 'DESC'
);
$wp_query->query($param);
if($wp_query->have_posts()): while($wp_query->have_posts()) : $wp_query->the_post();
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</ul>