WordPress テーマでショートコードを使用する方法

私たちは長年 WordPress テーマでショートコードを使用してきましたが、サイト構築の方法の標準的な部分となっています。

コードを複製したり、テーマファイルを管理しにくくしたりすることなく、同じ機能を複数の場所に簡単に追加する方法という、単純な問題を解決します。

ショートコードを使用すると、サイトのどこでも機能する、シンプルで再利用可能なコードスニペットを作成できます。

カスタムコンテンツを表示する場合でも、フォームを追加する場合でも、インタラクティブな要素を作成する場合でも、ショートコードは、その機能を追加し、必要な場所で使用するためのクリーンな方法を提供します。

このガイドでは、さまざまな方法を使用してテーマでショートコードを使用する方法を説明します。

WordPressテーマでショートコードを使用する理由

ショートコードを使用すると、複雑なコードを書かずにウェブサイトにさまざまな機能を追加できます。一般的な使用方法をいくつかご紹介します。

• 画像ギャラリー：写真をグリッドまたはスライダーで表示します。
• フォーム：お問い合わせフォーム、支払いフォーム、アンケートを追加します。
• ソーシャルフィード：Instagram、Facebook、Twitterの最新投稿を表示します。
• 行動喚起ボタン：他のページへのリンクを作成するボタンを作成します。

WordPressにはいくつかの組み込みショートコードがあります。さらに、人気のWordPressプラグインは、コンテンツを表示するのに役立つ独自のショートコードを提供します。

ただし、WordPressのテーマファイル内でショートコードを使用したい場合もあります。

これにより、標準のWordPress投稿エディターでは編集できない領域（アーカイブページなど）に動的な要素を追加できます。また、同じショートコードを複数のページで使用する簡単な方法でもあります。

たとえば、テーマのページまたは投稿テンプレートにショートコードを追加することがあります。

これを踏まえて、WordPressテーマでショートコードを使用する方法を見てみましょう。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用してください。

• 方法 1: フルサイトエディターを使用する (ブロックテーマのみ)
• Method 2: Editing Your WordPress Theme Files (Works With Any WordPress Theme)
  • トラブルシューティング：do_shortcodeが機能しない場合の対処法
• 方法 3: ページビルダーでショートコードを追加する (カスタムテーマ)
• WordPressショートコードに関するよくある質問

方法 1: フルサイトエディターを使用する (ブロックテーマのみ)

テーマにショートコードを追加する最も簡単な方法は、フルサイトエディターを使用することです。これにより、サイトレイアウトの任意の場所にショートコードブロックを追加できます。

ただし、この方法はTwenty Twenty-Fiveのようなブロックベースのテーマでのみ機能します。

ダッシュボードに外観 » エディターメニューが表示されない場合は、クラシックテーマを使用している可能性が高いです。以下の方法2に進んでください。

開始するには、WordPressダッシュボードの外観 » エディターに移動します。

デフォルトでは、フルサイトエディターはテーマのホームページテンプレートを表示しますが、ショートコードを任意のテンプレートに追加できます。

利用可能なすべてのオプションを表示するには、「テンプレート」を選択します。

編集したいカスタムページテンプレートをクリックできるようになりました。

例として、404ページテンプレートにショートコードを追加しますが、どのテンプレートを選択しても手順はまったく同じです。

WordPress はテンプレートのプレビューを表示します。

ショートコードを追加するには、小さな鉛筆アイコンをクリックします。

これが完了したら、ブロックエディターの左上にある青い「+」アイコンをクリックします。

検索バーに「Shortcode」と入力する必要があります。

右側のブロックが表示されたら、テーマテンプレートにドラッグアンドドロップします。

これで、使用したいショートコードを貼り付けるか、入力することができます。

その後、「保存」ボタンをクリックしてください。

これで、WordPressブログにアクセスして、ショートコードが機能していることを確認してください。

方法 2: WordPress テーマファイルを編集する (どの WordPress テーマでも機能します)

テーマファイルを直接編集してショートコードを追加することもできます。これはクラシックテーマとブロックテーマの両方で機能しますが、より高度な方法です。

コードを変更するため、まず子テーマを作成することを強くお勧めします。これにより、テーマを更新する際に変更が失われるのを防ぐことができます。

WordPressは、PHPテンプレートファイル内のショートコードを自動的に実行しません。代わりに、do_shortcode関数を使用して、コードを実行するようにWordPressに明示的に指示する必要があります。詳細については、カスタムコードを簡単に追加する方法に関するガイドを参照してください。

重要：このコードは、テンプレートファイル内のPHPタグ（<?php ?>）内に配置する必要があります。

追加するコードの例を次に示します。

echo do_shortcode('[gallery]');

使用したいショートコードに「gallery」を置き換えるだけです。

特定のフォームIDのような追加のパラメータを持つショートコードを追加する場合、コードは少し異なります。

