本noteについて
このnoteは有料（1000円）ですが、期間限定(4月14日正午迄)で最後まで無料でお読みいただけるように設定しています。

カタログ型情報サイトとは？

カタログ型情報サイトとは、商品カタログのように情報をシンプルに整理・構造化したデータベース（カタログコンテンツ）を中心に据え、そこに補足情報や便利な機能を組み合わせることで、多面的に情報へアクセスできるように設計された情報サイトです（筆者の造語です）。

このサイト構造は、ユーザーが必要な情報を素早く見つけることができ、興味を持った情報については、より詳しく深掘りしていくことができる、まさに理想的な情報サイトの形と言えます。

このnoteで解説すること
このnoteでは、カタログ型情報サイトをWordPressを使って実際に作成するプロセスや、ユーザビリティーのアイデアをデモサイトを例にして解説します。

利用するツール
WordPressのテーマはEmanon Free（無料版）を使用します。また、使用するプラグインも無料で利用できるものを選びました。個人でブログを運営している方でも、本格的な情報サイト作りに気軽に挑戦していただけます。

さらに詳しく知りたい方へ
カタログ型情報サイトの基本的な考え方について、より詳しく解説したnoteもご用意しています。

注意
なお、WordPressのインストール方法や、使用するテーマ「Emanon」の細かな設定については説明を省略しています。また、実際のサイト制作作業においては最低限のHTML知識が必要になります。

WordPressでのサイト構築が初めての方や、WordPress経験者でも一般的なブログ形態での運営しかしたことの無い方には、今回の内容はかなり難しく感じるかもしれません。

そして、毎度のことながらSEOやマネタイズに関する記述は1行もありません。純粋にサイト制作のヒントとしてご活用いただければ幸いです。

では、はじめましょう。

カタログ型情報サイトのデモサイト

カタログ型情報サイトの考え方を元に作ったデモサイトはこちらです。

WordPressで作った場合、どのような構造になるかを示すデモサイトのため、一部のページは未完成のままとなっています。
また、GoogleにはIndexさせていませんので検索結果には表示されません。

Emanon Freeの選定理由

Emanonシリーズはもともと企業のコーポレートサイトやオウンドメディア向けに開発されたテーマですが、カタログ型情報サイトの構築にも役立つ機能や特長が備わっています。

デフォルトでカスタム投稿を用意

「カスタム投稿」とは、通常の投稿（ブログ記事）や固定ページとは異なる、独自の投稿タイプを作成できる機能です。カタログコンテンツ（データベース）を通常の投稿ページと別にすることで、サイトの構造を柔軟にカスタマイズでき、情報を整理しやすくなります。

Emanonシリーズでは、特別なカスタマイズをしなくても、簡単な設定で「カスタム投稿」を利用できるようになっています。

カテゴリページの柔軟性

情報サイトにおいて最も重要なのは、ユーザーが必要とする情報に迷わずたどり着けることです。その実現のためには、コンテンツの特性や目的に合わせて、カテゴリページ（一覧ページ）の構成や設計を最適化することが不可欠です。

Emanonシリーズでは、「リスト型」「カード型」「アイキャッチの有無」「記事番号の付与」「固定ページの割り当て」など、柔軟なデザイン設定が可能です。さらに、これらをカテゴリごとに個別の設定ができるため、より適したナビゲーションを構築できます。

記事一覧テーブルの表示

「記事一覧テーブル」は、カテゴリページやタグページなどの一覧ページで、スペックなどのデータをテーブル形式で表示できる機能です。Emanonシリーズでは、デフォルトで5項目のデータを表示できます。

記事一覧の並び替え（ソート機能）

また、記事日付や記事一覧テーブルに入力した数値をもとに、ユーザー自身で記事一覧を並び替え（ソート）できる機能も備えています。これにより、必要な情報をさらに見つけやすくなります。

これらの機能を活用すれば、高価なプラグインを購入したり、複雑なカスタマイズを行ったりしなくても、ひと味違う機能的な情報サイトが構築できます。

なお、今回使用したEmanon FreeはEmanon Proの機能制限版です。
より高度な設定や機能を利用したい場合、またテーマに関するサポートが必要な場合はPro版の購入をおすすめします。

