• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

「関数リファレンス/get search form」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
({{原文|Function Reference/get search form|93733}}<!-- 18:48, 11 October 2010 Mirmillo 版 -->)
 
(HTML5と記述すべきところがHTML4になっていたので修正しました。)
 
(4人の利用者による、間の5版が非表示)
1行目: 1行目:
{{NeedTrans}}
+
<div id="Description">
==Description==
+
== 説明 ==
Display search form using <tt>searchform.php</tt> Theme file.
+
</div>
  
==Usage==
+
テーマの <tt>searchform.php</tt> ファイルを使用して検索フォームを表示します。無ければ WordPress に組み込みの検索フォームを表示します。
%%%<?php get_search_form(); ?>%%%
+
  
==Parameters==
+
'''注:''' この searchform.php は、[[テンプレート階層]]に含まれる search.php ではありません。search.php は検索結果を表示するテンプレートです。
This tag does not accept any parameters.  
+
 
 +
<div id="Usage">
 +
== 使い方 ==
 +
</div>
 +
 
 +
<?php get_search_form( $echo ); ?>
 +
 
 +
<div id="Parameters">
 +
== パラメータ ==
 +
</div>
 +
 
 +
{{Parameter|$echo|真偽値|''true'' ならフォームを表示します。''false'' なら表示せずフォームを文字列として返します。|オプション|true}}
 +
 
 +
<div id="Return_Values">
 +
== 戻り値 ==
 +
</div>
 +
 
 +
; (文字列) : パラメータ <tt>$echo</tt> が false ならフォームの HTML を返します。
 +
 
 +
<div id="Examples">
 +
== 用例 ==
 +
</div>
 +
 
 +
<div id="Default_HTML4_Form">
 +
=== デフォルトの HTML4 フォーム ===
 +
</div>
 +
 
 +
テーマに <tt>searchform.php</tt> が無い場合は、WordPress に組み込みの検索フォームが使われます:
  
==Examples==
 
If you don't have <tt>searchform.php</tt> in your Theme, WordPress will render its built-in search form:
 
 
<pre>
 
<pre>
<form role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>">
+
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
+
<div>
        <input type="text" value="" name="s" id="s" />
+
<label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label>
        <input type="submit" id="searchsubmit" value="Search" />
+
<input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
    </div>
+
<input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
 +
</div>
 
</form>
 
</form>
 
</pre>
 
</pre>
 +
このフォームは HTML4 の Web サイトで使われます。
  
If you do have <tt>searchform.php</tt> in your Theme, it will be used instead. Keep in mind that the search form should do a GET to the homepage of your blog. The input text field should be named <tt>s</tt> and you should always include a <tt>label</tt> like in the example above.
+
<div id="Default_HTML5_Form">
 +
=== デフォルトの HTML5 フォーム ===
 +
</div>
  
Example of a custom <tt>searchform.php</tt>:
+
[[Version 3.6|WordPress 3.6]] 以降、テーマは下記のコードを使って [[セマンティックマークアップ|HTML5 マークアップ]]のサポートを明確に選択できるようになりました。
 +
 
 +
<pre>add_theme_support( 'html5', array( 'search-form' ) );</pre>
 +
 
 +
この場合 WordPress は組み込みの HTML5 検索フォームを使用します:
 +
 
 +
<pre>
 +
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
 +
<label>
 +
<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
 +
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
 +
</label>
 +
<input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
 +
</form>
 +
</pre>
 +
 
 +
HTML4 フォームとの違いは <code>class="search-form"</code> を含むことです。また input タグは <code>type="text"</code> ではなく <code>type="search"</code> です。さらに placeholder 属性があり、適切な場合にそのテキストを表示できます。これは placeholder を表示するのに javascript が不要ということです。
 +
<code>id</code> を持つ要素がないので、一つの有効なドキュメントに複数の検索フォームを配置できます。
 +
 
 +
<div id="Theme_Form">
 +
=== テーマの検索フォーム ===
 +
</div>
 +
 
 +
テーマに <tt>searchform.php</tt> がある場合は、それを使用します。検索フォームは、ブログのホームページに GET を行わなければならないことに注意してください。入力テキストフィールドの名前は <tt>s</tt> にして、上述の例のように <tt>label</tt> を必ず含めてください。
 +
 
 +
