WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

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

公開日:2016年2月6日 使い方など

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. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

コードの簡単な説明

  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」プラグインを使うと、同じような記事の一覧を作ることができます。


このプラグインを使ってサムネイル+タイトル+抜粋の記事一覧を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. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

さいごに

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

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

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】