WordPressでショートコードを追加する方法（初心者向けガイド）

WordPressのショートコードに圧倒されるというユーザーの声はよく聞かれます。

これらの短いコードスニペットは、最初は分かりにくいかもしれませんが、正しく使用すればWordPressの最も強力な機能の1つです。

お問い合わせフォーム、ギャラリー、カスタムレイアウトを追加したい場合でも、ショートコードはコードに触れることなく複雑な機能を簡単に挿入する方法を提供します。

この初心者向けガイドでは、WordPressにショートコードを追加する方法、配置場所、および最適な使い方を具体的にご紹介します。

WordPressに全く慣れていない方でも理解できるよう、すべてをシンプルでわかりやすいステップに分解しました。

ショートコードとは？

ショートコードは、WordPressの投稿、固定ページ、サイドバーウィジェットに動的なコンテンツを追加するためのコードショートカットです。次のように角括弧の中に表示されます。

[myshortcode]

ショートコードをより深く理解するために、まずショートコードが追加された背景を見てみましょう。

WordPressには、悪意のあるコードの挿入を防ぐためにすべてのコンテンツを処理するセキュリティシステムがあります。投稿に基本的なHTMLを記述することはできますが、WordPressはその領域でPHPコードを実行しないため、コンテンツエディタ内で直接PHPコードを記述することはできません。

ここでShortcode APIが登場します。

基本的に、これにより開発者はコードを関数内に追加し、その関数をWordPressにショートコードとして登録できるため、ユーザーはコーディング知識がなくても簡単に使用できます。

WordPressがショートコードを見つけると、それに関連付けられたコードが自動的に実行されます。

一般的なショートコードの使用例（簡単な例）

ショートコードを使用してサイトに追加できる一般的な機能の一部を次に示します。

• 画像ギャラリーとスライダー：複数の画像をきれいにレイアウトして表示します（例：[envira-gallery id="456"]）
• ボタン：ページや商品にリンクするクリック可能なボタンを追加します（例：[button url="https://example.com" text="今すぐ購入"]）
• Googleマップ：サイト上に直接場所を表示します（例：[google_map address="123 Main St"]）
• ソーシャルメディアフィード：InstagramやFacebookなどのプラットフォームからのライブ投稿を表示します
• 再利用可能なコンテンツ：サイト全体に免責事項や著者プロフィールなどのコンテンツを追加します

WordPressの投稿やページにショートコードを簡単に追加する方法を見てみましょう。

下のリンクを使用して、希望する方法にジャンプしてください。

WordPressの投稿や固定ページにショートコードを追加する

まず、ショートコードを追加したい投稿やページを編集する必要があります。

その後、ショートコードブロックを挿入するために、追加ブロックボタン「+」をクリックする必要があります。

ショートコードブロックを追加した後、ブロックの入力フィールドにショートコードを直接貼り付けることができます。

ショートコードは、お問い合わせフォーム用のWPFormsなど、使用しているさまざまなWordPressプラグインによって提供されます。

ブロックの使用方法の詳細については、詳細なGutenbergブロックエディタチュートリアルをご覧ください。

これで投稿またはページを保存し、変更をプレビューして、ショートコードが機能していることを確認できます。

WordPressサイドバーウィジェットにショートコードを追加する

WordPressのサイドバーウィジェットでもショートコードを使用できます。

外観 » ウィジェットページにアクセスし、サイドバーに「ショートコード」ブロックを追加するだけです。

ウィジェットのテキストエリアにショートコードを貼り付けることができます。

ウィジェットの設定を保存するには、「更新」ボタンをクリックしてください。

その後、WordPressウェブサイトにアクセスして、サイドバーウィジェットのショートコードのライブプレビューを確認できます。

古いWordPressクラシックエディターにショートコードを追加する

古いクラシックエディタを使用している場合は、コンテンツエリアに直接ショートコードを追加できます。

投稿またはページを編集し、機能を表示したい場所にショートコードを貼り付けるだけです。

最良の結果を得るために、特にフォームやギャラリーなどの大きな要素を追加するショートコードの場合は、独自の行に配置することをお勧めします。これにより、書式設定の問題を防ぐことができます。

変更を保存することを忘れないでください。その後、投稿をプレビューしてショートコードが機能しているか確認できます。

WordPressテーマファイルにショートコードを追加する

ショートコードはWordPressの投稿、ページ、ウィジェット内で使用することを想定しています。しかし、場合によっては、WordPressのテーマファイル内でショートコードを使用したい場合があります。

WordPressでは簡単に行えますが、WordPressテーマファイルを編集する必要があります。以前にこれを行ったことがない場合は、WordPressでコードをコピーして貼り付ける方法に関するガイドをご覧ください。

基本的に、次のコードを追加するだけで、任意のWordPressテーマテンプレートにショートコードを追加できます。

<?php echo do_shortcode('[your_shortcode]'); ?>

WordPressはショートコードを探し、その出力をテーマテンプレートに表示します。

フルサイトエディターを使用してブロックテーマファイルにショートコードを追加する

ブロックテーマを使用している場合は、 フルサイトエディタを使用して、WordPressテーマファイルにショートコードを追加するのが簡単になります。

このツールには、WordPressダッシュボードから 外観 » エディター を選択することでアクセスできます。

デフォルトでテーマのホームテンプレートが表示され、「テンプレート」オプションを選択することで他のテンプレートに切り替えることができます。