以下はカスタム <tt>searchform.php</tt> の例です:
  
 
<pre>
 
<pre>
 
<form action="/" method="get">
 
<form action="/" method="get">
    <fieldset>
+
<fieldset>
        <label for="search">Search in <?php bloginfo( 'name' ); ?></label>
+
<label for="search">Search in <?php echo home_url( '/' ); ?></label>
        <input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
+
<input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
        <input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search.png" />
+
<input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search.png" />
    </fieldset>
+
</fieldset>
 
</form>
 
</form>
 
</pre>
 
</pre>
  
A last option is to write a custom function (in your <tt>functions.php</tt> file) and hook that function to the <tt>get_search_form</tt> action hook.
+
送信される唯一のパラメータは <tt>s</tt> で、現在の検索クエリの値を持ちます。しかしいろいろな形に検索クエリを変更できます。例えば検索結果に投稿だけを(固定ページ等を除外して)表示したければ、下記をフォームに追加します:
  
 
<pre>
 
<pre>
function my_search_form( $form ) {
+
<input type="hidden" value="post" name="post_type" id="post_type" />
 +
</pre>
  
    $form = '<form role="search" method="get" id="searchform" action="'.get_bloginfo('url').'" >
+
ここで値 <tt>post</tt> を送信していますが、デフォルト値は <tt>any</tt> であり、投稿・固定ページ・カスタム投稿タイプを意味します。上記の <tt>input</tt> をフォームに追加すると投稿タイプが post である投稿(普通の投稿)だけを表示します。
    <div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
+
このような方法でいろいろ追加できます。オブジェクト <tt>$wp_query</tt> を <tt>var_dump</tt> で見ると、検索キーのデフォルト値をすべて確認できます。<tt>$wp_query->query</tt> を <tt>var_dump</tt> で見ると現在の検索クエリを確認できます。
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
+
    <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
+
    </div>
+
    </form>';
+
  
    return $form;
+
最後の方法は、カスタム関数を作って(テーマの <tt>functions.php</tt> ファイルに入れる)その関数を <tt>get_search_form</tt> アクションにフックします。
 +
 
 +
<pre>
 +
function my_search_form( $form ) {
 +
$form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
 +
<div><label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
 +
<input type="text" value="' . get_search_query() . '" name="s" id="s" />
 +
<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
 +
</div>
 +
</form>';
 +
 
 +
return $form;
 
}
 
}
  
52行目: 113行目:
 
</pre>
 
</pre>
  
==Notes==
+
<div id="Notes">
 +
== 参考 ==
 +
</div>
  
==Change Log==
+
検索実行後の検索フィールドに、現在の検索対象のキーワードを表示したい場合、<code>value="<?php echo get_search_query(); ?>"</code> を使います(これは <code>esc_attr( $s );</code> と必要なフィルターを適用するラッパー関数)。もしセキュアに処理しなければ、ここはテーマの中で XSS 脆弱性が最も発生しやすい箇所の一つです。
Since: 2.7.0
+
  
==Source File==
+
<div id="Change_Log">
<tt>get_search_form()</tt> is located in {{Trac|wp-includes/general-template.php}}.
+
== 変更履歴 ==
 +
</div>
  
==Related==
+
* [[Version 2.7|2.7.0]] : 新規導入
 +
 
 +
<div id="Source_File">
 +
== ソースファイル ==
 +
</div>
 +
 
 +
<tt>get_search_form()</tt> は {{Trac|wp-includes/general-template.php}} にあります。
 +
 
 +
<div id="Related">
 +
== 関連資料 ==
 +
</div>
  
 
{{Include Tags}}
 
{{Include Tags}}
66行目: 139行目:
 
{{Tag Footer}}
 
{{Tag Footer}}
  
{{原文|Function Reference/get search form|93733}}<!-- 18:48, 11 October 2010 Mirmillo  版 -->
+
{{原文|Function Reference/get_search_form|151284}} <!-- 12:54, 1 May 2015 Miccweb 版 -->
 +
 
 +
{{DEFAULTSORT:Get_search_form}}
 
