5ヶ月前に投稿

WordPressのshortcodeで最近の投稿を表示する

2019年7月9日

この記事は約 7 分で読めます。

4.5

最近の投稿を5件表示するという記事で
どのように記事に表示するのですか?
という質問を頂きました。

検索すると大体、

「表示させたい
テンプレートに追加してください。」

とか、

「表示させたい場所にコードを設置します。」

と書かれているのですが、
その通りです。

・・でもわたしには分かりません。
なのでショートコードで
記事に表示させています。

以下のコードを functions.php に書いて、
表示させたい投稿などにショートコードを
記述します。

ソースコード

function my_shortcode( $atts ) {
    $at = shortcode_atts( array(
        'page_at' => '5',
        'order_at' => 'DESC',
        'orderby_at' => 'date',
    ), $atts,'numberposts');
ob_start();
?>
<?php
$id = get_the_ID();
?>
<?php
$args = array( 'exclude' => $id, 'posts_per_page' => $at['page_at'], 'order'=> $at['order_at'], 'post_type' => 'post', 'orderby' => $at['orderby_at'],);
$postslist = get_posts( $args );
?>
<?php if( $postslist ): ?>
<?php
foreach ($postslist as $post) : setup_postdata($post);
?>
<dl style="margin-bottom: 1.5em; clear: both;">
    <dt style="display: inline; clear:left;float:left;margin-right:10px;margin-bottom:10px;"><?php echo get_the_post_thumbnail( $post, array( 50, 50 )); ?></dt>
    <dt style="display: block;"><?php echo date( 'Y-m-d', strtotime($post->post_date) ); ?> 
          | <a style="text-decoration:none; color: #6495ed;" href="<?php the_permalink($post);?>">
            <strong><?php echo wp_trim_words( get_the_title($post), 24, '...' ); ?></strong></a>
    </dt>
    <dd style="overflow: hidden; font-size: 0.8em; border-bottom:1px dotted #999999; padding:1px 0 5px 0;display: block;"><?php echo mb_substr(get_the_excerpt($post), 16, 24); ?>
        …<a href="<?php the_permalink($post);?>">続きを読む</a>
    </dd>
</dl>
<?php endforeach; 
wp_reset_postdata(); ?>
<?php else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
<?php
	return ob_get_clean(
}
add_shortcode('numberposts', 'my_shortcode');

add shortcodeショートコードタグ用のフックを追加します。

shortcode atts – ユーザーがショートコードに指定した属性を、
予め定義した属性と結合し、必要に応じてデフォルト値をセットします。

ob_start – 出力のバッファリングを有効にする。
ショートコードが大量の HTML を生成する場合、
ob_start を使って出力を取り込んでから
文字列へ変換することができます。

パラメータを変更 (値を渡す)

投稿数 (page_at)

デフォルト値 5

-1を使用するとすべての投稿を含めます。
(このとき 'offset’ パラメータは無視されます。)

投稿の並び (order_at)

昇順か降順かを指定します。

デフォルトは 'DESC'(降順)です。

  • 'ASC’ – 最低から最高へ昇順 (1, 2, 3; a, b, c).
  • 'DESC’ – 最高から最低へ降順 (3, 2, 1; c, b, a).

項目の値 (orderby_at)

デフォルト値 'date’ – 日付で並び替える。('post_date’ でも良い。)

  • 'none’ – 順序をつけない(バージョン 2.8 以降で使用可能)。
  • 'ID’ – 投稿 ID で並び替える。大文字に注意。
  • 'author’ – 著者で並び替える。('post_author’ でも良い。)
  • 'title’ – タイトルで並び替える。('post_title’ でも良い。)
  • 'name’ – スラッグで並び替える。('post_name’ でも良い。)
  • 'type’ – 投稿タイプで並び替える。('post_type’ でも良い。)
  • 'modified’ – 更新日で並び替える。('post_modified’ でも良い。)
  • 'parent’ – 投稿/固定ページの親 ID 順。('post_parent’ でも良い。)
  • 'rand’ – ランダムで並び替える。’RAND(x)’ も使えます(’x’ はシードになる整数)。
  • 'comment_count’ – コメント数で並び替える(バージョン 2.9 以降で使用可能)。

その他は以下を参照のこと。

Example

デフォルトの書き方。

[numberposts]

値を渡すにはショートコード名に
スペースを空けて変数と値を指定します。

ランダムに3件表示する。

[numberposts page_at="3" orderby_at="rand"]

結果

例えば、アルファベット順に昇順で8件を表示する。

[numberposts page_at="8" order_at="ASC" orderby_at="title"]

2018-09-01 | .htaccessファイルが生成されない
WordPressは、パーマリンクの設定をした時 …続きを読む
2019-09-05 | @supports と CSS Hackについて
@supports と CSS Hackについ …続きを読む
2018-11-05 | ASCII文字のクリスマスツリー
※ クリスマスソングが、 ストリーミング再生さ …続きを読む
2018-11-13 | Audio Object にアクセスする
<audio>要素を使って再生の際 …続きを読む
2018-11-30 | CSSでリーダー (記号) をアニメーション
リーダー (記号) をCSSで アニメーション …続きを読む
2018-11-03 | Can I Useをブログに埋め込む
Can I Use のブラウザ対応表を ブログ …続きを読む
2019-09-14 | Caniuse&MDN Browser Comp...
Can I use の検索結果に MDN Br …続きを読む
2019-08-28 | Chase Block Editor Tips
ブロックエディターに 表示されるヒントをCha …続きを読む
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
WordPressのshortcodeで最近の投稿を表示する