WordPress使い方 しろやぎ

Add Novels Post typeカスタマイズ：「Advanced Custom Fields」を使って長編小説の表紙を表示する

当サイトで配布しているプラグイン「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」

  1. プラグインページ（Add Novels Post type）よりZIPファイルをダウンロードし、FTPなどでアップロードして有効化

「Advanced Custom Fields」

  1. プラグインの検索ページより「Advanced Custom Fields」で検索し、インストールして有効化
  2. プラグインページ（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; ?>

 

RECOMMENDこちらの記事も人気です。