Luxeritas（ルクセリタス）でカテゴリー別記事一覧を表示する方法

2021年9月25日

ワードプレスのテーマLuxeritasで最新記事一覧トップぺージにカテゴリー別の記事一覧を表示する方法を紹介します。

LuxeritasならばウィジェットとCSSの調整だけで可能です。

カテゴリー記事一覧表示の手順概要

方法としては次の３ステップだけです。

1. ウィジェット”新着記事（Luxeritasオリジナル）”を表示したいウィジェットエリアに設置
2. ”新着記事（Luxeritasオリジナル）”ウィジェットの設定をする
   （タイトル・カテゴリー指定・サムネイルの大きさ・記事数など）
3. カスタムCSSでスタイルを整える

その他オプションとして、カテゴリーページへのリンクボタンを併設したり、表示するページを限定したりします。

カテゴリー記事一覧表示の手順詳細

例として当ブログサイトを使って試していきます。

カテゴリー：Gutenberg（ブロックエディター）の記事一覧を、トップページの記事一覧（最新記事一覧）の上に設置します。

①ウィジェット”新着記事（Luxeritasオリジナル）”を設置する

ダッシュボードメニュー　外観＞ウィジェット　を開けて、”新着記事（Luxeritasオリジナル）”をドラッグ＆ドロップで配置します。

今回は、記事一覧上ウィジェットに配置しました。

②”新着記事（Luxeritasオリジナル）”ウィジェットの設定をする

配置したウィジェット”新着記事（Luxeritasオリジナル）”を開けて設定をします。カテゴリーを指定することができます。

今回の設定は以下の通りです。

サムネイルはデフォルトでは正方形（小）となっています。その場合は以下のような表示となります。

この表示が好みの方はこのままでよいかと思います。

しかしこの場合サムネイル画像が小さくなってしまうというデメリットのほかに、

• カテゴリー記事が縦に長くなるのでページ全体も長くなってしまう
• 複数のカテゴリー一覧の表示には向かない（ページの視認性が悪い）
• 最新記事一覧へユーザーがたどりつかない

といった問題もあるので私は好みではありません。

しかしサムネイルを横長とすると次のような見映えになってしまいます。

そこでカスタムCSSでスタイルを整えていきます。

③カスタムCSSでスタイルを整える

今回設置したウィジェットのHTMLは以下の通りです。

