初心者向け！WordPressでショートコードを使う方法と活用術40選

WordPressはウェブサイトの構築や管理を非常にシンプルにしてくれるプラットフォームとして多くの人に利用されています。その中でも便利な機能の一つが「ショートコード」です。ショートコードは、ページや投稿の内容に特定の機能やデザインを簡単に追加できる機能で、ユーザーが手軽にプロフェッショナルなサイトを作成する手助けをしてくれます。今回は、初心者向けにショートコードを使う方法とその活用術を詳しく解説していきます。

ショートコードの基本
WordPressで利用可能なショートコード例
ショートコード活用のテクニック
ショートコード使用時の注意点
おすすめショートコードプラグイン
1. 1. Shortcodes Ultimate
2. 2. ARForms

ショートコードの基本

ショートコードとは？

ショートコードとは、[shortcode]のように括弧で囲った短いコードのことです。このコードが埋め込まれた部分に、高度な機能やスタイルが適用される仕組みになっています。例えば、ギャラリーの作成や、特定のボタンを表示するなど、さまざまな目的で使用できます。

使い方の基本

ショートコードを使用するためには、管理画面の投稿や固定ページの編集画面で、直接テキストエディタにショートコードを入力します。例えば、特定のギャラリーを表示したい場合、というショートコードを入力するだけで簡単にギャラリーが挿入されます。

ショートコードの種類

ショートコードには、プラグインやテーマによって用意されているものと、自分で作成するカスタムショートコードがあります。多くのプラグインは、特定の機能をショートコードとして提供しており、ユーザーはそれを活用して豊富なコンテンツを作成することができます。

WordPressで利用可能なショートコード例

1. ギャラリーを埋め込む

は、WordPressのデフォルトのショートコードの一つです。写真を選択するだけで、その写真を一覧表示するギャラリーを手軽に作成できます。

2. ボタンを作成する

多くのテーマやプラグインは、カスタムボタンを作成するショートコードを提供しています。例えば、[button color="blue" link="https://example.com"]Click Here[/button]のような形式でボタンを作成できます。

3. Googleマップを表示

Googleマップを埋め込みたいときは、[googlemap address="Tokyo, Japan" width="100%" height="300px"]のようなショートコードが利用可能です。プラグインによっては住所を入力するだけでマップが表示されます。

ショートコード活用のテクニック

1. パラメータを使ってカスタマイズ

ショートコードはパラメータを使って柔軟にカスタマイズできます。たとえば、ギャラリーの場合、のようにすると、特定の画像を3列で、ミディアムサイズで表示するといった指定が可能です。

2. カスタムショートコードの作成

カスタムショートコードを作成することで、自分だけのユニークなコンテンツをページに挿入することができます。functions.phpファイルにカスタムコードを書き込めば、例えば特定のHTMLブロックを繰り返し使いたい時に便利です。

function my_custom_shortcode() {
    return '<div class="custom-container">This is a custom shortcode!</div>';
}
add_shortcode('myshortcode', 'my_custom_shortcode');

この例では、[myshortcode]と入力することで、Custom Shortcodeが表示されます。