WordPress にショートコードを簡単に追加する方法

ショートコードは、WordPress の投稿やページに散りばめることができる便利なコードのスニペットで、PHP を書かずに強力な機能を追加できます。

これらは、フォームの埋め込み、スライダーの表示、カスタム ボタンの作成をすべて簡単なコード行で行うことができる強力なツールのようなものです。

この記事では、WordPress にショートコードを追加する方法と、コンテンツ内でショートコードを使用する方法を説明します。

それでは、さっそく始めましょう。

1ショートコードを理解する

ショートコードは、WordPress Web サイトをさまざまな機能で強化する便利なソリューションを提供し、複雑な HTML または CSS コーディングの必要性を排除します。

これらのショートコードは角かっこで囲まれています。 たとえば、Rank Math SEO プラグインを使用してローカル SEO を設定する場合は、次のようなショートコードを使用してビジネス情報を表示する必要があります。

 [rank_math_contact_info]

これを WordPress の投稿、ページ、またはウィジェットのコンテンツ エディターに挿入するだけで、ページがフロントエンドで表示されると、ショートコードが目的の機能に置き換えられます。

Web サイトに問い合わせフォームを追加したいと考えてみてください。 フォーム全体を最初からコーディングする代わりに、プラグインまたはテーマによって提供されるショートコードを使用するだけで済みます。 このショートコードはフォームを自動的に生成するため、貴重な時間と労力を節約できます。

しかし、関連投稿、バナー広告、お問い合わせフォーム、ギャラリー、その他の要素の投稿にカスタム コードが必要な場合はどうすればよいでしょうか? ここでショートコード API が登場します。

ショートコード API を使用すると、開発者はコードをショートコードとして登録できるため、ユーザーはコーディングの知識がなくても利用できます。 WordPress がショートコードを検出すると、関連付けられたコードを簡単に実行します。

2 WordPress でショートコードを使用する理由?

WordPress サイトにショートコードを追加する理由はいくつかあります。

• 使いやすさ:コーディングの経験がなくても、ショートコードを使用して強力な機能をサイトに追加できます。
• 多用途:連絡先フォームの追加からスライダーの表示、カスタム ボタンの作成まで、想像できるほとんどすべてのショートコードがあります。
• ポータブル:テーマまたはプラグインを切り替えても、ショートコードを生成したテーマまたはプラグインがアクティブなままであれば、ショートコードは引き続き機能します。

WordPress にショートコードを追加する3 つの方法

次に、WordPress Web サイトにショートコードを追加する方法について説明します。

3.1ブロックエディター (Gutenberg) を使用してショートコードを追加する

ブロック エディターを使用してショートコードを追加するには、まず、ショートコードを追加する場所に応じて、 [ページ]セクションまたは[投稿]セクションに移動します。

以下に示すように、ブロック エディターで+アイコンをクリックし、ショートコードブロックを検索してページまたは投稿に追加します。

ショートコード ブロックが追加されると、ショートコードを入力するフィールドが表示されます。 必要に応じて、ショートコード内に必要なパラメータを含めて、目的のショートコードを入力します。

完了したら、ページまたは投稿を公開または更新して、Web サイト上でショートコードを公開します。

3.2クラシック エディターを使用してショートコードを追加する

クラシック エディターでショートコードを追加するには、ショートコードを追加する場所に応じて、 [ページ]セクションまたは[投稿]セクションに移動します。

完了したら、 「公開/更新」ボタンをクリックして変更を保存します。

3.3 WordPress ウィジェット内にショートコードを追加する

WordPress Web サイトのウィジェット領域にショートコードを追加して、サイドバー、フッター、またはヘッダーに表示できるようにすることができます。

まず、WordPress ダッシュボードで「外観」→「ウィジェット」に移動します。 次に、ショートコードを挿入するウィジェット領域を見つけます。

次に、 +アイコンをクリックしてショートコード ブロックを検索し、ドラッグ アンド ドロップするか、クリックして目的の領域に配置します。

ショートコード ブロックを追加した後、その領域内に目的のショートコードを挿入できます。

次に、変更を保存すると、選択したウィジェット領域でショートコードがアクティブになります。

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

WordPress テーマ ファイル内のショートコードを使用すると、プラグインに依存せずにカスタム機能を Web サイトに追加できます。

これを行うには、ショートコードを追加するテーマ ファイル (page.php、single.php、カスタム テンプレート ファイルなど) にアクセスし、WordPress が提供するdo_shortcode関数を使用します。

ショートコードをパラメーターとしてこの関数に渡すだけで、対応する出力が表示されます。

たとえば、 [your_shortcode]というショートコードがある場合、次のようにテーマ ファイルに追加できます。

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

ショートコードを追加したら、忘れずに変更を保存してください。

ただし、テーマが更新されると変更が失われる可能性があることに注意してください。そのため、テーマ ファイルにカスタム コードを追加するときは、子テーマを使用することをお勧めします。

4 WordPress でカスタムショートコードを作成する方法

ショートコードは、WordPress の投稿やページに動的コンテンツやカスタム コードを追加するのに便利ですが、カスタム ショートコードの作成にはコーディング スキルが必要です。

PHP に慣れている場合は、次のテンプレート コードを使用してください。

 // Define a custom shortcode function function custom_shortcode() { // Define the desired functionality $message = 'This is my custom shortcode!'; // Return the output return $message; } // Register the shortcode add_shortcode('my_shortcode', 'custom_shortcode');

この例では、「これは私のカスタム ショートコードです!」というテキストを表示するショートコード[my_shortcode]を作成しています。 あなたのウェブサイトで。

したがって、このコードをテーマのfunctions.phpファイルに追加するか、コードスニペットプラグインを使用できます。

必要な手順を完了したら、次のコードを使用してショートコードを投稿、ページ、ウィジェットに挿入できます。

 [my_shortcode]

投稿またはページを公開またはプレビューすると、ショートコードが関数からの出力に置き換えられます。

5よくある質問

6結論

WordPress でショートコードを使用すると、すべてを最初からコーディングする必要がなく、複雑な関数やスクリプトを簡単に挿入できるため、非常に有益です。

クラシック エディターとグーテンベルク エディターの両方を使用して WordPress にショートコードを追加する方法について説明しました。 手順に従って、Web サイトの投稿、ページ、ウィジェットにショートコードを簡単に追加できます。

ショートコードの名前を一意にし、他のプラグインや関数との競合を避けることが重要です。

さらに、ショートコードが適切に機能し、WordPress テーマおよびプラグインとの互換性が維持されていることを確認するために、ショートコードをテストすることが重要です。

この投稿が気に入ったら、 @rankmathseo をツイートしてお知らせください。