WordPress|ショートコードの作成方法と引数の使い方

WordPressカスタマイズ

WordPressショートコード作成方法と引数使い方について解説します。

ショートコードを使うと投稿や固定ページ、ウィジェットなどでPHPを実行させることができます。

様々なショートコードが使えるようになるプラグインもありますが、自分の思ったような動作をしてくれないこともあるかと思います。

そのような場合はショートコードを自作してしまいましょう。

難しいイメージがあるかも知れませんが、簡単なものから順に試していけば大丈夫です。

スポンサーリンク

WordPressのショートコード作成方法と使い方

コード

WordPressのショートコードについて詳しくない方はメリットとデメリットを確認しておいてください。

WordPressのショートコードとは何なのかをメリットやデメリットを交えながら解説します。

それではショートコードの作り方と使い方を解説していきます。

文字列を返すショートコード

まずは決められた文字を返すだけのシンプルなショートコードを作成します。

1~3行目で「おはよう」という文字列を返す「sampleFunc」という関数を作成しています。

そして4行目で「add_shortcode」というショートコードを追加する関数を使って、「sample」という名前のショートコードが使われたら「sampleFunc」を実行するように設定しています。

add_shortcodeの第一引数はショートコードの名称、第二引数は呼び出す関数です。

上記をfunctions.phpに書いたら投稿画面で使ってみましょう。

保存して記事を確認しに行くと「おはよう」と表示されているはずです。

WordPressのショートコード作成(文字列を返す)

もし文字列を「おはよう」から「こんにちは」に変更したくなったら、返す文字列の部分だけ修正すればOKです。

こうするとショートコードを利用している箇所全てが「こんにちは」に変わってくれます。

WordPressのショートコード作成(文字列を返す2)

変更の多そうな共通部分をショートコードにしておくと修正があった時に楽です。

HTMLを返すショートコード

続いてはHTMLコードを返すショートコードを作成します。

文字列を返す場合と同じ要領です。

文字色が赤のスタイルが適用された「おはよう」が表示されます。

WordPressのショートコード作成(HTMLを返す)

初心者のやりがちなミス

文字列に「’(シングルクォーテーション)」や「”(ダブルクォーテーション)」が含まれている場合は注意してください。

全体を囲むクォーテーションと、中にあるクォーテーションが同じだとエラーになります。

例えば、下記はエラーになります。

ただし、中のクォーテーションの直前にバックスラッシュ(エンマーク)を入れてエスケープすれば問題ありません。

以下はエラーになりません。

Javascriptを返すショートコード

ショートコードはJavascriptも返せます。

記事を確認すると「おはよう」というアラートが表示されるはずです。

WordPressのショートコード作成(Javascriptを返す)

Google AdSenseのJavascriptコードをショートコードに設定しておくと便利です。

WordPressの記事中にグーグルアドセンス広告を表示するプラグインはいくつかあります。 しかし、プラグインをたくさん入れ過ぎるとペ...

WordPressの関数を使ったショートコード

WordPressには様々な関数が用意されていますが、それらをショートコードの中で使うこともできます。

上記は「get_bloginfo」を使ってブログ情報を取得しています。

get_bloginfoの第一引数には取得したい情報を表すキーワードを指定します。

get_bloginfoにnameが指定されているのでサイトのタイトルが表示されました。

WordPressのショートコード作成(WordPressの関数を使用)

引数のあるショートコード

これまでは固定された文字を返すだけでしたが、ショートコードに引数を渡して返す内容を変更することもできます。

上記は渡された値を10倍にして返すショートコードです。

1行目の「$atts」で引数を受け取ります。

そして、2~4行目ではshortcode_attsで引数の初期値を設定しつつ、extractでそれらを変数として利用できるように設定しています。

3行目の「’num’ => 0」は、numが変数名、0が初期値を表しています。

numという名前の引数が渡されなかったら値を0として扱うという意味です。

引数のあるショートコードの使い方は、ショートコード名の後ろにスペースを入れて変数名と値を指定します。

引数の値はクォーテーションで囲まなくても構いませんが、スペースを含む際には必要です。

【その3】のように引数を渡さない場合は設定された初期値が適用され、今回はnumを0として扱います。

表示内容を確認してみましょう。

WordPressのショートコード作成(引数あり)

【その1】と【その2】は100に10をかけた値1000が、【その3】は0に10をかけた値0が表示されています。

また、ショートコードの引数は好きな数だけ追加できます。

省略した引数には初期値が使われます。

WordPressのショートコード作成(引数複数)

囲み型のショートコード

ショートコードはHTMLのように文字列を囲んで使うことも可能です。

ショートコードで囲った文字列は1行目の第二引数「$text」に入ります。

囲まれた文字が無い場合「$text」は空文字になります。

WordPressのショートコード作成(囲み型)

ウィジェットでのショートコードの使い方

作成したショートコードはウィジェットで使うこともできます。

ウィジェットでショートコードを利用するにはfunctions.phpに以下の1行を追加します。

使い方は投稿本文と同じです。

以下はカスタムHTMLとテキストのウィジェットで使用した例です。

ショートコードをウィジェットで使用

ショートコードをウィジェットで使った結果

テンプレートでのショートコードの使い方

テンプレートの中でもショートコードを使うことができます。

テンプレートでショートコードを利用するにはdo_shortcode関数を使って、引数にショートコードを渡します。

まとめ

WordPressのショートコード作成方法と引数の使い方について解説してきました。

ショートコードは引数を与えてやることで処理する内容を変更できるので便利です。

記事中だけでなくウィジェットやテンプレートでも使用することができるので、作ったショートコードは様々な場所で使い回すことが可能です。

ショートコードの作成方法と使い方をマスターして作業を単純化したり凝った内容のページを作成したりしてみてください。

スポンサーリンク

フォローする