WordPressの投稿に検索フォームを追加したいですか？
投稿日のコンテンツに検索バーを追加することで、訪問者がより多くの素晴らしいコンテンツを見つけやすくなり、サイトに長く滞在してもらえるようになります。
このカテゴリーでは、WordPressの投稿に検索フォームを追加する方法をご紹介します。
なぜ投稿やページに検索フォームを追加するのか？
訪問者がWordPressサイトの投稿を楽しめば、もっと読みたいと思うでしょう。投稿に検索フォームを追加することで、訪問者がもっと読みたいと思うブログを見つけることができます。
こうすることで、ページビューを増やし、直帰率を下げることができる。
サイト訪問者が長く滞在すればするほど、メールリストへの登録、コメントする、購入する、ソーシャルメディアでフォローするなど、積極的な行動をとってくれる可能性が高まります。
このガイドでは、WordPress標準の検索フォームを投稿に追加する方法を紹介します。カスタムフォームを使いたい場合は、WordPress 検索フォームのカスタム作成方法をご覧ください。
それでは、WordPressの投稿に検索フォームを簡単に追加する方法を見ていきましょう。以下のクイックリンクから、使いたい方法にジャンプしてください：
方法1.WordPressの投稿に検索フォームを追加する (どのテーマでも使えます)
投稿に検索フォームを追加する最も簡単な方法は、ビルトイン検索ブロックを使用することです。
このガイドでは、投稿にブロックを追加する方法を紹介しますが、サイトのどのページやウィジェット対応エリアにも追加することができます。
まずは、検索フォームを追加したいページを開いてください。WordPressのコンテンツエディターで、＋アイコンをクリックします。
ポップアップで「検索」と入力する。右のブロックが表示されたら、クリックしてページに追加する。
初期設定では、このブロックはラベルとボタンテキストの両方に’Search’を使用しています。このテキストは訪問者に見えるので、もっと説明的なものに置き換えたほうがよいでしょう。
例えば、WordPressブログに検索バーを追加する場合、’Search recent blog posts’（最近のブログ投稿を検索）などを使用するとよいだろう。
ラベルやボタンテキストを使って、訪問者のモチベーションを高めることもできます。
例えば、WooCommerceのようなプラグインを使用してオンラインストアを作成した場合、’Find more great deals’や’Search for similar offers’のような使い方をするかもしれません。
プレースホルダーテキストを追加することもできます。このテキストは、訪問者が入力を始めると自動的に消えます。
プレースホルダーを追加するには、「オプションのプレースホルダー…」をクリックし、入力を開始します。
初期設定では、WordPressは検索バーのスタイルにテーマを使用します。
ただし、右側のメニューにある「カラー」設定で、ボタンの背景色と文字色を変更することができます。これにより、検索バーをサイトの他の部分から目立たせることができます。
検索ブロックの表示に満足したら、投稿を公開するか更新します。サイトにアクセスすると、投稿コンテンツ内に検索バーが表示されます。
上記と同じ手順で、より多くのWordPress投稿やページに検索フォームを追加することができます。サイドバーなどに検索バーを追加する詳しい方法については、WordPressのウィジェットの追加と使い方のガイドをご覧ください。
方法2.WordPressのすべての投稿に検索フォームを追加する（ブロックベーステーマ）
ThemeIsle Hestia Proのようなブロックベースのテーマを使用している場合、WordPressがすべてのブログ投稿に使用するテンプレートに検索バーを追加することができます。
この方法で、WordPressサイト全体の個別投稿に検索バーを素早く簡単に追加することができます。
フルサイトエディターを開くには、WordPressダッシュボードのテーマ “ エディターに移動します。
初期設定では、フルサイトエディターはテーマのホームテンプレートを表示します。
利用可能なすべてのオプションを表示するには、左側のメニューから「テンプレート」を選択します。
WordPressテーマを構成するすべてのテンプレートのリストが表示されます。
ブログ・テンプレートをカスタマイズするには、先に進んで「個別」をクリックする。
WordPressはブログレイアウトのプレビューを表示します。
このテンプレートを編集するには、小さな鉛筆のアイコンをクリックしてください。
これでフルサイトエディターにこのテンプレートが表示されます。
検索バーを追加するには、青い「＋」アイコンをクリックします。
表示されるポップアップで「検索」と入力して適切なブロックを見つける。
これで、検索バーを表示したい場所にブロックをドラッグできる。
ブロックタイトルやプレースホルダーテキストをカスタマイズするには、検索ブロックに新しいメッセージングをタイプするだけです。
ブロックの外観に満足したら、「保存」をクリックして検索バーを有効にします。
これで、あなたのサイトのブログ投稿にアクセスすると、検索バーが表示されます。
方法3.コードを使ってWordPressのすべての投稿に検索バーを追加する（どのテーマでも使えます）
ブロックテーマを使用せず、すべての投稿に検索バーを表示させたい場合は、コードを使用する必要があります。
そのためには、WPCodeの使用をお勧めします。このコードスニペットプラグインを使えば、テーマファイルを直接編集することなく、安全かつ簡単にカスタムコードを挿入することができます。この方法で、サイトを壊すことなく様々なコードスニペットを追加することができます。
WordPressにWPCodeプラグインをインストールします。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
次に、コード・スニペット “ + スニペットの追加に進みます。Add Your Custom Code (New Snippet)’を選択し、’Use snippet’ボタンをクリックします。
新しいカスタムコードに名前を付けます。ブログ投稿日: 検索バー」のようなシンプルなものでも構いません。
その後、コードタイプを「PHP Snippet」に変更する。
次に、コード・プレビュー・ボックスで、以下のコード・スニペットをコピー＆ペーストする：
// Define the button text and placeholder text. You can customize these values as needed.
$button_text = 'Search'; // The text displayed on the search button
$placeholder_text = 'What are you looking for?'; // The placeholder text in the search input field
// Construct the search form HTML using the defined button text and placeholder text.
$search_form = '<form role="search" method="get" action="' . esc_url(home_url('/')) . '" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search">
<label class="wp-block-search__label" for="wp-block-search__input-2">' . esc_html($button_text) . '</label>
<div class="wp-block-search__inside-wrapper ">
<input class="wp-block-search__input" id="wp-block-search__input-2" placeholder="' . esc_attr($placeholder_text) . '" value="" type="search" name="s" required="">
<button aria-label="' . esc_attr($button_text) . '" class="wp-block-search__button wp-element-button" type="submit">' . esc_html($button_text) . '</button>
</div>
</form>';
// Output the search form HTML.
echo $search_form;
このコードは、検索ブロックと同様の基本的な検索バーを追加します。必要に応じてボタンとプレースホルダー・テキストをカスタマイズできます。
完了したら、下にスクロールし、挿入方法で「Auto Insert」が選択されていることを確認する。
場所については、「ページ固有」タブに移動し、あなたの条件に最も適したものを選択します。ここでは例として、「コンテンツの後にインサーター」を選択しています。
完了したら、コードを「有効化」して「スニペットを保存」をクリックするだけです。
このように表示されるはずだ：
WordPressの検索を改善するヒントとトリックを発見する
検索ブロックは、WordPressのビルトイン検索機能を使用します。しかし、これはかなり限定的で、正確な結果を表示するのがあまり得意ではありません。WordPressの検索の仕組みについては、投稿でさらに詳しく説明しています。
WordPressの検索機能をより高度なものにしたい場合もあるでしょう。カテゴリーごとの検索機能を追加したり、ブログ投稿のコメントを検索できるようにしたい場合もあるでしょう。
そこでSearchWPの登場です。このカスタム検索プラグインは、WordPressサイト内検索を完全にコントロールできるので、訪問者により正確な検索結果を提供することができます。
SearchWPはまた、PDFファイル、ACFファイル、テキストファイル、WordPressカスタムフィールドなど、サイトのすべての部分を検索可能にします。
カスタム検索フォームを作成したら、ブロックまたはショートコードを使用してサイトの任意の場所に追加することができます。
さらに詳しく知りたい方は、SearchWPでWordPressの検索を改善する方法をご覧ください。
このチュートリアルで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!
Hasse Dahlriksson says
But what happends after update of theme?
WPBeginner Support says
If you created a site-specific plugin then the changes will remain
管理者
Holly says
Thank you, but I’m seeing only {wpbsearch] on the page I want the search form to be. I’m not sure if I’m placing the add_shortcode(‘wpbsearch’, ‘get_search_form’); code in the correct place in the theme functions.php file. I placed the following code in a perceived function location: between /** and * is_it woocommerce_page- Returns true if on a page which uses WooCommerce…) in the actual page I want to search, as I want it to be a page-only search, (and is this the correct code to do that?)
The Page Code:
function wpbsearchform( $form ) {
$form = ‘
‘ .
_(‘Search Timeline For:’) . ‘
‘;
return $form;
}
add_shortcode(‘wpbsearch’, ‘wpbsearchform’);
Sonji says
thank you so much for this. It was so easy. I have been searching for how to do this for months but was looking in the wrong places.
Ryan says
I want to add a general google search bar -not custom search just a general google search box so users will not have to leave the page to conduct a google search.
Yao Daniel says
Hi there!
You guys are really the best (y)
Great post once again.
I’ve been able to add the search form with visual composer as well. So, maybe someone will give it a try
Finaly, I’m trying to add a search form in a slideshow like this site:
I’ll be more than glad if someone here do have a trick for this.
Thanks again and stay blessed
Carissa says
Just what I was looking for, thank you! What would an example be of CSS if we wanted to change the colors and text of the search bar? (i.e. what would we add to CSS to change the colors/text/etc.)?
Luke MEL says
Wow! That was the easiest add a search box reply – ever!!!!!
Robin says
Awesome! Had to use this on my webpage:
It was super easy to implement and looks awesome
Jarod Thornton says
This was stupid easy to implement. I wrote it as a plugin so I can use on MultiSite
Thank you for the write-up.
sakthidasan says
Hello,
Is it possible to make this search form to search only a particular category?
Example. I have 5 Categories – Cat 1, Cat 2, Cat 3, Cat 4 and Cat 5.
I want the search from only on page 4 and the search form should search only from Cat 3?
Thanks
Sakthi
daniela says
Hi,
really love your tutorials!
Is it possible to define the search for comments within each post I put the shortcode? So that it’s not a global search, but a search of the comments just of the post I’m searching at via the shortcode. Would be amazing for helping me out, don’t find anything.
Thanks!!
WPBeginner Support says
You can do that with SearchWP plugin.
管理者
João Leitão says
amazing, 1, 2, 3 steps… and I got what I needed. simple & quick. thanks.
sandeep kumar dan says
Hi, I have just used this script on my theme. Thanks for the help. And its working. But i have one problem, I want to edit the title of that search form how to do. Please help me out.
Thanks
Sandeep Kumar Dan
Carol Dunlop says
Awesome tip! Thanks for posting, it is just what I was looking for. I wanted something simple so that people can search through exercise videos and this fit the bill.
Greg Maldewin says
Great article! I created a short code and then tweaked the CSS to position and size it the way I wanted.
add_shortcode(‘prodSearch’, function($atts) {
global $woocommerce;
echo ”;
get_product_search_form();
echo ”;
});
Nick Lewis says
Greg… what was your custom form code for your woocommerce search form you mention here?
I am trying to get two search boxes into a top navigation one for standard wordpress site search the other for woocommerce products..
Justin Young says
Hi Greg!
Thank you for this tip!.. Do you know how to change the search box text and css for this shortcode??
Any help would be greatly appreciated..
-Justin
Arc says
Just used it in my WP site. Was able to add search box anywhere I like.
Thank you! This one’s simpler and easy to use compared to the plugins out there.
Brian says
Great fix for what I need. However, is there any way to make the search box shorter?
Thanks,
Brian
Editorial Staff says
Yes, you can do that by editing the CSS file.
管理者
Jerome Van Gils says
I also want to max the search box shorter. What exactly should I edit in the CSS file?
David Schmeikal says
Great little tutorial. I tried to embed this shortcode within a column shortcode, but it just appears at the top of the page, instead of within the column. Is there something I need to add?
Editorial Staff says
Probably has a conflict with the columns shortcode styling and the search shortcode formatting.
管理者
Ionut Alexandru says
i read your site everytime when you put something new. I want to know if is posible to put search form for my site..like google search..Now i used search default from wordpress but i dont like very good the results and i want to know if is posible to put “google search” just for my content. i hope you understand, i try to write correct english but i’m not so good. i wait your answer if is posible. i appreciate your site and your work.
Editorial Staff says
Yes it is possible.
https://www.wpbeginner.com/wp-tutorials/how-to-add-google-search-in-a-wordpress-site/
管理者
Keith Davis says
Thanks for the tut.
Always learn something when I come over.
Appreciate you taking the time.
Abel Suing says
Thanks a lot! very informative! nice!
Geoffrey says
Hi,
Thank you for the tip .
Don’t forget to use different IDs to avoid duplication of FOR and ID’s values.
Here you use exactly the same as default WordPress’ search form.
Thank you,
Regards,
G.
Editorial Staff says
Good tip. Yeah, we just copied the code from the core for the sake of demonstration.
管理者
Eugenio says
Useful technique, thanks for sharing
Gretchen Louise says
Thank you so much! Really appreciate the way you guys answer our questions.
And this code worked like a charm!