WordPress 新着情報を表示するショートコード

WordPress で新着情報(更新情報)を表示するショートコードです。

最新の固定ページや投稿の日付およびタイトルを表示します。期間を指定して「NEW!」マークを表示することができます。

スクリーンショット

recent_posts_shortcode_screenshot

使用例

<h3>更新情報</h3>
[recent_posts post_type="page" new_days="30" count="5"]
<h3>ブログの最近の投稿</h3>
[recent_posts post_type="post" new_days="30" count="5"]

ショートコード オプション

オプション デフォルト 説明
class “recent-posts” クラスです。
count 10 件数です。
post_type “any” 投稿タイプです。

投稿のみの場合は “post”、固定ページのみの場合は “page” 等を指定します。

カスタム投稿にも対応しています。

category “” カテゴリー名(スラッグ名)です。
exclude “” 除外する投稿の ID です。

複数指定する場合はカンマ (,) で区切りで指定します。

orderby “modified” 投稿をソートする項目です。

指定できる項目は、”date” (投稿日) または “modified” (更新日) のいづれか。

date_format “” 日付フォーマットです。

省略時(””)は、オプション設定の日付フォーマットとなります。

new_days 30 「NEW!」マーク(recent-posts-new クラス)を付加する期間です。

ショートコードのソースコード

functions.php などに下記のコードを追加します。

/**
 * 最新の固定ページや投稿のタイトルをリスト表示するショートコードです。
 */
function recent_posts_shortcode( $atts ) {
	global $post;

	$atts = shortcode_atts( array(
		'class' => 'recent-posts',
		'count' => '10',
		'post_type' => 'any',
		'category' => '',
		'exclude' => '',
		'orderby' => 'modified',
		'date_format' => '',
		'new_days' => '30'
	), $atts, 'recent_posts' );

	$args = array(
		'showposts' => $atts['count'],
		'post_type' => $atts['post_type'],
		'orderby' => $atts['orderby'],
		'order' => 'DESC',
		'category_name' => $atts['category'],
		'exclude' => $atts['exclude'],
	);
	$myposts = get_posts( $args );

	$new_days = $atts['new_days'];
	$retour = '<dl' . ( $atts['class'] != '' ? ' class="' . $atts['class'] . '"' : '' ) . '>';
	foreach ( $myposts as $post ) {
		setup_postdata( $post );
		$today = date( 'U' );
		$entry = $atts['orderby'] == 'modified' ? get_the_modified_date( 'U' ) : get_the_date( 'U' );
		$diff = date( 'U', ( $today - $entry ) ) / 86400;
		$retour .= '<dt>' . ( $atts['orderby'] == 'modified' ? get_the_modified_date( $atts['date_format'] ) : get_the_date( $atts['date_format'] ) ) . '</dt>';
		$retour .= '<dd>' . ( $new_days > $diff ? '<span class="recent-posts-new">NEW!</span>' : '' ) . '<a href="' . get_permalink() . '">' . the_title( '', '', false ) . '</a></dd>';
	}
	wp_reset_postdata();
	$retour .= '</dl>' . "\n";

	return $retour;
}

add_shortcode( 'recent_posts', 'recent_posts_shortcode' );

スタイル(CSS)

/*
Recent Posts
*/
dl.recent-posts {
	margin: .1rem 0;
	padding: 0;
	display: block;
}
dl.recent-posts dd,
dl.recent-posts dt {
	font-weight: normal;
	margin: 0;
	padding: 0;
}
dl.recent-posts dt {
	float: left;
	clear: both;
	width: 8.2em;
}
dl.recent-posts dd {
	overflow: hidden;
}
dl.recent-posts span.recent-posts-new {
	padding: 0 2px;
	margin-right: 5px;
	vertical-align: middle;
	font-size: .6rem;
	color: #fff;
	font-weight: bold;
	border-radius: 3px;
	background-color: #f02020;
}

コメント

  • いつも大変お世話になっております。
    新着情報のコードを、とても便利に使わせていただいております。

    ひとつ不躾な質問を失礼致します。
    投稿記事を公開した後、数日して修正をかけて更新をかけると、その更新日にて表示されてしまいます。
    修正をかけても、最初に公開した投稿記事の日付のままで表示させることは出来ないでしょうか?

    ショートコードのorderbyは”day”にしてあります。
    よろしくお願いします。

  • あっ!
    申し訳ございません、”date”でした。
    しかも”=”も抜けていました。。。
    無事に表示されました。

    ちゃんとそういった事まで、考えてくれていたコードだったのに、早とちりをしてしまい申し訳ございませんでした。

    本当に気に入っている機能ですので、大事に使わせいただきます!

    お忙しい中、ありがとうございました。

  • 新着一覧を簡単に表示できるショートコード を探しており、大変参考になりました!
    ありがとうございます。

    一点質問があるのですが、
    PCで見たときは綺麗に日付・タイトルが横並びに表示されても
    スマホで見るとタイトルが長くなると崩れて見た目が悪くなってしまいます。
    スマホ画面で見てもPCと同じ状態で表示できるようにするにはどうしたらいいのでしょうか?
    教えていただけますと幸いです。

    • こんにちは、コメントありがとうございます。

      スマホで見るとタイトルが長くなると崩れて見た目が悪くなってしまいます。

      デフォルトテーマ (Twenty Twenty、Twenty Nineteen、Twenty Seventeen) ではレイアウトが崩れるようなことはありません。お使いのテーマとインストールしているプラグイン(新着情報を表示するようもの)を教えてください。

      なお、タイトルを1行に制限する場合は、下記の CSS でできます。
      dl.recent-posts dd {
      white-space: nowrap;
      text-overflow: ellipsis;
      }

      • お忙しい中ご返信ありがとうございます。
        ____________

        white-space: nowrap;
        text-overflow: ellipsis;
        ____________

        こちらはすでに追加していて、スマホサイズになった時に
        見切れる部分は「…」で表示している状態です。

        しかし文字サイズも変わらないので
        見切れてしまう部分が多く、、、
        PC表示のまま小さくしたいです・・・

        下記、現在使っているテーマです。
        引き継いだものになるのでプラグインがあまりよく分からないのですが、、、
        一応該当しそうなものを送ります。

        あと、日付とタイトルの左横に
        おそらくテーマ特有の縦線(見出しを入れたりすると出るライン:通常は横)が出てきてしまうのも少し困っています、、、

        <テーマ>
        Lightning:バージョン10.2.0

        <プラグイン>
        VK All in One Expansion Unit:バージョン 9.26.2.0
        Show Current Template:バージョン 0.3.4

        • Lightning テーマ バージョン 11.0.6 で試してみましたが、崩れるようなことはありませんでした。
          新着情報ショートコード by Lightning テーマ

          スタイルシートをカスタマイズしていませんか?動作を確認できるサイトの URL をお知らせいただくと解決が早いかもです。

          • 検証していただきありがとうございます。
            パンくずリストは実装していません。スタイルシートはカスタマイズしているのですが、、、
            崩れているというか、添付してくれているような状態になっていたのを直したく思っていて、、、(・_・;
            サイトは会員サイトになるのでURLを送れないのです…言葉だけでわかりにくくて申し訳ございません。
            タイトルが折れずに一行のままスマホでも小さく表示はやっぱり難しいのでしょうか?
            cssを探しても上手く見つけられず、、、

            とりあえず、一行で固定・入りきらない部分は「…」の表示で行こうと思います。
            お忙しい中時間を割いていただきありがとうございましたm(_ _)m☆

コメントを残す

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。