固定ページ(ホーム画面)に新着記事を自動で表示する方法(抜粋も表示、simplicity2)

WordPressでサイトを作りこむ際、トップページを固定ページに設定すると思います。しかし、固定ページにしつつ、新着記事をサムネイル(アイキャッチ画像)、記事タイトルと記事の概要を表示する方法はあまり紹介されていません。そこで、その方法をまとめます。もちろん、コードをコピペするだけで作業は終了します。

写真1. 自動で作業を行う例(ゆりかもめは自動運転)

このページの概要(目次、タップできます)

1. 完成形のイメージ
2. 固定ページに新着記事を自動で表示する方法のまとめ
3. 背景:新着記事を固定ページに表示する理由
4. 一般的な方法
5. 実際のカスタマイズ方法
6. 新着記事自動化のまとめ
7. ソースコードの提供
8. 固定ページの作成方法

完成形のイメージ

この作業後の完成形のイメージは以下の通りです。

・ホームページの上部に新着記事が5つ表示される
・その下にカテゴリ一覧などを表示(これは別途作成することが前提です)

新着記事一覧の場所は任意で設定することが可能です。

写真2. 今回の完成形(全て自動で更新される)

固定ページに新着記事を自動で表示する方法のまとめ

詳細は本文に示しますが、概要は以下の通りです。

・PHPでショートコードを書き込み、入れたい記事にそのショートコードを入れる

・上記表示の見栄えを良くするために、CSSで調整する
※パソコン用とモバイル用でコードを分ける必要がありました。

背景:新着記事を固定ページに表示する理由

サイトを構築すると、いわゆる「ブログ」のような新着記事だけを表示するトップページでは物足りなくなります。カテゴリごとに記事を表示し、記事を探しやすくするためです。

これはこれでサイトを訪問される方にはわかりやすくなります。温泉、山登りを主に書いているサイトを仮定しましょう。温泉の情報を探す人にとっては、山登りの記事はノイズです。温泉の記事を見つけやすくするには、温泉カテゴリが表示されたほうが親切です。

ただし、リピーターさんにとっては、カテゴリごとに記事を表示するより、新着記事を見たいという人もいるでしょう。このような人にとっては、カテゴリごとに記事を表示するのは望んでいないことです。そのため、新着記事をいくつか表示することは重要でしょう。

私はサイトリニューアル時にそのようなことを考え、トップページ上部に新着記事、中央から下部にカテゴリを表示するようにしました。しかし、私の技量ではそのようなことをできません。そこで、サイトリニューアル時にトップページに新着記事のURLを手入力で打ちこみ、強引にブログカードを表示(※)することにしました。

※simplicity2ではURLからブログカードを表示する機能があります。

一般的な方法

これから述べるマニアックな方法以外にもやりかたはあります。参考までに、これらのやりかたを示します。

・テーマの機能で新着記事を挿入
※simplicity2では、固定ページや投稿記事に新着記事を自動で表示する機能があります。他のテーマでも似た機能はあるでしょう。

→固定ページすべてに入りますが、表示しない記事のIDを指定することで事実上、個別の設定は可能です。

・新着記事を表示するプラグインを導入
　例1. What’s New Generator(記事タイトルのみの表示)
　例2. Newpost Catch(記事タイトルとサムネイルの表示)

※あらゆるテーマで導入できます。ただし、プラグインで表示スタイルを決めていますので、テーマなどの設定によっては、あなたのサイトに合わないデザインの可能性があります。

これらの方法では、

・記事タイトル

・アイキャッチ画像(サムネイル)

は表示されますが、記事の抜粋(概要)は表示されません。私のようにこだわりの強い人には合致しない方法です。

そのようなこだわりの強い人は、以下の方法をお試しください。私がsimplicity2を使っているのでsimplicity2のコードを記しますが、そのほかのテーマでも考えかたは同じでしょう。

実際のカスタマイズ方法

それでは、実際のカスタマイズ方法を示しましょう。大きく分けて4つのステージがあります。

・ステージ1. PHPの追加

・ステージ2. ダミー記事にショートコード追加

・ステージ3. CSSでスタイルを整える

・最終ステージ. ショートコードを貼り付ける

以下、具体的なコードとともに、コードのミソも紹介します。

ステージ1. PHPの追加

PHPとは、簡単にいうと、どのような動作をするのかを表示する機能です。テーマのための関数(functions.php)を開き、末尾に以下のショートコードを貼り付けます。



