WordPressのショートコードの作成方法や、便利なショートコード一覧をご紹介します。
CONTENTS
WordPressでショートコードを作成する時の注意点
ショートコードを作成する前に、3つだけ注意点をお伝えしておきます。
これを守らないと、後でよくわからないエラーを対処するという面倒なことになりますので、気をつけましょう。
①「functions.php」のバックアップを取っておく
まず、ショートコードは、「functions.php」の中に記述します。
そのため、記述したコードが1文字でも間違っていると、Webサイトが真っ白に表示されてしまいます。
Webサイトだけが真っ白になってしまうならまだ良いのですが、WordPressの管理画面まで真っ白になってしまうのです。
つまり、管理画面から一切修正はできなくなってしまうのです。ですので、ショートコードを作る際には、必ずバックアップを取っておきましょう。
これで、エラーが起こって真っ白な画面になった場合でもすぐに「functions.php」をアップロードして対処できます。
②子テーマを使う
続いて、「functions.php」はテーマの中に含まれているファイルです。
テーマファイルにある「functions.php」にショートコードを書き込んでいた場合、テーマをアップデートすると同時に「functions.php」の内容も上書きされてしまいます。
つまり、アップデートする前に書いたショートコードがすべて上書きされてしまうのです。そこで、「子テーマ」と呼ばれる仕組みを利用します。
子テーマを使うことで、アップデートしたときに影響を受けることはなくなります。
③コメントを使う
「コメントを使う」というのは、ショートコードやWordPressだけの話ではありません。プログラムを書くときには常に気を付けておいた方が良いことです。
作成しているときは良いのですが、作成してから時間が経ってしまうと自分が書いたコードであっても何のために書いたコードなのかわからなくなってしまいます。
「functins.php」は、Webサイト全体に影響を及ぼす場合があるので、素早い判断と修正が求められます。
コメントを記述しておくことで、何のために書いたコードなのか一目でわかり、時間をかけずに修正することができます。
コメントには、最低でも「どんな機能を付けたのか」くらいは書いておくようにしましょう。
WordPressでのショートコードの作成方法
ここからは、ショートコードの作成方法について紹介します。必ず先ほどの注意点を理解した上で作成するようにしてくださいね。
ショートコードを使うページで「add_shortcode」と記述して関数を呼び出して表示させるような仕組みになっています。
定型文を表示するショートコード
定型文を呼び出すショートコードは、以下のようになります。
下のコードの「ショートコード名」と「関数名」を変更するだけで、後はコピペしていただければOKです。
|
1 2 3 4 5 6 7 |
function 関数名() { return "ここに定型文を記述します。"; } add_shortcode('ショートコード名', '関数名'); |
「関数名」と「ショートコード名」は半角英数字の任意の名前でOKです。ただし、それぞれは別の名前を付けるようにしましょう。
以下のように「functions.php」に記述すると、定型文を表示させることができます。
|
1 2 3 4 5 6 7 |
function shortcode_test() { return "ここに定型文を記述します。"; } add_shortcode('shortcode_01', 'shortcode_test'); |
投稿ページや固定ページの中で定型文を表示させたい場所に、以下のように記述します。
記述する場合は、必ずWordPressの投稿ページの「テキストエディタ」で記述するようにしましょう。
|
1 |
[shortcode_01] |
ショートコードを呼び出す記述した場所に、以下のように表示されます。
|
1 |
ここに定型文を記述します。 |
PHPファイルを利用したショートコード
ここからはPHPファイルを利用したショートコードの呼び出し方を、ご紹介します。テーマフォルダの中などに自作したPHPファイルがあるという前提でお伝えします。
まず、定型文を表示させるときと同様に「functions.php」に下記のコードを記述しましょう。
呼び出したい場所で以下のコードを記述します。
|
1 |
[myphp file='my-template'] |
これで「my-template.php」というファイルを呼び出すことができます。
ショートコードの使い方
ここからは、具体的なショートコードの使い方を紹介していきます。
引数の使い方
引数を使うことで、定型文の文字列を場合に応じて変更することができます。「{$num }」の部分が引数に当たります。
まずは、以下のコードを「functions.php」に記述しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function shortcode_func($arg) { extract(shortcode_atts(array( 'num' => '0' ), $arg)); return "数値は{$num}です。"; } add_shortcode('sample', 'shortcode_func'); |
ショートコードを表示させたい場所で以下のように記述します。
|
1 2 3 |
[sample] [sample num=5] |
すると、以下のような実行結果になります。
|
1 2 3 |
数値は0です。 数値は5です。 |
このように記事の投稿ページに記述した数字が、実行結果で表示されるようになります。複数の引数を渡すことも可能です。
複数の引数を渡す場合は以下のコードを「function.php」に記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function shortcode_func($arg) { extract(shortcode_atts(array( 'num' => '0', 'num2' => '0', 'num3' => '0' ), $arg)); return "数値は{$num}と{$num2}と{$num3}です。"; } add_shortcode('sample', 'shortcode_func'); |
記事の投稿ページには、以下のように記述します。
|
1 |
[sample num=5 num2=10 num3=15] |
実行結果は以下のようになります。
|
1 |
数値は5と10と15です。 |
ショートコードを使って画像のURLを簡単に指定する方法
ここからは、WordPressでアップロードした画像のURLを取得する方法を紹介します。
例えば、「ハミングバード」や「ストーク」などのテーマを使って吹き出しショートコードを利用してアイコンの画像を取得する場合に便利です。
まずは画像をアップロードしましょう。画像は、管理画面の左側のメニューから「新規追加」をクリックしてアップロードできるページを表示させます。
「ここにファイルをドロップ」とある場所にアップロードしたい画像をドラッグアンドドロップするか、「ファイルを選択」をクリックして画像をアップロードしましょう。
画像をアップロードすると、画面の下の方にアップロードした画像のサムネイルが表示されます。その右側にある「編集」をクリックします。
すると、下のように画像を編集できるページに移動します。このページの中の「ファイルのURL」という項目の下に表示されている画像のURLをコピーします。
これで画像のURLを取得することができます。
ショートコードを使って固定ページでURLを動的表示する方法
WordPressの投稿ページや固定ページでは、PHPを実行することができないようになっています。
もし、投稿ページや固定ページでPHPを実行したい場合はショートコードを使うようにしましょう。まず、「functions.php」に以下のコードを記述します。
|
1 2 3 4 5 6 7 |
function shortcode_url() { return get_bloginfo('url'); } add_shortcode('url', 'shortcode_url'); |
投稿ページや固定ページの中の指定したい場所で以下のように記述します。これは、投稿ページの「ビジュアル」ではなく、「テキスト」となっている部分に記述しましょう。
|
1 |
ショートコードが使えない（そのまま表示される）時の対処法
ショートコードを使えるようにしていても、投稿を表示したときに記事の中にショートコードがそのまま表示されてしまうことがあります。
ここでは、そのようなことが起こったときの対処法を紹介します。
原因：functions.phpに記述していない
まず、原因として考えられるのは、「ショートコードに対応するコードをfunctions.phpに記述していない」ということです。
先ほども述べたように、ショートコードを使うためには対応するコードを「functions.php」に記述する必要があります。
ショートコードがうまく動作せず、そのまま表示されていた場合は、確認してみましょう。
原因：一部分が全角になっている
「functions.php」は正しく記述されているのに、そのまま表示される場合は、一部分が全角になっている可能性があります。
特に投稿部分に記述する「[ ]」が全角になっていることが多いです。特に、ネット上に載っているコードをコピペして使う場合は「半角になっているか」よく確認しましょう。
WordPressのショートコードに関するまとめ
以上、いかがでしたか？
今回は、「ショートコード」についてお伝えしました。ショートコードを使うと、わざわざ長い文章やコードを打つ必要がなくなるので非常に便利です。
必要であれば、導入してみるのがおすすめです。最後まで読んでいただき、ありがとうございました。
