[WordPress]トップページにフロント記事と新着一覧を表示する方法

トップページの新着順記事リストで最新記事だけ大きく表示するとか、特定の記事だけを大きく取り上げる表示をしたいという要望は多いと思います。ここでは、当ブログのフロント記事「写真歳時記」のように、「特定の記事本文をトップページの上部に表示しつつ、その下に投稿記事一覧を表示する」方法を紹介します。

当ブログはWordPressとそのテーマSimplictyを使用しています。（執筆時点でのバージョンは、WordPress：4.4.1–ja 、Simplicity：1.8.7）
Simplicityは、このことについては従来は配慮されていませんでしたが、Ver1.86になって、一覧リストのスタイルで「最初だけ本文表示」という機能が取り込まれ改善されました。

以下、私がフロント記事「写真歳時記」の掲載を実現してきた方法を経過順に紹介します。

以前のFC2ブログで実現していた

[FC2ブログ]トップページにフロント記事欄を追加

FC2ブログで「トップページにフロント記事欄を追加」を中心にしたサイトリニューアルを紹介します。

e-farm.org

2012-05-31 13:09

で紹介している方法で、下のように実現していました。

最初は一覧リストのスタイルを[本文表示]にして実現

WordPressに移行時当初にフロント記事を実現した方法です。

WordPress+Simplicityで実現するしくみ

Simplicityの一覧リストのスタイルを[本文表示]に設定し、先頭に置きたい記事を固定ページに書いて日付を最新にすることでトップに表示します。記事リストでは本文先頭からmoreまでが表示されますから、この記事のみ、本文の最初からmoreまでの部分を長くすればフロント記事になるわけです。

1．本文表示の一覧リストで表示する方法の手順

１）子テーマのCSSカスタマイズで固定ページのタイトル等を消す

/* 固定ぺージのタイトルを消す*/
.type-page h1,
.type-page .post-meta{
  display:none;
}

２）外観-カスタマイズでトップ（フロント）ページを設定

• 固定ページも一覧に含める
• フロントページ表示は「最新の投稿」
• 一覧リストのスタイルは「本文表示」

３）記事の設定で目的の記事をトップに表示

• 固定ページにトップ記事を書く
• 日付を最新にする（他の固定ページは十分古くしておく）

できたフロント記事の表示は以下のようになりました。

2．この方法の欠点

1. 一覧リストのスタイルを「本文表示」にしなければならない
2. 全ての固定ページのタイトル等が消える
3. 新しい投稿をするとフロント記事の投稿日付をもっと新しく変更する必要がある
   未来日付にしておく方法が使えない（WPでは未来日付の記事は表示されない）
4. 記事一覧にサムネイル画像を付けるのに細工が必要
   記事一覧にはサムネイル画像を付けたいものです。本文の最初にそれ用の画像を小さく表示して、リストになったときサムネイル画像らしくなるように工夫していました。

一覧リストのスタイルが[サムネイルカード]でも実現

サムネイルカードの一覧リストにしたい

simplicityの一覧リストのスタイルを[サムネイルカード]（ディフォールト）で使いたい。

なぜなら、本文にかかわらず、アイキャッチ画像がサムネイルになり、前記の本文の細工が不要になるからである。またリストで並んだときや他の人気記事リストとも統一され綺麗である。

サムネイルカードの一覧リストで表示するしくみ

Simlicithyではlist.phpで記事の一覧表示をしています。その一番目だけを本文表示するように改造して実現します。

1．サムネイルカードの一覧リストで表示する方法の手順

1）Simplictyのlist.phpを改造

list.phpの繰り返し処理の部分を下記のように変更。

<div id="list">
<!-- 記事一覧 -->
<?php
////////////////////////////
//一覧の繰り返し処理
////////////////////////////
if (have_posts()) : // WordPress ループ
  $count = 0;
  while (have_posts()) : the_post(); // 繰り返し処理開始
    $count += 1;
    global $g_list_index;
    $g_list_index = $count-1;//インデックスなので-1
    //一覧リストのスタイル
    if ( is_list_style_bodies() ) {//一覧表示スタイルが本文表示
      get_template_part('entry-body');//一覧表示スタイルが本文表示の場合
    } else if ( is_list_style_large_cards() ){//大きなエントリーカードの場合
      get_template_part('entry-card-large');
    } else if ( is_list_style_large_card_just_for_first() ){//最初だけ大きなエントリーカードの場合
      //最初だけ大きなものであとは普通のエントリーカード
      if ( is_home() && !is_paged() && $count == 1 ) {
        get_template_part('entry-card-large');
      } else {
        get_template_part('entry-card');
      }
    } else if ( is_list_style_body_just_for_first() ){//最初だけ本文表示の場合
      //最初だけ本文表示であとは普通のエントリーカード
      if ( is_home() && !is_paged() && $count == 1 ) {
        get_template_part('entry-body');
        echo'<h2>新着順記事一覧</h2><hr class="style-four">';
      }else{ //一覧表示スタイルがカードor大きなサムネイルカード表示で2番目以降の場合
        get_template_part('entry-card');
        echo'<hr class="style-two">';// 横線
      }
    } else {//エントリーカードか、大きなサムネイルカードの場合
      //一覧表示スタイルがカードor大きなサムネイルカード表示の場合
      get_template_part('entry-card');
    }

    //トップページ中間に広告を表示できるかどうか（表示するかどうか）
    if ( is_ads_list_in_middle_on_top_page_enable($count) ) {
      get_template_part('ad');
    }

シャドーがかかっている部分が変更点なのですが、その後Ver1.86からこの内容が導入されました。
但し、下記2点は私オリジナルの改造です。

• 29行目：「新着順記事リスト」の表示とその下の横線
• 32行目：記事間の横線。記事の間に横線で区切りを入れています

list.phpを変更する場合の具体的作業は以下のようになります。

1. 親テーマのlist.phpをコピーして変更する
2. 変更したlist.phpをFTPで子テーマのディレクトリに追加する

2）WPとSimlicityのカスタマイズ設定

• WPの[表示設定]で[フロントページの表示]を「最新の投稿」にする
• Simlicityの[カスタマイズ]で[一覧リストのスタイル]を「最初だけ本文表示」にする（右図）simplicityのVer1.86以降
• Simlicityの[カスタマイズ]で[固定ページも一覧に含める]に設定する（右図）
  一覧に表示したくない他の固定ページは、日付を一番古くしてリストの最後になるようにします。

3）子テーマのCSSカスタマイズ

実施している主なカスタマイズは以下の通りです。

/* 固定ぺージのタイトルを消す*/
.type-page h1,
.type-page .post-meta{
  display:none;
}
/* 記事一覧の先頭ラインを装飾 */
hr.style-four {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);    
    margin-top: 0px;
}
/* 記事一覧の区切り線を装飾 */
hr.style-two {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    margin-top:5px;
}

4）フロント記事を書く

• フロント記事を固定ページに書く
  固定記事にすることにより、新着順記事リストに現れず、タイトルも表示しない。
• フロント記事の日付を他より最新にする
  WPの表示設定を[最新の投稿]に、simplicityで一覧表示を[最初だけ本文表示]に設定しておくと、最新日付の記事の内容が表示される。
• 新しいフロント記事に入れ替えるとき、従来の記事は通常投稿タイプの記事に変更（プラグインPost Type Switcherを使用）

2．実際の表示

以上がフロント記事「写真歳時記」を実現している方法でした。出来上がりは現状のブログのトップページを見てもらえばよいのですが、記録のためスクリーンショットを残しておきます。