WordPressショートコードで複数の記事タイトルを表示する方法

titles

photo credit: Rubén via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

WordPressのショートコードを使って、数件の新着記事をアイキャッチ画像つきで表示する機能を実装している最中です。

前回はこちらの記事。

429 Too Many Requests

配列内の要素一つ一つに対して繰り返し処理を行うforeach文を使って複数のテキストをショートコードで表示するということをやっていました。

今回は、いよいよその対象を投稿記事にしていきたいと思います。

WordPressのショートコードで複数の記事タイトルを表示する方法についてお伝えします。

では、よろしくお願いいたします!

スポンサーリンク

前回のおさらいと方針

まず前回のおさらいですが、テーマの編集(functions.php)に記述するPHPプログラムは以下のようなものでした。

//配列内のテキストを出力するprint_text
function print_text($atts){
  $arr = array('じゃがいも','ニンジン','玉ねぎ','ブロッコリー');
  $retHTML='';
  foreach($arr as $text):
    $retHTML.=$text."
"; endforeach; return $retHTML; } add_shortcode('text','print_text');

エディタ内で

[text]

というショートコードを入力することで、各野菜名が改行ありで表示されるといったものです。

今回は野菜名ではなくて、投稿記事のタイトルになります。

大まかな方針としては

  1. 何らかの方法で投稿記事のいくつかを配列で取得
  2. 取得した配列に対して同様にforeach文で繰り返し
    • 現在対象とする記事についてそのタイトルを返す

という流れになります。

最新の投稿記事のタイトルを表示するショートコード

最新の投稿記事のタイトルを表示するショートコードは以下のPHPプログラムをfunctions.phpに追加することで作成することができます。

//記事タイトルを出力するprint_post_name
function print_post_name($atts){
  $retHTML='';
  global $post;
  $myposts = get_posts();
  foreach($myposts as $post):
    setup_postdata($post);
    $retHTML.=the_title('','',false).'
'; endforeach; wp_reset_postdata(); return $retHTML; } add_shortcode('list','print_post_name');

少しずつ階段を上がりたいんですが…投稿記事を取り扱う上でイモヅル的にマスターしなければいけないものが出てきてしまいました。

以下で順を追って解説をしていきます。

グローバル変数$postを使う宣言

4行目の「global $post;」ですが、いきなり厄介な奴が出てきてしまいました。

globalはPHPにおいてその関数内でも指定したグローバル変数を扱えるようにする命令です。

WordPressはたくさんのphpファイルがアチコチで活躍をしているのですが、その全体で横断して使っている変数がいくつかあります。

そういう特定の関数内に使用範囲を限定されずに、アチコチで横断して使われる変数をグローバル変数と言うのですが、「$post」もそのグローバル変数の一つでその名の通り投稿について格納をする変数です。

後で登場するテンプレートタグや関数ではこのグローバル変数を使用しなければいけないものが出てきますので、この関数内でも使えるようにグローバル変数「$post」を使う宣言をしています。

ちなみに、特定の関数内でのみ使う変数をローカル変数と言います。

get_postsで投稿を配列で取得する

5行目「$myposts=get_posts();」について説明をします。

get_postsWordPressの投稿を配列で取得する関数です。

get_posts($args)

取得する投稿の条件について様々なパラメータを指定することができますが、そのパラメータを配列として$argsに指定します。

今回は最もシンプルな例ということで、何のパラメータも指定せずに実行をしています。

この場合

  • 取得する投稿の数は5
  • 取得する順番は投稿日時の降順

というのが規定値となりますので、最新の記事から順番に5つ取得されます。

6~9行目のforeachで、その取得した記事の一つ一つについて繰り返し処理をするということになります。

the_titleで現在対象となっている記事タイトルを返す

順番が逆なのですが、8行目の「the_title(”,”,false)」について先に説明をします。

ここが、このプログラムの最終目的で記事タイトルを返す部分になっています。

WordPressにはテンプレートタグというものが用意されています。テンプレートタグはWordPress用に定義されている一部の関数で、WordPressに対して様々な指示をすることができるものです。

the_titleはテンプレートタグの一つで、その他の通り記事タイトルを表示または返します。

the_title($before, $after, $echo)

と書きまして、それぞれのパラメータは

  • $before: 記事タイトルの前に置くテキスト
  • $after: 記事タイトルの後ろに置くテキスト
  • $echo: 記事タイトルを表示(true)か返す(false)かを指定

を指定します。

今回は前後のテキストは不要なのでnull、記事タイトルを返したいので$echoはfalseを指定しています。

なお、the_titleはループ内(foreachなどの)での使用に限定されています。WordPressのテンプレートタグには、このようにループ内またはループ外など使用する場所が限定されている場合があるので、ご注意下さい。

setup_postdataで現在対象としている記事をセットする

前述のthe_titleですが、引数には「$post」が指定されていませんよね。

なのに、ちゃんとその繰り返しで$postに格納されている記事のタイトルを出力してくれます。

その立役者になっているのが、7行目の「setup_postdata($post);」です。

グローバル変数$postを引数としてsetup_postdata関数を実行することで、今対象にしている記事は$postなんだよとセットされる形になります。

これにより、the_titleなどのテンプレートタグがそのセットされている記事について取り出してきてくれるようになるということです。

グローバル変数$postをリセットする

最後になりますが、10行目「wp_reset_postdata();」です。

wp_reset_postdata関数はグローバル変数$postの内容をクリアにする関数です。

前述のとおり、$postはWordPress内の様々な場所で活躍している変数ですが、今回のプログラムでそれを上書きして使っている形になります。

それを使用する前に復元をします。

調べていくとなかなか奥が深くて難しいのですが…ひとまずやっておけ!という感じのようです。

実行結果

以上解説でしたが、いかがだったでしょうか?

このPHPプログラムをfunctions.phpに追加をした上でショートコード[[list]]をエディタに記載してプレビューをしますと

WordPressのショートコードで最新記事のタイトルを表示

このように最新記事の5件の記事タイトルが表示されました。

ようやくたどり着きましたね…!

まとめ

WordPressで最新の記事タイトルのいくつかを表示するショートコードを作成しました。

グローバル変数$post、投稿を配列で取得するget_posts関数、記事タイトルを返すテンプレートタグthe_title、記事データのセットをするsetup_postdata、$postをリセットするwp_reset_postdata関数…

マスターすべき要素が一気に増えたので、なかなか大変ではありますが、一つ一つマスターしていきたいですね。

次回は記事のパーマリンクと投稿日を取得する方法です。少しずつやれることを増やしていきたいと思います。

WordPressショートコードで記事のパーマリンクと投稿日を取得する方法
WordPressのショートコードで、数件の新着記事をアイキャッチ画像つきで表示する機能の実装を目指しています。今回はショートコードで記事のパーマリンクと投稿日を取得して表示をしていきます。

どうぞお楽しみに!

連載目次:WordPressのショートコードで新着記事を表示する

初心者でもWordPressショートコードを自作することを目標にして、数件の新着記事をアイキャッチ画像つきで表示する機能を題材として連載形式でショートコードの作り方をお伝えしていきます。
  1. WordPressショートコードとは何か、自作する際に注意すべき3つの事
  2. WordPressで最も簡単なショートコードの作り方を初心者向けにとっても丁寧に説明します
  3. WordPressで引数ありのショートコードを作成する方法をとっても丁寧に説明します
  4. WordPressのショートコードでforeach文で配列内のテキストを全て表示する方法
  5. WordPressショートコードで複数の記事タイトルを表示する方法
  6. WordPressショートコードで記事のパーマリンクと投稿日を取得する方法
  7. WordPressのショートコードで記事の抜粋・リンクつきの投稿の作成者も表示する
  8. WordPressのショートコードでアイキャッチ画像を表示する方法
タイトルとURLをコピーしました