WordPressの準備手順

サーバーにWordPressをインストールした後、Emanon本体と子テーマをインストールします。
Emanonのインストール方法はこちらを参照してください
→ 設定ガイド | WordPressテーマ Emanon 

ここまでは通常のWordPressのセットアップと同じ手順です。WordPressとEmanonの準備が完了したら、情報サイト向けの基本設定を行いましょう。

パーマリンクの設定

パーマリンク構造は、カスタム構造を選択し
 /%category%/%postname%/ と指定してください。

URL構造には色々な考え方がありますが、コンテンツグループごとにディレクトリでまとめたいのでこのようにします。

1ページに表示する最大投稿数

デフォルトでは10件になっていますが、なるべくページネーションが出ないようにたくさん表示される方が良いでしょう。
現在のWordPressは画像の遅延読み込みに対応しているので100件以上表示させても表示速度の問題はほとんどありません。

トップページに固定ページを設定する

情報サイトのトップページデザインはUXの観点から非常に重要です。Emanonはデフォルトでも比較的自由なデザインが可能ですが、さらに柔軟性を高めるために固定ページを活用します。

1. 新規固定ページを作成し、タイトルは仮に「HOME」 とします（Emanonでは固定ページのタイトルをトップページに使用しないのでわかりやすい名前にしておきます）。

2. トップページはコンテンツがある程度揃ってから作成します。この時点では空ページで問題ありません。

3. サイドバーの 「テンプレート」 から 「フロントページ［固定ページ］非対応：記事一覧」 を選択します。
   ※Emanon Freeではこの設定を行わないと、正しく反映されないため注意が必要です。

固定ページを公開したのち「設定 ＞ 表示設定」に移動して、「ホームページに固定ページを使用する」にチェック。用意したページ（HOME）を割り当ててください。

カタログコンテンツの作成手順

カタログコンテンツ（データベース）は、通常の投稿ページとは別にカスタム投稿として作成すると、構造が整理され、メンテナンスも容易になります。

データは個別に投稿することも可能ですが、スプレッドシートで情報を整理し、CSV形式で一括インポートすると効率的です。

Emanon Freeのカスタム投稿設定

Emanonシリーズには、あらかじめカスタム投稿が用意されており、シンプルな設定で簡単に利用できます。

1. 「ダッシュボード > Emanon設定」 にアクセスし、「カスタム投稿」 タブを開きます。

2. 「カスタム投稿の追加」 を有効化します。

3. 「投稿タイプ名」と「スラッグ」を設定します。（デモサイトでは「寺社旧跡一覧」／「db」としました。URLはhoge.com/db/となります。）

4. 設定を保存後、「設定 > パーマリンク設定」 に移動し、「変更を保存」をクリックします。
   ※この操作を行わないと、カスタム投稿の投稿画面が正常に表示されないため注意が必要です。

より詳しい解説はEmanonのマニュアルもご覧ください→
https://wp-emanon.jp/emanon-pro/emanon-custom-post/

カスタムタクソノミーの設定

カスタムタクソノミーとは、カスタム投稿におけるカテゴリやタグに相当する機能です。設定方法は通常のカテゴリやタグと同様です。

ナビゲーションの利便性に直結するため、用途を考慮し計画的に設定を行いましょう。

この時、カテゴリとタグが縦横の関係になるよう、スプレッドシートを使って構造を整理しておくのがおすすめです。

カテゴリとタグが交差したセルに該当するアイテムがあるかチェックしましょう。
すべてのセルがまんべんなく埋まる状態がベストです。不足アイテムの発見にも利用できます。

カテゴリを表示する順番を入れ替えたいときはCategory Order and Taxonomy Terms Orderプラグインを使用すると簡単に調整できます。

CSVからデータを一括インポートする方法

カタログコンテンツの基本データはエクセルなどのスプレッドシートで管理します。
スプレッドシートの利用することで、ページの情報粒度を揃えユーザーにとって使いやすいデータ構造を作ることができます。

また、スプレッドシートからCSV形式（カンマ区切りテキスト）でエクスポートすれば、プラグインを使ってWordPressにまとめてインポートすることが可能になります。

