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

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”クラスです。
count10件数です。
post_type“any”投稿タイプです。
投稿のみの場合は “post”、固定ページのみの場合は “page” 等を指定します。カスタム投稿にも対応しています。
category“”カテゴリー (スラッグ名) です。
exclude“”除外する投稿の ID です。
複数指定する場合はカンマ (,) で区切りで指定します。
orderby“modified”投稿をソートする項目です。
指定できる項目は、”date” (投稿日) または “modified” (更新日) のいづれか。
date_format“”日付フォーマットです。
省略時（””）は、オプション設定の日付フォーマットとなります。
new_days30「NEW!」マーク (recent-posts-new クラス) を付加する期間です。
taxonomy“”カスタム分類 (カスタムタクソノミー) です。
terms“”taxonomy で指定した、ターム (スラッグ名) です。

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

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',
		'taxonomy'    => '',
		'terms'       => '',
	), $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'],
		'suppress_filters' => false,
	);

	if ( ! empty( $atts['taxonomy'] ) ) {
		$args['tax_query'] = array( array(
			'taxonomy' => $atts['taxonomy'],
			'field'    => 'slug',
			'terms'    => $atts['terms'],
		) );
	}

	$myposts = get_posts( $args );

	$new_days = $atts['new_days'];
	$prev_date = null;
	$retour = '<dl' . ( $atts['class'] != '' ? ' class="' . esc_attr( $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;

		$date = $atts['orderby'] == 'modified' ? get_the_modified_date( $atts['date_format'] ) : get_the_date( $atts['date_format'] );
		if ( $prev_date === $date ) {
			$date = '&nbsp;';
		} else {
			$prev_date = $date;
		}

		$retour .= '<dt>' . esc_html( $date ) . '</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;
}

更新履歴

2020年10月15日

  • taxonomy、terms オプションを追加しました。

WordPress

コメント

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

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

    ショートコードの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☆

  • こんにちは。
    このコードには大変お世話になっております。

    ２度目の質問で申し訳ないのですが、教えていただきたい事があります。
    カスタム投稿タイプを表示させることは出来るのですが
    カスタム投稿の特定のカテゴリーのみを表示させるにはどうしたら良いのでしょうか？
    普通の投稿のカテゴリーは[category=” “]で表示できるのですが、
    カスタム投稿のカテゴリーが表示できず・・・

    お忙しいところ申し訳ないのですが、
    教えていただけると幸いです。
    宜しくお願い致します。

    返信

    • こんにちは。お久しぶりです。
      post_type にカスタム投稿タイプ、category にカテゴリーのスラッグ（複数のカテゴリーを指定する場合はカンマ区切り）を指定すれば表示されます。
      例:
      [recent_posts post_type="カスタム投稿タイプ" category="カテゴリーのスラッグ"]

      返信

      • 早速のご返信ありがとうございます！

        やはり、そのように指定すれば出るはずなのですね・・・
        そのショートコードを書いても、カテゴリー別に表示されず困っていました。

        ソースコードはコピーして使っていますし、css以外に特にいじったりはしていません。
        他のソースコードとの相性が悪かったりでこういう現象が起きる可能性はあるのでしょうか？
        WordPressのテーマに元々ついている「投稿」のカテゴリーだと正常に反映されます。
        今現在はその普通の投稿を使い、対処しているのですが…カスタム投稿の方が使い勝手がよく。。。どうしたらいいものか分からず質問させていただいた次第です。ちなみにカスタム投稿は、プラグインのAll in One Expansion Unit（バージョン 9.40.0.0 ）の「カスタム投稿タイプ」を使っています。

        テーマは『Lightning Proバージョン: 6.4.10』です。

        もし何かお分かりになる事があれば教えていただけると幸いです。

        返信

        • VK All in One Expansion Unit プラグインのカスタム投稿タイプはカテゴリー (category) ではなくカスタム分類 (カスタムタクソノミー) となります。
          ショートコードの方は、カスタム分類に対応していなかったので対応しました。コードを更新して試してみてください。
          ショートコードの例:
          [recent_posts post_type="カスタム投稿タイプ" taxonomy="カスタム分類のスラッグ" terms="タームのスラッグ"]

          返信

          • お世話になっております。返信が遅れてしまい申し訳ございません。
            無事に表示することができました！！！
            お忙しい中対応していただき、本当にありがとうございました。

  • 2020年1月に「浅賀」さまから、コメントがあった件です。
    お尋ねします。何卒、お教えください。

    ＞ 最初に公開した投稿記事の日付のままで表示させる

    このことです。
    ショートコードのorderbyを“date”に。とのことでした。
    13行目の
    ‘orderby’ => ‘modified’,
    この
    ‘modified’箇所を’date’にしました。

    その下の記述に、
    ‘modified’箇所が、2箇所あり、’date’に変更しました。

    45行目でした。
    $entry = $atts[‘orderby’] == ‘date’ ? get_the_modified_date( ‘U’ ) : get_the_date( ‘U’ );
    $diff = date( ‘U’, ( $today – $entry ) ) / 86400;
    $retour .= ” . ( $atts[‘orderby’] == ‘date’ ? get_the_modified_date

    表示される順番は、思った通りになりましたが、
    日付（年月日）が、修正をかけて更新をかけた、その更新日のままです。

    お教えください。お願い申し上げます。

    返信

    • はじめまして、こんにちは。

      投稿日順で投稿日表示でしたらショートコードの orderby パラメータで date を指定するだけでできます。

      ショートコードの例:

      [recent_posts orderby="date"]
      返信

      • 石鷹 さま
        おはようございます。早速のご回答をありがとうございます。

        ＞ ショートコードの例:
        ＞ [recent_posts orderby=”date”]

        ショートコードの例をお示し頂きありがとうございました。
        functions.php は、デフォルトの記述に戻しました。

        やっと、分かりました。希望が叶いました。素晴らしい！！
        このように、phpの編集が出来て、結果が出せて、とても嬉しいです。

        実は、私、不動産プラグインというものを利用しています。
        出来る限り、フリー(無料版)で。と思い、
        テーマは「TwentySixteen」で頑張っています。
        限界を感じているところではありますけれども・・・です。

        不動産プラグインを使って、新着記事(新着物件)を表示させるには、
        post_typeを”fudo”にすると、上手く行きました。
        [recent_posts orderby=”date” post_type=”fudo” new_days=”10″ count=”40″]
        として、使っていこうと思います。
        （これから弊社代表が納得するように話し合います。）

        現状は、PHP工房さんの、
        【PKOBO-News01】PHP新着情報・CMSプログラム フリー（無料）版
        をiframeで埋め込んでいます。とても不細工な事をしていて、
        心の何処かで、罪悪感がありました。

        後は、弊社代表を、説得できるか否か。です。
        ※残念ながら、アナログな方なので、納得できるかなぁ。でした。

        長くなりました。申し訳ありません。
        その他、色々と、ご相談したい編集箇所はありますが、嫌われますので、
        これで、終わりに致します。

        重ねてお礼を申し上げます。ありがとうございました。

        返信

  • 石鷹さま
    こんにちは。山田です。先日は、orderbyを“date”に。の件で、ご親切にご教授頂き、ありがとうございました。

    スタイルシートのことです。

    <dl class="recent-posts">
<dt>2021年12月6日</dt>
<dd><span class="recent-posts-new">NEW!</span><a href="URL">テキスト その１、テキスト その１、テキスト その１、テキスト その１、テキスト その１、テキスト その１、テキスト その１</a></dd>
<dt>2021年12月6日</dt>
<dd><span class="recent-posts-new">NEW!</span><a href="URL">テキスト その２、テキスト その２、テキスト その２、テキスト その２、テキスト その２、</a></dd>
</dl>

    上記のような文章で、
    <dd>と</dd>で、挟まれる箇所だけを、
    line-height: 110%;
    に指定したいのですが、上手く行きません。

    dl.recent-posts dd {
	overflow: hidden;
	line-height: 110%;
}

    など、色々試しましたが、分かりません。

    ズレてしまいますし、思ったような表示になりません。

    どうにか、お教え頂けないでしょうか。
    厚かましいことで、恐縮ですが、お願い申し上げます。

    返信

    • 提示の CSS で調整できると思います。
      記述する場所の変更（style.css ならカスタムフィールドの [追加 CSS]へ）や、ブラウザのキャッシュの削除、!important の追加など試してみてください。

      返信

  • 石鷹さま
    おはようございます。お教え ありがとうございます。

    ご教授頂き、!important を適用しました。

    dl.recent-posts dd {
	overflow: hidden;
	line-height: 110%! important;
}

    その結果、左列：更新日時と、
    右列：更新情報（投稿記事タイトル）で、
    line-height に違いが出てます。

    （※以下、私の環境だけかも知れませんが、
    　スイマセンです。報告させて頂きます）

    PC画面と、レスポンシブな場合とで違ってしまいました。
    ブラウザは、Chromeです。

    【PC画面】
    https://i.imgur.com/iIgMpc0.jpeg

    【iPad：768×1024 pixel】
    https://i.imgur.com/FBkgHWt.jpeg

    【レスポンシブ：400×819 pixel】
    https://i.imgur.com/yKn81WO.jpeg

    【レスポンシブ：375×667 pixel】
    https://i.imgur.com/qt7GYq1.jpeg

    このような現象になっています

    2021年12月6日
    2021年12月6日

    HTMLの説明リストタグは、で、
    ひとつの纏まりと、考えていますが、

    石鷹さまの ご多用のおり 厚かましくて恐縮でございますけれども、
    スタイルシートを考え直すには、私は技量が足りませんので、
    ご一考願いますれば幸甚であります。何卒、宜しくお願いします。

    返信

    • まず、!important の記述が違います。
      line-height: 110%! important;
      ↓
      line-height: 110% !important;
      ただし、スクリーンショットでは反映されているようなので、!important は不要だと思います。
      また、スクリーンショットでは110%では日付より行間が低いように見えます。日付より行間を高くしないと正しく表示されないと思います。

      > ひとつの纏まりと、考えていますが、

      こちらは日付をひとつの纏まり（同じ日付の場合は表示しない）になるようにコードを変更しました。再度コードをコピペして試してみてください。

      返信

      • 石鷹さま
        こんばんは。ご返信をありがとうございました。
        !important の記述で、ご心配をおかけしました。
        この点は、問題ありません。です。

        私のスキル不足により、コメント投稿で、
        「＜（＆ｇｔ；）」や、「＞（＆ｌｔ；）」の表示（表記）が、
        不完全だったり・・・

        ＜ｐｒｅ＞＜ｃｏｄｅ＞
        ＜／ｐｒｅ＞＜／ｃｏｄｅ＞の使い方が拙かったりで、
        コピペする過程で生じたのでは？・・・スイマセンです。

        functions.php の コード、
        並びに、改めてスタイルシートの記述を新たにコピペさせて頂きました。

        申し訳ありませんですが、変化はありません。
        何故なのかは、私には分からないので、恐縮です。

        ＜ｄｌ　ｃｌａｓｓ＝”ｒｅｃｅｎｔ－ｐｏｓｔｓ”＞
        ＜ｄｔ＞２０２１年１２月６日＜／ｄｔ＞
        ＜ｄｄ＞テキスト１＜／ｄｄ＞
        ＜ｄｔ＞２０２１年１２月６日＜／ｄｔ＞
        ＜ｄｄ＞テキスト２＜／ｄｄ＞
        ＜／ｄｌ＞

        上記で、
        ＜ｄｄ＞＜／ｄｄ>で、挟まれる箇所の、
        line-height です。

        ｄｌ．ｒｅｃｅｎｔ－ｐｏｓｔｓ　ｄｄ　｛
        ｏｖｅｒｆｌｏｗ：　ｈｉｄｄｅｎ；
        ｌｉｎｅ－ｈｅｉｇｈｔ： 110％；
        ｝

        この110%を120～150%に替えて、表示させました。
        （その度に、ブラウザのリロード、キャッシュ削除を実行しています）
        が、
        不思議な事に、110％でも150％であっても、
        同じ、行高さです。

        その様な事でございました。石鷹さまには、お忙しい中、
        ありがとうございました。申し訳ありません。

        返信

  • 石鷹さま
    先日から、不躾な質問を行い、申し訳ありませんでした。
    テストし直しました。
    Recent Postsの最初に、書き込むことで、対応していくことにしました。

    dl.recent-posts ｛
    margin: .1rem 0;
    padding: 0;
    display: block;
    line-height: 120%;
    ｝

    120％でいいようでした。
    本当に、ありがとうございました。お礼と共に、ご報告まで。
    失礼しました。

    返信

コメントを残す

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

日本語でコメントを入力してください。(スパム対策)