HOME  /Welcart
 /Welcart_basicの検索フォームのカスタマイズ
2020年08月01日

Welcart_basicの検索フォームのカスタマイズ

ここでは「Welcart_Basicの検索フォームの仕様」に沿った形で、下図の様にカテゴリに応じた検索がおこなえる様にカスタマイズをおこないます。

上記のどの検索ボックスを表示するか?はページ情報を読み込んで自動で判断させます。

 

尚、このカスタマイズは下記の設定が終わっている事を前提とします。

 Welcart_basicの制限解除と必要な関数の作成

 Welcart_basicのcategory.phpのカスタマイズ

 

1.子テーマに「search.php」を作成します

検索結果の表示には「search.php」が使われますが、このプログラムは「商品」だけを表示するプログラムとなっています。

そこで下記の方法で「製品」や「ブログ」等が表示できるプログラムを作成していきます。

1-1.search.phpの作成

Welcart_basicのcategory.phpのカスタマイズで作成した「category.php」をコピーし、名前を「search.php」に変更します。

これで「製品」も「ブログ」の表示できる基礎が出来上がりました。

 

1-2.検索結果が無かった時の処理を追加する。

①製品の検索ループの修正

<修正前>

<?php if (have_posts()) : ?> <!-- 商品の表示 -->
		<div class="cat-il type-grid">
            省略
		</div><!-- .cat-il -->
<?php endif; ?>

<修正後>

<?php if (have_posts()) : ?> <!-- 商品の表示 -->
		<div class="cat-il type-grid">
           省略
		</div><!-- .cat-il -->
<?php else: ?>
		<p><?php echo __('No posts found.', 'usces'); ?></p>
<?php endif; ?>

赤字の部分を追加します

 

②ブログの検索ループの修正

修正方法は上記と同様です。

以上で「製品」でも「ブログ」等でも検索結果が表示できる様になりました。

 

2.検索フォームを作成する

①func¥welcart¥header-funcの下に「my_basic_searchform.php」というファイルを作成し、下記を追加します。

<?php 
/*****************************************************************************
my_basic_searchformの設定
*******************************************************************************/
function my_basic_searchform() {
	list($slug,$name) = get_my_category();
?>
<i class="fa fa-search"></i>
<form  action="<?php echo home_url('/');?>" >
	<div class="s-box">
		<?php if(is_my_item()):?> /* 商品の検索フォーム */
			<input type='text' name='s' id='s' value='' class='search-text'  placeholder='商品検索'>
			<input type='hidden' name='category_name' value='item'>
		<?php else:?> /* 商品以外の検索フォーム */
			<input type='text' name='s' id='s' value='' class='search-text' placeholder=<?php echo $name.'検索';?>>
			<input type="hidden" name="category_name" value=<?php echo $slug;?>>
		<?php endif;?>
		<input type="submit"  class="searchsubmit" value="&#xf002;" />
	</div>
</form>

			
<?php
 }
?>

■虫眼鏡アイコンを表示する「<i class=”fa fa-search”></i>」は、本来、ここで使うべきものなので「header.php」から外して、ここに持ってきました。

参照:Welcart_Basicの検索フォームの仕様

■商品の検索は「valueをitem」にして、商品だけを検索しています。また検索ボックスのプレ表示は「商品検索」にしています。

■商品以外の検索は、「valueをカテゴリのスラッグ」にして、そのカテゴリの文書だけを検索しています。また検索ボックスのプレ表示は「カテゴリ名+検索」という文字列を表示しています。

■「s-box」クラスと「searchsubmit」は、welcart_basicのCSSに合わせました。

以上で形は「welcart_basic」のままで、「商品」や「ブログ」が各々検索できる様になりました。

 

②functions.phpに上記関数の読み込みを記述します。

/* 検索フォーム関数の追加 */
	get_template_part('func/welcart/header-func/my_searchform');

以上でそれぞれのカテゴリの中だけを検索する仕組みが出来上がりました。

 

