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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(翻訳済み。画像無し。「検索フォームを含む(検索のための専用の)ページの作成」)
 
(3人の利用者による、間の4版が非表示)
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> を書き留めておいて、今後リンクできるようにする。
  
 
これで、検索ページの外観をカスタマイズする準備ができました。
 
これで、検索ページの外観をカスタマイズする準備ができました。
48行目: 59行目:
 
もし <tt>page.php</tt> が無い場合は、テーマの <tt>index.php</tt> テンプレートファイルを元にして作成できます。
 
もし <tt>page.php</tt> が無い場合は、テーマの <tt>index.php</tt> テンプレートファイルを元にして作成できます。
  
# [[用語集#Text editor|テキストエディタ]]で、テーマの <tt>index.php</tt> を開き、<tt>searchpage.php</tt> という名前で保存します。
+
# [[用語集#Text editor|テキストエディタ]]でテーマの <tt>index.php</tt> を開き、<tt>searchpage.php</tt> という名前で新規保存します。
# [[#Using the page.php|上記]]ステップにしたがって編集します。
+
# [[#page.php を使用する|上記]]ステップにしたがって編集します。
  
 
== 検索ページ結果の保存とページ分割 ==
 
== 検索ページ結果の保存とページ分割 ==
  
検索テンプレートをカスタマイズすると、結果とページ分割が上手く動作しないかもしれません。これらを解決するには、まず検索テンプレートに以下のコードを追加し、元の WordPress クエリが保持されるようにします。クエリをカスタマイズするには、追加の引数を <em>(array) $search_query</em> に付加します。新規 $wp_query オブジェクトで $search_query を実行します。WP_Query オブジェクトについての詳細は、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>
  
カスタマイズする引数は、http://codex.wordpress.org/Template_Tags/query_posts を参照してください。
+
カスタマイズする引数は、[[テンプレートタグ/query_posts|query_posts]] を参照してください。
  
 
== 検索合計数を表示する ==
 
== 検索合計数を表示する ==
81行目: 92行目:
 
?>
 
?>
 
</pre>
 
</pre>
<em>WP Query についての詳細は http://codex.wordpress.org/Function_Reference/WP_Query を参照してください。</em>
+
<em>WP Query についての詳細は [[関数リファレンス/WP_Query|WP_Query]] を参照してください。</em>
  
 
== 検索ページにリンクする ==
 
== 検索ページにリンクする ==
88行目: 99行目:
  
 
;ページ ID を使用する : パーマリンクを使用する/しないに関わらず、ページ ID 番号を使用して新しい検索ページにリンクできます。
 
;ページ ID を使用する : パーマリンクを使用する/しないに関わらず、ページ ID 番号を使用して新しい検索ページにリンクできます。
<pre><a href="index.php?page_id=17" title="Search Page">Search Page</a>
+
<pre><a href="index.php?page_id=17" title="Search Page">検索ページ</a>
  
 
あるいは、
 
あるいは、
  
<a href="<?php bloginfo('url'); ?>/?page_id=17">Search Page</a>
+
<a href="<?php bloginfo('url'); ?>/?page_id=17">検索ページ</a>
 
</pre>
 
</pre>
 
;ページスラッグを使用する : ページスラッグは [[Write_Page_SubPanel|ページ編集]] パネルで設定します。[[パーマリンクの使い方|パーマリンク]]を使用しているときはページ名です。手作業で変更することもできます。ページスラッグを使用した例は、
 
;ページスラッグを使用する : ページスラッグは [[Write_Page_SubPanel|ページ編集]] パネルで設定します。[[パーマリンクの使い方|パーマリンク]]を使用しているときはページ名です。手作業で変更することもできます。ページスラッグを使用した例は、
110行目: 121行目:
 
<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>
  
キーワードリストあるいはその他の情報、画像、カスタマイズの詳細等を追加してもよいかもしれません。
+
キーワードリストあるいはその他の情報、画像、カスタマイズの詳細などを追加してもよいかもしれません。
  
{{原文|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最新版との差分