//新着記事の自動表示
function sc_newPost($opt) {
  extract(shortcode_atts(array(
    'num' => ''
  ), $opt));
  
  $num = (!empty($num)) ? $num : 5;
    
  $args = array(
    'posts_per_page'   => $num,
    'orderby'          => 'date',
    'order'            => 'DESC',
    'post_type'        => 'post',
    'post_status'      => 'publish'
  );

  $posts_array = get_posts( $args );
    
  $out = "";
  $out .= "<ul>";
  foreach($posts_array as $post) {
    setup_postdata( $post );
    $id = $post->ID;
    $title = $post->post_title;
    $post_date = get_the_time( get_theme_text_date_format(), $id);
    $post_modified = $post->post_modified;
    $link = get_the_permalink($id);
    $thumb = get_the_post_thumbnail(
      $id,
      'thumb150',
      array(
        'class' => 'list-thumb',
        'alt' => $title
      )
    );
    $categories = get_the_category($id);
    if ($categories) {
      foreach($categories as $cat) {
        $cats[] = "<a href='".get_category_link($cat->term_id)."' title='".$cat->name."'>"
                . $cat->cat_name . "</a>";
      }
     }
    if (!empty($cats)) {
      $category = "<span class='fa fa-folder fa-fw'></span>".implode(" | ", $cats);
    } else {
      $category = "! Category is not set !";
    }
    unset($cats);
        
    $excerpt = get_the_custom_excerpt( $post->post_content, get_excerpt_length() );
    $description = get_meta_description_blogcard_snippet($post->ID);
      
    //html出力
    $out .= <<< EOM
<li>
  <div class="thumb">
    <a href="{$link}" title="{$title}">
      {$thumb}
    </a>
  </div>
  <div class="content">
    <h3>
      <a href="{$link}" title="{$title}">
        {$title}
      </a>
    </h3>
    <p>
      <span class="post-date">
        <span class="fa fa-clock-o fa-fw"></span>
        <span class="published">{$post_date}</span>
      </span>
      <span class="category">{$category}</span>
    </p>
    <div class="excerpt">{$description}</div>
    <div class="read">
      <a href="{$link}" title="{$title}">記事を読む</a>
    </div>
  </div>
</li>
<hr>
EOM;
  }

  wp_reset_postdata();
    
  $out .= "</ul>";
    
  return $out;
}
add_shortcode('nwlist', 'sc_newPost');

ここで、ポイントとなるのが、excerpt関数ではなく、description関数を定義し、それを呼び出すことです。多くの人は、記事を書く際に、手動で記事の内容を140字以内で要約していて、その要約を表示したいことでしょう。そのため、弊サイトではdescription関数を呼び出すことにしました。

記事の要約を手動で設定していない場合は、74行目の{$description}を{$excerpt}に書きかえてください。元のコードは{$excerpt}と書いていて、中途半端な抜粋となっていて首をかしげてしまいました。それを{$description}と書きかえ、同時にdescriptionもきちんと定義しました(上のほうに定義が書いていたので、そのコピーです)。

7行目の数字を5から任意の数字に変えることで、表示する新着記事の数を変えることができます。10記事表示したい場合は5という数字を10に変えます。



$num = (!empty($num)) ? $num : 5;
を


$num = (!empty($num)) ? $num : 10;

と変えるのです。

ステージ2. ダミー記事にショートコード追加

これからCSSでスタイルを整えますが、その前にダミー記事を作成し、ショートコードを貼り付けます。これはスタイルを整えた際に見えかたを確認するためです。確認する目的を達成するには既存の記事でも問題ありませんが、何かあった場合のことを考え、ダミー記事にショートコードを貼り付けるのです。



<div class="insertList">
（nwlist）
</div>

※実際にこのコードを使用する際は、2行目の（nwlist）の（）を[]に変換してください。

上で示したPHPの内容はショートコードに変換しています。別のいいかたをすると、PHPコードで「おまじない」を設定しておいて、その「おまじない」を発揮するための「合言葉」になるわけです。この合言葉を言えば(=ショートコードを書けば)、おまじないが作動する(=書かれたコード通りにプログラムが実行される)という理解です。

ステージ3. CSSでスタイルを整える

さて、これで動きはしますが、表示が美しくありません。インターネット回線が遅いときにレイアウトが乱れて表示されるような感じです。

それもそうです。プログラムの動作についてはきちんと決めましたが、動作した際の表示をきちんと定義していないためです。表示を定義するプログラムはCSSです。

スタイルシート(style.css)を開き、末尾に以下のコードを貼り付けます。