テンプレートを選択したら、エディターの右ペインをクリックして編集を開始できます。エディターは画面全体に表示されます。

次に、「+」ブロックインサーターアイコンをクリックしてショートコードブロックを検索できます。その後、テンプレートにドラッグして、使用したいショートコードを入力するだけです。

変更を保存するには、画面上部にある「保存」ボタンをクリックすることを忘れないでください。

WordPressで独自のカスタムショートコードを作成する

ショートコードは、WordPressの投稿やページ内に動的なコンテンツやカスタムコードを追加したい場合に非常に役立ちます。ただし、カスタムショートコードを作成するには、ある程度のコーディング経験が必要です。

PHPコードの記述に慣れている場合は、テンプレートとして使用できるサンプルコードを以下に示します。

// function that runs when shortcode is called
function wpb_demo_shortcode() { 
 
// Things that you want to do.
$message = 'Hello world!'; 
 
// Output needs to be return
return $message;
}
// register shortcode
add_shortcode('greeting', 'wpb_demo_shortcode');

このコードでは、まずコードを実行して出力を返す関数を作成しました。その後、「greeting」という新しいショートコードを作成し、作成した関数を実行するようにWordPressに指示しました。

このコードをテーマのfunctions.phpファイルに手動で追加するか、WPCodeのようなコードスニペットプラグイン（推奨）を使用できます。

WPCodeはサイトにコードを追加する最も安全で簡単な方法であるため、後者を推奨します。詳細については、WPCodeレビューをご覧ください。

詳細については、何も壊さずにWordPressにカスタムコードを追加する方法に関するガイドをご覧ください。

それが完了したら、以下のコードを使用して、投稿、ページ、ウィジェットにこのショートコードを追加できます。

[挨拶]

作成した関数が実行され、目的の出力が表示されます。

この例は単純ですが、ショートコードの真の力は、複雑なコードを再利用することにあります。

長いスクリプトをショートコードでラップすることで、コンテンツエディターをきれいに保ち、サイト全体の更新をはるかに簡単にします。コードは1か所を編集するだけで済みます。

実用的な例：Google AdSenseショートコード

さて、より実用的な例を見てみましょう。

ショートコードを使用して、サイトのどこにでもGoogle AdSenseバナーを簡単に表示できます。

// The shortcode function
function wpb_demo_shortcode_2() { 
 
// Advertisement code pasted inside a variable
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot="9876543210"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>';
 
// Ad code returned
return $string; 
 
}
// Register shortcode
add_shortcode('my_ad_code', 'wpb_demo_shortcode_2'); 

プレースホルダー広告コードをご自身のものに置き換えてください。これで、[my_ad_code] 短縮コードを使用して、投稿、ページ、またはウィジェットエリアに広告を表示できるようになりました。

ショートコードとGutenbergブロックの比較

Gutenberg ブロックと短縮コードはどちらも、WordPress サイトに動的なコンテンツを追加できるようにします。主な違いは、ブロックはビジュアルインターフェイスを提供するのに対し、短縮コードは特定のブロックに貼り付けるテキストベースのスニペットであることです。

多くの人気の WordPress プラグインは、短縮コードの代わりにブロックを使用するようになっています。これは、ブロックの方が初心者にとって使いやすく、エディターで最終結果のプレビューを直接確認できるためです。

試してみる価値のあるWordPressで最も便利なGutenbergブロックプラグインのリストをまとめました。

独自のカスタムGutenbergブロックを作成したい場合は、WordPressでカスタムGutenbergブロックを作成する方法に関するステップバイステップチュートリアルに従ってください。

ショートコードに関するよくある質問

WPBeginner では、短縮コードの仕組みについてよく質問を受けます。以下に、最も一般的な質問への回答をいくつか示します。

ブロックエディターで短縮コードはまだ関連性がありますか？

はい、もちろんです。多くの新しいプラグインは専用のブロックを使用していますが、他の何千ものプラグインは依然として短縮コードを使用してコンテンツに機能を追加できるようにしています。WordPress には専用の短縮コードブロックが含まれているため、今後も長期間役立つでしょう。

短縮コードはウェブサイトの速度を低下させますか？

短縮コードは、それが実行するコードと同じくらい高速です。信頼できるプラグインの適切にコーディングされた短縮コードは、サイトのパフォーマンスに最小限の影響しか与えません。

ただし、1 つのページに多くのスクリプトを読み込む短縮コードを使いすぎると、パフォーマンスが低下する場合があります。

プラグインの短縮コードを見つけるにはどうすればよいですか？

ほとんどのプラグインは、設定ページ、ドキュメント、またはエディタインターフェースにショートコードを表示します。たとえば、WPFormsを使用すると、保存後すぐにフォームのショートコードを簡単にコピーできます。

SeedProdのようなページビルダーでショートコードを使用できますか？

はい、SeedProdのようなすべての主要なページビルダーには、専用の「ショートコード」ブロックまたはウィジェットがあります。ブロックをレイアウトにドラッグして、表示したいショートコードを貼り付けるだけです。

この記事がWordPressでショートコードを追加する方法を学ぶのに役立ったことを願っています。また、トグル効果でWordPressの投稿にテキストを表示および非表示する方法に関するガイドや、WordPressで書式設定の問題なくコピー＆ペーストする方法に関するチュートリアルもご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。