例えば、WPFormsを使用している場合、このスニペットを使用します。

echo do_shortcode("[wpforms id='92']");

トラブルシューティング: do_shortcode が機能しない場合の対処法

出力が表示されない場合は、ショートコードを提供しているプラグインが実際にアクティブになっていることを、プラグイン » インストール済みプラグイン ページで確認してください。

また、shortcode_exists() 関数を使用して、ショートコードを実行する前にショートコードが利用可能かどうかを確認することもできます。これにより、プラグインが誤って非アクティブ化された場合のエラーを防ぐことができます。

if ( shortcode_exists( 'wpforms' ) ) {
  echo do_shortcode("[wpforms id='147']");
}

ウェブサイトにショートコードの出力がまだ表示されない場合は、WordPressのキャッシュをクリアしてみてください。サイトの古いバージョンが表示されている可能性があります。

方法 3: ページビルダーでショートコードを追加する (カスタムテーマ)

別のオプションとして、完全にカスタムなWordPressテーマレイアウトを作成することもできます。

これにより、PHPファイルを編集することなく、ショートコードがどこに表示されるかを完全に制御できます。

これを行う最善の方法は、SeedProdを使用することです。これは、既存のテーマファイルを置き換える、テーマを視覚的にデザインできる最高のWordPressページビルダーです。

当社のパートナーブランドのいくつかは、ウェブサイト全体をこれでデザインしており、そのチームは初心者にも優しく、使い方が簡単であることを高く評価しています。

手順については、カスタムWordPressテーマを（コードなしで）簡単に作成する方法のガイドをご覧ください。

テーマを作成した後、SeedProd » Theme Builder に移動することで、WordPressウェブサイトの任意の場所にショートコードを追加できます。

ここで、ショートコードを使用したいテンプレートを見つけます。

次に、そのテンプレートの上にマウスカーソルを重ね、表示されたら「デザインを編集」をクリックします。

これにより、テンプレートがSeedProdのテーマビルダーで開かれます。

左側のメニューで、「高度」セクションまでスクロールします。ここで、ショートコードブロックを見つけて、レイアウトにドラッグします。

ライブプレビューで、ショートコードブロックを選択するにはクリックするだけです。

これで、ショートコードを「ショートコード」ボックスに追加できます。

デフォルトでは、SeedProdはライブプレビューにショートコードの出力を表示しません。

ショートコードがどのように機能するかを確認するには、「ショートコードオプションを表示」トグルをクリックしてください。

その後、「詳細設定」タブを選択して、ショートコードの出力にスタイルを追加したくなるかもしれません。

ここで、間隔を変更したり、カスタムCSSを追加したり、CSSアニメーション効果を追加したりできます。

ページの見た目が気に入ったら、「保存」ボタンをクリックするだけです。

その後、「公開」を選択してショートコードをライブにします。

カスタムショートコードが機能しているか確認するために、ウェブサイトにアクセスできるようになりました。

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

ショートコードに関して、読者からよく寄せられる質問をいくつかご紹介します。

WordPressのショートコードの目的は何ですか？

ショートコードの主な目的は、コードを書かずにサイトに動的な機能を追加できるようにすることです。これらはプレースホルダーとして機能し、WordPressはページが読み込まれる際にフォーム、ギャラリー、ボタンなどのコンテンツに置き換えます。

ショートコードはどのように機能しますか？

訪問者がページを表示すると、WordPressはコンテンツ内で角括弧（例：）で囲まれた登録済みショートコードを検索します。その後、そのタグに関連付けられたPHPコードを自動的に実行して、画面に正しい機能を表示します。

WordPressのメニューでショートコードを使用するにはどうすればよいですか？

デフォルトでは、WordPressはナビゲーションメニュー内でショートコードを実行しません。これを有効にするには、テーマのfunctions.phpファイルに特定のフィルターを追加するか、メニューにショートコードサポートを追加するWPCodeのようなプラグインを使用する必要があります。

プラグインなしでWordPressでショートコードを作成するにはどうすればよいですか？

テーマのfunctions.phpファイルに直接コードを追加するか、WPCodeを使用してカスタムショートコードを作成できます。ショートコードの名前とその出力すべきコンテンツを定義するために、組み込みのadd_shortcode()関数を使用する必要があります。

ショートコードの一般的な問題は何ですか？

最も一般的な問題は、ショートコードの実際の機能が表示される代わりに、ショートコードのテキストがページに表示されてしまうことです。これは通常、ショートコードを有効にしているプラグインが無効になっているか、ショートコードタグにタイプミスがある場合に発生します。

このチュートリアルでWordPressのショートコードをテーマで使用する方法を学んでいただけたことを願っています。また、WordPressでランディングページを作成する方法に関するガイドや、最も効果的なWordPressデザイン要素に関する究極のガイドもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。