今回はReally Simple CSV Importerプラグインを使って、データの一括インポートに挑戦してみましょう。

Really Simple CSV Importerは、CSVファイルを解析し、各行を1つの投稿として処理します。カラム名をキーとして投稿データにマッピングする仕組みです。

post_idの予約

WordPressは、記事をID（post _id）で管理しています。このpost_idは投稿かカスタム投稿かによらず一意の数字が割り当てられます。後から変更はできません。

あとからアイテムを追加するときや構成を変更するとき、バラバラの番号になっていると管理がしにくくなるので、カタログに使用するpost_idは予め下書き状態で予約しておきましょう。

Really Simple CSV Importerを使って仮記事を必要な数だけ先に投稿しておきます。

予約するpost_idの数は余裕を持って、実際に使用するアイテム数の２～３倍程度にしておくと良いでしょう。1000以上投稿してもパフォーマンスに大きな影響はありません。

WordPressをインストールした段階で、いくつかのpost_idは使用済みになっています。100番くらいからスタートすると間違いありません。

またpost_idの番号は連番ではなく１つ飛ばし（奇数のみあるいは偶数のみ）にしておきます。これはアイキャッチ画像の一括設定で必要な措置です。
理由は後述します。

post_type
カスタム投稿の設定で付けたスラッグを記入します。
デモサイトでは「db」になっています。
post_id
記事に割り当てるIDです。変更できません。
post_title
記事タイトルです。後で書き換えるので見分けやすいようにpost_idと同じ数字にしておきます。
post_name
投稿スラッグです。同上。
post_status
表示状態です。公開はpublish、下書きはdraftです。

この段階では使用しませんが、その他のフィールドは下記の記事が詳しいです。必要に応じて設定しましょう。

CSVのインポート方法

作成したCSVをReally Simple CSV Importerで読み込みます。

スプレッドシートで作成したデータをカンマ区切り形式(.csv)　で保存します。保存名は適当でOK。

WordPressのダッシュボードを開き、「ツール ＞ インポート」を選択。

CSV欄の「インポーターの実行」をクリック。
「ファイルを選択」から先ほど保存したCSVファイルを選択して、「ファイルをアップロードしてインポート」をクリック。

500行程度なら数秒でインポートが完了します。

カスタム投稿の投稿一覧を確認すると下書き状態で記事が作成されているのがわかります。表示が順番になっていませんが問題ありません。

記事一覧テーブルの設定

記事一覧テーブルとはカスタム投稿の一覧ページ（カテゴリページ、タグページ等）にスペックなど簡単なデータをテーブル形式で表示させるEmanon独自の機能です。

このようにフォーマットを揃えることで、データ比較が容易になります。
また、入力した数値をもとに並び替え（ソート）機能を設置することができます（後述）。

記事一覧テーブルの入力は投稿ページの編集画面から行います。
（アイコンとラベルの初期値は、Emnanon設定＞カスタム投稿＞記事一覧テーブル設定で設定します。）

また、この機能はカスタムフィールドで作られているので、Really Simple CSV Importerを使ってデータを一括入力することも可能です。

記事一覧テーブルのフィールド名

CSVで指定する記事一覧テーブルの各フィールド名は下記のようになります。

emanon_custom_post_icon-1~5　アイコン
emanon_custom_post_label-1~5　ラベル
emanon_custom_post_data-1~5　データ
emanon_custom_post_sort-1~5　ソート
emanon_custom_post_text_area　　テキストエリア
emanon_custom_post_short_code　ショートコード

入力するデータはテキストだけでなく、スターレーティング（☆の評価）も利用できます。各フィールドの詳しい解説はEmanonのマニュアルをご一読ください→
https://wp-emanon.jp/emanon-pro/emanon-custom-post/#toc-1_2

データを上書きする

記事を予約投稿する際と同様の手順で、記事一覧テーブルに入力するデータをCSV形式に整理し、インポートします。

記事は post_type と post_id によって識別され、CSVの1行目に指定したカラム名に対応する項目が上書きされます。さらに、今回はカテゴリ（tax_db-cat）や必要に応じてタグ（tax_db-tag）、記事本文（post_content）も入力します。（※tax_db-catとtax_db-tagの「db」の部分はカスタム投稿のスラッグです。）

