WordPress標準の一覧ページではなく、通常の固定ページや記事の中に任意の一覧を作りたい場面は多いと思います。できれば簡単に単純にそれなりにきれいな一覧が作れればいいのですがなかなか難しい。いろいろなサイトで調べてもうまくいかなかったという方におすすめ、コピペで利用できるコードとプラグインの２つの方法を紹介します。
実際私も初心者なので、サムネイルの右にタイトル表示はすぐにできたものの抜粋が下に行ってしまう、サムネイルは左に表示できたもののその後のリストがすべて階層表示のようになってしまう・・・という現象と闘ってやっとできた？形です。HTMLが分かる方なら「なるほどね」とすぐに分かると思いますが、「画像を左回り込みにして最後に回り込みをクリアする」というのをリストの１行毎に行っているというコードです。
１．記事や固定ページにコードを直接記述して表示する方法
記事や固定ページに以下のPHPコードをコピペして使用します。「EXEC PHP」などのプラグインを追加して、記事や固定ページの本文にもPHPコードを書いて動かすようにします。
<ul style="list-style:none">
<?php
$wp_query = new WP_Query();
$param = array(
'posts_per_page' => '表示件数', -1なら全件表示
'post_type' => array('投稿タイプの名称１','投稿タイプの名称２'),
'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><?php the_post_thumbnail('thumbnail', array( 'class' => 'alignleft' )); ?><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br>
<?php echo mb_substr(get_the_excerpt(), 0, 抜粋の文字数); ?>...<br clear="left"></li>
<?php endwhile; endif; ?>
</ul>コードの簡単な説明
- ul style=”list-style:none”／リストに対して「・」などの記号を先頭に付けないようにしています
- $wp_query->query($param)・・・／パラメーターに応じて記事を吐き出すようにしています
- li・・・／the_post_thumbnailでサムネイル画像を’class’ => ‘alignleft’で左に寄せて表示、the_title()でタイトル表示、echo mb_substr(get_the_excerpt(), 0, 抜粋の文字数); ?>…で記事の抜粋を表示、最後にbr clear=”left”でサムネイル画像の回り込みを解除するというのをリストの１行として扱うようになっています
内容の設定
上記のコード中で以下の項目に対して設定を行います
- 表示件数／リスト表示する件数を数値で入力します
- ‘投稿タイプの名称１’,’投稿タイプの名称２’／post(記事)、page(固定ページ)、カスタム投稿タイプ名を入力します。「,’投稿タイプの名称２’」の部分を追加すると無限に含める投稿タイプを設定することができます。逆にpost(記事)だけの場合は「array(‘投稿タイプの名称１’,’投稿タイプの名称２’)」をarray(‘post’)にします
- 抜粋の文字数／抜粋から抜き出す文字の数を設定します。当サイトでは６０に設定しています。
条件をさらに複雑にするには
「$param」に羅列されているパラメーターを必要に応じて追加、削除していけばより複雑な条件での抽出が可能です。
- カテゴリーを限定する場合／’post_category’ => array(‘投稿タイプの名称１’,’投稿タイプの名称２’),
- タグを限定する場合／’post_tag’ => array(‘投稿タイプの名称１’,’投稿タイプの名称２’),
を追加したりします。「$param」に羅列されているパラメーターは上から順に絞られていきますので記述順によっては違う結果が現れます。また、「$param」に羅列されているパラメーターのコードの最終行のみ「,」をなしにします。
２．プラグインを使ってサムネイル付の記事一覧を作る方法
「w4 post list」プラグインを使うと、同じような記事の一覧を作ることができます。
いろいろな条件を設定した投稿一覧を表示するプラグイン「W4 Post List」
このプラグインを使ってサムネイル＋タイトル＋抜粋の記事一覧をCSSなしできれいに表示するには、テンプレートを以下のようにします
<ul type="none">[posts]
<li>
[post_thumbnail size="thumb" return="none" align="left"]
[post_modified_date format="Y年n月j日"]
[title][excerpt wordlimit=80]
<br clear="all">
</li>
[/posts]</ul>
さいごに
気軽に導入するならやはりプラグインということになるのですが、１つのページや記事へ複数のリストを表示するときなどはだんだん複雑になってきてしまいますし、１つのページを表示するのに「ショートコード⇔プラグインで吐き出されたコードの出力」という作業を繰り返すことになるので表示速度が遅くなる可能性もあります。コードの流れや変更点さえ分かってしまえば記事編集画面だけで一覧作りが完了しますので、コード使った方がスマートかもしれません。
タイル表示（２列や３列など）にするにはCSSで調整するしかないのですが、それなりに一覧表示をしたい場合には使える方法だと思います。
ポチップ
ポチップ