<div id="thk_recent_posts-3" class="widget posts-list-upper thk_recent_posts">
    <p class="posts-list-upper-title">Gutenberg（ブロックエディター）</p>
    <style>
        #thk_recent_posts-3 .term {
            float: none;
            overflow: hidden;
            margin: 0 0 16px;
            max-width: 388px;
            max-height: 218px
        }

        #thk_recent_posts-3 .term img {
            margin: 0;
            padding: 0;
            border: 0;
            min-width: 100%;
            max-width: none;
            max-height: none
        }
    </style>
    <div id="thk-new">
        <div class="toc clearfix">
            <figure class="term"><a href="http://webchil-test/2021/03/10/wordpress5_7-gutenberg/"
                    aria-label="ワードプレスversion5.7"><img width="320" height="180"
                        src="http://webchil-test/wp-content/uploads/2021/03/9f5dd9b63748b77d511ee47f70a88bd9-320x180.jpg"
                        data-src="http://webchil-test/wp-content/uploads/2021/03/9f5dd9b63748b77d511ee47f70a88bd9-320x180.jpg"
                        class="lazy attachment-thumb320 size-thumb320 wp-post-image" alt="ワードプレスversion5.7"
                        data-loaded="true"><noscript><img width="320" height="180"
                            src="http://webchil-test/wp-content/uploads/2021/03/9f5dd9b63748b77d511ee47f70a88bd9-320x180.jpg"
                            class="attachment-thumb320 size-thumb320 wp-post-image"
                            alt="ワードプレスversion5.7" /></noscript></a>
            </figure>
            <div class="excerpt">
                <p class="new-meta"><time class="date" datetime="2021-03-10T13:32:55+09:00">2021年3月10日</time></p>
                <p class="new-title"><a
                        href="http://webchil-test/2021/03/10/wordpress5_7-gutenberg/">ワードプレス5.7でのGutenberg変更・強化内容の紹介</a>
                </p>
            </div>
        </div>
        <div class="toc clearfix">
            <figure class="term"><a href="http://webchil-test/2021/02/28/gutenberg-weak-point10/"
                    aria-label="ワードプレス_Gutenberg苦手克服法"><img width="320" height="180"
                        src="http://webchil-test/wp-content/uploads/2021/02/24dbab056c32a8d5d7f4bb5710a127df-320x180.jpg"
                        data-src="http://webchil-test/wp-content/uploads/2021/02/24dbab056c32a8d5d7f4bb5710a127df-320x180.jpg"
                        class="lazy attachment-thumb320 size-thumb320 wp-post-image" alt="ワードプレス_Gutenberg苦手克服法"
                        data-loaded="true"><noscript><img width="320" height="180"
                            src="http://webchil-test/wp-content/uploads/2021/02/24dbab056c32a8d5d7f4bb5710a127df-320x180.jpg"
                            class="attachment-thumb320 size-thumb320 wp-post-image"
                            alt="ワードプレス_Gutenberg苦手克服法" /></noscript></a>
            </figure>
            <div class="excerpt">
                <p class="new-meta"><time class="date" datetime="2021-02-28T10:29:34+09:00">2021年2月28日</time></p>
                <p class="new-title"><a
                        href="http://webchil-test/2021/02/28/gutenberg-weak-point10/">Gutenbergはなぜ使いにくい？その理由と克服するコツ10選</a>
                </p>
            </div>
        </div>
        <div class="toc clearfix">
            <figure class="term"><a href="http://webchil-test/2021/01/27/column-block-plugin/"
                    aria-label="ワードプレス_カラムプラグイン"><img width="320" height="180"
                        src="http://webchil-test/wp-content/uploads/2021/01/0a121690cfec64b8ff6de0774a94a848-320x180.jpg"
                        data-src="http://webchil-test/wp-content/uploads/2021/01/0a121690cfec64b8ff6de0774a94a848-320x180.jpg"
                        class="lazy attachment-thumb320 size-thumb320 wp-post-image" alt="ワードプレス_カラムプラグイン"
                        data-loaded="true"><noscript><img width="320" height="180"
                            src="http://webchil-test/wp-content/uploads/2021/01/0a121690cfec64b8ff6de0774a94a848-320x180.jpg"
                            class="attachment-thumb320 size-thumb320 wp-post-image"
                            alt="ワードプレス_カラムプラグイン" /></noscript></a>
            </figure>
            <div class="excerpt">
                <p class="new-meta"><time class="date" datetime="2021-01-27T00:39:21+09:00">2021年1月27日</time></p>
                <p class="new-title"><a
                        href="http://webchil-test/2021/01/27/column-block-plugin/">Gutenberg強化プラグインとデフォルトのカラムブロックとは一体何が違うのか？（ワードプレス　ブロックエディター）</a>
                </p>
            </div>
        </div>
        <div class="toc clearfix">
            <figure class="term"><a href="http://webchil-test/2020/11/18/gutenberg-guidelines/"
                    aria-label="Gutenberg習得ガイド"><img width="320" height="180"
                        src="http://webchil-test/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc-320x180.jpg"
                        data-src="http://webchil-test/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc-320x180.jpg"
                        class="lazy attachment-thumb320 size-thumb320 wp-post-image" alt="Gutenberg習得ガイド"
                        data-loaded="true"><noscript><img width="320" height="180"
                            src="http://webchil-test/wp-content/uploads/2020/11/01fb5fe3016b75442d9fec492c8806bc-320x180.jpg"
                            class="attachment-thumb320 size-thumb320 wp-post-image"
                            alt="Gutenberg習得ガイド" /></noscript></a>
            </figure>
            <div class="excerpt">
                <p class="new-meta"><time class="date" datetime="2020-11-18T22:45:35+09:00">2020年11月18日</time></p>
                <p class="new-title"><a
                        href="http://webchil-test/2020/11/18/gutenberg-guidelines/">Gutenberg（ブロックエディター）習得ガイド　初めてブロックエディターを使うあなたへ</a>
                </p>
            </div>
        </div>
    </div>