複数のカテゴリ（タグ）を入力する場合、フィールド（tax_db-cat )全体をダブルクォーテーションで囲み各スラッグをカンマで区切ります。（例："rakuhoku, temple, a-gyou"）
Googleスプレッドシートでは、エクスポートする際に自動的にクォーテーションの処理がされますが、インポートがうまくいかないときはテキストエディタでCSVを開いてダブルクォーテーションで囲まれているか確認しましょう。

インポートが成功すると、画像のように記事一覧にデータテーブルが表示されます

post_contentに記事一覧テーブルのショートコード（[custom-post-table id=xxx ]）を記入しておくと、以下のように詳細ページにもデータテーブルが表示されます。（※ショートコードのxxxの部分はpost_id）

データを一括削除したい場合の方法

前述のとおり、CSVをインポートする際は、1行目で指定したカラム名のデータだけが上書きされる仕組みです。
そのため、データを削除したい場合は、該当するカラム名を指定したうえで、該当セルを空白にした状態でインポートしてください。カラム名を指定しないと、そのカラムのデータは上書きされず残ったままになります。

カスタムフィールドテンプレート（CFT）の併用

カスタムフィールドテンプレート（以下CFT）は

• 設定画面でカスタムフィールドを定義

• 投稿編集画面に入力フォームを表示

• 入力したデータをテンプレート(HTML)でレイアウト

• ショートコードで記事内に出力

といったことができるプラグインです。

Emanonの記事一覧テーブルは５項目しか表示できません。
またフィールド内にHTMLタグを使用することができません。

5項目より多くのデータを表示したい場合や、テーブル形式以外のレイアウトにしたいときは「カスタムフィールドテンプレート（CFT）」プラグインを併用すると良いでしょう。

デモサイトでは、カタログコンテンツの詳細ページの表示をすべてCFTで出力しています。

CFTの使い方

CFTにはさまざまな使い方がありますが、ここでは今回使用する部分にしぼって説明します。

CFTプラグインをインポートして有効化し、「設定 ＞ カスタムフィールドテンプレート」を開きます。

設定する部分は

1. カスタムフィールドテンプレートオプション

2. [cft] and [cftsearch] Shortcode Format

の2箇所です。

①カスタムフィールドテンプレートオプションの設定
ここでは定義するカスタムフィールドと、管理画面上での入力の表示方法を設定します。
TEMPLATE#0 にはあらかじめ例が入力してありますので、それを見ながらTEMPLATE#１に設定してもよいでしょう。いくつかパラメータがありますが、手探りでもさほど難しくありません。

• テンプレートタイトル：識別のためのタイトルです。適当で大丈夫。

• カスタム投稿タイプ：入力に使用するカスタム投稿のスラッグを記入します。今回は「db」。

• テンプレートコンテンツ：各カスタムフィールドの名前、投稿画面上での見出しと入力方法を指定します。

最もよく使うテキストフィールドの設定方法は次のようになります。

他に、テキストエリア、ラジオボタン、セレクトボックスなど一般的な入力フォームを利用できます。

設定が終わったら少し下にある「オプションを更新する」をクリック。

②[cft] and [cftsearch] Shortcode Formatの設定
ここでは、作成したカスタムフィールドを、ページ内でどのように表示するかを設定します。
カスタムフィールドテンプレートオプションで設定したカスタムフィールド名とHTMLの組み合わせで指定します。

FORMAT の記入例

FORMATはいくつでも作成できます。

CFTのテンプレート内でEmanonの記事一覧テーブルのショートコードも使えます。
ただし、使用する一覧テーブルはPOST_IDで指定しないといけません。
この場合、テキストエリアの下部にある「PHPを使用する」にチェックを入れ、[custom-post-table id=<?php the_ID(); ?> ]　とすることで、該当の記事一覧テーブルを表示することができます。

入力が終わったら少し下にある「オプションを更新する」をクリック。

作成したテンプレートはショートコードで呼び出すことができます。
例： [cft format=1]

このショートコードを、記事本文（post_content）に貼り付けることで、投稿ページにカスタムフィールドを含んだテンプレートが表示されます。

