アーカイブページのカスタマイズ


概要

Viewsプラグインでは、WordPressのアーカイブページをカスタマイズすることができます。標準のブログ投稿だけでなく、カスタム投稿タイプ、カスタムタクソノミー、著者のアーカイブや検索結果ページのデザインが可能です。このページでは、アーカイブページの基本的なカスタマイズ方法を説明します。

 

WordPress Archiveを新しくセットアップする

Views>Wordpress Archivesに移動し、次の画像の手順で新しいWordPressアーカイブを設定します。

Create your first WordPress Archiveをクリック

カスタマイズしたいアーカイブを選択して名前をつける

アーカイブ編集ページが表示される

 

レイアウトスタイルを選択してフィールドを追加する

編集画面の下にスクロールし、ループ出力セクションのLoop Output欄で、アーカイブページでループ表示させたいフィールドを追加します。

 ViewsプラグインのVer.1.7で画面上の表記が変更になりました。スクリーンショットはそれ以前のものになりますので適宜読み替えて下さい。
 ①レイアウトセクションループ出力セクション
 ②「Layout HTML/CSS/JS」欄「Loop Output」欄
 ③「Layout Wizard」「Loop Wizard」

「Loop Wizard」ボタンをクリック

基本のレイアウトスタイルを選んで「Next」ボタンをクリック

アーカイブに表示させたいフィールドを追加していく

以上でアーカイブページに選択したフィールドを表示させる準備が整いましたが、このままではループ内容だけのシンプルなページが出力されます。そこで、HTMLとCSSをつかってループ内の表示スタイルを調整します。
 

出力ページのスタイリング

フィールドごとにHTMLやCSSを付与することで、好みのスタイルでアーカイブを出力できます。追加したフィールド用のショートコードは[]でくくられています(例: [wpv-post-link])。

下の画像は、アーカイブページのスタイリングの「BoforeAfter」です。

Before:このサイトで使用しているテーマの設定では、新着順に記事全文を表示するようになっている。

タイトル、アイキャッチ画像、抜粋、タグ、投稿日を追加(スタイリング前)

HTMLとCSSを追加して、スタイリング