WordPressでショートコードを使って新着記事一覧を表示してみよう!

WordPress

みなさん,こんにちは.
シンノユウキ(y_stadio)です.

今回はWordPressでショートコードを使って,新着記事一覧を表示する方法を紹介します.

では行きましょう!

前回のまとめ:ショートコードで年齢の表示

まずは前回のまとめから振り返っていきましょう.

前回の記事はこちらです:

前回は年齢を表示するためのショートコードを紹介しました.以下のコードをfunctions.phpに追加しましたね:

function calc_age_func(){
	$now = date("Ymd");
	$birth = "19930125";
	return floor(($now-$birth)/10000);
}
add_shortcode('age', 'calc_age_func');

年齢を表示する関数:cacl_age_funcを作成し,ショートコード:[age] から呼び出してみましたね.

このように,ショートコード化しておくと年齢が更新される度に(年をとる度に)更新するという手間を減らすことができます.

今回はそこからやや発展して,ブログの新着記事一覧を表示するコードを紹介したいと思います.

コードはこちら

最初にコードを紹介しておきます.以下のコードをfunctions.phpに追加することで,新着記事一覧を表示するショートコードを追加できます:

function add_new_list_func($atts){
	$str = '<ul>';
	global $post;
	$arg   = array(
		'posts_per_page' => 5,
    	'orderby'        => 'date', 
    	'order'          => 'DESC',
	);
	$posts = get_posts($arg);
	foreach($posts as $post):
		setup_postdata($post);
		$str.='<li>';
		$str.= '<a href="'.get_permalink().'">'.the_title('','',false).'</a>';
		$str.='</li>';
	endforeach;
	$str.='</ul>';
	wp_reset_postdata();
	return $str;
}
add_shortcode('add_new_list', 'add_new_list_func');

これを挿入すると,以下のように新着記事が5記事,リスト形式で表示されます:

では,以下でこのコードを詳しく解説していきましょう.

get_posts:記事一覧を取得する関数

はじめに,今回の記事のキモであるget_posts()について紹介しておきます.この関数は投稿した記事の一覧を配列で取得してくれます.

引数に取得する条件などを指定することで,特定の記事のみを取得することができます.今回は引数に$argを指定しています.$argは配列で指定していますが,その中身は以下のようになっています:

  • posts_per_page:取得する記事の数を指定しています.今回は5記事を取得したいので5を指定しています.
  • orderby:取得した記事の並び替えを指定します.たとえば,'date'を指定することで日付順に,'title'を指定することでタイトル名で並び替えられます.今回は新着記事一覧を取得したいので,日付で並び替えできる'date'を指定しています.
  • order:orderbyで指定した並び替えの順序を指定します.'ASC'で昇順,'DESC'で降順です.今回は日付を大きい方から小さい方(降順)に並べたいので,'DESC'を指定しています.

これで新着記事一覧を配列で取得できました!次はこれを順次処理していきます.

$postsをforeachでループ

get_postsを使うことで,$postsに投稿一覧が格納されました.その記事を1つずつ処理していくために,foreach文を用います.$postsに格納されている記事を$postに順次代入していきます.

この$postは3行目でglobal変数として宣言しています.WordPressにおいては,投稿記事をグローバル変数である$postに格納して使用します.それを使うために宣言するのですね.

そして,foreachのループ内でsetup_postdata($post);をしています.これは,$postから記事のidや書いた日,コンテンツの内容などを示すグローバル変数にセットする関数です.これをすることで,セットされたグローバル変数などから,タイトルやURLなどの情報を取得できるようになります.

$strにHTMLタグやタイトルを格納していく

このショートコードは,最終的には$strをリターンします.$strには,2行目で<ul>が格納されており,それに<li>リンク付きのタイトル</li>を順次結合させていきます.それの処理をしているのが12~14行目です.

12行目と14行目は簡単ですよね.HTMLタグの<li></li>を結合しているだけです.

ただ,13行目は少し難しく見えるかもしれません.でもやっていることは非常に単純です.とりあえず,ここで使用している関数(テンプレートタグ)の2つを紹介しましょう:

  • get_permalink()
  • the_title()

get_parmalink()setup_postdata($post)で格納されたグローバル変数から,記事のURLを取得するテンプレートタグ(テンプレートの中で使える関数のようなもの)です.

そして,the_title()はURLではなくタイトルを取得するテンプレートタグです.引数が3つありますが,とりあえず気にせずにthe_title('','',false)と指定しておきましょう.

この2つを使っています.なので,<a>タグのhref属性にget_parmalink()から取得したURLを指定し,,<a>タグの中身のテキストにthe_title()で取得したタイトルを指定しています.こうすることでリンク付きのテキストをリスト形式で表示しているのですね.

最後はリセット

foreachによるループ処理が終わったら,wp_reset_postdata()を使ってグローバル変数などをリセットします.

そして,return $strでテキストを表示させます.これで新着記事を表示させることができました!

まとめ

今回は新着記事一覧を生成するショートコードを作成してみました.

次回はカテゴリやタグの記事一覧を表示するショートコードを作成してみたいと思います.

連載目次

  1. たった4行でOK!最も簡単にWordPressでショートコードを作成する方法
  2. WordPressでショートコードを使って自分の年齢を表示してみよう!
  3. WordPressでショートコードを使って新着記事一覧を表示してみよう!現在のページ
  4. WordPressでショートコードを使ってカテゴリやタグの新着記事一覧を表示させる方法
  5. WordPressでショートコードを使って連載目次を作成する方法
この記事の著者
管理栄養士/修士(人間生活化学)

シンノユウキです。管理栄養士/修士(人間生活科学)/ 栄養系の出版社で勤務/ 会社員ブロガーです.科学的に正しくかつ妥当なことをお伝えしていきます.プログラミングが趣味なので関連記事も書いています.

シンノユウキをフォローする
WordPress
シンノユウキをフォローする
みんな栄養に頼りすぎてる
タイトルとURLをコピーしました