WordPress

wordpressのショートコードの作成方法・使い方・注意点まとめ

code 1839877 1920 - wordpressのショートコードの作成方法・使い方・注意点まとめ

WordPressのショートコードの作成方法や、便利なショートコード一覧をご紹介します。

WordPressでショートコードを作成する時の注意点

important 2508605 640 - wordpressのショートコードの作成方法・使い方・注意点まとめ

ショートコードを作成する前に、3つだけ注意点をお伝えしておきます。

これを守らないと、後でよくわからないエラーを対処するという面倒なことになりますので、気をつけましょう。

①「functions.php」のバックアップを取っておく

まず、ショートコードは、「functions.php」の中に記述します。

そのため、記述したコードが1文字でも間違っていると、Webサイトが真っ白に表示されてしまいます。

Webサイトだけが真っ白になってしまうならまだ良いのですが、WordPressの管理画面まで真っ白になってしまうのです。

つまり、管理画面から一切修正はできなくなってしまうのです。ですので、ショートコードを作る際には、必ずバックアップを取っておきましょう。

これで、エラーが起こって真っ白な画面になった場合でもすぐに「functions.php」をアップロードして対処できます。

②子テーマを使う

続いて、「functions.php」はテーマの中に含まれているファイルです。

テーマファイルにある「functions.php」にショートコードを書き込んでいた場合、テーマをアップデートすると同時に「functions.php」の内容も上書きされてしまいます。

つまり、アップデートする前に書いたショートコードがすべて上書きされてしまうのです。そこで、「子テーマ」と呼ばれる仕組みを利用します。

子テーマを使うことで、アップデートしたときに影響を受けることはなくなります。

③コメントを使う

「コメントを使う」というのは、ショートコードやWordPressだけの話ではありません。プログラムを書くときには常に気を付けておいた方が良いことです。

作成しているときは良いのですが、作成してから時間が経ってしまうと自分が書いたコードであっても何のために書いたコードなのかわからなくなってしまいます。

「functins.php」は、Webサイト全体に影響を及ぼす場合があるので、素早い判断と修正が求められます。

コメントを記述しておくことで、何のために書いたコードなのか一目でわかり、時間をかけずに修正することができます。

コメントには、最低でも「どんな機能を付けたのか」くらいは書いておくようにしましょう。

WordPressでのショートコードの作成方法

music 2471119 640 - wordpressのショートコードの作成方法・使い方・注意点まとめ

ここからは、ショートコードの作成方法について紹介します。必ず先ほどの注意点を理解した上で作成するようにしてくださいね。

ショートコードを使うページで「add_shortcode」と記述して関数を呼び出して表示させるような仕組みになっています。

定型文を表示するショートコード

定型文を呼び出すショートコードは、以下のようになります。

下のコードの「ショートコード名」と「関数名」を変更するだけで、後はコピペしていただければOKです。

「関数名」と「ショートコード名」は半角英数字の任意の名前でOKです。ただし、それぞれは別の名前を付けるようにしましょう。

以下のように「functions.php」に記述すると、定型文を表示させることができます。

投稿ページや固定ページの中で定型文を表示させたい場所に、以下のように記述します。

記述する場合は、必ずWordPressの投稿ページの「テキストエディタ」で記述するようにしましょう。

ショートコードを呼び出す記述した場所に、以下のように表示されます。

PHPファイルを利用したショートコード

ここからはPHPファイルを利用したショートコードの呼び出し方を、ご紹介します。テーマフォルダの中などに自作したPHPファイルがあるという前提でお伝えします。

まず、定型文を表示させるときと同様に「functions.php」に下記のコードを記述しましょう。

呼び出したい場所で以下のコードを記述します。

これで「my-template.php」というファイルを呼び出すことができます。

ショートコードの使い方

laptop 2557576 640 - wordpressのショートコードの作成方法・使い方・注意点まとめ

ここからは、具体的なショートコードの使い方を紹介していきます。

引数の使い方

引数を使うことで、定型文の文字列を場合に応じて変更することができます。「{$num }」の部分が引数に当たります。

まずは、以下のコードを「functions.php」に記述しましょう。

ショートコードを表示させたい場所で以下のように記述します。

すると、以下のような実行結果になります。

このように記事の投稿ページに記述した数字が、実行結果で表示されるようになります。複数の引数を渡すことも可能です。

複数の引数を渡す場合は以下のコードを「function.php」に記述します。

記事の投稿ページには、以下のように記述します。

実行結果は以下のようになります。

ショートコードを使って画像のURLを簡単に指定する方法

ここからは、WordPressでアップロードした画像のURLを取得する方法を紹介します。

例えば、「ハミングバード」や「ストーク」などのテーマを使って吹き出しショートコードを利用してアイコンの画像を取得する場合に便利です。

まずは画像をアップロードしましょう。画像は、管理画面の左側のメニューから「新規追加」をクリックしてアップロードできるページを表示させます。

upload - wordpressのショートコードの作成方法・使い方・注意点まとめ

「ここにファイルをドロップ」とある場所にアップロードしたい画像をドラッグアンドドロップするか、「ファイルを選択」をクリックして画像をアップロードしましょう。

画像をアップロードすると、画面の下の方にアップロードした画像のサムネイルが表示されます。その右側にある「編集」をクリックします。

picture upload - wordpressのショートコードの作成方法・使い方・注意点まとめ

すると、下のように画像を編集できるページに移動します。このページの中の「ファイルのURL」という項目の下に表示されている画像のURLをコピーします。

picture custom - wordpressのショートコードの作成方法・使い方・注意点まとめ

これで画像のURLを取得することができます。

ショートコードを使って固定ページでURLを動的表示する方法

WordPressの投稿ページや固定ページでは、PHPを実行することができないようになっています。

もし、投稿ページや固定ページでPHPを実行したい場合はショートコードを使うようにしましょう。まず、「functions.php」に以下のコードを記述します。

投稿ページや固定ページの中の指定したい場所で以下のように記述します。これは、投稿ページの「ビジュアル」ではなく、「テキスト」となっている部分に記述しましょう。

 

ショートコードが使えない(そのまま表示される)時の対処法

mistake 1966448 640 - wordpressのショートコードの作成方法・使い方・注意点まとめ

ショートコードを使えるようにしていても、投稿を表示したときに記事の中にショートコードがそのまま表示されてしまうことがあります。

ここでは、そのようなことが起こったときの対処法を紹介します。

原因:functions.phpに記述していない

まず、原因として考えられるのは、「ショートコードに対応するコードをfunctions.phpに記述していない」ということです。

先ほども述べたように、ショートコードを使うためには対応するコードを「functions.php」に記述する必要があります。

ショートコードがうまく動作せず、そのまま表示されていた場合は、確認してみましょう。

原因:一部分が全角になっている

「functions.php」は正しく記述されているのに、そのまま表示される場合は、一部分が全角になっている可能性があります。

特に投稿部分に記述する「[ ]」が全角になっていることが多いです。特に、ネット上に載っているコードをコピペして使う場合は「半角になっているか」よく確認しましょう。

WordPressのショートコードに関するまとめ

以上、いかがでしたか?

今回は、「ショートコード」についてお伝えしました。ショートコードを使うと、わざわざ長い文章やコードを打つ必要がなくなるので非常に便利です。

必要であれば、導入してみるのがおすすめです。最後まで読んでいただき、ありがとうございました。