WIING WebServiceCloudのWordPress用メディアブログテーマです。-WIING MEDIA

Web制作オンライン学習と企業ネットコンサルティング-WIING MEDIA

  • twitter WIING WebServiceCloud
  • Instagram WIING WebServiceCloud
  • facebook WIING WebServiceCloud
  • note WIING WebServiceCloud
  • WIING media ログイン
HOME  〉WordPress 〉WordPressテーマ 〉WPテーマ制作[7]-searchform.phpとsearch.phpのカスタマイズ

2019.11.05 Tue  2021.12.29

WPテーマ制作[7]-searchform.phpとsearch.phpのカスタマイズその1

WordPressテーマ

WPテーマ制作[7]-searchform.phpとsearch.phpのカスタマイズその1

searchform.phpとsearch.phpのカスタマイズ設定について

searchform.phpとsearch.phpで検索フォームと結果を表示するページを制作します。 WordPressに標準で実装されているWordPressタグ、get_search_form();を使用します。

searchform.phpに以下を記述(検索フォームの部品)

<form role="search" method="get" id="searchform" class="searchform" action="">
<div id="sea-box-hom">
<input name="s" id="s" type="text" class="inp-hom" placeholder="例)キーワード1 キーワード2" value="" required="required">
</div>
<p id="sen-but-hom">
<input name="" type="submit" class="but-inp-hom" value="検索する">
</p>
</form>

上の検索フォームは<?php get_search_form(); ?>で呼び出すことができるので、設置したいPHPファイルに記述をします。 検索をかけると自動的にsearch.phpが実行されるので、search.phpには検索結果が一覧で表示されるように以下の内容を記述します。(search.phpがない場合、自動的にindex.phpが呼び出されます)

search.phpに以下を記述(検索結果画面)

<?php get_header(); ?>
<div id="sea-con">
<?php if ( have_posts() ) : ?>
	<h1 class="page-title"><?php printf( __( '検索結果%s', 'wiingsearch' ), '<span>『' . esc_html( get_search_query() ) . '』</span>' ); ?></h1>
<?php if(function_exists('wp_pagenavi')) {
   // wp_pagenavi();//ページナビを使う場合
} ?>
<?php while ( have_posts() ) : the_post();// ループ開始. ?>
<article id="post-<?php the_ID(); ?>" >
<section>
	<?php the_title( sprintf( '<h2 class="ent-tit"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
</section>
</article>
<?php endwhile;// ループエンド. ?>
<?php else :
        echo '<h2 class="page-title">検索結果:一致するページは見つかりませんでした。</h2>';
	get_template_part( 'content', 'none' );// 結果がない場合にcontent_none.phpを表示させる場合.
endif;?>
</div><!-- sea-con-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
検索フォームを設置して検索をかけて、検索結果の記事タイル一覧が表示されればOKです。

カスタム方法

検索フォームは<?php get_search_form(); ?>で設置したい箇所に記述。 主に共通パーツとなるため、header.phpやfooter.php、page.phpなどが設置対象になります。

カスタマイズは、基本的には他の記事ページや固定ページなどと方法は一緒で、デフォルトでは検索フォームと検索結果画面が対象となります。

検索フォーム

検索フォームはパーツでの呼び出しになるので、主にインプットテキストフィールドやボタンのCSS装飾が中心になります。 デフォルトでAND検索も可能になっています。基本的に複数条件検索などの項目を追加しなくても、文中なども検索結果対象になるので、Google検索のようなイメージで使用が推奨されそうです。
(カテゴリーやタグなどの限定検索はアーカイブページの絞り込みのほうが精度がよさそうです。)
複数増やす場合は、ほかのWordPressシステムファイルと同じで、search-xxx.phpファイルを追加してget_template_part(‘search-xxx’)のような呼び出しをします。

検索結果ページ

検索フォームの検索ボタン押下後に表示されるページです。
こちらはページ単体のカスタムが必要になりますが、ページャー設置などを考慮すると、archive.phpなどと同じような構成になります。
ファイル名はWordPressシステムと連動しているので、search.phpのファイル名は基本変更しないで使用します。
HTMLタグをechoで出力して、別途CSSでデザイン指定します。
あまりないかもしれませんが、検索結果ページの出力内容をカスタマイズするには、if文による条件分岐により共通ファイルで対応するか、function.phpに読み込みファイルの分岐処理を記述して対応するかになると思います。

検索結果一覧は、バージョンアップ3.7から関連度順での検索結果表示がWordPressの標準機能となっているので、日付の降順や昇順はfunction.phpに個別に検索結果の出力制御を記述してカスタマイズする必要があります。

WIING MEDIA twitter

WIING MEDIA facebook

掲載情報につきましては当社が独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当社サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。