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

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

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

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

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

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

ショートコードとは？

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

[myshortcode]

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

WordPressは、誰も投稿やページの内容を悪意のあるコードをデータベースに挿入するために使用しないように、すべてのコンテンツをフィルタリングします。これは、投稿に基本的なHTMLを記述できることを意味しますが、PHPコードは記述できません。

しかし、関連投稿、バナー広告、お問い合わせフォーム、ギャラリーなどを表示するために、投稿内にカスタムコードを実行したい場合はどうなりますか？

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

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

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

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

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

• WordPressの投稿や固定ページにショートコードを追加する
• WordPressサイドバーウィジェットにショートコードを追加する
• 古いWordPressクラシックエディターにショートコードを追加する
• WordPressテーマファイルにショートコードを追加する
• フルサイトエディターを使用してブロックテーマファイルにショートコードを追加する
• Creating Your Own Custom Shortcode in WordPress
• ショートコードとGutenbergブロックの比較
• ショートコードに関するよくある質問

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でもフォローできます。