ルクセリタス

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン)

スポンサーリンク

 

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 私困 232x300
困っている人
ルクセリタスでカテゴリーページの作り方を教えてほしい

この記事の信憑性

  • 私の兄弟ブログの『ぶろぐしる~』のWordPressテーマはルクセリタスです
  • ルクセリタスを使用して、まもなく2年目になろうとしています

それでは、本題に入ります。

使用する3つのプラグイン

下記の3つのプラグインを使用して、2パターンのカテゴリーページを作成してみます。

メモ

  1. Page Builder By SiteOrigin
  2. Category Posts Widget
  3. Site Origin Widgets Bundle

英語ばっかりですね・・・。
でも、心配する必要はありません。
いざとなれば『google chrome』の日本語翻訳機能を使えば、大丈夫です。

ちなみに、完成イメージを2つご紹介しておきます。

完成イメージ①

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 0 完成イメージ

完成イメージ②

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 0 ルクセリタスカテゴリーページの作り方

最初に、カテゴリーページの骨組みを作るためのプラグインをインストールします。
『Page Builder By SiteOrigin』です。

Page Builder By SiteOrigin

Page Builder By SiteOriginは、自分好みにレイアウトを作成することができるプラグインです。

step
1
Page Builder By SiteOriginをインストールして、有効化します。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 1 Page Builder by SiteOriginインストール

step
2
固定ページを『新規追加』します。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 2 固定ページ新規追加

step
3
『ページビルダー』をクリックします。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 3 ページビルダーを選択

step
4
『列を追加』をクリックします。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 4 列を追加

step
5
完成イメージ①の場合は、2カラムで設定します。


(完成イメージ②の場合は、1カラムです)

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 5 2カラム選択

step
6
左側の四角をクリックすると、青色が濃く変わります。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 6 1カラム目を選択

step
7
『ウィジェットを追加』をクリックします。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 7 ウィジェットを選択

step
8
『テキスト』を選択します。(『テキスト』で、何でもできるので便利です。)

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 8 テキストを選択

step
9
テキストモードで、下記のように入力します。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 9 1カラム目テキスト入力

こちらのcssはCSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選で参考にさせていただいています。
他にも綺麗でおしゃれな、cssをたくさん紹介されているのでとても参考になります。

step
10
子テーマの編集→style.cssに下記を追記します。(※.category-btn2としていますが、ボタン名は任意です)

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 11 style.css追記

step
11
2カラム目も同じように、テキストウィジェットで同じように入力します。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 10 2カラム目テキスト入力

step
12
テスト表示してみます。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 12 テスト表示

ここまで完成したら、下書き保存します。
(まぁこのボタンはあってもなくてもどちらでもいいかなぁという感じです爆)

Category Posts Widget

『Category Posts Widget』を使って、カテゴリーの最新投稿を表示しています。

step
1
Category Posts Widgetをインストールして有効化します。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 13 category postインストール

step
2
先程に作成した固定ページに『列の追加』→『ウィジェットの追加』→『Category Posts』を選択します。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 14 category post 追加

step
3
Category Postsの設定をします。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 15 category post 設定1

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 16 category post 設定2

step
4
Category Postsを上にドラッグして、テキストにくっつけます。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 16.5 列を結合

step
5
テスト表示してみます。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 17 テスト表示2

step
6
2カラム目も同じように設定するとこのような感じなります。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 18 2カラム目も同様に

参考

Category Postsの設定画面→『デザイン』→『境界線の色』で枠線を引くことが可能です。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 19 category post 境界線

step
7
バナーボタンを作成します。


『テキストウィジェット』→『メディアを追加』→『メディアにカテゴリーページリンクを貼る』

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 20 バナー設定

step
8
バナーボタンをドラッグしてくっつけておきます。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 21 行結合

step
9
完成です。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 0 完成イメージ

Site Origin Widgets Bundle

続いて、2パターン目のカテゴリーページの作成に移ります。
使用するプラグインは『Site Origin Widgets Bundle』です。

step
1
Site Origin Widgets Bundleをインストールして有効化します。


様々なウィジェットが入っています。(お得感満載)

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 1 ルクセリタスカテゴリーページの作り方

step
2
固定ページに『列の追加=1カラム』、『ウィジェットの追加』、『SiteOrigin Post Carousel』を選択します。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 2 ルクセリタスカテゴリーページの作り方

step
3
英語のままだと分かりづらいのでgoogle chromeの日本語に翻訳を使いました。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 3 ルクセリタスカテゴリーページの作り方

step
4
設定します。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 4 ルクセリタスカテゴリーページの作り方

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 5 ルクセリタスカテゴリーページの作り方

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 6 ルクセリタスカテゴリーページの作り方

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 7 ルクセリタスカテゴリーページの作り方

step
5
完成です。

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 8 ルクセリタスカテゴリーページの作り方

2つ目のイメージのカテゴリーページが完成しました。
『ぶろぐしる~』の2021年2月現在はこちらのカテゴリーページに設定しています。

実際に、どんなふうな感じになっているのかを見てください→(ぶろぐしる~

まとめ

【Luxeritasルクセリタス】カテゴリーページの作り方(2パターン) 私普通
ばらもん。
いかがでしたか?

プラグインによって、カテゴリーページの見せ方は簡単に変えることができます。
実際に色々試してみて、あなた好みのカテゴリーページを作ってください。

今回ご紹介した『Page Builder By SiteOrigin』は、トップページレイアウトも自由に設定することができるので、特にオススメのプラグインです。
私自身、ぶろぐしる~トップページのレイアウトで利用しています。以上です。

※本記事の内容で実行された結果について、筆者は一切の責任を負いませんので、ご了承ください。
必ず自己責任で実行してください。

スポンサーリンク

イチオシのワードプレステーマ

アフィンガー5

画像の説明文

ばらもん。
当ブログもアフィンガー5です

アフィリエイト×SEOに特化したテーマ

豊富な装飾が揃っているアフィンガー5

誰でも簡単にオシャレブログを実現可能!

アフィリエイトブログを作るならコレっきゃない!

-ルクセリタス

© 2021 ブログ汁