Add Novels Post typeカスタマイズ:長編小説のあらすじを小説一覧ページで表示する

当サイトで配布しているプラグイン「Add Novels Post type」は、ショートコードで小説一覧を表示することができるプラグインです。
ショートコードを使わないで小説一覧を表示する際に一行追加するだけで、長編小説のあらすじを小説一覧ページに表示することができます。

今回は、ショートコードを使わないで小説一覧ページを作る方法と、あらすじを表示するカスタマイズ方法をご紹介します。

「Add Novels Post type」とは

「Add Novels Post type」は、WordPressにカスタム投稿タイプ「長編小説(novel)」「短編小説(short-story」、カスタムタクソノミー「小説タイトルや章)」を追加するプラグインです。
ショートコードを使って記事一覧を表示することができますが、カスタム投稿タイプとカスタムタクソノミーなので、ショートコードを使わないで記事一覧を表示することもできます。

長編小説のあらすじを小説一覧ページで表示する

今回の完成形はこちらです。

まずはプラグインをインストール&有効化

プラグインページ(Add Novels Post type)よりZIPファイルをダウンロードし、FTPなどでアップロードして有効化します。
プラグインのインストール方法について詳しくは下記記事を御覧ください。

【初心者向け】WordPressにプラグインをインストールする

2017年12月25日

あらすじの登録

プラグインの有効化が終わったら、管理画面のメニューに「長編小説」と「短編小説」が追加されます。
「長編小説」にマウスカソールを合わせるか、一度「長編小説」をクリックすると、「タイトルや章」というサブメニューが出てくるので、「タイトルや章」をクリックして移動します。

新規タイトルとあらすじを一緒に登録する場合

次の例に沿って情報を入力します。

  • 名前:小説のタイトル
  • スラッグ:任意ですが、その小説の一覧ページのURLに使われるので、半角小文字の英数字とハイフンのみをしようするのが望ましいです
  • 親カテゴリー:なし
  • 説明:小説のあらすじ

すべて入力が完了したら、「新規カテゴリーを追加」ボタンをクリックします。

すでに登録してあるタイトルにあらすじを追加する場合

編集したいタイトルの行にマウスカーソルをあわせると、「編集」というリンクが表示されるのでクリックします。

「小説や章の編集画面」に移動すると、「説明」という欄があるので、あらすじを入力をした後に「更新」をクリックして更新します。

小説一覧のカスタムテンプレートを作る

WordPressには固定ページのカスタムテンプレートを作ることができます。
それを利用して、小説一覧のカスタムテンプレートを作ります。

まず、「page.php」を複製し、「page-main.php」という名前で保存します。

次に、「page-main.php」の最初に次のようにコメントを挿入します。

/* Template Name: メインページ */

 

これは、「このテンプレートは○○というカスタムテンプレートです」と定義をするために挿入します。
上記の場合、「page-main.phpはメインページというカスタムテンプレートです」と定義してことになります。
こうすることで、固定ページの編集画面で次のようにカスタムテンプレートを選択することができるようになります。

「page-main.php」の中からthe_contentを探し出します。

探し出した場所the_contentを削除し、同じ位置に、次の長編小説を表示するコードを貼り付けます。
コードの説明については、コードの中にコメントとして記載したので、そちらをご確認ください。

<?php
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.'">';

  // もしも、タイトルにあらすじが設定されていたら、あらすじを表示する準備をする
  if ($theme_novel_title_list->description != "") {
    $theme_novel_html .= '<div class="description-story"><p>' .$theme_novel_title_list->description. '<//p></div>';
  }

  // 小説のタイトルを表示
  $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; ?>

 

小説一覧ページに作ったカスタムテンプレートを設定する

作ったカスタムテンプレートを小説一覧の固定ページが表示された時に表示されるように設定します。
「固定ページの属性」にある「テンプレート」を作ったカスタムテンプレートに変更し、「更新」をします。