</div>

最初の<div>タグ内のid="thk_recent_posts-3″は設置した”最新記事（Luxeritasオリジナル）”ウィジェットを示すidなので、このid名を起点にカスタムCSSのセレクター指定をしていきます。しかしサイトによってid内の数字が異なるのでご注意ください。

このHTMLに対して子テーマのstyle.cssに次のCSSを記述します。

/* （最新記事ウィジェットのスタイル調整） */
#thk_recent_posts-3 {
	padding: 5px;
}
#thk_recent_posts-3 .posts-list-upper-title{
	font-size: 1.8rem;
	font-weight: 700;
	margin: 0 0 20px;
	padding: 0.2em 0.3em 0.2em;
	background-color: #91c4c7;
}
#thk_recent_posts-3 #thk-new {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#thk_recent_posts-3 .toc {
	width: 23%;
	border-bottom: none;
	margin: 0;
}
#thk_recent_posts-3 .toc img {
	width:100%;
}
@media screen and (max-width:575px){
	#thk_recent_posts-3 .toc {
		width: 46%;
	}
}

以上で次の見映えとなります。４つの記事をflexボックスで横並びとしました。

これであれば縦長になることもなく、複数のカテゴリーを表示させても最新記事一覧にたどりつくことができますよね。

ちなみに横幅575px以下では２列表示となります。

カテゴリーページへのリンクボタンも設置する

せっかくカテゴリーの最新記事を表示させているので、そのカテゴリーページへのリンクボタンも設置したいですよね。

そこでテキストウィジェットを使ってリンクボタンを設置しました。

テキストウィジェットにHTMLを記述します。テキストタブに切り替えてください。

記述するHTMLは次の通りです。

<div class="category-link-btn__container">
<a class="category-link-btn" href="#"><strong>このカテゴリーのページへ</strong></a></div>

※<a>タグ内のhref属性の#の部分にはリンク先URLを記述します。

このHTMLに対して次のCSSを子テーマstyle.cssに記述します。

/* （カテゴリーページリンクボタン） */
.category-link-btn__container {
	padding: 0 5px 5px;
        margin-bottom: 30px;
}
.category-link-btn {
	display: block;
	padding: 0.8rem 0;
	text-align: center;
	color: #fff;
	font-size: 1.6rem;
	background-color: #d19385;
}
.category-link-btn:hover {
	opacity: 0.8;
}

以上で次のようにリンクボタンが表示されるようになります。

カテゴリー記事一覧とリンクボタンを枠線で囲む

カテゴリー一覧とリンクボタンの一体感を出すべく枠線で囲むならば次のCSSを追加するとよいでしょう。

#thk_recent_posts-3 {
	border: solid 1px #333;
	border-bottom: none;
}
.category-link-btn__container {
	border: solid 1px #333;
	border-top: none;
}

記事一覧上ウィジェットエリアのパディングを調整

枠線で囲むとパソコン表示ではカテゴリー記事一覧の横幅全体が小さいのが気になってきます。

これは記事一覧上のウィジェットエリアのパディングが大きく設定されているのが原因です。他のウィジェットエリアに配置した場合はこの限りではありません。

記事一覧上ウィジェットエリアの場合は次のCSSをさらに追加して横幅を広げるとよいでしょう。

