トップページ「更新情報」の表示内容修正 | WordPress

2023年5月12日 最終更新日時 : 2023年6月20日 kensatools
WordPressのテーマ『Lightning』

『kensatools』のWebサイトはWordPressのVKのテーマ『Lightning』を利用し、ちょこちょことカスタマイズしています。『Lightning』はポピュラーなテーマでHtml&CSSやPHPなどのコードの知識がなくてもある程度設定を変更できるように仕組まれており、とても扱いやすいテーマです。

”固定ページ”、”投稿ページ”、”カスタム投稿ページ”

WordPressでWebサイトを構築する際、表示ページは、”固定ページ”、”投稿ページ”の2つに分けられます。”固定ページ”はその名前の通り、内容が固定されており普段は変更しないページ、”投稿ページ”は、新しい記事を投稿して追加していくページでいわゆる”ブログ”のページです。このサイトで言うと、”固定ページ”は「トップページ」や「製品紹介ページ」など、”投稿ページ”は「検査・測定の話」にあたります。
”投稿ページ”は投稿するための機能を持っており投稿するためには便利なのですが、WordPressの仕様では”投稿ページ”は一つしか作れません。”投稿ページ”と同じような機能を追加で持たせられるようにするためには、プラグイン（WordPressの機能を拡張するもの）を利用します。
そうして作った投稿できるページを”カスタム投稿ページ”と呼びます。このサイトでは「納入実績」が”カスタム投稿ページ”です。つまり、標準の”固定ページ”、”投稿ページ”とプラグインで作った”カスタム投稿ページ”の3つがあります。

更新情報（投稿、カスタム投稿）の表示内容修正

先に説明したように、”投稿ページ”、”カスタム投稿ページ”には、情報提供のために定期的に新しい記事が投稿されていきます。そのことを訪問者にお知らせするために、トップページのフッターの上部に「更新情報」を表示しています。「更新情報」としては、投稿ページ「検査・測定の話」とカスタム投稿ページ「納入実績」の最新投稿リストをそれぞれ5件づつ表示しています。WordPressでは、”カスタム投稿”の一覧リストを固定ページに表示させるためのプラグインはあまり多くないのですが、今まで当サイトでは”Recent Posts Widget Extended”というプラグインを使用していました。

では、今回何を修正したのか？なのですが、上のキャプチャー画像でわかるように、記事のタイトル、投稿日の右横に、投稿から一定期間の新着投稿に”新着!!”or”New!!“と表示、かつ、その右側に記事の”投稿カテゴリー”を追加表示させました。ただし、先のプラグインでは表示させることができなかったため、プラグインをやめて以下のサイトを参考に子テーマの functions.php にコードを追加して実現させました。

/* 投稿リストの表示用ショートコード生成 */

function display_postlist() {
  $posts_postlist = get_posts( array(
    'post_status' => 'publish',
    'category'    => '2,8,19', //カテゴリID（全カテなら不要）
    'posts_per_page' => 5 //件数
  ) );
 
  $html = '';
  $days = 10; // 新着!! を表示させたい期間の日数
  $today = date_i18n('U'); // 現在の日付を取得
  $new_letter = '新着!!'; //新着時の表示文字
 
  if ( $posts_postlist ) {
    $html = '<ul class="postlist_ul">';

    foreach ( $posts_postlist as $p ) {
      setup_postdata( $p );
      $time       = get_post_time( 'Y年m月d日', false, $p->ID ); // 投稿日取得
      $postdate = get_post_time('U', true , $p->ID ); // 投稿日取得
      $dif = date('U',($today - $postdate)) / 86400 ; // 秒数指定 86400 は1日
      $postlist_cats  = get_the_category( $p->ID ); // 複数のカテゴリーを取得
      
      if (get_post_thumbnail_id($p->ID)) {
          $postlist_image = get_the_post_thumbnail( $p->ID, 'thumbnail' );
	        //アイキャッチのサムネイル表示画像を取得
      } else {
          // アイキャッチ画像が登録されていなかったときの画像
          $postlist_image = '<img src="https://www.→画像のURL">';
        }
      
      $html .= '<li>';
      $html .= '<a href="' . get_the_permalink( $p->ID ) . '">' . $postlist_image . '</a>';
      //アイキャッチをサムネイル表示
      $html .= '<div class="info">';
      $html .= '<h3><a href="' . get_the_permalink( $p->ID ) . '">' . get_the_title( $p->ID ) . '</a></h3>';
      //タイトル表示（リンク付）
      $html .= '<span class="postlist_time">' . $time . '</span>'; //日付表示
      if ( $days > $dif ){
            $html .= '<span class="postlist_new">' . $new_letter .'</span>'; 
            // 新着!!を表示
      }

      foreach ( $postlist_cats as $cat ) {
        $postlist_cat_name = $cat->cat_name;
        $html .= '<span class="postlist_cat">' . $postlist_cat_name . '</span>';
	      // すべてのカテゴリー表示（複数の場合もあり）
      }

      $html .= '</div>';
      $html .= '</li>';
    }
    $html .= '</ul>';
  }
  wp_reset_postdata(); // 直前のクエリを復元する wp_reset_query()→X
 
  return $html;
}
 