Emanonの記事一覧テーブルのショートコード欄に記入すれば、カテゴリページなどにも表示可能です。

データを一括インポート

記事一覧テーブルと同様に、Realy Simple CSV Importerを使ってCFTで作ったカスタムフィールドにデータを一括インポートすることができます。

基本的な操作は同じです。カラム名にはCFTのテンプレートコンテンツで設定したカスタムフィールド名を記入します。

インポートするデータは次の2種類です。

• カスタムフィールドに入力するデータ。

• post_contentに挿入する出力用のショートコード[cft format=xxx]

改行の処理

CFTでは、入力フォームにテキストエリアを設定することができるので、WordPressの編集画面からは改行を含む文章を入力できます。

ただし、CSV形式でインポートする場合、改行をそのまま扱えないため、スプレッドシートからCSVに書き出す前に、改行コードを<br>タグに変換しておく必要があります。

改行コードの置換方法

スプレッドシートの「編集＞検索と置換」を開きます。

1. 検索文字列に「\n」と記入（注意：バックスラッシュです）

2. 置換後の文字列に「<br>」と記入

3. 「正規表現を使用した検索」をチェック

4. すべて置換をクリック

以上で、改行コードを<br>タグに置換できます。

アイキャッチ画像の問題

今回デモサイトを作るにあたり、Really Simple CSV Importer + CFT の方法を使って、ほとんどのデータを一括入力することができましたが、アイキャッチの一括設定だけはうまくいきませんでした。（おそらくpost_idを予約することが原因と思われます）

そこで鈴木さん（@suzukidesu_com）に相談したところ、面白い方法を教えていただきました。

この方法を実際に試したところ、条件付きでうまくいきました。
不安に感じることは、

• 先に番号が使われていると上書きできずエラーになる。
  （これがpost_idの予約を一つ飛ばしにした理由です）。

• post_thumbnailに指定する画像はFTPでアップロードする。
  画像はFTPソフトを使ってアップロードする必要があります。
  WordPress経由でメディアライブラリに画像をアップロードすると、その時点でIDが付与されてしまいコントロールできません。

• アイキャッチ画像を変更するとき面倒そう
  まだやってないのでわかりませんが、一括設定は初回のみと考えた方が良さそうな気がしてます。

またpost_thumbnailに指定したURLから画像をメディアライブラリにコピーする仕組みになっているので、メディアライブラリにアップロードした画像を使うと、重複してコピー画像が作成されていしまいます（同じ画像が2枚になる）。
これはWordPressの外に画像を置いて読み込めば解決できます。

いずれにしてもFTPの操作が必要で、WordPressしか使ったことがない人には若干ハードルが上がりますね。

上記の方法を使わない場合、現状ではQuick Featured Imagesというプラグインを使って、一覧画面から一つずつ設定していくのが、比較的効率の良い方法かなと考えています。

なお、画像のファイル名も記事のPOST_IDと揃えておくと、多くの画像の中でも検索を使って効率よく対象ファイルを見つけることができます。

記事一覧のソート機能を設置

Emanonでは、公開日、更新日、および記事一覧テーブルで設定した数値を使って、カテゴリページ上で記事一覧を並べ替えるソート機能を設置することができます。

ソートボタンは、各カテゴリページの「並び替えボタン：ショートコード」に専用のショートコードを使って設置します。残念ながら一括設定はできないため、少し手間ですが各カテゴリページごとに個別に設置する必要があります。

ショートコードのパラメータ一覧

ショートコードのパラメータは次のようになっています

カスタムフィールド部分のソート基準は記事一覧テーブル設定のソート欄に記入した数値になります。数値の記入がないとソート機能が働きません。

ちなみにパラメータなしのショートコード [custom-post-sort] を貼った時の表示は次のようになります。

最初は設定するパラメータが多くて混乱しますが、一旦パラメータなしで表示させてみて、必要のないボタンを非表示に、最後にラベルの設定をすると良いでしょう。

ナビゲーションパネルの作成

ここまでで、カタログ部分の作成はひと区切りです。

次は、作成したカタログコンテンツにアクセスするためのナビゲーションパネルを作成します。これは、トップページ用に用意した固定ページ（HOME）上で組み立てていきます。

