WordPress

ショートコードを使って、記事に「最新の記事」のリンクを3件入れる:【51日目】WordPress1日1プラグイン

更新日:

ようこそのお運びで、厚く御礼申し上げます。
51日目です。しばらくはショートコードについて書いていきます。
※ショートコードについての説明はこちらの記事をまず見てくださいね。

ショートコードを使って、記事に「最新の記事」のリンクを3件入れる。

ショートコードを使って、記事に「最新の記事」のリンクを3件表示するようにします。
また、属性を用いて、件数の変更、並び順も変えるように設定します。

ショートコードは「[newPosts ]」として、属性は件数(count)、並び順(order)を数値で設定するようにします。
140310-0009

表示はリスト表示です。
デフォルトは3件表示の降順(投稿日の新しいものから)とします。
140310-0011

まずは、function.phpに書いてみます。

では、function.phpに以下のコードを書きました。

//ショートコード名:newPosts
add_shortcode('newPosts', paka3_SCnewPosts);

function paka3_SCnewPosts($atts) {
  extract( shortcode_atts( array(
      'count' =>3,                  //表示数:
      'order' => 'DESC' ,           //並び順:ASC/DESC,
      ), $atts) );
//条件定義
  $args = array(
                   'posts_per_page'=>$count,
                   'orderby'       =>'post_date', //投稿日
                   'order'         =>$order
       );
  $posts =get_posts( $args );

  //リスト表示
  $list="<div class='newPosts'><b>最新の記事</b>";
  $list.="<ul class='mytaglist_ul'>";
  foreach($posts as $post){
   //更新日のフォーマット変更
   $postDate = mysql2date('Y年m月d日', $post->post_date);
       $list.="<li><a href='". get_permalink($post->ID)."'>".$post->post_title."(更新日:".$postDate.")</a></li>";
  }
  $list.="</ul></div>";
  return $list;
 }

ポイントはどこ?

  • 第一引数「$atts」にショートコードで指定した「属性(countやorder)」の値が入ります。shortcode_atts関数で、正当性をチェックデフォルトも設定してしまいます。
    WordPressCodex:shortcode_attsを参照

    extract(shortcode_atts(array(
       'id' => 0,
       'slug' => ""
    ), $atts));
    
  • 条件定義、デフォルト値の設定を行います。
    //条件定義
      $args = array(
                       'posts_per_page'=>$count,
                       'orderby'       =>'post_date', //投稿日
                       'order'         =>$order
           );
  •  後は値をget_postsを使ってデータを取得しHTMLを生成します。
  • ショートコードは以下のように記入します。
    1.新しい記事を3件表示

    [newPosts]

    2.自分で値を設定する場合
    count(件数)、order(並び順:asc/desc)を設定できます。

    [newPosts count=10 order=asc]

コードをプラグイン用のファイルにします

それではfunction.phpに書いたコードを消して、
paka3_shortCodeNewPostLinks.php」というファイルを作成し、以下のコードを記入します。

このファイルを[wp-content]>「plugins」ディレクトリに入れ、管理画面で有効にして完了です。

今回のまとめ

ちょっと前回まででコードが複雑になってきていたので、一度原点に立ち返ってシンプルに書くようにしてみました。以前の記事も見ていてところどころ間違い等に気づく・・・ちょっと修正はしておきます。

-WordPress
-, , ,

Copyright© アルパカ@ラボ , 2019 All Rights Reserved Powered by AFFINGER5.