WordPressにショートコードを追加する方法(初心者向けガイド)

ショートコードは、WordPressの投稿、ページ、サイドバーに動的コンテンツを追加する簡単な方法です.


多くのWordPressプラグインとテーマはショートコードを使用して、連絡先フォーム、画像ギャラリー、スライダーなどの特殊なコンテンツを追加します.

この記事では、WordPressにショートコードを簡単に追加する方法を紹介します。また、WordPressで独自のカスタムショートコードを作成する方法も示します。.

WordPressでショートコードを追加する

ショートコードとは?

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

[myshortcode]

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

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

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

これがShortcode APIの出番です.

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

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

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

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

まず、ショートコードを追加する投稿とページを編集する必要があります。その後、ブロック追加ボタンをクリックしてショートコードブロックを挿入する必要があります.

WordPressにショートコードブロックを追加する

ショートコードブロックを追加したら、ブロック設定にショートコードを入力するだけです。ショートコードは、コンタクトフォーム用のWPForms、メールマーケティングフォーム用のOptinMonster、クリックツーコールボタンを挿入するためのWPコールボタンなど、使用している可能性のあるさまざまなWordPressプラグインによって提供されます。.

ブロックエディターにショートコードを挿入する

ブロックの使用の詳細については、グーテンベルクのチュートリアルを参照してください。.

投稿またはページを保存して変更をプレビューし、ショートコードの動作を確認できます.

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

WordPressサイドバーウィジェットでショートコードを使用することもできます。単に 外観»ウィジェット ページを表示し、「テキスト」ウィジェットをサイドバーに追加します.

これで、ウィジェットのテキスト領域内にショートコードを貼り付けることができます.

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

「保存」ボタンをクリックしてウィジェット設定を保存することを忘れないでください.

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

古いWordPressクラシックエディターでのショートコードの追加

WordPressの古いクラシックエディターをまだ使用している場合、WordPressの投稿とページにショートコードを追加する方法は次のとおりです.

ショートコードを追加する投稿とページを編集するだけです。表示するコンテンツエディター内の任意の場所にショートコードを貼り付けることができます。ショートコードが独自の行にあることを確認してください.

ショートコードクラシックエディター

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

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

ショートコードは、WordPressの投稿、ページ、ウィジェット内で使用するためのものです。ただし、WordPressテーマファイル内でショートコードを使用したい場合があります.

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

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

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

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

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

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

PHPコードの作成に慣れている場合は、テンプレートとして使用できるサンプルコードを次に示します.

//ショートコードが呼び出されたときに実行される関数
function wpb_demo_shortcode(){

//やりたいこと.
$ message = ‘Hello world!’;

//出力は返す必要があります
$ messageを返します。
}
//ショートコードを登録します
add_shortcode( ‘greeting’、 ‘wpb_demo_shortcode’);

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

これで、次のコードを使用して、このショートコードを投稿、ページ、ウィジェットに追加できます。

[挨拶]

作成した関数を実行し、目的の出力を表示します.

それでは、ショートコードのより実用的な使い方を見てみましょう。この例では、ショートコード内にGoogle AdSenseバナーを表示します.

//ショートコード関数
function wpb_demo_shortcode_2(){

//変数内に貼り付けられた広告コード
$ string。= ‘

(adsbygoogle = window.adsbygoogle || [])。push({});
‘;

//返された広告コード
$ stringを返します。

}
//ショートコードを登録します
add_shortcode( ‘my_ad_code’、 ‘wpb_demo_shortcode_2’);

広告コードを独自の広告コードに置き換えることを忘れないでください.

WordPressの投稿、ページ、サイドバーウィジェット内で[my_ad_code]ショートコードを使用できるようになりました。 WordPressはショートコードに関連付けられた機能を自動的に実行し、広告コードを表示します.

ショートコードとグーテンベルクブロック

ショートコードと新しいGutenbergブロックの違いについてユーザーからよく尋ねられます.

基本的に、ショートコードが便利だと思えば、WordPressエディターブロックが気に入るはずです。ブロックを使用すると、同じことをより簡単に行うことができます.

ブロックを使用すると、動的コンテンツを表示するためのショートコードを追加する代わりに、ブロックを使用して、より直感的なユーザーインターフェイスで投稿/ページ内に動的コンテンツを追加できます。多くの人気のあるWordPressプラグインは、初心者向けなので、ショートコードの代わりにGutenbergブロックを使用するように切り替えています。.

試してみたいWordPressの最も便利なGutenbergブロックプラグインのリストをまとめました.

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

この記事が、WordPressにショートコードを追加する方法を学習するのに役立つことを願っています。また、最高のドラッグに関するガイドをご覧になることをお勧めします & WordPressページビルダープラグインをドロップし、コードを書かずにカスタムWordPressテーマを作成する方法.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map