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

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

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

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

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

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

この記事でわかること

カテゴリー記事一覧をトップぺージの最新記事一覧の上に表示する方法

  • 横長のアイキャッチ画像使ったタイル型で記事一覧を並べる
  • ページ全体が縦長になるのを極力防止する
  • カテゴリーページへのリンクボタンも併設する
  • トップページのみに表示
    (カテゴリーやアーカイブページには表示しない)

目次

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

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

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

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

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

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

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

カテゴリー一覧の配置後イメージ

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

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

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

ウィジェットの配置方法

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

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

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

  • タイトル:Gutenberg(ブロックエディター)
  • カテゴリー:Gutenberg(ブロックエディター)
  • サムネイル:横長サムネイル
  • ソート:公開日
  • 表示する記事数:4
  • カテゴリ・タグの表示:表示しない
  • 抜粋なしにチェック

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

サムネイル正方形のカテゴリー記事一覧表示

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

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

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

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

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

サムネイル横長のカテゴリー一覧

そこでカスタム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%;
	}
}

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

カテゴリー一覧の配置後イメージ

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

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

スマホ表示のカテゴリー記事一覧

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

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

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

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

テキストウィジェットへの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;
	}
}

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

ウィジェットエリアのパディング調整後

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

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

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

2つのカテゴリー一覧表示
2つのカテゴリー記事一覧を表示した場合

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

※新しく追加した ”最新記事(Luxeritasオリジナル)”ウィジェット には新しいidが付与されているので、CSSのセレクターに追記が必要なことに注意してください。

例えば今回の1つ目のウィジェットは id="thk_recent_posts-3″ でしたが、2つ目は id="thk_recent_posts-4″となります。その場合のCSSは以下のようになります。

/* (最新記事ウィジェットのスタイル調整) */
#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. ウィジェット領域一覧で”記事一覧上ウィジェット”のCategoryArchiveにチェックを入れる
ウィジェット表示エリアを制限

まとめ

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

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

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

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

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

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

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

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

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