Webサイト制作

WordPressに特定カテゴリーの記事一覧をサムネ付きで表示する

WordPressをカスタマイズして制作する方向けの情報です。
私個人の備忘録でもあります。
最新記事以外に下層ページでサムネイル写真付きを並べたいということがあります。
そして、よくあるリストタグul li とCSSを使ってレイアウトものではなく、Bootstrapを使って簡単・キレイ・自動で作りたい!ってことありますよね?(無いかなw?)
タイトルや記事内容の抜粋も表示したいっていう、よくニュースサイトなどで見かけるやつです。

実現したいこと

  • 特定カテゴリのみ
  • 最新n件(nは任意、今回のタグは20件で記述)
  • Bootstrapを使ってグリッド表示したい
  • サムネイル付き
  • 記事内容を文字数指定
  • 記事投稿日を掲示

ソースコード

解説

「info」というスラッグ名のカテゴリを最新20件、サムネイル付き&記事内容を文字数を指定しています。

サムネイルサイズについて


「thumb300」の箇所を「thumbnail」に書き換えることで、最小サイズ(Wordpressデフォルトサイズ)のサムネイルに変更することができます。

カテゴリの指定

2行目にカテゴリの指定を行っています。カテゴリーのスラッグを記入します。

最新の記事数を指定

3行目に記事数の指定を行なっています。最新20件出す様にしています。

記事内容の取得する文字数を指定

21行目に記事内容の文字数を指定しています。
0というのは何文字目から抜き出すか、ということなのでここでは「0文字目から30文字目まで抜き出す」という指定になっています。

Bootstrapのレイアウトを変更したい場合

この部分を修正することでレイアウトを変更できます。
今回のコードでは、PC表示で3列、SP表示で2列になる様にレイアウトしています。

-Webサイト制作
-, , ,