当サイトで配布しているプラグイン「Add Novels Post type」は、カスタムタクソノミーを使って、長編小説のタイトルや章を分ける仕組みになっています。
カスタムタクソノミーにもカスタムフィールドを設置することができます。
今回は、カスタムタクソノミーにもカスタムフィールドを設置できることを利用して、「Add Novels Post type」の長編小説で表紙を表示するカスタマイズ方法をご紹介します。
「Add Novels Post type」とは
「Add Novels Post type」は、WordPressにカスタム投稿タイプ「長編小説(novel)」「短編小説(short-story」、カスタムタクソノミー「小説タイトルや章)」を追加するプラグインです。
ショートコードを使って記事一覧を表示することができますが、カスタム投稿タイプとカスタムタクソノミーなので、ショートコードを使わないで記事一覧を表示することもできます。
「Advanced Custom Fields」とは
任意の場所(投稿や固定ページ、カスタム投稿タイプ、カスタムタクソノミー)に、カスタムフィールドを追加できるプラグインです。
「Advanced Custom Fields」を使って小説の表紙を表示する
今回の完成形はこちらです。
まずはプラグインのインストール&有効化
「Add Novels Post type」
- プラグインページ(Add Novels Post type)よりZIPファイルをダウンロードし、FTPなどでアップロードして有効化
「Advanced Custom Fields」
- プラグインの検索ページより「Advanced Custom Fields」で検索し、インストールして有効化
- プラグインページ(Advanced Custom Fields)よりZIPファイルをダウンロードし、FTPなどでアップロードして有効化
カスタムタクソノミー「小説タイトルや章」にカスタムフィールドを追加する
「Advanced Custom Fields」を有効化すると、管理画面のメニューに「カスタムフィールド」が増えるので、クリックする。

フィールドグループの一覧画面に移動するので、「新規追加」をクリックする。

フィールドグループの新規追加画面に移動するので、まずはタイトル(フィールドグループの名前)を入力します。
次に、「フィールドを追加」をクリックした後、下記のように入力します。

- フィールドラベル:小説の表紙
- フィールド名:novel-cover
- フィールドタイプ:画像
- 返り値:画像URL
続いてどの編集画面でこのカスタムフィールドを表示するかのルールを設定します。
「位置」という欄を、「Taxonomy Term」「等しい」「小説のタイトルや章」にします。
ここまで完了したら、フィールドグループの新規追加画面の右上にある「公開」ボタンをクリックします。
正しく設定されていれば次の画像のように、「小説タイトルや章」の編集画面に「小説の表紙」という欄が追加されます。

例として、すでに登録してある「長編小説1」「長編小説2」にダミー画像を登録しました。

小説の表紙を表示できる小説一覧ページのテンプレートを作る
WordPressには固定ページのカスタムテンプレートを作ることができます。
それを利用して、小説一覧のカスタムテンプレートを作ります。
まず、「page.php」を複製し、「page-main.php」など、任意の名前で保存します。
※以降、「page-main.php」という名前で保存したとします。
/* Template Name: メインページ */
これは、「このテンプレートは○○というカスタムテンプレートです」と定義をするために挿入します。
上記の場合、「page-main.phpはメインページというカスタムテンプレートです」と定義してことになります。
こうすることで、固定ページの編集画面で次のようにカスタムテンプレートを選択することができるようになります。
探し出した場所the_contentを削除し、同じ位置に、次の長編小説を表示するコードを貼り付けます。
コードの説明については、コードの中にコメントとして記載したので、そちらをご確認ください。
the_content(); // カスタムタクソノミー「タイトルと章」から、タイトルだけを取得するための設定 $theme_novel_titles = array( 'taxonomy' => 'title', 'parent' => 0 ); // カスタムタクソノミー「タイトルと章」から、タイトルのリストを取得する $theme_novel_title_lists = get_categories($theme_novel_titles); // 長編小説全体を覆うHTMLの準備をする $theme_novel_html .= '<section class="npt-novel-section"><h3>長編小説</h3>'; // 取得したタイトルのリストの中身を一つずつ順番に取り出す foreach ($theme_novel_title_lists as $theme_novel_title_list) { // そのタイトルの小説全体を覆うHTMLの準備をする $theme_novel_html .= '<section class="npt-novel-'.$theme_novel_title_list->cat_ID.'">'; // その小説の表紙を取得する準備 $theme_get_novel_cover_id = 'title_'.$theme_novel_title_list->cat_ID; $theme_novel_cover = get_field('novel-cover', $theme_get_novel_cover_id); // もしも小説の表紙があったら表示をする if ($theme_novel_html) { $theme_novel_html .= '<img src="' . $theme_novel_cover . '" alt="">'; } // 小説のタイトルを表示 $theme_novel_html .= '<h4 class="npt-title">'.$theme_novel_title_list->name.'</h4>'; // カスタムタクソノミー「タイトルと章」から、その小説の章を取得する準備 $theme_novel_chapters = array( 'taxonomy' => 'title', 'parent' => 0, 'parent' => $theme_novel_title_list->cat_ID, ); // カスタムタクソノミー「タイトルと章」から、その小説の章を取得する $theme_novel_chapter_lists = get_categories($theme_novel_chapters); // もしも、その小説の章があった場合 if ($theme_novel_chapter_lists) { // 取得した章のリストの中身を一つずつ順番に取り出す foreach ($theme_novel_chapter_lists as $theme_novel_chapter_list) { // 章を表示するHTMLの準備 $theme_novel_html .= '<h5 class="npt-chapter">'.$theme_novel_chapter_list->name.'</h5>'; // 章に属する本文を取得する準備 $theme_chapter_novel_query = new WP_Query(array( 'post_type' => 'novel', 'tax_query' => array( array( 'taxonomy' => 'title', 'field' => 'od', 'terms' => $theme_novel_chapter_list->cat_ID, ) ), 'posts_per_page' => -1, 'order' => 'ASC' )); // 章に属する本文のリストを取得し、表示する if ( $theme_chapter_novel_query->have_posts() ) { $theme_novel_html .= '<ul class="npt-list">'; while ( $theme_chapter_novel_query->have_posts() ) { $theme_chapter_novel_query->the_post(); $theme_novel_html .= '<li><a href="'.get_the_permalink().'">'.get_the_title().'</a></li>'; } $theme_novel_html .= '</ul>'; } wp_reset_postdata(); } } // その小説の章がなかった場合 else { // その小説に属する本文のリストを取得する準備 $theme_all_novel_query = new WP_Query(array( 'post_type' => 'novel', 'tax_query' => array( array( 'taxonomy' => 'title', 'field' => 'od', 'terms' => $theme_novel_title_list->cat_ID, ) ), 'posts_per_page' => -1, 'order' => 'ASC' )); // その小説に属する本文のリストを取得し、表示する if ( $theme_all_novel_query->have_posts() ) { $theme_novel_html .= '<ul class="npt-list">'; while ( $theme_all_novel_query->have_posts() ) { $theme_all_novel_query->the_post(); $theme_novel_html .= '<li><a href="'.get_the_permalink().'">'.get_the_title().'</a></li>'; } $theme_novel_html .= '</ul>'; } wp_reset_postdata(); } $theme_novel_html .= '</section>'; } $theme_novel_html .= '</section>'; echo $theme_novel_html; ?>