WordPressでニュースサイトに近いサイトを作っていたのですが、カテゴリ別に記事一覧を出したいと思って色々と探していました。カラムを2つとか3つに分けて、それぞれ縦にサムネイルを付けてカテゴリ別に新着記事を出すことを考えていました。
『WordPress Popular Posts』を使えば、カテゴリでの一覧は出せるものの、新着記事ではなく人気記事なんですよね。他にも希望に近いコードやプラグインはあるものの、どうも自分が求めるちょうど良いものがなかったので、自分でコードを組んだので公開したいと思います。
固定ページや投稿記事で使いたい場合には、『Exec-PHP』などのプラグインを使って利用して頂ければと思います。
サムネイル付きカテゴリ別記事一覧のサンプル
ここでは、カテゴリを”WordPress”に設定して、最新の記事を5つ表示するようにしています。
まず、どのカテゴリか分かるように『Category: カテゴリ名』で表示し、「記事アイキャッチ画像」＋「投稿日時」＋「記事タイトル」＋「記事から文字を抜粋」したものを並べて、各記事をborderで分けています。
サムネイル付きカテゴリ別記事一覧のコード
PHPコード
ここでは、カテゴリを”wordpress”で、最新5件を表示する例としてのPHPを記載しております。
CSS
今使っているテーマのstyle.cssを踏まえながら調整したCSSなので、ご利用される場合はご自身の環境に合うように値を調整してください。
/* -----------------------------------------------------------------------
カテゴリ別新着記事一覧
----------------------------------------------------------------------- */
.postlist-category {
margin: 10px 0 5px 0;
padding: 2px;
border-top: 1px dashed #999;
}
.postlist-category img {
float: left;
margin: 10px 6px 0 0;
width: 80px;
height: 80px;
}
.postlist-category a {
display: block;
}
.postlist-category-inner {
margin: 0;
padding: 1px;
}
.postlist-category-inner p {
font-size: 16px;
margin: 1px 0 5px 3px;
}
.postlist-datetime span {
font-size: 10px;
}
使い方・解説
このコードを使って、カテゴリ別の記事一覧を出したい時に変更を加える必要がある箇所は3つになります。それぞれのポイントを説明します。
カテゴリの指定
コードの初めに変数を幾つか設定しています。そのうちの1つめが、カテゴリを指定する変数になります。
$cat = 'wordpress';
この変数の値に、'(アポストロフィー)で囲むようにして、表示したいカテゴリのスラッグを入力しておいてください。もちろんスラッグは2bytes文字でないことをおすすめします。
一覧に表示する記事数の指定
2つめに宣言している変数では、一覧に表示する記事数を指定できるようにしています。
$num = '5';
ここでは単純に表示させたい記事数を数字で入力しておいてください。
記事本文の抜粋文字数の設定
このコードでは、タイトルリンクの下に記事本文から文字を抜粋して表示させるようにしています。抜粋の最後は”…”となるようにしています。PHPコードの途中にある、下記の部分に注目してください。
mb_substr関数を使って文字を抜き出しているのですが、上記で”0″になっている部分は「何文字目から」抜き出すかを指定しています。ですので、ここはそのまま”0″で良いと思います。
その次の”32″となっている箇所が、「何文字」抜き出すかを指定しているので、抜き出す文字数を変更する場合にはこの数字を変更してください。
WordPressで動かす時の注意
WordPressでは、投稿記事や固定ページに直接PHPコードを書いても、そのままでは動かないようになっています。ですので、上記コードを使いたい時には、『Exec-PHP』などのプラグインをインストールしてください。
PHPをWordPressで動かすことは賛否両論あるので、要望があればショートコード化したいと思います。