ナビゲーションに最低限必要なものは各カテゴリページやタグページへのリンクです。
特に決まったデザインのルールはありませんが、各カテゴリがどういう意図でグルーピングされているかひと目でわかるようレイアウトしましょう。

クリッカブルマップや絞り込み検索など、直感的に使えるツールも併用するとより良いでしょう。

絞り込み検索はいろいろなプラグインがありますが、カスタム投稿に対応しているものを選びましょう。
デモサイトではVK Filter Search（無料版）を使用しています。

なお、デモサイトにはフリーワード検索は設置していません。
これには理由があって、WordPressのサイト内検索はカスタムフィールド内を検索できません。
対応には、直接テーマファイル（Search.php）に手を入れる方法や、functions.phpに追記する方法があるようです。挑戦してみたい方は自己責任で。

現実にはフリーワードのサイト内検索を使うユーザーはそう多くありません。それよりも原始的に3クリック以内で目的のページが見つかるように工夫したほうが使い勝手は良くなると思います。

クリッカブルマップはSVGで制作しています。
SVGクリッカブルマップの制作と設置方法については下記の記事が詳しいです。

ちなみにSVG画像はAdobe Illustoratorでなくても無料のInkscapeや安価で高性能なAffinity Desinerなどを使っても製作可能です。

パターン登録で使い回す

組み立てたナビゲーションパネルは、ブロックパターンとして登録しておくと他のページでも簡単に使いまわしができます。また変更が必要な場合もパターンの編集画面で修正すれば瞬時に全てのページで反映されます。

デモサイトではカタログ記事の記事下に配置しています。配置方法もいろいろあると思いますが、これもCSVimporterでpost_contentに一括入力しました。（ウィジェットとして作ってもいいかも）

ブロックパターンのタグは適当な投稿画面でパターンを貼り付け、コードエディターモードにすると見ることができます。

登録したブロックパターンは<!-- wp:block {"ref":xxx} /-->形式になります。このタグをpost_contentの適当な部分に配置してインポートします。

ここまでできれば、カタログコンテンツは一旦完成と言ってよいでしょう。
サイトを公開して反応を見ながら、次に補完情報の記事コンテンツを作っていきましょう。

記事コンテンツの作成

デモサイトでは、訪問記事・まとめ記事・知識コンテンツがこれにあたります。

これらは通常の投稿ページで作成します。特別な設定は不要で、ブログ記事と同じ感覚で作れば良いでしょう。すでにカタログコンテンツがあればサイトの体裁は整っているので、あわてて作らなくてもマイペースで追加すればOKです。

ただし、よりユーザー体験を高めるために、以下の点に気を付けましょう。

ファーストビューの工夫

一般的なブログは、どの記事も「アイキャッチ画像 → リード文 → 目次」というお決まりの構成になりがちです。
今読んでいるのが、まとめ記事なのか、詳細記事なのか分からなくなって迷子になった経験はありませんか？

情報サイトでは、コンテンツの種類ごとに役割が決まっています。
その特長に合わせてファーストビューのレイアウトを統一することで、「いま自分がどのタイプの記事を読んでいるのか」がひと目でわかるようになります。

次の例はデモサイトで採用したアイデアです。

デモサイトでの記事のファーストビューの使い分け

カタログコンテンツではデータテーブルを目立つ位置に表示して客観的な内容であることを強調しています。

訪問記事では吹き出しを利用して、筆者が体験した一次情報であることを強調しています。

まとめ記事ではアイキャッチ画像に大きく文字を入れ、特定のスポットの記事ではないことを強調しています。

URLにカテゴリスラッグを含めた意味

ここで、URL構造にカテゴリスラッグを含める意味が活きてきます。少なくともパソコンで閲覧している場合は、URLを見れば自分がサイト内のどの位置にいるのか把握しやすくなります。

一覧ページの工夫

統一感を出すのは詳細ページだけではありません。
一覧ページ（カテゴリページ）でも、それぞれに統一感を出して、どのコンテンツグループなのかユーザーに意識してもらいましょう。

Emaonシリーズでは、カテゴリページごとに一覧の見せ方を変えられることが強みの一つです。