/*
新着記事のショートコード用CSS
*/
@media screen and (max-width: 767px) {
.insertList h3 {
  font-size: 0px;
  border: none
  margin: 0px;
}
.insertList ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.insertList ul li {
  margin: 0px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.insertList ul li .thumb {
  position: relative;
  width: 100px;
  height: 100px;
}
.insertList ul li .thumb img {
  position: absolute;
  top: 30%;
  left: 30%;
  transform: translate(-50%,-20%);
  width: 100px;
  height: 100px;
  margin: 0;
}
.insertList ul li .content {
  align-self: start;
  position: relative;
  flex: 1;
  padding-left: 1px;
}
.insertList ul li .content h3 {
  margin: 0 0 0px;
  color: #333;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.0;
  border: none;
  line-height:21px;
}
.insertList ul li .content h3 a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  border: none;
}
.insertList ul li .content p {
  display: block;
  font-size: 13px;
  line-height: 1.0;
  padding: 0px 10px;
  margin: 0 0 10px;
  color: #444444;
  background-color: #EEEEEE;
}
.insertList ul li .content p a {
  color: inherit;
}
.insertList ul li .content .excerpt {
  font-size: 13px;
  color: #666666;
  margin: 0 0 0px;
  line-height:16px;
}
.insertList ul li .content .read {
  font-size: 13px;
  color: #333;
  background-color: #EEEEEE;
  margin: 5px 0px 0px;
  text-align: center;
}
.insertList ul li .content .read a {
  color: inherit;
  text-decoration: none;
}
.insertList ul hr {
  display: inline-block;
  height: 1px;
  width: 100%;
  background-image: linear-gradient(left,#999,#999 50%,transparent 50%,transparent 100%);
  background-size: 6px 2px;
  border: none;
  margin: 0;
}
.insertList ul hr:last-child {
  display: none;
}
}
/*
ここからパソコン用
*/
@media screen and (min-width: 768px) {
.insertList h3 {
  font-size: 24px;
  border: none
}
.insertList ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.insertList ul li {
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.insertList ul li .thumb {
  position: relative;
  width: 150px;
  height: 150px;
}
.insertList ul li .thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 150px;
  height: 150px;
  margin: 0;
}
.insertList ul li .content {
  align-self: stretch;
  position: relative;
  flex: 1;
  padding-left: 10px;
}
.insertList ul li .content h3 {
  margin: 0 0 0px;
  color: #333;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.0;
  border: none;
}
.insertList ul li .content h3 a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  border: none;
}
.insertList ul li .content p {
  display: block;
  font-size: 16px;
  line-height: 1;
  padding: 0px 10px;
  margin: 0 0 10px;
  color: #444444;
  background-color: #EEEEEE;
}
.insertList ul li .content p a {
  color: inherit;
}
.insertList ul li .content .excerpt {
  font-size: 16px;
  color: #444444;
  margin: 0 0 5px;
}
.insertList ul li .content .read {
  color: #111111;
  text-decoration:underline solid #111111;
}
.insertList ul li .content .read a {
  color: inherit;
  text-decoration: none;
}
.insertList ul hr {
  display: inline-block;
  height: 1px;
  width: 100%;
  background-image: linear-gradient(left,#999,#999 50%,transparent 50%,transparent 100%);
  background-size: 6px 2px;
  border: none;
  margin: 15px 0;
}
.insertList ul hr:last-child {
  display: none;
}
}

ここでのポイントは以下の通りです。

・モバイル用(横幅が767px以下)とパソコン用(横幅が768px以上)でコードを分ける

・h3の書式を別途設定する

最初はパソコン用のみのCSSを書いていましたが、手持ちの電話機で表示してみたところ、写真や文字が大きすぎるという問題に直面しました。そこで、@media screen and (max-width: 767px)と定義し(=ここからのコードは横幅767px以下に適用すると宣言するということ)、モバイル用のフォントサイズを設定しました。行間が開きすぎる箇所がありましたので、行の高さを定義した項目もあります。

そして、モバイル以外用に@media screen and (min-width: 768px)と定義し(=ここからのコードは横幅767px以下に適用すると宣言するということ)、パソコン用のフォントサイズを設定しました。

ここで注意したいのが、103行目からのコードでサイズの定義を忘れないようにすることです。一般的に、下のコードの命令が優先されます(1年前の上司の指示よりも今日の上司の指示が優先されることを思い出せば、下のコードの命令が優先されることはイメージできましょう)。もしも下のコードでサイズの定義をしていなければ、せっかくモバイル用の命令文を書いても、それが適用されません。

また、h3の見出しの設定を忘れないことです。h3とだけ書いてしまうと、デフォルトの見出しの書式になってしまいます。そこで、(弊サイトでいう)緑色の上下線をなしにするなどの小細工を施しています。

この後に新着記事画面に似せるために文字色、背景色なども設定します。弊サイトの設定をコードに記しましたが、ご自身の好みに合わせて色はアレンジしてください。