【WordPress】ショートコードを自作し呼び出す方法｜get_postとadd_shortcodeの使い方(最新の投稿の日付とタイトルを取得する）

wordpress-prograshi（プロぐらし）-kv WordPress
記事内に広告が含まれていることがあります。

WordPressでオリジナルのブロックやウィジェットを自分で作成して、記事の中で使いまわして呼び出したいことがあります。

そんなときはショートコードを自作するのがとても手っ取り早く簡単です。

特に、ショートコードはPHPで記述できるので、投稿の一部の情報のみを抜き出すといった処理にとても向いています。また、通常のWordPressエディタとElementorのどちらでも簡単に呼び出せるのも大きなポイントです。

ここでは、ショートコードを自作する方法として、最新の投稿の日付とタイトルのみを取得する方法をまとめています。


ショートコード作成と使用の流れ

オリジナルのショートコードを作成し、呼び出す流れは以下になります。

ショートコード作成と使用の流れ
  1. 処理を記述した関数を作成する（function）
  2. ショートコードを登録する（add_shortcode）
  3. ショートコードを呼び出す（[ショートコード名]）

たったの3ステップで完了します。


コードの全体像

ここで実例として以下の画像のように、最新の投稿とタイトルを取得して表示するショートコードを作成します。


コードの全体像は以下になります。

//最新の投稿のタイトルと日付を取得するショートコードを登録//
add_shortcode('my-latest-post', 'get_latest_post_shortcode');

function get_latest_post_shortcode() {
  $latest_post = get_posts(array(
    'post_type' => 'post', // 必要に応じてポストタイプを変更する
    'order' => 'DESC',
    'numberposts' => 1,
  ));

  if ($latest_post) {
    $post = $latest_post[0];
    $post_title = $post->post_title;
    $post_date = get_the_date('Y.m.d', $post->ID); // 年月日の場合は'Y年m月d日'とする

    $output = '<div class="my-latest-post-shortcode">';
	  $output .= '<p>' . $post_date . '</p>';
      $output .= '<h3>' . $post_title . '</h3>';
    $output .= '</div>';

    return $output;
  } else {
    return ''; //最新の投稿がない場合は何も表示しない
  }
}


以下で詳細を解説していきます。

! function_exists

コードをわかりやすく解説するため、ここでは登録したコードが存在するかどうかを確認する、if ( ! function_exists()の処理は省いています。必要に応じて追記してください。

//最新の投稿のタイトルと日付を取得するショートコードを登録//
if ( ! function_exists( 'my_shortcode' ) ) {
    add_shortcode('my-latest-post', 'get_latest_post_shortcode');

    function get_latest_post_shortcode() {
        $latest_post = get_posts(array(
            'post_type' => 'post', // 必要に応じてポストタイプを変更する
            'order' => 'DESC',
            'numberposts' => 1,
        ));

        if ($latest_post) {
            $post = $latest_post[0];
            $post_title = $post->post_title;
            $post_date = get_the_date('Y.m.d', $post->ID); // 年月日の場合は'Y年m月d日'とする

            $output = '<div class="my-latest-post-shortcode">';
            $output .= '<p>' . $post_date . '</p>';
            $output .= '<h3>' . $post_title . '</h3>';
            $output .= '</div>';

            return $output;
        } else {
            return ''; //最新の投稿がない場合は
        }
    }
}



処理を記述した関数を作成する（function）

まずは、処理を記述した関数を作成します。

function 関数名() {
  ショートコードとして実行する処理
}


ここでは、最新の投稿（1件のみ）を取得してdiv, p, h3タグで囲って出力する処理を記述します。

function get_latest_post_shortcode() {
  $latest_post = get_posts(array(
    'post_type' => 'post', // 必要に応じてポストタイプを変更する
    'order' => 'DESC',
    'numberposts' => 1,
  ));

  if ($latest_post) {
    $post = $latest_post[0];
    $post_title = $post->post_title;
    $post_date = get_the_date('Y.m.d', $post->ID); // 年月日の場合は'Y年m月d日'とする

    $output = '<div class="my-latest-post-shortcode">';
	  $output .= '<p>' . $post_date . '</p>';
      $output .= '<h3>' . $post_title . '</h3>';
    $output .= '</div>';

    return $output;
  } else {
    return ''; //最新の投稿がない場合は何も表示しない
  }
}


get_postsメソッド

WordPressの中でもとにかく便利なメソッドの一つに「get_posts」があります。get_postsを使うと投稿の一覧を取得することができます。

その時に、取得する記事の数やカテゴリー、取得順序などを指定することができます。

       $latest_post = get_posts(array(
            'post_type' => 'post', // 必要に応じてポストタイプを変更する
            'order' => 'DESC',
            'numberposts' => 1,
        ));
  • post_type：投稿を取得する場合は「post」とする。固定ページを取得した場合は「page」とする。
  • order: 取得する日付の順番を指定する。「DESC」で降順を指定（最新のものから取得）
  • numberposts: 取得する記事の数（最新の投稿のみ欲しいので1とする）


上記のように指定して、最新の投稿を１つ取得し、変数「latest_post」に代入しています。


（参考）WordPoress公式： get_posts


post_titleプロパティ

取得した投稿のタイトルはpost_titleプロパティで取得することができます。

  if ($latest_post) {
    $post = $latest_post[0];
    $post_title = $post->post_title;
  }


投稿は配列として取得して「$latest_post」に格納しているので、これの１番目を指定することで、記事のオブジェクトを取得できます。

記事のオブジェクトを「$post」に格納して、「post_title」プロパティを指定することで取得したタイトル名を変数「$post_title」に格納しています。

MEMO

PHPでプロパティを指定するときは「->」を使います。

オブジェクト->プロパティ名


get_the_dateメソッド

get_the_dateメソッドを使うと記事の日付をフォーマットを指定して取得することができます。

get_the_date( 'フォーマット', 記事のID );

第１引数でフォーマットを指定し、第２引数で対象となる記事のIDを指定します。

  • フォーマット：'Y年m月d日' や 'Y.m.d' など。
  • 記事のID：$post->ID

記事は「$post」という変数に格納してあるので、プロパティ「ID」を指定して、記事のIDを取得しています。


HTMLを作成し、returnで戻す

最後に、取得した日付「$post_date」とタイトル「$post_title」をHTMLタグの中で表示して、returnで返します。

    $output = '<div class="my-latest-post-shortcode">';
	  $output .= '<p>' . $post_date . '</p>';
      $output .= '<h3>' . $post_title . '</h3>';
    $output .= '</div>';

    return $output;


MEMO

「.=」を使うと、元の変数（あるいは文字列）の後ろに指定したコードを貼り付けることができます。(結合代入)

$変数 .= 追記する文字列


投稿がない場合はなにもしない

投稿がない場合は何も表示しない処理を追加します。

  if ($latest_post) {
    $post = $latest_post[0];
    $post_title = $post->post_title;
    $post_date = get_the_date('Y.m.d', $post->ID); // 年月日の場合は'Y年m月d日'とする

    $output = '<div class="my-latest-post-shortcode">';
	  $output .= '<p>' . $post_date . '</p>';
      $output .= '<h3>' . $post_title . '</h3>';
    $output .= '</div>';

    return $output;
  } else {
    return ''; //最新の投稿がない場合は何も表示しない
  }


これで、ショートコードで呼び出すHTMLの部分が完成です。


ショートコードを登録する（add_shortcode）

次に、作成した関数をadd_shortcodeフックを使ってショートコードに登録します。

add_shortcode('ショートコード名', '呼び出す関数名')


ショートコードの名前も呼び出す関数名のどちらも文字列として記述します。



ここでは、ショートコード名を「my-latest-post」、呼び出す関数名を「get_latest_post_shortcode」としています。

add_shortcode('my-latest-post', 'get_latest_post_shortcode');


つまり、記事の中で「my-latest-post」を呼び出せば、「get_latest_post_shortcode」の実行結果を表示するという処理です。


ショートコードを呼び出す（[ショートコード名]）

ショートコードの登録が終わったので、実際に記事の中で作成したショートコードを呼び出します。呼び出すときは、ショートコード呼び出し用のブロックの中で、ショートコード名を[ ]で囲み記述します。。

[ショートコード名]


エディタで「ショートコード」と検索するとブロックが出てきます。


この中に呼び出したいショートコードを記述します。


以上で完了です。

無事に最新の投稿の日付とタイトルのみを表示することができました。


おまけ（CSS）

最後にCSSを調整して完了です。

style.cssや追加CSSなど、適当なところにコードを追記します。

/*ニュースのショートコード整形*/
.my-latest-post-shortcode{
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
	font-size: 20px;
	margin-top: -30px;
}


.my-latest-post-shortcode h3{
  font-weight: 400;
  margin-top: -18px;
	font-size: 24px;
}


以上で完了です。

タイトルとURLをコピーしました