アーカイブページをカスタマイズする

アーカイブページは、WordPressが生成する「投稿」などのコンテンツをリスト表示するページです。ブログのトップページ、検索結果、著者、投稿年月別、タグ、カテゴリーページなどもすべてアーカイブページの一種です。Viewsプラグインを使うと、WordPress標準のアーカイブページだけでなく、Toolsetで作成したカスタム投稿タイプやカスタムタクソノミのアーカイブページをカスタマイズすることができます。

カスタマイズできる範囲は テーマファイルによって異なる

カスタマイズの範囲は、基本的にアーカイブ対象のコンテンツをリスト表示させる部分です。ヘッダーやフッター、サイドバーなども制御したい場合は、それらの制御に対応したテーマを使用するか、アーカイブページのテンプレートファイル(archive.phpなど)を直接編集するなどのひと手間が必要になります。

例えば、このサイトで使っているテーマファイルは、テーマオプションでヘッダーやフッターなどの要素を制御することは出来ないので、テーマを「素」で使う場合、Toolsetでカスタマイズできる部分は以下のようになります。

アーカイブページをカスタマイズする

標準でToolsetがカスタマイズ可能なアーカイブの範囲の例

カスタムアーカイブページの作り方

ほとんどのテーマが提供するアーカイブページは、アイキャッチ画像、投稿日付、タイトル、抜粋をリスト表示しますが、Toolsetを使うと、専用のエディタを使ってカスタムフィールドなどを含めたオリジナルのアーカイブページを出力できます。

アーカイブページをカスタマイズする

作業の流れ

ここでは、簡単な例を使って、カスタムアーカイブページを作ってみますが、操作はすでに説明したViewの作成とほぼ同じなので、それほど迷うことはないでしょう。

  • カスタム投稿タイプ:「料理」
  • カスタムフィールド:「料理のサブタイトル」「料理の写真」
  • カスタムタクソノミ:料理国籍
  • 環境:WordPress 4.9.8 (Twenty Seventeen テーマ)

アーカイブページをカスタマイズする

① WordPress Archives -> Usage for archive loops と進み、アーカイブページを作成したい投稿タイプ等をクリックします。
※Toolsetのダッシュボードから作成することもできます。

アーカイブページをカスタマイズする

② カスタムアーカイブページを管理するための名前を付け、Create WordPress Archiveをクリックします。

アーカイブページをカスタマイズする

③ 作成(編集)画面が表示されたら、管理用のスラグもわかりやすいものに変えておきましょう。

アーカイブページをカスタマイズする

④ Loop Editor まで移動して、「Loop Wizard」をクリックします。

アーカイブページをカスタマイズする

⑤ ウィザードでは、まず出力するレイアウトのタイプを選択します。ここでは、自分で一からレイアウトするので一番上の Unformatted を選びました。

アーカイブページをカスタマイズする

⑥ ここでは、Viewの中で直接レイアウトを施すので、「Use Content Template…」のチェックを外して、Add Field をクリックします。
アーカイブページに表示するフィールドを追加したら、Finish をクリックします。
※複雑なレイアウトを施したい場合は、Content Templateのチェックをつけても良いでしょう。

アーカイブページをカスタマイズする

⑦ Loopエディタ内に、表示させるフィールドがまとめて追加されました。

アーカイブページをカスタマイズする

⑧ 例えば、こんな感じでHTMLとCSSで装飾します。
※CSSを使う場合はエディタの真下にあるCSS editorに記述しましょう。

最後に、エディター下にある「Save」ボタンか、画面上部の「Save all sections at once」をクリックして保存します。

アーカイブページの確認方法

出来上がったアーカイブページを確認してみましょう。

アーカイブページをカスタマイズする

① アーカイブページ編集画面の最初の方にある、Loops Selection から、チェックの入っている(=編集している)アーカイブ名の右にある をクリックします。

アーカイブページをカスタマイズする

② カスタマイズしたアーカイブページが表示されました。

訪問者がアーカイブの内容を絞り込めるようにするには

Viewを使って、訪問者がコンテンツやデータを絞り込めるように、アーカイブページでも同様の機能を実装することができます。手順はほとんど同じなので、ここでは詳しく解説しませんが、以下のいずれかの方法でFilterセクションのエディターを表示してから、カスタムサーチのパーツを配置します。

アーカイブページをカスタマイズする

① カスタムアーカイブページの新規作成時に、Display the items using a custom search を選択する方法

アーカイブページをカスタマイズする

既存のアーカイブページを変更する場合は、アーカイブページ編集画面で表示オプションを開き、Archive purpose(使用目的)を変更する方法。

Toolset JP Guide

ページ上部へ戻る