[[Category:関数]]
 
[[Category:関数]]
 +
 +
[[en:Function Reference/get_search_form]]
 +
[[it:Riferimento funzioni/get_search_form]]
 +
[[mk:Функција:get_search_form]]
 +
[[ru:Теги шаблонов/get_search_form]]

2016年5月7日 (土) 23:45時点における最新版

テーマの searchform.php ファイルを使用して検索フォームを表示します。無ければ WordPress に組み込みの検索フォームを表示します。

注: この searchform.php は、テンプレート階層に含まれる search.php ではありません。search.php は検索結果を表示するテンプレートです。

使い方

<?php get_search_form( $echo ); ?>

パラメータ

$echo
真偽値) (オプションtrue ならフォームを表示します。false なら表示せずフォームを文字列として返します。
初期値: true

戻り値

(文字列) 
パラメータ $echo が false ならフォームの HTML を返します。

用例

デフォルトの HTML4 フォーム

テーマに searchform.php が無い場合は、WordPress に組み込みの検索フォームが使われます:

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<div>
		<label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label>
		<input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
		<input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
	</div>
</form>

このフォームは HTML4 の Web サイトで使われます。

デフォルトの HTML5 フォーム

WordPress 3.6 以降、テーマは下記のコードを使って HTML5 マークアップのサポートを明確に選択できるようになりました。

add_theme_support( 'html5', array( 'search-form' ) );

この場合 WordPress は組み込みの HTML5 検索フォームを使用します:

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
	<label>
		<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
		<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
	</label>
	<input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>

HTML4 フォームとの違いは class="search-form" を含むことです。また input タグは type="text" ではなく type="search" です。さらに placeholder 属性があり、適切な場合にそのテキストを表示できます。これは placeholder を表示するのに javascript が不要ということです。 id を持つ要素がないので、一つの有効なドキュメントに複数の検索フォームを配置できます。

テーマの検索フォーム

テーマに searchform.php がある場合は、それを使用します。検索フォームは、ブログのホームページに GET を行わなければならないことに注意してください。入力テキストフィールドの名前は s にして、上述の例のように label を必ず含めてください。

以下はカスタム searchform.php の例です:

<form action="/" method="get">
	<fieldset>
		<label for="search">Search in <?php echo home_url( '/' ); ?></label>
		<input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
		<input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search.png" />
	</fieldset>
</form>

送信される唯一のパラメータは s で、現在の検索クエリの値を持ちます。しかしいろいろな形に検索クエリを変更できます。例えば検索結果に投稿だけを(固定ページ等を除外して)表示したければ、下記をフォームに追加します:

<input type="hidden" value="post" name="post_type" id="post_type" />

ここで値 post を送信していますが、デフォルト値は any であり、投稿・固定ページ・カスタム投稿タイプを意味します。上記の input をフォームに追加すると投稿タイプが post である投稿(普通の投稿)だけを表示します。 このような方法でいろいろ追加できます。オブジェクト $wp_queryvar_dump で見ると、検索キーのデフォルト値をすべて確認できます。$wp_query->queryvar_dump で見ると現在の検索クエリを確認できます。

最後の方法は、カスタム関数を作って(テーマの functions.php ファイルに入れる)その関数を get_search_form アクションにフックします。

function my_search_form( $form ) {
	$form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
	<div><label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
	<input type="text" value="' . get_search_query() . '" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
	</div>
	</form>';

	return $form;
}

add_filter( 'get_search_form', 'my_search_form' );

参考

検索実行後の検索フィールドに、現在の検索対象のキーワードを表示したい場合、value="<?php echo get_search_query(); ?>" を使います(これは esc_attr( $s ); と必要なフィルターを適用するラッパー関数)。もしセキュアに処理しなければ、ここはテーマの中で XSS 脆弱性が最も発生しやすい箇所の一つです。

変更履歴

ソースファイル

get_search_form()wp-includes/general-template.php にあります。


インクルードタグ: get_header(), get_footer(), get_sidebar(), get_template_part(), get_search_form(), comments_template()


関数リファレンステンプレートタグ目次もご覧ください。


最新英語版: WordPress Codex » Function Reference/get_search_form最新版との差分