備忘録16〜固定ページに新着記事一覧を表示

固定ページで作った「フロントページ」

フロントページを固定ページで作成しました。

記事投稿を進めていく上で、更新されていることを出しておきたいが・・・

手動でやるのは、手間がかかるなあと思い、何かできないかと調べてみました。

プラグインかPHPでできるようだ・・・

プラグインの方法は、これ以上プラグインを増やすのか・・・？と疑問に思いつつ読んでみました。

結構簡単にできそうだ・・・

PHPの方はどうだろう・・・、いっぱい出てくる。

ここが分かりやすかったです。

PHPでやってみよう！！

とりあえず、コピペで試した

コピーしたコード

<?php
$information= get_posts( array(
'posts_per_page' => 10
));
if( $information):
?>
<ul>
<?php
foreach( $information as $post ):
setup_postdata( $post );
?>
<li>
<?php the_time('Y年n月j日'); ?> - <a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a>
</li>
<?php
endforeach;
wp_reset_postdata();
?>
</ul>
<?php else: ?>
<p>表示できる情報はありません。</p>
<?php endif; ?>

カテゴリー関係なく、新着が10件表示される。

ショートコードで、呼び出しができるとのことだったので、検索する項目と関数化に挑戦・・・

/* 最新記事リスト */
function getNewItems($atts) {
    extract(shortcode_atts(array(
        "num" => '', //最新記事リストの取得数
        "cat" => '', //表示する記事のカテゴリー指定
        "days" => '', //何日以内の記事にadd_textをつけるか指定
        "add_text" => '' //表示するテキスト
    ), $atts));
    global $post;
    $oldpost = $post;
    $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
    $retHtml='<div class="row p-0 col-sm-11 col-12 mx-auto float-none">';
    foreach($myposts as $post) :
    $cat = get_the_category();
    $catname = $cat[0]->cat_name;
    $catslug = $cat[0]->slug;
        setup_postdata($post);
        $retHtml.='<div data-aos="fade" data-aos-offset="140" data-aos-duration="3000" data-aos-delay="500"  class="aos-animate text-center p-0 card col-sm-5 col-12 bg-light m-1">';
        $retHtml.=get_the_post_thumbnail().''; 
       $retHtml.='<p class="news_date">'.get_post_time( get_option( 'date_format' )).'';
        $retHtml.='<span class="badge badge-pill badge-secondary cat">'.$catname.'</span></p>';
        $retHtml.='<div class="card-title news_title">'.the_title("","",false).'</div>';
        $retHtml.='<a class="stretched-link" href="'.get_permalink().'">read more...<a>';
    //指定日以内にadd_textをつける
    $today = date_i18n('U');
    $entry_day = get_the_time('U');
    $past_days = date('U',($today - $entry_day)) / 86400;
      if ( $days > $past_days ):
        $retHtml.='<span class="add_New">'.$add_text.'</span>';
      endif;
        $retHtml.='</div>';
    endforeach;
    $retHtml.='</div>';
    $post = $oldpost;
    wp_reset_postdata();
    return $retHtml;
}
add_shortcode("newsNew", "getNewItems"); //getNewItemsは関数名、newsNewはショートコード名

ついでに、Bootstrap4のカード形式で表示しつつ

以前の記事で書いた、スクロールしたらふわっと出るように、属性を追加してみました。

ショートコードにしたので、このように書くと、カテゴリーIDが８の記事を５個表示となります。

こちらにすると、追加で投稿日が３日以内だと、追加のテキスト「おすすめ」がでる仕様になります。

ここに出るようにしてみました。タブ切り替えでタブ内に書くショートコードの指定を変えています。

見た目上、ボタンを押したら絞り込んでいるように見えるかと思います。

カテゴリーのID指定を「-1」のように、マイナスをつけるとそのカテゴリを除外して表示してくれます。

「,」で区切ってカテゴリーIDを登録すると複数のカテゴリ分表示されるようになります。

//　一覧記事取得関数 --------------------------------------------------------------------------------
// "num" = 表示記事数, "cat" = カテゴリ番号
// 呼び出し元での指定も可能 ->

2021年10月9日桜木鍼灸治療院「桜木鍼灸治療院」 川畠 裕子 さん 不妊、マタニティ、美容に特化した女性のための鍼灸院。 女性の一生は目まぐるしく何度も変化し、それに伴って体の不調も出てきます。 川畠さんは院長であり、総合病院の外科病棟で勤務の経験が […]

function getCatItems($atts, $content = null) {
	extract(shortcode_atts(array(
	  "num" => '3',
	  "cat" => '14'
	), $atts));
	
	// 処理中のpost変数をoldpost変数に退避
	global $post;
	$oldpost = $post;
	
	// カテゴリーの記事データ取得
	$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
	
	if($myposts) {
		// 記事がある場合↓
		$retHtml = '<div class="getPostDispArea bg-black text-white">';
		// 取得した記事の個数分繰り返す
		foreach($myposts as $post) :
			// 投稿ごとの区切りのdiv
			$retHtml .= '<div class="getPost p-2 row">';

			// 記事オブジェクトの整形
			setup_postdata($post);

			// サムネイルの有無チェック
			if ( has_post_thumbnail() ) {
				// サムネイルがある場合↓
				$retHtml .= '<div class="getPostImgArea col-3">' . get_the_post_thumbnail($page->ID, 'thumbnail') . '</div>';
			} else {
				// サムネイルがない場合↓※何も表示しない
				$retHtml .= '';
			}
			
			// 文章のみのエリアをdivで囲う
			$retHtml .= '<div class="getPostStringArea">';
			$retHtml.= '<span class="h4 getPostTitle">';
			// 投稿年月日を取得
			$year = get_the_time('Y');	// 年
			$month = get_the_time('n');	// 月
			$day = get_the_time('j');	// 日
			
			$retHtml .= '<span>' . $year . '年' . $month . '月' . $day . '日</span>';
			
			// タイトル設定(リンクも設定する)
			
			$retHtml.= '<a href="' . get_permalink() . '">' . the_title("","",false) . '</a>';
			$retHtml.= '</span>';
			
			// 本文を抜粋して取得
			
			$getString = get_the_excerpt();
			$retHtml.= '<span class="getPostContent">' . $getString . '</span>';
			
			$retHtml.= '</div></div>';
			
		endforeach;
		
		$retHtml.= '</div>';
	} else {
		// 記事がない場合↓
		$retHtml='<p>記事がありません。</p>';
	}
	
	// oldpost変数をpost変数に戻す
	$post = $oldpost;
	
	return $retHtml;
}
// 呼び出しの指定
add_shortcode("getCategoryArticle", "getCatItems");

こっちは、カテゴリー固定版で、画像なしの１行で表示するスタイルです。

ニュースを表示させるのに使っています。

PHPもなかなか奥深いものです。

スポンサーリンク

備忘録PHP,プラグイン,ワードプレス