3.header.phpの修正

新しい検索フォームを作成したので、最後は「header.php」を変更して、新しい検索フォームをCALLする様に変更します。

<変更前>

<div class="search-box">
	<i class="fa fa-search"></i>
	<?php get_head_search_form(); ?>
</div>

<変更後>

<div class="search-box">
	<?php my_basic_searchform();?>
</div>

以上で完了です。

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wecart」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

ここではWelcart商品を価格順に並び替える方法を解説しています

ここではWelcartのキャンペーン商品設定の方法と、設定された商品リストを表示する関数を作成する方法を解説しています

ここではWelcartの商品カテゴリを指定して商品リストする関数を作成しています。全商品、おすすめ商品、新製品及び商品カテゴリが対象となります。

ここでは売れている商品をWelcartのDBから読み出して「売れ筋商品」としてリストする関数を作成する方法を解説しています。

ここではWelcartで個別商品を表示した時に、その商品と同じカテゴリの商品を「関連商品」としてリストする関数を作成する方法を解説しています。

ここではWelcart_basicのメニュのCSS制御の解説をしています。

ここではWelcart_basicのカートボタンの「色」と「文字」を変更する方法を解説しています。

ここではWelCart_Basicのカートの仕様がどうなっているか?を解説しています。

Welcartで会員システムを使うのであれば、ログイン後の画面に現在使えるポイント数が表示されているのが親切です。そこでここではwelcart_bascで保有ポイントが表示されるようにカスタマイズしたサンプルを解説しています。

ここではwelcart_basicの会員システムがどの様な仕様になっているか?を解説しています。

ここではWelcart_basicの検索BOXがCSSでどの様に制御されているのか?を解説しています

ここでは「welcart_basic」の「category.php」がブログ用のサイドーバーが使われてない問題点を修正方法を説明しています。また「welcart_basic」がどの様な構造になっているか?も併せて解説しています。

ここではWelcartの検索機能制限の解除と商品か否かを判断する関数を作成する方法を解説しています。

ここではWelcartで用意されている関数を解説しています。

Welcartのファンクションはfunctions.phpからincフォルダにあるファンクションをインクルードしています。この辺の構造を商品表示の設定例で解説しています。

Welcartのホームページと事前に作られている固有のページを解説してます。特にカートページやメンバーページ及びお問い合わせフォームの作り方も解説しています。

WelcartはWordPressの「固定ページ」と「投稿ページ」のみで作られております。この「投稿ページ」の中に「商品」が設定されています。そこで検索機能はファンクションの中で、商品のみを検索する様な設定が定義されている為、そのままではブログ等を検索できません。

ここではWelcartの商品画像を「slick」でスライドさせる方法を解説しています。スライド方法は下記の2つを解説しています。①.slickオプションだけでスライドさせる。②slickイベントやメソッドを使ってスライドさせる。

ここではカスタマイズ→ヘッダ画像で設定したヘッダ画像を「slick」で自動スライドさせる方法を解説しています。スライドサンプルとしては画像サイズと画像サイズ+αで表示させるサンプルを解説しています。

「slick.js」はjqueryでスライド動作を指定するプラグインです。ここでは「slick.js」のインストールから、設定方法及び「slick.js」のオプションを解説しています

ここでは「Welcart basic」の子テーマの作成方法を解説しています。

Welcartの商品画像適用ルールと「Media Library Assistant」による画像管理、及び商品画像の登録方法を解説しています。

Welcartで商品登録を行う前に.Welcart Shopの「基本設定」、「配送設定」及び「.商品カテゴリ」の登録が必要で、ここではその登録方法を解説しています。

ここではWelCartの商品の登録の仕方を解説しています。

WelcartはWordPressを使った無償のe-Commerceシステムです。ここでは「Welcart」の「インストール」と「無償テンプレート」について解説します。

ここでは「Welcart_Basic」の「メニュ」や「ウィジェット」及び「ヘッダ画像」の使い方を解説します。