私たちは長年 WordPress テーマでショートコードを使用してきましたが、サイト構築の方法の標準的な部分となっています。
コードを複製したり、テーマファイルを管理しにくくしたりすることなく、同じ機能を複数の場所に簡単に追加する方法という、単純な問題を解決します。
ショートコードを使用すると、サイトのどこでも機能する、シンプルで再利用可能なコードスニペットを作成できます。
カスタムコンテンツを表示する場合でも、フォームを追加する場合でも、インタラクティブな要素を作成する場合でも、ショートコードは、その機能を追加し、必要な場所で使用するためのクリーンな方法を提供します。
このガイドでは、さまざまな方法を使用してテーマでショートコードを使用する方法を説明します。
WordPressテーマでショートコードを使用する理由
ショートコードは、画像ギャラリー、フォーム、ソーシャルメディアフィードなど、さまざまな機能をウェブサイトに追加できます。
WordPressにはいくつかの組み込みショートコードがありますが、サイトにショートコードを追加する人気のWordPressプラグインもたくさんあります。
たとえば、WPForms には使いやすいブロックがありますが、ショートコードも提供しているため、ウェブサイトの他のエリアにフォームを追加できます。
ほとんどの場合、投稿やページのようなコンテンツエリア内にショートコードを追加します。
詳細については、WordPressでショートコードを追加する方法に関する完全ガイドをご覧ください。
ただし、WordPressのテーマファイル内でショートコードを使用したい場合もあります。
これにより、標準のWordPress投稿エディターでは編集できない領域（アーカイブページなど）に動的な要素を追加できます。また、同じショートコードを複数のページで使用する簡単な方法でもあります。
たとえば、テーマのページまたは投稿テンプレートにショートコードを追加することがあります。
これを踏まえて、WordPressテーマでショートコードを使用する方法を見てみましょう。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用してください。
- 方法 1: フルサイトエディターを使用する (ブロックテーマのみ)
- 方法 2: WordPress テーマファイルを編集する (どの WordPress テーマでも機能します)
- 方法 3: ページビルダーでショートコードを追加する (カスタムテーマ)
方法 1: フルサイトエディターを使用する (ブロックテーマのみ)
WordPressのショートコードをテーマに追加する最も簡単な方法は、フルサイトエディターを使用することです。これにより、ウェブサイトの任意の場所にショートコードブロックを追加できます。
ただし、この方法はHestia Proのようなブロックベースのテーマでのみ機能します。ブロック対応テーマを使用していない場合は、別の方法を使用する必要があります。
開始するには、WordPressダッシュボードの外観 » エディターに移動します。
デフォルトでは、フルサイトエディターはテーマのホームページテンプレートを表示しますが、ショートコードを任意のテンプレートに追加できます。
利用可能なすべてのオプションを表示するには、「テンプレート」を選択します。
編集したいカスタムページテンプレートをクリックできるようになりました。
例として、404ページテンプレートにショートコードを追加しますが、どのテンプレートを選択しても手順はまったく同じです。
WordPress はテンプレートのプレビューを表示します。
ショートコードを追加するには、小さな鉛筆アイコンをクリックしてください。
これが完了したら、ブロックエディターの左上にある青い「+」アイコンをクリックします。
検索バーに「Shortcode」と入力する必要があります。
右側のブロックが表示されたら、テーマテンプレートにドラッグアンドドロップします。
これで、使用したいショートコードを貼り付けるか、入力することができます。
その後、「保存」ボタンをクリックしてください。
これで、WordPressブログにアクセスして、ショートコードが機能していることを確認してください。
方法 2: WordPress テーマファイルを編集する (どの WordPress テーマでも機能します)
テーマファイルを編集してWordPressテーマにショートコードを追加することもできます。この方法はより高度ですが、クラシックテーマとブロックテーマの両方で機能します。
まだサイトにコードを追加したことがない場合は、WordPressにウェブ上のスニペットをコピー＆ペーストする方法に関するステップバイステップガイドをご覧ください。
個々のテーマファイルを直接編集することも可能ですが、そうすると カスタマイズを失わずにWordPressテーマを更新する のが難しくなります。このため、テーマファイルをオーバーライドして 子テーマを作成する ことをお勧めします。
カスタムテーマを作成している場合は、既存のテーマファイルにコードを追加または変更できます。
テーマファイルを編集する際、標準のコンテンツ領域で使用するのと同じ形式でショートコードを追加することはできません。ショートコードの出力が表示される代わりに、画面上にはショートコード自体が表示されます。
これは、WordPressがテーマテンプレートファイル内でショートコードを実行しないために発生します。代わりに、do_shortcode関数を使用して、WordPressにショートコードを実行するように明示的に指示する必要があります。
詳細については、カスタムコードを簡単に追加する方法に関するガイドを参照してください。
WordPressテーマファイルに追加するコードの例を以下に示します。
echo do_shortcode('[gallery]');
使用したいショートコードに「gallery」を置き換えるだけです。
ショートコードをどこに追加すればよいかわからない場合は、WordPressテンプレート階層の初心者向けガイドを参照してください。
追加のパラメータを持つショートコードを追加している場合は、少し異なるコードスニペットを使用する必要があります。
WPFormsを使用して問い合わせフォームを作成したとします。この場合、標準のWPFormsショートコードとフォームのIDを使用する必要があります。
echo do_shortcode("[wpforms id='92']");
トラブルシューティング: do_shortcode が機能しない場合の対処法
テーマファイルにショートコードを追加したにもかかわらず、コードの出力が WordPressウェブサイト に表示されない場合があります。これは通常、そのショートコードがWordPressプラグインまたはウェブサイト上の他のコードに依存していることを意味します。
do_shortcode 関数が機能しない場合は、ショートコードを提供するプラグインがインストールされ、有効になっていることを確認してください。プラグイン » インストール済みプラグイン に移動してください。
次の画像では、WPFormsがインストールされていますが非アクティブなため、echo do_shortcode コードは機能しません。
shortcode_exists() 関数を index.php ファイルに追加することで、ショートコードが利用可能かどうかを確認することもできます。
次のスニペットでは、WPFormsスニペットがウェブサイトで使用可能かどうかを確認しています。
if ( shortcode_exists( 'wpforms' )) {
echo do_shortcode("[[wpforms id='147']]");
}
ウェブサイトにショートコードの出力がまだ表示されない場合は、WordPressのキャッシュをクリアしてみてください。サイトの古いバージョンが表示されている可能性があります。
方法 3: ページビルダーでショートコードを追加する (カスタムテーマ)
もう 1 つの方法は、カスタム WordPress テーマを作成することです。これはより高度な方法ですが、WordPress テーマの任意の領域に好きなだけショートコードを追加できます。また、他の変更を加えて、必要な機能とデザインを正確に作成することもできます。
以前は、カスタム WordPress テーマを構築するために、複雑なチュートリアルに従ったり、カスタムコードを記述したりする必要がありました。しかし、SeedProd を使用すると、1 行のコードも記述せずにカスタムテーマを作成できるようになりました。
SeedProdは最高のWordPressページビルダーであり、テーマビルダーと、サイトキットとテンプレート全体も付属しています。ドラッグ＆ドロップエディターを使用して独自のテーマをデザインできます。
当社のパートナーブランドのいくつかは、ウェブサイト全体をこれでデザインしており、そのチームは初心者にも優しく、使い方が簡単であることを高く評価しています。
手順については、カスタムWordPressテーマを（コードなしで）簡単に作成する方法のガイドをご覧ください。
テーマを作成した後、SeedProd » Theme Builder に移動することで、WordPressウェブサイトの任意の場所にショートコードを追加できます。
ここで、ショートコードを使用したいテンプレートを見つけます。
次に、そのテンプレートの上にマウスカーソルを重ね、表示されたら「デザインを編集」をクリックします。
これにより、テンプレートがSeedProdのテーマビルダーで開かれます。
左側のメニューで、「高度」セクションまでスクロールします。ここで、ショートコードブロックを見つけて、レイアウトにドラッグします。
ライブプレビューで、ショートコードブロックを選択するにはクリックするだけです。
これで、ショートコードを「ショートコード」ボックスに追加できます。
デフォルトでは、SeedProdはライブプレビューにショートコードの出力を表示しません。
ショートコードがどのように機能するかを確認するには、「ショートコードオプションを表示」トグルをクリックしてください。
その後、「詳細設定」タブを選択して、ショートコードの出力にスタイルを追加したくなるかもしれません。
ここで、間隔を変更したり、カスタムCSSを追加したり、CSSアニメーション効果を追加したりできます。
ページの見た目が気に入ったら、「保存」ボタンをクリックするだけです。
その後、「公開」を選択してショートコードをライブにします。
カスタムショートコードが機能しているか確認するために、ウェブサイトにアクセスできるようになりました。
このチュートリアルでWordPressのショートコードをテーマで使用する方法を学んでいただけたことを願っています。また、WordPressでランディングページを作成する方法に関するガイドや、最も効果的なWordPressデザイン要素に関する究極のガイドもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
オヤトグン・オルワセウン・サミュエル
ショートコードを追加する3番目の方法が好きです。なぜなら、あらゆる種類のテーマで機能するからです。また、テーマのアップデートで問題が発生した場合に備えて、子テーマでショートコードを作成することを好みます。
イジー・ヴァネック
プラグインによって既に作成されたものを挿入するのではなく、自分でショートコードを作成する方法はありますか？例を挙げさせてください。必ずしもPHPコードとしてどこにでも挿入したくないコードを作成します。そのコードをショートコードに変換し、それを目的の場所に挿入するだけで、そのショートコード内に隠されたPHPコード全体がそこで実行されるようにできますか？
WPBeginnerサポート
以下に、独自のショートコードを作成するためのガイドがありますので、ぜひご覧ください。
https://014.leahstevensyj.workers.dev/wp-tutorials/how-to-add-a-shortcode-in-wordpress/
管理者
イジー・ヴァネック
リンクをありがとうございます。記事をチェックしてみます。作業を楽にするために、いくつかのコードをショートコードに変換したいと思っています。記事へのリンク、そしてあなたの作業と支援に感謝します。
pankaj
コンタクトフォーム7を削除したところ、[contact-form-7 404 “Not Found”] のようなエラーが表示されます。フォームはもう使用したくないのですが、このエラーを削除したいです。テンプレートファイル内のコードやショートコードがどこにあるのかわかりません。
Sonik
こんにちは、
WordPress のビジュアルエディターでギャラリープラグインのショートコードを記述しましたが、ショートコードが実行されず、記述したとおりに表示されます。
例えば [test attr=’hello’] と書くと、実行されずにそのままウェブページに表示されます。
ありがとう。
マイケル
これは素晴らしい投稿です、ありがとうございます。今、私が作成しているウェブサイトのショートカットを調べています。
Art
Customizrテーマでは機能しません。この問題に直面している人はいますか？
Art
OK。修正できました。括弧が原因で壊れていたことが判明しました。
元:
変更先:
DavidA
こんにちは、マルチサイトで 2 つの WordPress ブログを持っています。
ウェブサイト 1 からウェブサイト 2 のショートコードを使用する方法を知っていますか？
ありがとうございます
WPBeginnerサポート
ネットワーク全体プラグインを作成すれば、両方のブログでショートコードを使用できます。
管理者
Riaz Kahn
ありがとう、うまくいきました。
ディーン
コードはこちらです。
CODE: ——————————————————————————————
echo do_shortcode(“[tabset tab1=”タブ1タイトル” tab2=”タブ2タイトル”]
[tab]タブ1の内容[/tab]”)
[tab]タブ 2 のコンテンツ[/tab]
[/tabset]”);
—————————————————————————————————-
Michael Atkins
Konstantin Kovsheninがhttp://kovshenin.com/2013/dont-do_shortcode/で概説した方法を使用する方が効率的かもしれません。
ネイト・ラウチ
それは良い情報ですね。単純に追加する方法を探していました。感謝します。
Tim
素晴らしい情報です。ありがとうございます！しかし、Wordpress 3.5.1 の Avada テーマでは機能しません。
上記のコードを機能させるには、functions.php に何かを追加する必要がありますか？テーマ固有の問題の可能性がありますか？ありがとうございます。WordPress のテンプレート作成を学んだばかりです。
編集スタッフ
テーマ固有の問題のようですね。do_shortcode は問題なく動作します。
http://codex.wordpress.org/Function_Reference/do_shortcode
管理者
Anthony
thanks loads man! this saved me hours of internet searching
Tyron
これは素晴らしいちょっとしたヒントですね。コンテンツがショートコードでラップされる必要がある場合は、これはどのように機能しますか？
例：[shortcode-name]ここにコンテンツ[/shortcode-name]。
Jonathon Harris
タイロンさん、
返信が遅くなり申し訳ありません。今見たばかりです。ラップされたコンテンツを含めるには、次のようにすることができます。
echo do_shortcode(‘[example_shortcode]’.$text_to_be_wrapped_in_shortcode.'[/example_shortcode]’);
乾杯、
J
pratik.chourdia
Wow.. worked
thanks
ホームページ 春日井
sfg
ホームページ 春日井
まさに探していたものです。参考になりました。ありがとうございます。
krushna
はい..私もどこにコードを書くのか知りたいです。例があれば素晴らしいです。
編集スタッフ
ショートコードを表示したいテーマファイル内のどこにでも追加できます。サイドバー、フッター、または好きな場所に配置できます。
管理者
aminraisy
woocommerceの製品ページで、製品説明の後にそれを追加できますか？
WPBeginnerサポート
はい、もちろんです
キース・デイビス
こんにちは、皆さん
コードはどこに追加しますか…
どのファイルに追加し、ファイルのどこに追加しますか？
私のテーマはすでにショートコードを使用していますが、それでも知っておくと興味深いでしょう。
Jim
先日、ループの外でショートコードを追加する必要がありました。ありがとうございます！