WordPressで文字を表示するショートコードを作成した時の注意点【echoで出力しない】

WordPressで文字や文章を表示するショートコードを作成した場合、その文字や文章の出力に「echo」を使わない。

出力には「return」を使う。

echoを使っても表示はされますが、表示場所が意図しないところになってしまいます。

ショートコードで「echo」を使うと記事の先頭に表示される

例えば、下記のようなショートコードを自作して、記事の中間にショートコードを記述したとします。

function hello_output_html() {
  $html_content = '<p>こんにちは、これはテストです</p>';
  echo($html_content);
}
add_shortcode('hello_output', 'hello_output_html');

プレビューなどで記事を表示すると、ショートコードで出力する文章は、記事の一番最初に表示されてしまいます。

ショートコードを記述したところで、文章を表示したいですよね。

ショートコードで「return」を使うと記述したところに表示される

echoではなく「return」を使うと、ショートコードを記述したところに文字が表示されます。

function hello_output_html() {
  $html_content = '<p>こんにちは、これはテストです</p>';
  return($html_content);
}
add_shortcode('hello_output', 'hello_output_html');

【まとめ】ショートコードでは「echo」と「return」で出力位置が異なる

自作ショートコードで文字を出力するときは「return」を使えば指定の場所に文字を表示できます。

echoを使うと意図しないところに表示されてしまうので注意が必要です。