備忘録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が8の記事を5個表示となります。

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

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

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

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

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

// 一覧記事取得関数 --------------------------------------------------------------------------------
// "num" = 表示記事数, "cat" = カテゴリ番号
// 呼び出し元での指定も可能 ->
2021年5月27日備忘録35〜スマレジに商品登録(APIで)してみたお仕事の方で、モールのAPIの相談が来ました・・・の続きです。 登録の準備 やっている人はいそうなのですが、なかなか情報が見つかりませんでした・・・ スクリプトで「URLから挿入」を使います URLは cURLオプション […]
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");

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

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

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

スポンサーリンク