当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

「検索ページの作成」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(page.php を使用する: まで翻訳)
 
(4人の利用者による、間の5版が非表示)
1行目: 1行目:
{{NeedTrans}}
+
{{Old}}
{{Rename|C}}
+
 
 
__TOC__
 
__TOC__
 
検索ページは、カスタム[[Pages#Page_Templates|ページテンプレート]]の WordPress [[Pages|ページ]]で、検索した訪問者にいろいろな情報を提供します。
 
検索ページは、カスタム[[Pages#Page_Templates|ページテンプレート]]の WordPress [[Pages|ページ]]で、検索した訪問者にいろいろな情報を提供します。
6行目: 6行目:
 
== 知っておくべきこと ==
 
== 知っておくべきこと ==
  
異なる WordPress テーマは、異なる[[テンプレート|テンプレートファイル]]を有しています。<tt>search.php</tt> テンプレートファイルが含まれているテーマもあります。これは、「検索ページ」ではありません。検索結果を表示するページです。<tt>searchform.php</tt> というテンプレートファイルもあります。このテンプレートは、サイドバーに入れられていることがよくあり、検索ボックスフォームを生成します。テーマに無い場合は、デフォルトテーマからコピーすることができます。
+
異なる WordPress テーマは、異なる[[テンプレート|テンプレートファイル]]を有しています。<tt>[[テンプレート階層#検索結果表示|search.php]]</tt> テンプレートファイルが含まれているテーマもあります。これは、「検索ページ」ではありません。検索結果を表示するページです。<tt>searchform.php</tt> というテンプレートファイルもあります。このテンプレートは、サイドバーに入れられていることがよくあり、検索ボックスフォームを生成します。テーマに無い場合は、デフォルトテーマからコピーすることができます。
  
 
オリジナルのカスタム検索ページを作成するには、[[Pages#Page_Templates|ページテンプレート]]を作成し、検索フォームと、検索する前に訪問者に知らせたい情報とを含めます。
 
オリジナルのカスタム検索ページを作成するには、[[Pages#Page_Templates|ページテンプレート]]を作成し、検索フォームと、検索する前に訪問者に知らせたい情報とを含めます。
14行目: 14行目:
 
== page.php を使用する ==
 
== page.php を使用する ==
  
1. [[用語集#Text editor|テキストエディタ]]を使用して <tt>page.php</tt> を開き、<tt>searchpage.php</tt> という名前で保存します。('''注:''' ファイル名 <tt>search.php</tt> は特別なテンプレート名として予約されています。このファイル名は避けてください。提案している <tt>searchpage.php</tt> はファイルリストで認識しやすいでしょう。)
+
1. [[用語集#Text editor|テキストエディタ]]を使用して <tt>page.php</tt> を開き、<tt>searchpage.php</tt> という名前で新規保存します。('''注:''' ファイル名 <tt>search.php</tt> は特別なテンプレート名として予約されています。このファイル名は避けてください。提案している <tt>searchpage.php</tt> はファイルリストで認識しやすいでしょう。)
  
 
2. 保存したら、このファイルを編集します。
 
2. 保存したら、このファイルを編集します。
  
* [[The Loop]] を削除し(基本的に、コンテンツ <tt>div</tt> 内にあるもの全て)、<tt>div</tt> タグを残します。
+
* [[ループ]]を削除し (基本的に、コンテンツ <tt>div</tt> 内にあるものすべて)、<tt>div</tt> タグを残します。
* 検索投稿等の [[Designing Headings|heading]] を追加します。CSS スタイルシートの既存クラスを使用するか、新規作成してください。
+
* 検索投稿などの [[Designing Headings|heading]] を追加します。CSS スタイルシートの既存クラスを使用するか、新規作成してください。
 
* コンテンツ <tt>div</tt> あるいはページコンテンツを含む他の <tt>div</tt> に以下をコピーしてください。
 
* コンテンツ <tt>div</tt> あるいはページコンテンツを含む他の <tt>div</tt> に以下をコピーしてください。
  
<pre><?php include (TEMPLATEPATH . '/searchform.php'); ?></pre>
+
<pre><?php get_search_form(); ?></pre>
  
 
* <tt>searchpage.php</tt> の一番最初に以下を追加すると、管理画面で WordPress が検索ページとして認識します。
 
* <tt>searchpage.php</tt> の一番最初に以下を追加すると、管理画面で WordPress が検索ページとして認識します。
33行目: 33行目:
 
* ファイルを保存します。
 
* ファイルを保存します。
 
* ファイルをテーマディレクトリにアップロードします (<tt>style.css</tt> スタイルシートを変更した場合は、このファイルもアップロードしてください)。
 
* ファイルをテーマディレクトリにアップロードします (<tt>style.css</tt> スタイルシートを変更した場合は、このファイルもアップロードしてください)。
 +
 +
<!--
 +
<strong>旧バージョンの WordPress</strong>
 
* In the [[Administration Panels]]  go to [[Administration_Panels#Write_-_Make_some_content|Write]] > [[Write Page SubPanel|Write Page]].[[Image:writepage2_5.png|thumb|right|WordPress Write Page Panel]]
 
* In the [[Administration Panels]]  go to [[Administration_Panels#Write_-_Make_some_content|Write]] > [[Write Page SubPanel|Write Page]].[[Image:writepage2_5.png|thumb|right|WordPress Write Page Panel]]
 
* In the title field enter '''Search'''.
 
* In the title field enter '''Search'''.
40行目: 43行目:
 
* Select the [[Administration_Panels#Pages|Manage Pages]] panel.
 
* Select the [[Administration_Panels#Pages|Manage Pages]] panel.
 
* Write down the <tt>page_id</tt> number of your newly created [[Pages|Page]] named '''Search Page'''.  
 
* Write down the <tt>page_id</tt> number of your newly created [[Pages|Page]] named '''Search Page'''.  
(訳注: WP2.5 の管理画面での操作。要更新 --[[利用者:Mizuno|Mizuno]] 2010年4月12日 (月) 23:31 (UTC))
+
-->
 +
<strong>WordPress 3.0 以降</strong>
 +
* [[管理画面]]で「ページ → 新規追加」画面を開く。
 +
* タイトル欄に「'''検索'''」と入力。
 +
* '''ページ本文には何も書かないこと。'''
 +
* 同じ画面で、'''ページ属性'''というボックスを探す。
 +
* '''テンプレート'''のドロップダウンから ''Search Page'' を選択する。
 +
* '''公開'''ボタンをクリック。
 +
* 新しく作成した「'''検索'''」[[Pages|ページ]]の <tt>page_id</tt> を書き留めておいて、今後リンクできるようにする。
  
 
これで、検索ページの外観をカスタマイズする準備ができました。
 
これで、検索ページの外観をカスタマイズする準備ができました。
  
== Creating a Search Page Template ==
+
== 検索ページテンプレートを作成する ==
  
If you do not have a <tt>page.php</tt>, you can create one based upon your Theme's <tt>index.php</tt> template file.
+
もし <tt>page.php</tt> が無い場合は、テーマの <tt>index.php</tt> テンプレートファイルを元にして作成できます。
  
# In a [[Glossary#Text editor|text editor]], open your theme's <tt>index.php</tt> and save as <tt>searchpage.php</tt>.
+
# [[用語集#Text editor|テキストエディタ]]でテーマの <tt>index.php</tt> を開き、<tt>searchpage.php</tt> という名前で新規保存します。
# Then follow the editing steps from [[#Using the page.php|above]].
+
# [[#page.php を使用する|上記]]ステップにしたがって編集します。
  
== Preserving Search Page Results and Pagination ==
+
== 検索ページ結果の保存とページ分割 ==
  
Search results and Pagination may stop working when applying customization to the search template. To avoid these issues the first thing any developer needs to do is add the following code to the start of their Search template to ensure that the original WordPress query is preserved. To customize the query append additional arguments to <em>(array) $search_query</em>. Execute the $search_query through a new $wp_query object, more information on the WP_Query object can be found at http://codex.wordpress.org/Function_Reference/WP_Query
+
検索テンプレートをカスタマイズすると、結果とページ分割が上手く動作しないかもしれません。これらを解決するには、まず検索テンプレートに以下のコードを追加し、元の WordPress クエリが保持されるようにします。クエリをカスタマイズするには、追加の引数を <em>(array) $search_query</em> に付加します。新規 $wp_query オブジェクトで $search_query を実行します。WP_Query オブジェクトについての詳細は、[[関数リファレンス/WP_Query|WP_Query]] を参照してください。
  
 
<pre>
 
<pre>
71行目: 82行目:
 
</pre>
 
</pre>
  
Additional customization arguments can be found on the Codex at http://codex.wordpress.org/Template_Tags/query_posts
+
カスタマイズする引数は、[[テンプレートタグ/query_posts|query_posts]] を参照してください。
  
[[User:W3prodigy|W3prodigy]] 15:25, 30 March 2010 (UTC)
+
== 検索合計数を表示する ==
  
== Display Total Results ==
+
検索結果の合計数にアクセスするには、wp_query オブジェクトを使用して投稿の合計数を保持してください。
 
+
To access the total number of search results from a search, you should retrieve the total number of posts found using the wp_query object.
+
 
<pre><?php
 
<pre><?php
 
global $wp_query;
 
global $wp_query;
83行目: 92行目:
 
?>
 
?>
 
</pre>
 
</pre>
<em>More information on WP Query can be found on the Codex at http://codex.wordpress.org/Function_Reference/WP_Query</em>
+
<em>WP Query についての詳細は [[関数リファレンス/WP_Query|WP_Query]] を参照してください。</em>
  
[[User:W3prodigy|W3prodigy]] 15:25, 30 March 2010 (UTC)
+
== 検索ページにリンクする ==
  
== Linking to Your Search Page ==
+
カスタム検索ページへリンクするには、いくつかの方法があります。
  
You can now make a link to your custom Search Page in several ways.
+
;ページ ID を使用する : パーマリンクを使用する/しないに関わらず、ページ ID 番号を使用して新しい検索ページにリンクできます。
 +
<pre><a href="index.php?page_id=17" title="Search Page">検索ページ</a>
  
;Using the Page ID :Whether or not you use permalinks, you can link to your new Search Page by using Page ID number of the Page. 
+
あるいは、
<pre><a href="index.php?page_id=17" title="Search Page">Search Page</a>
+
  
OR
+
<a href="<?php bloginfo('url'); ?>/?page_id=17">検索ページ</a>
 
+
<a href="<?php bloginfo('url'); ?>/?page_id=17">Search Page</a>
+
 
</pre>
 
</pre>
; Using the Page Slug :The Page slug is set in the [[Write_Page_SubPanel|Edit Page]] panel. It is the name of the page if you are using [[Using Permalinks|Permalinks]]. You can manually change this.  An example of a Page slug link would be:
+
;ページスラッグを使用する : ページスラッグは [[Write_Page_SubPanel|ページ編集]] パネルで設定します。[[パーマリンクの使い方|パーマリンク]]を使用しているときはページ名です。手作業で変更することもできます。ページスラッグを使用した例は、
 
<pre><a href="/wordpress/search-page" title="Search Page">Search Page</a>
 
<pre><a href="/wordpress/search-page" title="Search Page">Search Page</a>
  
OR
+
あるいは
  
 
<a href="<?php bloginfo('url'); ?>/wordpress/search-page" title="Search Page">Search Page</a></pre>
 
<a href="<?php bloginfo('url'); ?>/wordpress/search-page" title="Search Page">Search Page</a></pre>
;Using <tt>wp_list_pages()</tt> :If you are using the [[テンプレートタグ/wp_list_pages|<tt>wp_list_pages()</tt>]] template tag, the page name would be automatically generated in your Pages list.
+
;<tt>wp_list_pages()</tt> を使用する : [[テンプレートタグ/wp_list_pages|<tt>wp_list_pages()</tt>]] テンプレートタグを使用している場合は、ページ一覧に自動生成されます。
  
== Customizing Your Search Page ==
+
== 検索ページをカスタマイズする ==
  
[[Image:managepage2_5.png|thumb|120px|right|Manage Pages Panel]]Now that you have created your custom Search Page, you can customize the display.  From the [[Administration_Panels#Manage_-_Change_your_content|Manage]] > [[Administration_Panels#Pages|Pages]] panel, on your custom Search Page line, choose '''Edit'''. Or open your <tt>searchpage.php</tt> in a text editor and edit it there. 
+
[[Image:managepage2_5.png|thumb|120px|right|Manage Pages Panel]]これでカスタム検索ページが作成できました。表示をカスタマイズできます。[[管理パネル#Pages|ページ]] パネルのカスタム検索ページの行で '''編集''' を選択してください。あるいはテキストエディタで <tt>searchpage.php</tt> を開き、編集してください。
  
Above the <tt>include</tt> function for your <tt>searchform.php</tt> within the content <tt>div</tt>, you can add text to help visitors search your site.
+
<tt>searchform.php</tt> のコンテンツ <tt>div</tt> 内の <tt>include</tt> 関数の上に、訪問者が検索する助けとなるテキストを追加できます。
  
 
<pre>
 
<pre>
 
<p>
 
<p>
My Site features articles about
+
このサイトでは <a title="WordPress の記事" href="index.php?cat=4">WordPress</a>
<a title="WordPress Articles" href="index.php?cat=4">WordPress</a>,
+
<a title="Web デザインの記事" href="index.php?cat=5">Web デザイン</a>
<a title="Web Design Articles" href="index.php?cat=5">web page design</a>,
+
<a title="Web 開発の記事" href="index.php?cat=6">Web 開発</a>
<a title="Development Articles" href="index.php?cat=6">website
+
and <a title="CSS の記事" href="index.php?cat=7">CSS</a> についての記事を書いています。
development</a>,
+
and <a title="CSS Articles" href="index.php?cat=7">CSS</a>.
+
 
</p>
 
</p>
<p>To search my website, please use the form below.</p>
+
<p>サイト内を検索するには、以下の検索フォームをご利用ください。</p>
  
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
+
<?php get_search_form(); ?>
 
</pre>
 
</pre>
  
You might want to include a list of keywords or other information, images, or details to customize your custom Search Page.
+
キーワードリストあるいはその他の情報、画像、カスタマイズの詳細などを追加してもよいかもしれません。
  
{{原文|Creating a Static Front Page|85646}}<!-- 14:07, 9 April 2010 W3prodigy 版 -->
+
<div id="Related">
 +
== 関連項目 ==
 +
</div>
 +
 
 +
{{Theme Templates}}
 +
 
 +
{{原文|Creating a Search Page|140597}} <!-- 2014-01-21T15:47:32 Designerthemes 版 -->
 +
 
 +
{{DEFAULTSORT:けんさくぺーじのさくせい}}
 
[[Category:初心者向けトピック]]
 
[[Category:初心者向けトピック]]
[[Category:WordPress Lessons]]
+
[[Category:WordPress レッスン]]
 
[[Category:テンプレート]]
 
[[Category:テンプレート]]
{{Copyedit}}
+
 
 +
[[en:Creating a Search Page]]

2015年8月17日 (月) 00:52時点における最新版

このページ「検索ページの作成」は情報が古くなっている可能性があります。最新版英語)も合わせてご覧ください。翻訳にご協力くださる方はぜひご相談ください

検索ページは、カスタムページテンプレートの WordPress ページで、検索した訪問者にいろいろな情報を提供します。

知っておくべきこと

異なる WordPress テーマは、異なるテンプレートファイルを有しています。search.php テンプレートファイルが含まれているテーマもあります。これは、「検索ページ」ではありません。検索結果を表示するページです。searchform.php というテンプレートファイルもあります。このテンプレートは、サイドバーに入れられていることがよくあり、検索ボックスフォームを生成します。テーマに無い場合は、デフォルトテーマからコピーすることができます。

オリジナルのカスタム検索ページを作成するには、ページテンプレートを作成し、検索フォームと、検索する前に訪問者に知らせたい情報とを含めます。

WordPress テーマに page.php テンプレートファイルが含まれいているかどうかを調べてください。デフォルト WordPress テーマにはこのテンプレートが含まれていますが、そうでないものも多くあります。含まれている場合は、こちらの説明にしたがってください。含まれていない場合は、オリジナルを作成するために必要な情報をごらんください。

page.php を使用する

1. テキストエディタを使用して page.php を開き、searchpage.php という名前で新規保存します。(注: ファイル名 search.php は特別なテンプレート名として予約されています。このファイル名は避けてください。提案している searchpage.php はファイルリストで認識しやすいでしょう。)

2. 保存したら、このファイルを編集します。

  • ループを削除し (基本的に、コンテンツ div 内にあるものすべて)、div タグを残します。
  • 検索投稿などの heading を追加します。CSS スタイルシートの既存クラスを使用するか、新規作成してください。
  • コンテンツ div あるいはページコンテンツを含む他の div に以下をコピーしてください。
<?php get_search_form(); ?>
  • searchpage.php の一番最初に以下を追加すると、管理画面で WordPress が検索ページとして認識します。
<?php
/*
Template Name: Search Page
*/
?>
  • ファイルを保存します。
  • ファイルをテーマディレクトリにアップロードします (style.css スタイルシートを変更した場合は、このファイルもアップロードしてください)。

WordPress 3.0 以降

  • 管理画面で「ページ → 新規追加」画面を開く。
  • タイトル欄に「検索」と入力。
  • ページ本文には何も書かないこと。
  • 同じ画面で、ページ属性というボックスを探す。
  • テンプレートのドロップダウンから Search Page を選択する。
  • 公開ボタンをクリック。
  • 新しく作成した「検索ページpage_id を書き留めておいて、今後リンクできるようにする。

これで、検索ページの外観をカスタマイズする準備ができました。

検索ページテンプレートを作成する

もし page.php が無い場合は、テーマの index.php テンプレートファイルを元にして作成できます。

  1. テキストエディタでテーマの index.php を開き、searchpage.php という名前で新規保存します。
  2. 上記ステップにしたがって編集します。

検索ページ結果の保存とページ分割

検索テンプレートをカスタマイズすると、結果とページ分割が上手く動作しないかもしれません。これらを解決するには、まず検索テンプレートに以下のコードを追加し、元の WordPress クエリが保持されるようにします。クエリをカスタマイズするには、追加の引数を (array) $search_query に付加します。新規 $wp_query オブジェクトで $search_query を実行します。WP_Query オブジェクトについての詳細は、WP_Query を参照してください。

<?php
global $query_string;

$query_args = explode("&", $query_string);
$search_query = array();

foreach($query_args as $key => $string) {
	$query_split = explode("=", $string);
	$search_query[$query_split[0]] = $query_split[1];
} // foreach

$search = new WP_Query($search_query);
?>

カスタマイズする引数は、query_posts を参照してください。

検索合計数を表示する

検索結果の合計数にアクセスするには、wp_query オブジェクトを使用して投稿の合計数を保持してください。

<?php
global $wp_query;
$total_results = $wp_query->found_posts;
?>

WP Query についての詳細は WP_Query を参照してください。

検索ページにリンクする

カスタム検索ページへリンクするには、いくつかの方法があります。

ページ ID を使用する 
パーマリンクを使用する/しないに関わらず、ページ ID 番号を使用して新しい検索ページにリンクできます。
<a href="index.php?page_id=17" title="Search Page">検索ページ</a>

あるいは、

<a href="<?php bloginfo('url'); ?>/?page_id=17">検索ページ</a>
ページスラッグを使用する 
ページスラッグは ページ編集 パネルで設定します。パーマリンクを使用しているときはページ名です。手作業で変更することもできます。ページスラッグを使用した例は、
<a href="/wordpress/search-page" title="Search Page">Search Page</a>

あるいは

<a href="<?php bloginfo('url'); ?>/wordpress/search-page" title="Search Page">Search Page</a>
wp_list_pages() を使用する 
wp_list_pages() テンプレートタグを使用している場合は、ページ一覧に自動生成されます。

検索ページをカスタマイズする

これでカスタム検索ページが作成できました。表示をカスタマイズできます。ページ パネルのカスタム検索ページの行で 編集 を選択してください。あるいはテキストエディタで searchpage.php を開き、編集してください。

searchform.php のコンテンツ div 内の include 関数の上に、訪問者が検索する助けとなるテキストを追加できます。

<p>
このサイトでは <a title="WordPress の記事" href="index.php?cat=4">WordPress</a>、 
<a title="Web デザインの記事" href="index.php?cat=5">Web デザイン</a>、
<a title="Web 開発の記事" href="index.php?cat=6">Web 開発</a>、
and <a title="CSS の記事" href="index.php?cat=7">CSS</a> についての記事を書いています。
</p>
<p>サイト内を検索するには、以下の検索フォームをご利用ください。</p>

<?php get_search_form(); ?>

キーワードリストあるいはその他の情報、画像、カスタマイズの詳細などを追加してもよいかもしれません。

テンプレート階層: カテゴリーテンプレート, タグテンプレート, タクソノミーテンプレート, ページテンプレート, 投稿タイプテンプレート, 投稿者テンプレート, 日付テンプレート, 検索テンプレート, 404 テンプレート, 添付ファイルテンプレート, ループテンプレート /en


最新英語版: WordPress Codex » Creating a Search Page最新版との差分