【SWELL】投稿一覧・カテゴリーアーカイブページのデザインってどんな感じなの？

そんな疑問に答えます。

WordPress有料テーマ「SWELL」でお知らせを一覧表示させるアーカイブページのデザイン、カテゴリーごとの一覧ページデザインとその設定オプションを図解で解説します。

お知らせ・投稿・カテゴリーアーカイブページのデザイン

①カード型

カード型はSWELLカテゴリーアーカイブページのデフォルトデザインです。何も設定しない場合はこのカード型デザインが全カテゴリーアーカイブぺージのデザインです。

投稿一覧ページでカード型デザインを指定した場合にデフォルトで表示される要素は次の通りです。

オプションごとに表示・非表示にオプションがあります。例えば、公開日は表示したいけど更新日は表示したくない場合は更新日のオプションを非表示にすることができます。

僕はできるだけシンプルにしたいので、アイキャッチ画像・カテゴリー名、タイトルのみ表示しています。著者や抜粋まで表示するとさすがにゴチャゴチャした印象です。

アイキャッチの比率

ブログ型デザインを選択した際に表示されるアイキャッチ画像の比率は管理画面で変更できます。

アイキャッチ画像は縦横の比率を気にせずアップロードしてもカテゴリーアーカイブページで自動的に指定の比率にトリミングされます。

アイキャッチの比率はテキスト型以外の全デザインで設定できます。

②リスト型

リスト型はブログデザインでよく見るデザインパターンです。

アイキャッチ画像が左、タイトルや抜粋などが右型に表示されるレイアウト形式です。「①」のカード型同様に、次の設定オプションで表示する要素をチューニングできます。

③リスト型（交互）

リスト型（交互）オプションは②のリスト形式とほぼ同じです。アイキャッチの位置が奇数の投稿では「左」、偶数の投稿では「右」に交互に表示されます。

あまり有料テーマにはないデザインパターンでオシャレ度高めです。表示する設定オプションはブログ型、リスト型と同じです。

④サムネイル型

サムネイル型デザインはカード型に類似しています。

ブログ型はアイキャッチ画像の下にタイトルや抜粋などの情報が表示されます。サムネイル型はアイキャッチ画像に重なるようにタイトルなどが表示されます。

⑤ブログ型

ブログ型デザインは有料テーマだとお馴染みのデザインです。ブログ型やサムネイル型のような3カラムではなく、1カラムで表示されるデザインです。

⑥テキスト型

テキスト型はその名の通りテキストリンクのみのデザインです。

アイキャッチは表示されません。ブログのカテゴリー一覧として使うにはちょっと味気ない気がします。

用途とするとコーポレートサイトでお知らせカテゴリー一覧を表示する場合に使えます。

コーポレートサイトのお知らせコンテンツは営業時間のお知らせ・夏季休業といったもので、アイキャッチ画像がないコンテンツがあったりします。一覧表示でひとつだけアイキャッチがないとどうしてもチグハグとした印象を与えてしまいます。

カテゴリー・タグアーカイブページの設定オプション

SWELLのカテゴリーアーカイブページ・タグアーカイブなどのお知らせを一覧するページはカテゴリーごとにデザイン系のオプションを変更することができます。

例えば「営業時間カテゴリー」ではサイドバーを表示しない。

「それ以外のカテゴリー」ではサイドバーを表示してデザインをカード型にする…なんて感じで個別のカテゴリーやタグごとにデザインを調整できます。

SWELL開発者さんが作ったSEO SIMPLE PACKプラグインをインストールする追加で以下のオプションも設定できるようになります。

SEO SIMPLE PACKプラグインはWordPress公式ディレクトリーに登録されている無料プラグインです。

新着順/人気順のタブ

このオプションを使うとカテゴリーアーカイブページに次の画像のようなタブが表示されます。

「新着記事」タブをクリックすると、投稿日が新しい順に記事が表示されます。「人気順」タブをクリックするとアクセス数が多い記事順に自動的に並び替えて表示させる仕組みです。

SWELLはテーマの機能として記事ごとのアクセス数を記録するシステムが搭載されています。人気順タブは内部でカウントされたPVをもとに順序を変更する仕組みです。

SWELL公式サイトのカテゴリー一覧ページでもこのタブ機能を使っています。

サイドバー

サイドバーの表示オプションです。「表示」「非表示」の他、「ベースに従う」という共通設定を優先するオプションがあります。「表示」を選択するとサイト共通のサイドバーが表示されます。

「非表示」を選択するとサイドバーが消え、広々とした1カラムデザインになります。

SWELLの基本機能ではカテゴリーごとにサイドバーの表示を変えるといった制御はできませんが、簡単な独自カスタマイズでサイドバーの表示を切り替えることができます。詳しくは次の記事で解説しています。

ページで呼び出すブログパーツ

カテゴリーアーカイブページの先頭に、ブロックエディターで作成したパーツを表示させる機能です。

ちなみに「ブログパーツ」とはSWELLのオリジナル機能の1つです。

SWELLはブロックエディター対応テーマです。そのブロックエディターで任意のパーツを作っておき、ページやウィジェットなどで呼び出して使うといった用途で使います。

一覧ページにカスタムフィールドを追加表示するカスタマイズ

サイト運営で使える実用的なテクニックです。

不動産サイトで物件を一覧表示するページ上に、カスタムフィールドで入力した要素を表示させる方法を紹介します。

こんな場合に使えるテクニック

ポータルサイトや、ガジェットブログなどでアイキャッチ画像とタイトルと合わせてカスタムフィールドを表示できます。

デモサイトのURL

一覧ページの出力に、任意のテキスト、アイコン、マークアップした要素を追加できます。特別難しいカスタマイズは不要で、「抜粋」に入力したものをそのまま表示する仕組みです。

まとめ

WordPress有料テーマSWELLの記事一覧、カテゴリーアーカイブページのデザインと設定オプションを紹介しました。SWELLの投稿一覧ページのデザインのベースデザインは下記6パターン。

一括での反映だけでなくカテゴリーやタグごとに自由に設定出来るのが特徴です。

公式 SWELL公式サイト