WordPress で新着情報（更新情報）を表示するショートコードです。
最新の固定ページや投稿の日付およびタイトルを表示します。期間を指定して「NEW!」マークを表示することができます。
スクリーンショット
使用例
<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 クラス) を付加する期間です。 |
| 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'];
$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;
}更新履歴
2020年10月15日
- taxonomy、terms オプションを追加しました。
いつも大変お世話になっております。
新着情報のコードを、とても便利に使わせていただいております。
ひとつ不躾な質問を失礼致します。
投稿記事を公開した後、数日して修正をかけて更新をかけると、その更新日にて表示されてしまいます。
修正をかけても、最初に公開した投稿記事の日付のままで表示させることは出来ないでしょうか？
ショートコードのorderbyは”day”にしてあります。
よろしくお願いします。
こんにちは
投稿日の場合は、”day” ではなく “date” ですね。(^^♪
あっ!
申し訳ございません、”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 で試してみましたが、崩れるようなことはありませんでした。
スタイルシートをカスタマイズしていませんか？動作を確認できるサイトの 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="タームのスラッグ"]お世話になっております。返信が遅れてしまい申し訳ございません。
無事に表示することができました！！！
お忙しい中対応していただき、本当にありがとうございました。