【超初心者】ワードプレスのショートコードの使い方

【超初心者】ワードプレスのショートコードの使い方

 ワードプレスには、ショートコードという機能があります。

今回、ショートコードというものを使う機会がありましたので、自分の備忘録として記録しています。(多くの誤りを含んでいる可能性があります。)

 技術的な理解を伴わずにしていますので、私のような超初心者の方向けの内容になります。

あなたが、ショートコードについてしっかりと体系的に学びたいと考えているなら、上級者の方の記事を参考にしてください。

WordPressのショートコードって?

wordpress.com では

A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode

(Google翻訳)
ショートコードとは、WordPress固有のコードで、少しでも手間をかけずに素晴らしいことをすることができます。ショートコードは、ファイルを埋め込み、通常は1行に複雑で醜いコードをたくさん必要とするオブジェクトを作成することができます。ショートコード=ショートカット。

と説明されています。

 私の理解は、「簡単に長いコードを呼び出すことができる」「PHPを使ってオリジナルの機能を作ることができる」というイメージでとらえています。

 コードの呼び出しは、HTMLであったり、JavaScriptなどのコードを記事内に出力することもできます。
PHPを使ったオリジナル機能とは、記事内に自分でプログラムした動的な内容を出力することができます。

 投稿支援機能

 オリジナル機能追加

 実際に作成してみることで、できることのイメージができてくるのではないでしょうか。

AddQuicktagとは違うの?

 Wordpressで投稿を支援するプラグインに「AddQuicktag」というものがあります。

これは、あらかじめユーザーが登録しておいたHTMLコードなど(Javascript、文章)をテキストエディタに表示されるボタンに登録して、記事の編集中にボタンひとつで簡単に呼び出すことができるプラグインです。

 ショートコードを知ったとき、このAddQuicktagとの違いがよくわかりませんでした。
ネット上で初心者向けのショートコードの例では、記事内に ’こんにちは’ などの文字列を表示するという例が多かったので、このような解釈になってしまったのだと思います。

ショートコードの作成例としては、

 例えば、当サイトではAddQuicktagを使って以下のコードを呼び出して使用しています。

<span class="green_line"></span>

このコードを毎回書く面倒さや、CSSクラスを覚える必要がなくなるので、記事編集中にはとても助かっています。

これと同じことをショートコードを使って実現することもできます。

他には、記事を開くたびにランダムな数字を表示するなどという動的なコンテンツを表示することもできます。

イメージとしては

「ショートコード」
||
「AddQuicktagでできること」 + 「動的な内容を簡単に記事などに挿入できる」

ただのHTMLを挿入するだけでも利点がある

 ショートコードは、AddQuicktagでできることはすべてできます。

しかし、ショートコードを作る手間とAddQuicktagでコードを登録する手間を考えると、AddQuicktagに登録する方が簡単です。

ですから、簡単なHTMLコードやDIV要素にClass名を付けたタグなどを登録するだけならば、AddQuicktagを利用するべきです。

それぞれの違いは、

AddQuicktag

 単純に記事内にコードを貼りつける。編集画面で手入力したときと同じ状況。

ショートコード

 編集画面では、[]で括られたショートコードが表示されている。
貼りつけたコードは、記事を表示したタイミングで呼び出されてページが生成される。

それぞれの特性から、AddQuicktagとショートコードで同じコードを呼び出した場合でも、ショートコードで呼び出した方が良い場合があります。

 例えば、ある共通する内容の10記事だけに、ある商品の広告タグを貼りつけていたとします。
この商品の取扱いをやめて、別の商品の広告タグに変更したい場合、AddQuicktagで貼りつけた10記事については、すべて手作業で広告を変更する必要があります。

 対して、ショートコードで同様のことをする場合、作成したショートコードを編集するだけで、10記事に変更が反映されるというメリットがあります。

 デメリットとしては、作成するのに少し時間がかかることと、functions.phpを編集する必要があるので初心者には少し敷居が高いということが挙げられます。

 あなたが実現させたい内容によって、どちらが適しているのかを考えてから、方法を検討する必要がありそうです。