List category postsのサムネイル画像の表示位置を変更するカスタマイズ

ショートコードでカテゴリーやタグの記事一覧を表示することのできるプラグイン「List category posts」。

様々なコードが用意されていて、サムネイルや日付を表示させてり柔軟なカスタマイズができる使い勝手のいいプラグインだと思います。

けれどサムネイル付きのカテゴリー記事一覧を表示させようとすると、表示がとんでもないことになります（笑）。

 

List category postsの表示の問題

 

サムネイルなしの記事タイトルのみの一覧表示だと問題ないのですが。。。

 

 

サムネイルを表示させるととんでもない表示になります（笑）。

List category postsはデフォルトでは記事タイトルの後にサムネイルが表示されるため、このような表示になってしまいます。

また、サムネイルを表示する場合リスト表示の「・」があると見栄えが悪いと思います。

そこで、サムネイルの表示位置と、「・」を処理するカスタマイズに挑戦してみました。

 

サムネイルの表示位置の変更

サムネイルの表示の位置を変えるのはCSSをいじるのかとおもっていたのですが、テンプレートを作成して読み込ませることによりレイアウトを変えれるようです。

 

テンプレートの作成

まず、テーマのフォルダ内（子テーマを使っているなら子テーマのフォルダ内）に「list-cotegory-post」というフォルダを作成します。

 

 

そしてList category postsの「templates」のフォルダにあるdefalut.phpをコピーして、テーマ内に作った「list-cotegory-post」のフォルダ内に保存します。

ここではわかりやすく「list.php」というファイル名にします。

 

catlist template='list' thumbnail='yes' thumbnail_size='80,80'

 

「template=’list’」でこれから編集するテンプレートを呼び出します。

※コードは[]で囲みます

 

テンプレートでレイアウトの調整

作成した「list.php」を編集します。

 

 //Start a List Item for each post:
  $lcp_display_output .= "<li>";

  //Show the title and link to the post:
  $lcp_display_output .= $this->get_post_title($post, 'h3', 'lcp_post');

  //Show comments:
  $lcp_display_output .= $this->get_comments($post);

  //Show date:
  $lcp_display_output .= ' ' . $this->get_date($post);

  //Show date modified:
  $lcp_display_output .= ' ' . $this->get_modified_date($post);

  //Show author
  $lcp_display_output .= $this->get_author($post);

  //Custom fields:
  $lcp_display_output .= $this->get_custom_fields($post);

  //Post Thumbnail
  $lcp_display_output .= $this->get_thumbnail($post);

 

コード順に表示されるようなので、サムネイルを呼び出すコードをタイトルを呼び出すコードの前に移動させます。

 

 
 //Post Thumbnail
  $lcp_display_output .= $this->get_thumbnail($post);

  //Show the title and link to the post:
  $lcp_display_output .= $this->get_post_title($post, 'h3', 'lcp_post');  
 

 

これで記事タイトルよりもサムネイル画像が先に呼び出されます。

投稿日もタイトルより前に持ってきたい時も同じように、タイトルを呼び出すコードより日付を呼び出すコードを前に持ってきます。

 

 

これで大丈夫だろうと思っていましたが、サムネイル画像は左に来たものの、記事タイトルがh3の見出しになってしまいました。

「これはなんだ（笑）」と思いましたが、

 

  //Show the title and link to the post:
$lcp_display_output .= $this->get_post_title($post, 'h3', 'lcp_post');

 

「title」を呼び出すコードにあった「h3」を削除したら見出しは使われなくなりました。

 

 

サムネイルは左寄せになり、記事タイトルにもh3が使われなくなりました。

けれど、まだ「・」が残っているし表示が崩れています。

こちらはCSSで調整することにします。

 

CSSの調整

<ul class="lcp_catlist" id="lcp_instance_0">

 

List category postsで表示している記事一覧のページを調べるとこのようになっていました。

クラス名はわかたったけれど、「さてどうするか。。。」

と思っていたところ、自作のいろいろさんの「List category postsで行間変更、罫線を追加してみる」という記事を発見。

参考に（コピペ）させてもらいました（笑）

 

ul.lcp_catlist li {
list-style:none;
border-bottom: 1px solid #CCCCCC;
padding-top: 10px;
padding-bottom: 50px;
}

ul.lcp_catlist li img {
 float: left;
 margin-right: 30px;
}

 

左がテンプレート適用、右がデフォルトです。

 

 

ただ、このCSSだとサムネイル画像が80pxを超えると表示が崩れてしまうので、もう少し大きいサムネイルを使う場合はスタイルを調整する必要があります。

List category postsでサムネイル画像の大きさを指定するには、「thumnail_size」を使います。

 

thumbnail_size=100,100

 

このコードだと縦横100pxのサムネイルが表示されます。

 

まとめ

List category postsはショートコードのみで記事一覧を呼び出し、レイアウトも自由に設定できる便利なプラグイン。

ただ、自分のように知識がない人が使いこなそうとすると今回のように半日程度は時間を持ってかれてしまいます（笑）。

List category postsの使い方はこちらの記事に書いています。

カテゴリー別に記事一覧を表示できるWordPressプラグイン「List category posts」

表示を整えるのに自分のような初心者はかなりの時間を持っていかれますが、トップページにカテゴリごとの記事一覧を表示させたい場合に威力を発揮します。

トップページのカラム数を増やしてカテゴリ別記事一覧を表示させてみた

今日のたつじんへの一歩