【SANGO】カテゴリー記事を出力するショートコードで記事一覧ページを作る方法

記事一覧ページを作ろうかなと思ったのですが、プラグインは入れたくなかったので、手っ取り早く SANGO のショートコードと CSS で実装しました。

実装するとこんな感じです

記事一覧ページ
実際のページはこちら

実装する方法

新規の固定ページを作って、本文にカテゴリー名と記事を出力するショートコードを書き、CSS で見た目を整えます。

固定記事の本文

カテゴリーの記事数が多い場合は「num="50"」の部分を任意の数に変更してください。

出力数を少なくすれば「各カテゴリーの最新記事10件」的なページも作れますし、「カテゴリー記事を出力するショートコードで記事の並び順を変更する方法」で紹介している方法で記事のソート基準を変更すれば、「最近更新されたページ一覧(カテゴリー別)」とか、索引のようなものなんかも作れると思います。

【SANGO】カテゴリー記事を出力するショートコードで記事の並び順を変更する方法

html

<h2><a href="カテゴリ①のURL">カテゴリー①</a></h2>
<div class="all_posts">
[catpost catid="カテゴリー①のID" num="50"]
</div>
<h2><a href="カテゴリ②のURL">カテゴリー②</a></h2>
<div class="all_posts">
[catpost catid="カテゴリー②のID" num="50"]
</div>
<h3><a href="カテゴリ③(②の子カテゴリー)のURL">カテゴリー③</a></h3>
<div class="all_posts">
[catpost catid="カテゴリー③のID" num="50"]
</div>

カテゴリー名を見出しにしてリンクを貼り、もくじを表示させれば、各カテゴリーのところまで飛べるので便利です。

CSS

変更しそうな個所にだけコメントが入っています。

「.page-id-〇〇」の部分には固定ページの記事IDを入れてください。

style.css

.page-id-〇〇 .tbimg, .page-id-〇〇 .page-title:after{
	display:none; /*画像とタイトル下の横棒を表示させない*/
}
.page-id-〇〇 .tbtext{
	line-height: 2.2; /*記事タイトルの行間*/
}
.page-id-〇〇 .linkto{
	max-width:100%;
	margin:0;
	padding:0;
	border:none;
	border-radius:0;
	background:transparent;
	font-weight: normal;
}
/*記事タイトル前の丸いアイコン*/
.all_posts span.tbtext:before {
	position: relative;
	top: -2px;
	display: inline-block;
	width: 8px;
	height: 8px;
	content: '';
	border-radius: 50%;
	background: アイコンの色;
	margin-right: .5em;
}
.page-id-〇〇 #entry .article-header{
	margin: 0;
}
.page-id-〇〇 h2 a, .page-id-〇〇 h3 a{
	color:#555; /*見出しの文字色*/
}

私はこのページだけ見出しのデザインを変えたかったので、「記事ごとにCSSなどを記述できるカスタムフィールドを追加」で実装したカスタムフィールドに見出しを上書きする CSS も一緒に記述しています。

【WordPress】記事ごとにCSSなどを記述できるカスタムフィールドを追加