add_shortcode( 'display_postlist', 'display_postlist' );
// ショートコード display_postlist（[]で囲む）で最新投稿リストを表示

/* カスタム投稿リストの表示用ショートコード生成 */

function display_caselist() {
// カスタム投稿と分類名
  $post_type = 'cases'; //カスタム投稿名
  $taxonomy  = 'cases_cat';
  $posts_caselist = get_posts( array(
    'post_type'   => $post_type,
    'post_status' => 'publish',
    'posts_per_page' => 5, //件数
    'order'     => 'DESC' //初期値はDESC
  ) );
 
  $html = '';
  $days = 10; // 新着!! を表示させたい期間の日数
  $today = date_i18n('U'); // 現在の日付を取得
  $new_letter = '新着!!'; //新着時の表示文字
 
  if ( $posts_caselist ) {
    $html = '<ul class="caselist_ul">';

    foreach ( $posts_caselist as $p ) {
      setup_postdata( $p );
      $time       = get_post_time( 'Y年m月d日', false, $p->ID ); // 投稿日取得
      $postdate = get_post_time('U', true , $p->ID ); // 投稿日取得
      $dif = date('U',($today - $postdate)) / 86400 ; // 秒数指定 86400 は1日
      $caselist_terms     = get_the_terms( $p->ID, $taxonomy ); 
      // すべてのカテゴリー表示（複数の場合もあり
      
      if (get_post_thumbnail_id($p->ID)) {
          $caselist_image = get_the_post_thumbnail( $p->ID, 'thumbnail' );
	        //アイキャッチのサムネイル表示画像を取得
      } else {
          // アイキャッチ画像が登録されていなかったときの画像
          $caselist_image = '<img src="https://www.→画像のURL">';
        }
      
      $html .= '<li>';
      $html .= '<a href="' . get_the_permalink( $p->ID ) . '">' . $caselist_image . '</a>';
      //アイキャッチをサムネイル表示
      $html .= '<div class="info">';
      $html .= '<h3><a href="' . get_the_permalink( $p->ID ) . '">' . get_the_title( $p->ID ) . '</a></h3>';
      //タイトル表示（リンク付）
      $html .= '<span class="caselist_time">' . $time . '</span>'; //日付表示
      if ( $days > $dif ){
            $html .= '<span class="caselist_new">' . $new_letter .'</span>';
            // 新着!!を表示
      }

      foreach ( $caselist_terms as $term ) {
        $caselist_term_name = $term->name;
        $html .= '<span class="caselist_term">' . $caselist_term_name . '</span>';
      	// すべてのカテゴリー表示（複数の場合もあり）
      }

      $html .= '</div>';
      $html .= '</li>';
    }
    $html .= '</ul>';
  }
  wp_reset_postdata(); // 直前のクエリを復元する wp_reset_query()→X
 
  return $html;
}
 
add_shortcode( 'display_caselist', 'display_caselist' );
// ショートコード display_caselist（[]で囲む）で最新カスタム投稿リストを表示

/* 更新情報（最新投稿リスト）のレイアウト変更 */
/* リスト用ショートコードを子テーマのfunctions.phpで生成 */
/* 投稿→postlist、カスタム投稿（納入実績）→caselist */

.postlist_ul, .caselist_ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.postlist_ul li, .caselist_ul li {
  display: flex;
  align-items: center;
  margin: 0 0 1.5em 0!important;
  padding: 0 0 2px 0!important;
  border-top: none!important;
  border-bottom: solid 2px #ddd!important;
}

.postlist_ul li img, .caselist_ul li img {
  width: 45px;
  height: 45px;
  margin-right: 10px;
  padding: 0;
  border-top: solid 1px #ddd;
  border-left: solid 1px #ddd;
  border-right: solid 2px #999;
  border-bottom: solid 2px #999;
  border-radius: 10px;
}

.postlist_ul li .info, .caselist_ul li .info{
  flex: 1;
}

.postlist_ul li .info h3, .caselist_ul li .info h3 {
  margin: 0 0 0.2em 0;
  font-size: 1.0em;
  border-bottom: none!important;
  padding: 0 0;
}

.postlist_ul li .info h3 a, .caselist_ul li .info h3 a {
  color: #333;
  text-decoration: none;
}

.postlist_ul li .info .postlist_time, .caselist_ul li .info .caselist_time {
  margin: 0;
  color: #999;
  font-size: 0.6em;
}

.postlist_ul li .info .postlist_cat, .caselist_ul li .info .caselist_term {
  font-size: 0.4em;
  color: #fff;
  margin: 0px 0px 0px 8px;
  padding: 2px 10px;
  background: #999; /* 73cbd6; */
  border-radius: 100px;
}

.postlist_ul li .info .postlist_new, .caselist_ul li .info .caselist_new {
  margin-left: 0.4em;
  font-size: .8em;
  color: red;
}

参考にしたサイト：

こちらもどうぞ ⇒ トップページ「更新情報」の表示内容修正 #2 | WordPress
カテゴリー
Webサイト関連、お知らせ
タグ
前の記事
測定器紹介（動画）：内径測定器 ASQA-ID-02（大径用）
2023年5月8日
次の記事
測定器紹介（動画）：外径測定器 ASQA-OD-01
2023年5月17日