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

Web制作に関する自社オウンドメディア-WIING media

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

2019.11.05 Tue

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ファイルに記述をします。
検索をかけると自動的に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 :
	get_template_part( 'content', 'none' );// 結果がない場合にcontent_none.phpを表示させる場合.
endif;?>
</div><!-- sea-con-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
検索フォームを設置して検索をかけて、検索結果の記事タイル一覧が表示されればOKです。

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

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

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