<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>検索結果 &#8211; ケケンタの独学ITブログ</title>
	<atom:link href="https://kekenta-it-blog.com/tag/%E6%A4%9C%E7%B4%A2%E7%B5%90%E6%9E%9C/feed/" rel="self" type="application/rss+xml" />
	<link>https://kekenta-it-blog.com</link>
	<description>プログラミングやWeb制作の情報を発信</description>
	<lastBuildDate>Tue, 18 Mar 2025 02:08:16 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://kekenta-it-blog.com/wp-content/uploads/2023/07/cropped-KEKENTA-BLOG-32x32.png</url>
	<title>検索結果 &#8211; ケケンタの独学ITブログ</title>
	<link>https://kekenta-it-blog.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【WordPress】検索機能と検索結果ページを作成する方法</title>
		<link>https://kekenta-it-blog.com/wp-create-search/</link>
					<comments>https://kekenta-it-blog.com/wp-create-search/#respond</comments>
		
		<dc:creator><![CDATA[ケケンタ]]></dc:creator>
		<pubDate>Wed, 26 Jun 2024 08:11:24 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[検索機能]]></category>
		<category><![CDATA[検索結果]]></category>
		<guid isPermaLink="false">https://kekenta-it-blog.com/?p=8483</guid>

					<description><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-create-search__8483-1024x576.jpg" class="webfeedsFeaturedVisual" /></p>このようなお悩みをお持ちの方に向けて、この記事では WordPressのオリジナルテーマで検索機能と検索結果ページを作成する方法 をご紹介します。 一見すると難しそうに思うかもしれませんが、WordPressではシンプル [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-create-search__8483-1024x576.jpg" class="webfeedsFeaturedVisual" /></p><div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/困った顔-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/困った顔-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>WordPressのオリジナルテーマで「検索機能」ってどうやったら実装できるの……？</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p class="wp-block-paragraph">このようなお悩みをお持ちの方に向けて、この記事では</p>



<p class="has-text-align-center is-style-big_kakko_box wp-block-paragraph"><strong>WordPressのオリジナルテーマで<br>検索機能と検索結果ページを作成する方法</strong></p>



<p class="wp-block-paragraph">をご紹介します。</p>



<p class="wp-block-paragraph">一見すると難しそうに思うかもしれませんが、WordPressではシンプルな検索機能であればプラグインを使用しなくても簡単に実装することが可能です。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>この記事の手順通りに作業を進めれば簡単に実装できますので、ぜひ最後までご覧下さい！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<div class="swell-block-capbox cap_box is-style-shadow"><div class="cap_box_ttl"><span><span data-icon="LsLightbulb" data-id="0" style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMzIgNDYuNUgxNmMtMS4xIDAtMi0uOS0yLTJzLjktMiAyLTJoMTZjMS4xIDAgMiAuOSAyIDJzLS45IDItMiAyek00MS43IDE1LjlDNDEuMyAxMyA0MCAxMC4zIDM4LjIgOCAzNC41IDMuMiAyOSAuOCAyMy4xIDEgMTQgMS40IDYuNSA4LjkgNiAxOGMtLjMgNiAyLjQgMTEuNyA3LjIgMTUuNC41LjQuOC45LjggMS41djEuNmMwIDIuMiAxLjggNCA0IDRoMTJjMi4yIDAgNC0xLjggNC00VjM1YzAtLjYuMy0xLjIuOS0xLjcgNS4zLTQgOC0xMC42IDYuOC0xNy40em0tNy4xIDEuN2gtLjNjLS43IDAtMS4zLS41LTEuNS0xLjItLjctMy4yLTMuMi01LjctNi40LTYuMy0uOC0uMS0xLjQtLjktMS4yLTEuN3MuOS0xLjQgMS43LTEuMmM0LjQuOCA4IDQuMiA4LjkgOC42LjEuOC0uNCAxLjYtMS4yIDEuOHoiPjwvcGF0aD48L3N2Zz4=)" aria-hidden="true" class="swl-inline-icon"> </span><strong> この記事で作成する検索機能のポイント</strong></span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-check_list -list-under-dashed">
<li>検索対象は<strong>タイトル</strong>と<strong>本文</strong>（それ以外の部分を検索対象に含めたい場合はプラグイン等でのカスタマイズが必要）</li>



<li>半角スペースで区切れば複数キーワード検索が可能（全角スペースは不可）</li>
</ul>
</div></div>