/* （ウィジェットエリアのパディング調整） */
.posts-list-upper-widget.grid {
	padding-left: 25px;
	padding-right: 25px;
}
@media screen and (max-width:991px){
	.posts-list-upper-widget.grid {
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media screen and (max-width:575px){
	.posts-list-upper-widget.grid {
		padding-left: 7px;
		padding-right: 7px;
	}
}

以下のように広がりました。

複数のカテゴリー記事一覧を表示

複数のカテゴリーの記事一覧を設置した見映えも確認しておきましょう。

２つのカテゴリーを設置した場合です。

カテゴリーごとに枠線で囲っていることで、わかりやすく表示できています。
また、少ないスクロール量で最新記事一覧に到達できます。

/* （最新記事ウィジェットのスタイル調整） */
#thk_recent_posts-3,#thk_recent_posts-4 {
	padding: 5px;
	border: solid 1px #333;
	border-bottom: none;
}
#thk_recent_posts-3 .posts-list-upper-title,
#thk_recent_posts-4 .posts-list-upper-title{
	font-size: 1.8rem;
	font-weight: 700;
	margin: 0 0 20px;
	padding: 0.2em 0.3em 0.2em;
	background-color: #91c4c7;
}
#thk_recent_posts-3 #thk-new,
#thk_recent_posts-4 #thk-new {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#thk_recent_posts-3 .toc,
#thk_recent_posts-4 .toc {
	width: 23%;
	border-bottom: none;
	margin: 0;
}
#thk_recent_posts-3 .toc img,
#thk_recent_posts-4 .toc img {
	width:100%;
}
@media screen and (max-width:575px){
	#thk_recent_posts-3 .toc,
	#thk_recent_posts-4 .toc {
		width: 46%;
	}
}

ウィジェットの表示ページを制限する

今回設置した記事一覧上ウィジェットエリアはトップページだけでなく各カテゴリー・アーカイブページにも表示されます。

トップページのみに表示したい場合は、ウィジェット表示エリアの制限をしておくとよいでしょう。

手順は以下の通りです。

1. ダッシュボードメニュー　Luxeritas＞管理機能＞”ウィジェット管理”タブ　へと進める
2. ウィジェット領域一覧で”記事一覧上ウィジェット”のCategoryとArchiveにチェックを入れる

２ページ目以降にウィジェットを表示させたくない場合

記事一覧の２ページ目以降には非表示にしておきたい場合は、次の記事を参照ください。

Luxeritas（ルクセリタス）記事一覧１ページ目のみウィジェット表示する方法

Luxeritasではウィジェットをヘッダー下や記事一覧ページ上などに表示することができます。 でもこれっ ...

 https://web-children.com/2021/09/25/luxeritas-widget-unshow-...

まとめ

ウィジェットの設定とCSSの調整だけでトップページにカテゴリー記事一覧を表示することができました。

今回は記事一覧上ウィジェットエリアでカテゴリー記事一覧を表示、その下に最新記事一覧を表示という並びにしましたが、記事一覧下ウィジェットエリアを使えばその逆の表示も可能です。

この他の方法としては固定ページをトップページ指定としてカテゴリー記事一覧を表示させる、という方法も可能です。ワードプレスversion5.8以降であれば、クエリーループブロックが使えるようになったのでPHPの編集なしで表示できるようになりました。

次の記事を参考に挑戦してみるのもよいでしょう。

ワードプレス　クエリーループブロックで記事一覧を挿入する方法【version5.9での変更

ワードプレスversion5.8で導入されたクエリーループブロックについて紹介します。 クエリーループブロ ...

 https://web-children.com/2021/07/24/query-loop-block/

このほかLuxeritasの使い方の記事はこちらです。

【したいことが探せる】Luxeritas（ルクセリタス）使い方目的別ガイド

Luxeritasの使い方を目的別にまとめてみました。『〇〇をしたいとき関連する機能はすべて知りたい』と ...

 https://web-children.com/2021/09/09/how-to-use-luxeritas/

カテゴリーページに説明文をつけたい場合はこちらが参考になります。

Luxeritas（ルクセリタス）カテゴリーページに説明文をつける方法

ワードプレスの人気無料テーマLuxeritasでカテゴリーページ冒頭に説明文をつける方法の解説記事です。 ...

 https://web-children.com/2021/09/14/luxeritas-category-descr...

ワードプレスの始め方
～稼ぐためのしくみづくりまでを
徹底解説！！

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

詳細はこちら

amazonでたった１コインで手に入れる