カタログコンテンツではデータテーブルを表示して、アイテムを比較しやすくします。

ブログで一般的なリスト表示（１列表示）は、注釈が無ければ上部の記事ほど新しいと認識されます。

訪問記事カテゴリではタイムリーさも重要なので、リスト表示で新しい記事を見てもらいやすくします。

まとめ記事カテゴリではカード表示（２列）で、選ぶ楽しさを強調しています。

講座型コンテンツでは、あえてサムネイルを表示せず、タイトル前に番号をつけることで読む順番を理解してもらいます。

この記事番号はEmanonの独自機能で、CSS（::before）で表示させています。
記事の並び順で自動的に表示されますので、読んでもらいたい順番に順序を調節します。

記事の並び替えにはPost Types Orderプラグインを使えばドラッグアンドドロップで簡単に行えます。

記事番号は２ページ目には連動しません。１ページあたりの表示ページ数はゆとりをもって設定しましょう。

このようにEmanonでは、多彩な表現が各カテゴリページごとに設定できます。

一覧ページの見せ方とその効果についての詳細は下記のページを参考にして下さい。

トップページのレイアウト

情報サイトにおけるトップページの役割は、サイト全体のナビゲーションです。
全体を視覚的なサイトマップと考えて、コンテンツグループごとの括りを明確にして配置します。

このとき上記の一覧ページの考え方を踏襲して、グループごとに役割の違いを表現できればなお良いでしょう。

グローバルナビゲーションの考え方

情報サイトにおいて、グローバルナビゲーションに求められる役割りは「トップページに戻らなくても目的のページに移動できること」です。

難しく考えず、トップページに載せているリンク項目をそのままリスト化して配置すれば良いのです。

もし、それでは使いにくいと感じるならば、トップページのナビゲーション自体を再考する必要があるかもしれません。

まとめ

いかがでしょうか。

情報サイトの価値は、見た目の派手さではありません。
大切なのは、情報の性質に合わせて最適な表現を選び、ユーザーが迷わず求める答えにたどり着けること。そこに真価があります。

かつては難しかったWordPressでのデザインも、テーマやブロックエディターの進化によってずいぶん自由度が広がりました。

このnoteが、情報サイトづくりに挑戦する個人ブロガーの背中を、ほんの少しでも押せたなら嬉しく思います。

使用したプラグイン一覧

デモサイトで使用したプラグインです。

Really Simple CSV Importer

投稿、カテゴリー、タグ、カスタムフィールドをcsvファイルからインポートします。

カスタムフィールドテンプレート(CFT)

カスタムフィールドを定義、投稿画面に入力フィールドを表示し、テンプレートをショートコードで出力するプラグイン。

Category Order and Taxonomy Terms Order

ドラッグ & ドロップで並べ替えを可能にします。カテゴリーとすべての (階層的) カスタムタクソノミーと子タームを並べ替えます。

Post Types Order

同様に記事の順序を入れ替えます。

Quick Featured Images

アイキャッチの設定を補助するツールです。記事一覧上でアイキャッチを設定できるのが便利。

VK Filter Search

絞り込み検索が行えるプラグインです。
有料版ではより複雑な条件検索が可能になります。

LIQUID SPEECH BALLOON

訪問記事で吹き出し作成に使用しました。
有料になりますがEmanon Blocksを使えば吹き出しをはじめ様々なカスタムブロックを使用できます。

Favorites

ブックマークボタンを設置するプラグインです。
ブックマークはカタログ型コンテンツと比較的相性のいい機能です。

参考サイト

友人のサイトです。Emanon以外のテーマを使う場合にも参考になると思います。

首都圏低山巡り

Emanon Freeを使用。
本noteそのままの作り方を再現しています。
カタログコンテンツ部分は、よりデータベース的な表現で、サイト全体がツールとして機能するよう企画されています。

和菓子の魅力

Swellを使用。
オリジナルのかわいいイラストを使うことで、一覧ページの一体感と見るワクワク感を演出しています。力作です。

こよみる

Cocoonを使用。
Cocoonはあまり情報サイト向きではないと思っていましたが、考えが変わりました。工夫次第でどうにかなる。
特にカテゴリページの表現の多彩さには注目したいところです。