<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-subloop-wq/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】WP_Query（サブループ）の使い方とパラメータ一覧を紹介</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-edit-functions/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-how-to-load-js/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】JavaScriptはどこに書けばいい？「３つの方法」を解説</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/change-to-swell/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">無料テーマCocoonからSWELLに乗り換えた７つの理由【WordPress】</span>
			</a>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2025/03/eye-catch__school-php-and-wp__14099-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/school-php-and-wp/">PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】</a>
						<span class="p-blogCard__excerpt">僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション&#8230;</span>					</div>
				</div>
			</div>
		</div>


<h2 class="wp-block-heading">WordPressにおける検索機能実装の流れ</h2>



<p class="wp-block-paragraph">WordPressで検索機能を実装する際は、大まかには以下のような流れをたどります。</p>



<div class="swell-block-capbox cap_box"><div class="cap_box_ttl"><span>WordPressにおける検索機能実装の流れ</span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-num_circle -list-under-dashed">
<li>検索フォーム用のPHPファイル（searchform.php）を作成する</li>



<li>検索結果ページ用のPHPファイル（search.php）を作成する</li>



<li>①で作成した<strong>検索フォーム</strong>を任意の場所で呼び出す</li>
</ul>
</div></div>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>それでは各工程について順番にご説明していきます。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p class="is-style-icon_info wp-block-paragraph">以降より掲載するディレクトリはローカル上でのものになりますが、実際にファイル配置する際にはご自身の環境（本番サーバー）で作業をお進めください。</p>



<h3 class="wp-block-heading">【手順①】検索フォーム用のPHPファイル（searchform.php）を作成する</h3>



<div class="swell-block-step" data-num-style="circle">
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">テーマディレクトリ直下に検索フォーム用のPHPファイル（searchform.php）を作成する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe wp-block-paragraph">まずは使用中のテーマディレクトリ直下に検索フォーム用のPHPファイルを作成します。</p>



<p class="has-text-align-center is-style-balloon_box2 wp-block-paragraph"><strong><strong>searchform</strong>.php</strong>を<strong>テーマディレクトリ直下</strong>に設置</p>


<div class="wp-block-image is-style-shadow size_s">
<figure class="aligncenter size-full"><img decoding="async" width="620" height="518" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-58.png" alt="searchform.phpを作成" class="wp-image-8708" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-58.png 620w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-58-300x251.png 300w" sizes="(max-width: 620px) 100vw, 620px" /><figcaption class="wp-element-caption">searchform.phpを作成</figcaption></figure>
</div></div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">作成したファイルに検索フォームのソースコードを記述</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe wp-block-paragraph">続いて、作成したファイルに検索フォームのソースコードを記述します。</p>



