👏

List category postsのカスタマイズ

2024/04/30に公開

CSS

WordPressで、記事一覧を表示できるプラグイン”List category posts”ですが、とても細かくHTMLとCSSを使ってカスタマイズできることを知りました。

今回私がハマった失敗で、WordPressのテーマのフォルダの中に、List category postsのテンプレートを入れるフォルダ名を間違えました。
正しいフォルダ名は、こちらです。

list-category-posts

私は、最後のsが抜けていることに３時間気が付かず、むなしく時間が過ぎた経験をしました。

このようなテンプレートでしたら、サムネイル→更新日時→タイトルという順番で表示できます。

global $post;
while ($this->lcp_query->have_posts()) :
  $this->lcp_query->the_post();

  // Check if protected post should be displayed
  if (!$this->check_show_protected($post)) continue;

  //Start a List Item for each post:
  $lcp_display_output .= $this->open_inner_tag($post, 'li');

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

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

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


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

  // Show categories
  $lcp_display_output .= $this->get_posts_cats($post);

  // Show tags
  $lcp_display_output .= $this->get_posts_tags($post);

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


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

  // Show post ID
  $lcp_display_output .= $this->get_display_id($post);

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

これは、全体のコードの一部です。
適宜修正してください。

ショートコード

こちらのショートコードで、更新日時の左右に１文字分の空白を空けることができます。

[catlist template='hoge' name='information' thumbnail='yes' thumbnail_size='80,80' date_modified='yes' date_modified_tag=span date_modified_class='it_lcp_date']

hogeは、使われるテンプレートのファイル名の拡張子を除いた部分を指定してください。
name='information'は、一覧表示するカテゴリーを指定してください。
date_modified_tag=spanは、更新日時にspanを設定します。
spanのところをbrとすると改行できます。
date_modified_class='it_lcp_date'は、更新日時に、クラス名it_lcp_dateを設定します。

CSSのコード

.it_lcp_date {
    margin-left: 1em;
    margin-rigth: 1em;
}

テーマのCSSに、上記のコードを入力してください。

参考情報

今回は、こちらの公式文書を参考にしました。

ショートコード

CSSのコード

参考情報

Discussion