1年以上かけて書いた記事は130記事以上・・・。
デザイン崩れを修正するのに1ヶ月かかりました。
注意ポイント
正直に言って、デザイン崩れを修正するのは大変な作業でした。
テーマ変更を決断するなら、早いほうが断然良いです。
私自身、テーマ変更に悩んでいた時間は無駄だったと感じました。
記事にまとめたので、『SWELL』が気になる方は要チェック！
→『【ルクセリタス→SWELL】レビュー！デザイン崩れ対処はどんな感じ？』
＼え？まだ、クラシックエディタ使いよん？もったいなｗ／
SWELLのブロックエディタを体験しないのは損！
この記事の信憑性
- 私の兄弟ブログの『ぶろぐしる～』のWordPressテーマはルクセリタスです
- ルクセリタスを使用して、まもなく２年目になろうとしています
それでは、本題に入ります。
使用する３つのプラグイン
下記の３つのプラグインを使用して、２パターンのカテゴリーページを作成してみます。
メモ
- Page Builder By SiteOrigin
- Category Posts Widget
- Site Origin Widgets Bundle
英語ばっかりですね・・・。
でも、心配する必要はありません。
いざとなれば『google chrome』の日本語翻訳機能を使えば、大丈夫です。
ちなみに、完成イメージを２つご紹介しておきます。
完成イメージ①
完成イメージ②
最初に、カテゴリーページの骨組みを作るためのプラグインをインストールします。
『Page Builder By SiteOrigin』です。
Page Builder By SiteOrigin
Page Builder By SiteOriginは、自分好みにレイアウトを作成することができるプラグインです。
step
1Page Builder By SiteOriginをインストールして、有効化します。
step
2固定ページを『新規追加』します。
step
3『ページビルダー』をクリックします。
step
4『列を追加』をクリックします。
step
5完成イメージ①の場合は、2カラムで設定します。
（完成イメージ②の場合は、1カラムです）
step
6左側の四角をクリックすると、青色が濃く変わります。
step
7『ウィジェットを追加』をクリックします。
step
8『テキスト』を選択します。（『テキスト』で、何でもできるので便利です。）
step
9テキストモードで、下記のように入力します。
こちらのcssはCSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選で参考にさせていただいています。
他にも綺麗でおしゃれな、cssをたくさん紹介されているのでとても参考になります。
step
10子テーマの編集→style.cssに下記を追記します。（※.category-btn2としていますが、ボタン名は任意です）
step
112カラム目も同じように、テキストウィジェットで同じように入力します。
step
12テスト表示してみます。
ここまで完成したら、下書き保存します。
（まぁこのボタンはあってもなくてもどちらでもいいかなぁという感じです爆）
Category Posts Widget
『Category Posts Widget』を使って、カテゴリーの最新投稿を表示しています。
step
1Category Posts Widgetをインストールして有効化します。
step
2先程に作成した固定ページに『列の追加』→『ウィジェットの追加』→『Category Posts』を選択します。
step
3Category Postsの設定をします。
step
4Category Postsを上にドラッグして、テキストにくっつけます。
step
5テスト表示してみます。
step
62カラム目も同じように設定するとこのような感じなります。
参考
Category Postsの設定画面→『デザイン』→『境界線の色』で枠線を引くことが可能です。
step
7バナーボタンを作成します。
『テキストウィジェット』→『メディアを追加』→『メディアにカテゴリーページリンクを貼る』
step
8バナーボタンをドラッグしてくっつけておきます。
step
9完成です。
Site Origin Widgets Bundle
続いて、２パターン目のカテゴリーページの作成に移ります。
使用するプラグインは『Site Origin Widgets Bundle』です。
step
1Site Origin Widgets Bundleをインストールして有効化します。
様々なウィジェットが入っています。（お得感満載）
step
2固定ページに『列の追加＝１カラム』、『ウィジェットの追加』、『SiteOrigin Post Carousel』を選択します。
step
3英語のままだと分かりづらいのでgoogle chromeの日本語に翻訳を使いました。
step
4設定します。
step
5完成です。
２つ目のイメージのカテゴリーページが完成しました。
『ぶろぐしる～』の２０２１年２月現在はこちらのカテゴリーページに設定しています。
実際に、どんなふうな感じになっているのかを見てください→（ぶろぐしる～）
まとめ
プラグインによって、カテゴリーページの見せ方は簡単に変えることができます。
実際に色々試してみて、あなた好みのカテゴリーページを作ってください。
今回ご紹介した『Page Builder By SiteOrigin』は、トップページレイアウトも自由に設定することができるので、特にオススメのプラグインです。
私自身、ぶろぐしる～トップページのレイアウトで利用しています。以上です。
※本記事の内容で実行された結果について、筆者は一切の責任を負いませんので、ご了承ください。
必ず自己責任で実行してください。
|