簡単なコードをタイプするだけで、スライドショーやお問い合わせフォーム、あるいは特別なリストなど、WordPressサイトに新しいものを追加できることを想像してみてください。それがショートコードの力です。
WordPressのプラグインやテーマには、サイトに機能を追加するためのショートコードを利用できるものがたくさんあります。多くの読者から、投稿やページ、サイドバーにショートコードを追加するベストな方法を尋ねられます。
この投稿では、WordPressサイトでショートコードを使う方法を順を追って紹介します。本当にクリエイティブになりたい方には、カスタマイザーの作成方法までご紹介します。
ショートコードとは？
WordPress のショートコードは、WordPress の投稿、ページ、サイドバーウィジェットに動的なコンテンツを追加するためのショートカットコードです。このように角括弧の中に表示されます：
[マイショートコード］
ショートコードをよりよく理解するために、そもそもなぜショートコードが追加されたのか、その背景を見てみよう。
WordPressは、投稿やページのコンテンツを使って悪意のあるコードをデータベースに挿入する人がいないように、すべてのコンテンツをフィルターしています。つまり、投稿に基本的なHTMLを書くことはできますが、PHPコードを書くことはできません。
しかし、投稿の中に関連記事、バナー広告、お問い合わせフォーム、ギャラリーなどを表示するカスタマイザーコードを実行したいとしたらどうでしょうか？
そこでショートコードAPIの出番だ。
基本的には、開発者が関数の中にコードを追加し、その関数をショートコードとしてWordPressに登録することで、ユーザーはコーディングの知識がなくても簡単に使うことができる。
WordPressはショートコードを見つけると、それに関連するコードを自動的に実行する。
WordPressの投稿やページにショートコードを簡単に追加する方法を見てみましょう。以下のリンクからお好きな方法にジャンプできます。
- Adding a Shortcode in WordPress Posts and Pages
- Adding a Shortcode in WordPress Sidebar Widgets
- Adding a Shortcode in Old WordPress Classic Editor
- Adding a Shortcode in WordPress Theme Files
- Adding a Shortcode in Block Theme Files With the Full-Site Editor
- Creating Your Own Custom Shortcode in WordPress
- Shortcodes vs. Gutenberg Blocks
WordPressの投稿とページにショートコードを追加する
まず、ショートコードを追加したい投稿とページを編集する必要があります。
その後、ブロックの追加ボタン「+」をクリックしてショートコード・ブロックを挿入する必要があります。
ショートコードブロックを追加したら、ブロックの設定でショートコードを入力するだけです。
ショートコードは、お問い合わせフォームの WPFormsや メールマーケティングのOptinMonsterなど、WordPressの様々なプラグインから提供されます。
ブロックの使い方についてさらに詳しく知りたい方は、Gutenbergチュートリアルをご覧ください。
投稿やページを保存し、変更をプレビューしてショートコードの動作を確認できます。
WordPressのサイドバーウィジェットにショートコードを追加する
WordPressのサイドバーウィジェットでショートコードを使用することもできます。
外観 ” ウィジェットページにアクセスし、サイドバーに’ショートコード’ウィジェットブロックを追加するだけです。
これで、ウィジェットのテキストエリアにショートコードを貼り付けることができます。
更新」ボタンをクリックして、ウィジェットの設定を保存することを忘れないでください。
その後、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のようなコードスニペットプラグインを使用することができます。
詳しくは、WordPressにカスタムコードを追加する方法をご覧ください。
それができたら、次のコードを使って投稿、ページ、ウィジェットにこのショートコードを追加することができます：
挨拶
作成した関数が実行され、目的の出力が表示されます。
では、より実用的なショートコードの使い方を見てみよう。
この例では、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');
広告コードを自分の広告コードに置き換えることをお忘れなく。
WordPressの投稿、ページ、サイドバーウィジェット内で[my_ad_code]ショートコードを使用できるようになりました。WordPressは自動的にショートコードに関連する関数を実行し、広告コードを表示します。
ショートコードとGutenbergブロックの比較
ショートコードとGutenbergブロックの違いについて、ユーザーからよく質問を受けます。
基本的に、ブロックはショートコードと同じことができますが、よりユーザーフレンドリーな方法です。
ブロックは、動的コンテンツを表示するためにショートコードを追加する必要がある代わりに、ユーザーがより直感的なユーザーインターフェースで投稿/ページ内に動的コンテンツを追加できるようにします。WordPressの人気プラグインの多くが、ショートコードの代わりにブロックを使用するようになりました。
WordPressで最も便利なGutenbergブロックプラグインをまとめました。
独自のカスタムGutenbergブロックを作成したい場合は、WordPressでカスタムGutenbergブロックを作成する方法のステップバイステップのチュートリアルに従うことができます。
この投稿がWordPressでショートコードを追加する方法を学ぶのに役立てば幸いです。また、コードを書かずにカスタマイザーテーマを作成する方法や、ドラッグアンドドロップでWordPressページビルダーを作成できるプラグインを厳選したガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Andrew Wilson
Hi Guys,
Is it possible with this plugin to create a unique QR Code for users that sign up to your website?
i.e. a person registers on the website, and as part of that process the back-end creates a unique QR Code for that user which if scanned by a third party takes them to their profile on the website?
WPBeginner Comments
You can create QR codes using this guide:
https://www.wpbeginner.com/plugins/how-to-generate-and-add-qr-codes-in-wordpress/
To create it automatically in the way you mentioned may require custom code.
Moinuddin Waheed
This is very helpful for making our own custom short codes.
I have been using short codes for a while and have thought of making my own short codes to use but was not aware about the process.
I have a bit of coding knowledge and can easily make shortcodes through php functions.
Thanks for the guide.
WPBeginner Support
You’re welcome, glad our guide was helpful
管理者
Jiří Vaněk
Thank you for the detailed instructions. I was able to add the shortcode to Gutenberg but could not use it as a php code. At the same time, it is evidently that simple. A bit smarter again thanks to wpbeginner.
Mohammed
In Example2 How did you define this shortcode ‘my_ad_code’ thought you didn’t define it as a function?
WPBeginner Support
That is added with the code add_shortcode at the bottom of the example
管理者
Mohammed
❤️❤️
Appreciate for the best Article
Josh
One picture says “greatings” instead of “greetings”
WPBeginner Support
Thank you for pointing that out, it works as a good reminder to make sure you spell your shortcodes correctly
管理者
Maya
Thanks for sharing such a detailed article keep up the good work!
WPBeginner Support
You’re welcome, glad you found our guide helpful!
管理者
abuzar
your guidence is very easy to learn. thanks you
WPBeginner Support
You’re welcome!
管理者
Hugh
Thanks for the great article. Works like a charm. However, although it is explained on the page link provided in the article, it may have been helpful to many readers if you had reiterated that to create shortcodes yourself (‘How to Create Your Own Custom Shortcode’ section of the article), you simply add the example code provided or your own code to the theme’s (or child theme’s) ‘functions.php’ file. Thanks again!
WPBeginner Support
Thank you for that feedback!
管理者
Hafed benchellali
Thank you for this great article!
WPBeginner Support
You’re welcome!
管理者
Susan Benfatto
Thank you for your tutorial, it was very useful
WPBeginner Support
Glad it was helpful
管理者
Rohmah Azim
Hi
Can you tell me how I can add shortcode to my header?
WPBeginner Support
You would need to use the method for the theme files from this article and add it to your theme’s header file.
管理者