【WordPress】サムネイル付の投稿や固定ページの一覧をCSSなしできれいに表示する2つの方法

WordPress標準の一覧ページではなく、通常の固定ページや記事の中に任意の一覧を作りたい場面は多いと思います。できれば簡単に単純にそれなりにきれいな一覧が作れればいいのですがなかなか難しい。いろいろなサイトで調べてもうまくいかなかったという方におすすめ、コピペで利用できるコードとプラグインの2つの方法を紹介します。

実際私も初心者なので、サムネイルの右にタイトル表示はすぐにできたものの抜粋が下に行ってしまう、サムネイルは左に表示できたもののその後のリストがすべて階層表示のようになってしまう・・・という現象と闘ってやっとできた?形です。HTMLが分かる方なら「なるほどね」とすぐに分かると思いますが、「画像を左回り込みにして最後に回り込みをクリアする」というのをリストの1行毎に行っているというコードです。

スポンサーリンク

1.記事や固定ページにコードを直接記述して表示する方法

 記事や固定ページに以下のPHPコードをコピペして使用します。「EXEC PHP」などのプラグインを追加して、記事や固定ページの本文にもPHPコードを書いて動かすようにします。

<ul style="list-style:none">
<?php
    $wp_query = new WP_Query();
    $param = array(
        'posts_per_page' => '表示件数', -1なら全件表示
        'post_type' => array('投稿タイプの名称1','投稿タイプの名称2'), 
        '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>

コードの簡単な説明

  1. ul style=”list-style:none”/リストに対して「・」などの記号を先頭に付けないようにしています
  2. $wp_query->query($param)・・・/パラメーターに応じて記事を吐き出すようにしています
  3. li・・・/the_post_thumbnailでサムネイル画像を’class’ => ‘alignleft’で左に寄せて表示、the_title()でタイトル表示、echo mb_substr(get_the_excerpt(), 0, 抜粋の文字数); ?>…で記事の抜粋を表示、最後にbr clear=”left”でサムネイル画像の回り込みを解除するというのをリストの1行として扱うようになっています

内容の設定

上記のコード中で以下の項目に対して設定を行います

  1. 表示件数/リスト表示する件数を数値で入力します
  2. ‘投稿タイプの名称1’,’投稿タイプの名称2’/post(記事)、page(固定ページ)、カスタム投稿タイプ名を入力します。「,’投稿タイプの名称2’」の部分を追加すると無限に含める投稿タイプを設定することができます。逆にpost(記事)だけの場合は「array(‘投稿タイプの名称1’,’投稿タイプの名称2’)」をarray(‘post’)にします
  3. 抜粋の文字数/抜粋から抜き出す文字の数を設定します。当サイトでは60に設定しています。

条件をさらに複雑にするには

「$param」に羅列されているパラメーターを必要に応じて追加、削除していけばより複雑な条件での抽出が可能です。

  1. カテゴリーを限定する場合/’post_category’ => array(‘投稿タイプの名称1’,’投稿タイプの名称2’),
  2. タグを限定する場合/’post_tag’ => array(‘投稿タイプの名称1’,’投稿タイプの名称2’),

を追加したりします。「$param」に羅列されているパラメーターは上から順に絞られていきますので記述順によっては違う結果が現れます。また、「$param」に羅列されているパラメーターのコードの最終行のみ「,」をなしにします。

2.プラグインを使ってサムネイル付の記事一覧を作る方法

「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>

これを使った表示サンプルは

トラはここの地域猫ちゃんの中では一番人懐っこく、「マオーン」と鳴きながらいつも一番に寄ってくる猫ちゃんです。身体がとても大きく、一見すると「アライグマ?」と勘違いしてしまう位です。体は見事なまでのキジトラ模様です。

のページの「トラに関する記事」という一覧で使っています。記事に「トラ」というタグが付いたものを時系列で表示するようにしています。

さいごに

気軽に導入するならやはりプラグインということになるのですが、1つのページや記事へ複数のリストを表示するときなどはだんだん複雑になってきてしまいますし、1つのページを表示するのに「ショートコード⇔プラグインで吐き出されたコードの出力」という作業を繰り返すことになるので表示速度が遅くなる可能性もあります。コードの流れや変更点さえ分かってしまえば記事編集画面だけで一覧作りが完了しますので、コード使った方がスマートかもしれません。

タイル表示(2列や3列など)にするにはCSSで調整するしかないのですが、それなりに一覧表示をしたい場合には使える方法だと思います。

役に立つ情報でしたらぜひSNSやメールでシェアしてください
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
ページ先頭へ