WordPressにショートコードを追加したいけど、どう始めたらいいかわからない？
ショートコードは WordPress の投稿、ページ、サイドバーに動的なコンテンツを追加する簡単な方法です。多くの 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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Andrew Wilson says
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 says
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 says
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 says
You’re welcome, glad our guide was helpful
管理者
Jiří Vaněk says
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 says
In Example2 How did you define this shortcode ‘my_ad_code’ thought you didn’t define it as a function?
WPBeginner Support says
That is added with the code add_shortcode at the bottom of the example
管理者
Mohammed says
❤️❤️
Appreciate for the best Article
Josh says
One picture says “greatings” instead of “greetings”
WPBeginner Support says
Thank you for pointing that out, it works as a good reminder to make sure you spell your shortcodes correctly
管理者
Maya says
Thanks for sharing such a detailed article keep up the good work!
WPBeginner Support says
You’re welcome, glad you found our guide helpful!
管理者
abuzar says
your guidence is very easy to learn. thanks you
WPBeginner Support says
You’re welcome!
管理者
Hugh says
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 says
Thank you for that feedback!
管理者
Hafed benchellali says
Thank you for this great article!
WPBeginner Support says
You’re welcome!
管理者
Susan Benfatto says
Thank you for your tutorial, it was very useful
WPBeginner Support says
Glad it was helpful
管理者
Rohmah Azim says
Hi
Can you tell me how I can add shortcode to my header?
WPBeginner Support says
You would need to use the method for the theme files from this article and add it to your theme’s header file.
管理者
David says
-Hi, you know if its possible to add a box fixed for example with a shortcode inside? TNX
WPBeginner Support says
That would depend on the plugin you are using for the shortcode.
管理者
Tihomir says
Hi All
in one of my pages I am using this shortcode [product_category category=’jeans’ number=’1000′ per_page=’1000′] . It shows 1000 products of the chosen category jeans. What I can add to this code to make this 1000 products appear same like on product category page or by with a load more button?
Jose Rodriguez says
English translation –> but something happens when I add the shortcode and then some text, it turns out that this text is inside the html of the shortcode in the frontend, how can I avoid that?
loganathan says
I am creating an own theme, the problem is that theme does no support shortcode. can anyone help me to enable shortcode functionality for my theme.
Ihsan says
thanks for sharing such a nice article..
i want to know how we can use php and html both in short code… waiting for good response thanks…
Melissa Lowe says
I installed a Mailchimp for WordPress shortcode ..pasted it at the end of the text version of my document/article & no form was created & this is what it said…..MailChimp for WordPress error: There is no form with ID 0, perhaps it was deleted?
Ashkan says
What for $atts in that function ?
Helena says
Hi,
I have a widget by the homepage sidebar from a multisite installation and want to have 1 widget (only one) from this sidebar working at the subsites.
It is a text widget with a picture, this picture links to an online ebook.
Do you think I can use this to have it done?
Many thanks!
Vinayak Ganiger says
The wp form shortcode is not working in pages but it works fine in posts. My website is vinstechs.com. In my website page named Projects is their, in that the shortcode is not working.
What’s the solution for this, please reply with solution.
Meryl says
I have a slightly more complex question.
I’m using a theme with a theme options panel.
I want to use a shortcode inside one of those options.
However the output is just the [shortcode] text. Is there specific syntax I can use or does it differ from theme to theme? It’s taking forever to get answers from the theme dev.
Mayank Jain says
Perfect beginner explanation!
Vikash Ahlawat says
Very helpful post to create our own plugin.
hirak das says
Hi i am having a problem with [login_widget] shortcode.when i inserted this code to any page/post on wordpress i only get the text but not the login form…i am using login widget with shortcode plugin…please help…
Armen says
This doesn’t work if you’re trying to place another shortcode within the shortcode you’re creating.
Say I had a shortcode like [jpshare] and I wanted to place it along with other stuff into another shortcode function like in this article to add to the posts, how would you do that?
Mike says
No mention in the article WHERE to add the shortcode. Back to Google for a better tutorial.
Drew says
It clearly stated the code goes into “functions.php”. If you’re not sure how to use the shortcode, it goes anything you add text.
Ihatewordpress says
Hello,
As you can tell from my name I’m very frustrated right now with wordpress.
>>This last part is simple, just add the [adsense] shortcode in the HTML or Visual views of the Post or Page content editor.<<
Not even a tiny clue how to do that – would you be willing to expand on this? Thank you
WPBeginner Support says
WordPress uses shortcodes to add functionality into posts and pages. Like in this tutorial if you wanted to display advertisement code, then you will create a shortcode for it. Once you have created a shortcode you can use it in your posts and pages. Create a new post or edit an existing one and add your shortcode with square brackets in the post content area, like [adsense].
管理者
Brock says
I installed Popup manager plugin for newsletter subscribers. I got the popup to appear by following your suggestion of putting the shortcode in a comment on my main page. This works but only if a person expands my first comment to read the entire thing. Where/how do I paste the shortcode to get the popup to appear when someone visits my page without requiring them to do anything else? I’m trying to find something in the template customization options but nothing is standing out.
Patty says
Please help me understand if this is using a shortcode plugin properly. I need to display the date of the last update to a post or page to stop Google structured errors. I am using default 2014 only with plugins. I found a shortcode plugin named “Last Updated Shortcode” that seems to do what I need. I am wondering if this is what I do.
I would install the plugin, and then activate the plugin. Then on the page/post I would Edit page/post, and at the bottom of the post (or anywhere else if I prefer) add the shortcode. So I would literally type [lastupdated] The last updated date should then appear, correct???
And hopefully, Google will be happy and stop emailing notices of structured errors.
WPBeginner Support says
Yes. We are not sure about how it will affect your SEO though. You may want to take a look at how to display the last updated date of your posts in WordPress.
管理者
Larry Leek says
I’m guessing using the short codes for things like countdown timers is is only for wordpress.org or self hosted wp users correct?
WPBeginner Support says
Yes.
管理者
Anibal says
Hi I’m having trouble with the short code [tpe mylang lang=’es, en’] I know WP has recently changed this shortcode replacing the old [tp mylang=”yes” lang=”es, en” ] for the new one, but I’ve done the replacement and I still get to a 404 Nothing found error page, whenever I click on a link with this code. Any Ideas?
WPBeginner Support says
You are probably using Transposh plugin. Please contact the plugin support, they would be able to help you better.
管理者
Akshat Verma says
can you recommend any good shortcode plugin for wordpress 4.2
Steve says
I am having trouble figuring out how to add code comments to a page with just shortcode in it. I’ve tried HTML & PHP comment tags and when added the shortcode doesn’t work anymore. The reason I would like to comment the code is that I would like to document information about the shortcode in the page I call it from ( I may not be the site admin forever).
WPBeginner Support says
WordPress will strip out PHP or HTML comments in post editor. If you were using Edit Flow, then you could leave a note below the post. Right now you can switch to Text editor and leave HTML comment, but as soon as some user views the post in visual editor it will be stripped out again.
管理者
Steve says
It strips out the comments AND puts in a blank line for each comment. I put the comments below the shortcode and that works fine.
Thanks for helping me understand what was going on.
Michael says
When I add shortcode to posts, whether it be in the middle of an article or at the end, the actual element always appears at the top of the post, any idea why?
Malte says
Same here! How to fix that?!
Malte says
Okay… Use return instead of echo and everything is k!
James Newman says
@MALTE – I have the same issue. Can you clarify which file needs to be edited? I looked at the .php files for the plugin and could not find any echo statements to replace.
Thanks!
WPBeginner Staff says
Simply copy [rx_aeolus_three_cols] and paste it in a WordPress page. Save your page and then preview it. However, you will first have to create your portfolio in the plugin. Otherwise you will not see anything, because there is nothing for the plugin to display.
Usha says
I have downloaded a plug-in ‘Aeolus portfolio’ for the WordPress 3.9.2 running Twenty Eleven theme. I have been given the following shortcodes in the plug-in setting:
[rx_aeolus_three_cols]-Displays all portfolio as three columns.
[rx_aeolus_two_cols]-Displays all portfolio as two columns.
[rx_aeolus_one_col]-Displays all portfolio as one column.
Can anyone help as to how these short code can be incorporated in a page. I am new to WP plugins and badly need help.
Thanks
Usha
Sweetbreeze Tornado says
What if you want to add a button with shortcode?
Dan says
Thanks! This thread helped me a lot.
Just in case someone else lands in here and need to use a more complex HTML/PHP code structure inside a shortcode, this is an example using some aditional options from the WordPress Shortcodes API documentation:
Place this (and modify as needed) inside your functions.php:
http://pastie.org/9454401
Then you just use this shortcode inside your WordPress content
[mycustomshortcode]
Greetings!
Rob says
You’re the man! This is exactly what I needed. Thank you.
WPBeginner Staff says
You can add this code in your theme’s functions.php file.
Aymen Benzarti says
HI
I’m beginner and this is my first time with wordpress
so the first question when i tried this tutorial is in which file i have to write this code ?
Nidesh says
Hi,
Could you please tell me whether i have to put short codes to a particular page if i want any particular plugin to be displayed in that particular page.
E.g. I’ve installed Collabpress plugin. And i don’t see it’s UI in the front end of my site. So do i have to insert any shortcode to a page for it to be displayed?
WPBeginner Support says
Nidesh, yes you will be using shortcodes to do that. Please check out our guide on using Collabpress
管理者
Christina says
I would like to add the subscribe shortcode to my side menu. How do I do this?
Amber T says
I am just a little confused… where am I embedding this shortcode.
I have a columns plugin that provided the shortcode with a click of a buton, not sure if I have to take the code and embed it in my html.
please help.
thanks in advance!
WPBeginner Support says
just put the shortcode in your post content. Click on the preview button to see how it looks before publishing your post.
管理者
Carol Manser says
Really? Easy? Simple? This website is great but it says it is for beginners. I’ve been using WordPress for 2 years and yet I did not understand it at all. It’s quite annoying the way geeks always bang on about how easy something is and then write something totally incomprehensible to ordinary humans – just like every Math teacher I ever had.
OK, write an article that can only be understood by geeks – fine, but please don’t keep telling me how easy it is
output? string? content editor – where is it? define a function? I wish you would because I don’t know what it is.
“This function is pretty straightforward – it just returns my Google Adsense code as a string” –
a string of what? etc etc. Just saying….
WPBeginner Support says
We totally agree with you that sometimes when writing we may feel that we have explained everything clearly for beginners, but a beginner level user may still not be able to understand it. This is why we have comments and we will be happy to explain it to you more
A shortcode is a short+code. WordPress allows you to generate shortcodes for your programing code blocks called
functions. Since a user can not write programming code in the Post Editor when writing a new post. The shortcodes provide users a way to add those programming codes into a post without writing the full code in post editor.When WordPress finds a shortcode in a post like this:
[my_shortcode]
It then executes the programming code associated with that particular shortcode.
The example given in the article above, creates a function get_adsense. When this function is executed it outputs the adsense code. We hope this explains it for you. Let us know if you have any more questions.
管理者
Stacy says
Or the instructions are 3 lines and your wondering where are the rest of the instructions????
Przemek says
Totally, agree. I struggled to understand most of it, too.
Alan Murray says
Can I use a shortcode on a Standalone HTML page to link to a page on my blog?
If so how do I embed it? Does the file need to be a PHP file?
I can’t seem to find anywhere on the net providing information on using sortcode outside WordPress pages or posts.
WPBeginner Support says
Alan, shortcodes are a WordPress feature the page should be a WordPress page in order to execute the shortcode.
管理者
DavidA says
Do you know, how to add a shortcode on a website from an other website WordPress? (multisite)
Thx
WPBeginner Support says
yes by creating a network wide plugin all blogs on the multisite can share the shortcode.
管理者
Lucy says
Very good one!
John Rose says
Clear and concise. Thank you so much. – John
Luke Ward says
Hello, thank you for this, it’s helped a lot.
However I would like to know how to add more than one adsense in as a shortcode.
eg [adsense1] – displays one advert [adsense2] displays a different advert.
Thanks!
Editorial Staff says
Follow the same process. Change the word adsense with adsense1.
管理者
Luke Ward says
Thank you, sorry for the noob question!
Also I have another problem now, I’m using this code to add adsense which works with responsive designs using javascript. You can see the code I’m using in the link below…
http://www.labnol.org/?p=25252
When this is added in after reuturn’ – nothing is displayed.
Hope you can help with this problem as I cannot seem to find out how anywhere.
Thanks
Editorial Staff says
The issue is with the syntax.
Paul says
Just came across this as I’m looking to add my own shortcodes, I can understand the function part of it, but which document do you include the “hook up”
“add_shortcode(‘adsense’, ‘get_adsense’); line”
that would be helpful to me
Thanks
Editorial Staff says
You add that right after the function part.
管理者
Patrick says
I’m clueless and am trying to create a short code to insert the blog’s owner’s user name. Any ideas?
Editorial Staff says
Write a function that outputs the username. Then put that function in the shortcode output. Unfortunately, we do not write custom codes like those on requests.
管理者