<p class="has-text-align-center is-style-balloon_box2 wp-block-paragraph"><strong><strong>searchform</strong>.php</strong>に記述</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>&lt;form action=&quot;&lt;?php echo esc_url(home_url(&#39;/&#39;)); ?&gt;&quot; method=&quot;get&quot; class=&quot;my_searchform&quot;&gt;
	&lt;input name=&quot;s&quot; id=&quot;s&quot; type=&quot;text&quot; value=&quot;&lt;?php the_search_query(); ?&gt;&quot; placeholder=&quot;検索キーワードを入力して下さい&quot; /&gt;
	&lt;input id=&quot;submit&quot; type=&quot;submit&quot; value=&quot;検索&quot; /&gt;
&lt;/form&gt;</code></pre></div>



<div class="swell-block-capbox cap_box"><div class="cap_box_ttl"><span><strong><strong>searchform</strong>.phpのポイント</strong></span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-check_list -list-under-dashed">
<li>&lt;form&gt;タグの<strong>action属性</strong>には「自分のサイトのトップページURL」を指定する</li>



<li>&lt;form&gt;タグの<strong>method属性</strong>は「get」にする</li>



<li>ひとつ目の&lt;input&gt;タグの<strong>name属性</strong>は「s」にする</li>



<li>ひとつ目の&lt;input&gt;タグの<strong>value属性</strong>には「the_search_query();」を設定し、検索結果ページで検索キーワードを表示できるようにする</li>



<li>ふたつ目の&lt;input&gt;タグの<strong>type属性</strong>は「submit」にする</li>
</ul>
</div></div>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>WordPressではたったこれだけのソースコードで検索機能が動くようになります！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div></div></div>
</div>



<h3 class="wp-block-heading">【手順②】検索結果ページ用のPHPファイル（search.php）を作成する</h3>



<p class="is-style-bg_stripe wp-block-paragraph">【手順①】で検索機能自体は動くようになりましたが、これでは検索結果が表示されないため、今度は<strong>検索結果ページ用のファイル</strong>を準備していきます。</p>



<div class="swell-block-step" data-num-style="circle">
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">テーマディレクトリ直下に検索結果表示用のPHPファイル（search.php）を作成する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe wp-block-paragraph">まずは使用中のテーマディレクトリ直下に検索結果表示用のPHPファイルを作成します。</p>



<p class="has-text-align-center is-style-balloon_box2 wp-block-paragraph"><strong><strong>search</strong>.php</strong>を<strong>テーマディレクトリ直下</strong>に設置</p>


<div class="wp-block-image is-style-shadow size_s">
<figure class="aligncenter size-full"><img decoding="async" width="620" height="518" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-59.png" alt="search.phpを作成" class="wp-image-8716" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-59.png 620w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-59-300x251.png 300w" sizes="(max-width: 620px) 100vw, 620px" /><figcaption class="wp-element-caption">search.phpを作成</figcaption></figure>
</div></div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">作成したファイルに検索結果表示用のソースコードを記述</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe wp-block-paragraph">続いて、作成したファイルに検索結果表示用のソースコードを記述します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>&lt;div&gt;
    &lt;p&gt;&lt;?php echo &#39;「&#39; . get_search_query() . &#39;」の検索結果：&#39; . $wp_query-&gt;found_posts . &#39; 件の記事が該当しました。&#39;;?&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;div&gt;
    &lt;main&gt;
    // メインループを回して検索結果として取得できた記事を出力する
    &lt;?php if ( have_posts() ): ?&gt;
        &lt;?php while ( have_posts() ) : the_post();?&gt;
        &lt;div&gt;
          &lt;h2&gt;&lt;a href=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;
          &lt;?php the_excerpt(); // 記事の抜粋?&gt;
          &lt;div&gt;
            &lt;p&gt;投稿日：&lt;?php echo get_the_date(); ?&gt;投稿時間：&lt;?php the_time(); ?&gt;カテゴリー：&lt;?php the_category(&quot; , &quot;); // 「,」区切りでカテゴリーを出力?&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
       &lt;?php endwhile; ?&gt;

       &lt;?php else: ?&gt;
           &lt;p&gt;該当する記事はありませんでした。&lt;/p&gt;
    &lt;?php endif; ?&gt;
    &lt;/main&gt;
&lt;/div&gt;</code></pre></div>



<div class="swell-block-capbox cap_box"><div class="cap_box_ttl"><span><strong><strong>search</strong>.phpのポイント</strong></span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-check_list -list-under-dashed">
<li><strong>get_search_query()</strong>（ソースコード2行目）で「入力された検索キーワード」を取得</li>



<li><strong>$wp_query-&gt;found_posts</strong>（ソースコード2行目）で「見つかった検索結果件数」を取得</li>



<li><strong>メインループ</strong>を回して「取得できた検索結果の記事」を1件ずつ出力</li>



<li>取得した記事が無ければ「該当する記事はありませんでした。」のテキストを出力（ソースコード19～21行目）</li>
</ul>
</div></div>
</div></div>
</div>



<h3 class="wp-block-heading">【手順③】①で作成した<strong>検索フォーム</strong>を任意の場所で呼び出す</h3>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>最後に、作成した検索フォームを任意の場所で呼び出します。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p class="wp-block-paragraph">呼び出し方はいたって簡単で、以下のソースコードを検索フォームを出力したい場所に記述するだけです。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>&lt;?php get_search_form(); ?&gt;</code></pre></div>



<p class="is-style-big_icon_check wp-block-paragraph">これはget_header()やget_footer()のような<strong>インクルードタグの１種</strong>です。<br><strong>get_search_form()</strong>によって【手順①】で作成したsearchform.phpが自動的に呼び出され、その中身である検索フォーム部分が表示されます。</p>



<h2 class="wp-block-heading">最後にCSSで自分好みの見た目に調整すれば完成！</h2>



<p class="wp-block-paragraph">以上が<strong>WordPressで検索機能を実装する方法</strong>でした。</p>



<p class="wp-block-paragraph">検索フォームや検索結果ページは、<strong><span class="swl-marker mark_yellow">HTMLやCSSを使用してご自身が好きな見た目に調整可能</span></strong>です。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p><strong>検索フォームの一部の属性</strong>だけは決められた値を設定する必要がありますが、class名やid名などは任意のものを設定可能です。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p class="wp-block-paragraph">また、検索結果ページに出力する内容も、基本的には「メインループで１件ずつ出力する」という部分を抑えていれば自由にカスタマイズできます。</p>



<p class="wp-block-paragraph">この記事のソースコードをベースに、ぜひご自身の状況に適したカスタマイズを行ってみて下さい。</p>



<p class="wp-block-paragraph">それでは最後までご覧いただきありがとうございました。</p>



<p class="wp-block-paragraph">当ブログではWordPressやWeb制作、PHPの情報を発信しています。<br>ご興味のある方は他の記事もご覧いただけると嬉しいです。</p>


<div class="p-blogParts post_content" data-partsID="10168">
<p class="is-style-balloon_box wp-block-paragraph"><strong>検索機能の関連記事</strong></p>


<div class="p-postListWrap"><ul class="p-postList -type-simple"><li class="p-postList__item">
	<a href="https://kekenta-it-blog.com/wp-search-exc-page/" class="p-postList__link">
		<div class="p-postList__body">
			<div class="p-postList__meta">
				<div class="p-postList__times c-postTimes u-thin">
	<time class="c-postTimes__posted icon-posted" datetime="2024-08-15" aria-label="公開日">2024-08-15</time><time class="c-postTimes__modified icon-modified" datetime="2025-03-18" aria-label="更新日">2025-03-18</time></div>
		<span class="p-postList__cat u-thin icon-folder" data-cat-id="74">WordPress</span>
				</div>
			<h2 class="p-postList__title">【WordPress】検索結果から固定ページを除外する方法【コピペで簡単！】</h2>		</div>
	</a>
</li>
<li class="p-postList__item">
	<a href="https://kekenta-it-blog.com/wp-search-condition-custom-ssp/" class="p-postList__link">
		<div class="p-postList__body">
			<div class="p-postList__meta">
				<div class="p-postList__times c-postTimes u-thin">
	<time class="c-postTimes__posted icon-posted" datetime="2024-08-07" aria-label="公開日">2024-08-07</time><time class="c-postTimes__modified icon-modified" datetime="2025-03-18" aria-label="更新日">2025-03-18</time></div>
		<span class="p-postList__cat u-thin icon-folder" data-cat-id="74">WordPress</span>
				</div>
			<h2 class="p-postList__title">【WordPress】検索機能の条件にSEO SIMPLE PACKの設定内容を追加する</h2>		</div>
	</a>
</li>
<li class="p-postList__item">
	<a href="https://kekenta-it-blog.com/wp-search-condition-custom/" class="p-postList__link">
		<div class="p-postList__body">
			<div class="p-postList__meta">
				<div class="p-postList__times c-postTimes u-thin">
	<time class="c-postTimes__posted icon-posted" datetime="2024-08-02" aria-label="公開日">2024-08-02</time><time class="c-postTimes__modified icon-modified" datetime="2025-03-18" aria-label="更新日">2025-03-18</time></div>
		<span class="p-postList__cat u-thin icon-folder" data-cat-id="74">WordPress</span>
				</div>
			<h2 class="p-postList__title">【WordPress】検索機能の条件にタグ・カテゴリー・カスタムフィールドを追加する</h2>		</div>
	</a>
</li>
<li class="p-postList__item">
	<a href="https://kekenta-it-blog.com/wp-create-search/" class="p-postList__link">
		<div class="p-postList__body">
			<div class="p-postList__meta">
				<div class="p-postList__times c-postTimes u-thin">
	<time class="c-postTimes__posted icon-posted" datetime="2024-06-26" aria-label="公開日">2024-06-26</time><time class="c-postTimes__modified icon-modified" datetime="2025-03-18" aria-label="更新日">2025-03-18</time></div>
		<span class="p-postList__cat u-thin icon-folder" data-cat-id="74">WordPress</span>
				</div>
			<h2 class="p-postList__title">【WordPress】検索機能と検索結果ページを作成する方法</h2>		</div>
	</a>
</li>
</ul></div></div>]]></content:encoded>
					
					<wfw:commentRss>https://kekenta-it-blog.com/wp-create-search/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
