読者です 読者をやめる 読者になる 読者になる

WordPress

アフリエイトブログの作成と運営を考える

商品を検索する機能を追加してみました。

アドバイス 奮闘記

検索項目も自由に追加することができます。あいまい検索、数値の範囲、検索対象をタイトル、記事内容、カテゴリ、タグといった指定ができるで、それらを組み合わせることが使い勝手の良い検索機能を追加することができるのでは

商品名、商品説明からのキーワード検索、価格帯を指定、カテゴリー(ブランド)での絞込といった検索項目です。

 

f:id:yumeji773:20170323113015p:plain

 

プラグイン「WP Custom Fields Search」使おうと思って調べてたら、あまり設定の事とか解説されてなくて、奮闘記を少しかいきます。

「ダッシュボード」⇒「プラグイン」⇒「新規追加」からインストールしてください。

 

lovelog.eternal-tears.com

 

「ダッシュボード」⇒「設定」に「WP Custom Fields Search」が追加されるのでクリックして設定画面を開きます。

 

f:id:yumeji773:20170323114018p:plain

 

ラベル

ここには項目のタイトルとして表示される文字を入力します。
因みに、このフィールドに

 

1
<img src=http://kotori-blog.com/hogehoge/images/hoge.gif alt=ホゲ />

 

の様な書き方(プロパティを”(ダブルコーテーション)で囲わない)のimgタグ埋め込めば、項目のタイトルとして画像を表示させることができます。

 

★データタイプ

以下の中から選択します。

記事フィールド

  • カスタムフィールド
  • カテゴリー
  • タグ
  • PostType

 

データフィールド

「データタイプの中のどのデータから検索するか」を選択します。

 

ウィジェット

以下の中から選択します。

「テキストを入力」は「全角スペースの複数ワード検索」可能な検索フォームが表示されます。

 

比較

どういう条件で絞り込むか?を指定します。
選択項目を見ていただければ、分かっていただけるかと。。。

  • 同等
  • の中のフレーズ
  • の中の言葉
  • 未満
  • 以上 
  • At Most

  • At Least
  • 範囲

 

★数値

数値で~以上や~未満等の比較を行う場合、チェックを入れてください。

 

ウィジェットの設定


ラジオボタンやドロップダウンの項目の設定。
カンマ区切りで入力する。

 

ドロップダウンやラジオボタンで「選択してください」項目を入れたい場合は
「:選択してください,項目1,項目2・・・」と入力してください。


※「選択してください」追加だけ気をつけてください。:(セミコロン)を前に付ける


※絞り込み項目追加したいときは、「フィールドを追加」をクリックです。

 

テンプレート用

1
2
<?php if(function_exists('wp_custom_fields_search'))
wp_custom_fields_search(); ?>

 

記事内用

1
「wp-custom-fields-search」

 

「」[ ]に直してください。

検索結果ページ(search.php)で、前のページで入力した絞り込みキーワードを表示する。

 

この画像は実際に絞り込み検索を行って表示された検索結果ページ(search.php)です。

 

ブラウザのアドレスバーに注目すると、絞り込みフォームで選択した絞り込みのキーワードがURLにそのまま表示されてます。

これはPHPの「GETメソッド」というやつで、HTMLからスクリプトに要求を出す手段の一つです。

このURLにひっついてるキーワードをページに出力してやればよろしいのです。

 

※詳しくはこちらを参考にして下さい。

konayuki1026.blogspot.jp

 

画像の例でいくと絞り込み条件の「目的」で選択した値を出力する場合

 

1
echo '目的 :'.$_GET['cs-mokuteki-0'];
 

 

コードの $_GET[‘cs-mokuteki-0‘] はURLの表示したいキーワードの=(イコール)前の文字列です。

 

絞り込み条件「テーマ」で選択した値を出力する場合は

1
echo 'テーマ :'.$_GET['cs-theme-1'];

 

どうですか。簡単でしょう。

検索結果ページ(search.php)でページ送り

 

ページ送りですが、プラグインWP Page-Navi」を使用すれば問題なくいけます。

 

※コメントでカスタムフィールド名を日本語にすると正常に動かないです。

 

カスタムフィールドの名称(meta_key)が日本語だとパーマリンクデフォルトにしないと正常に動作しないようです。検索語自体は日本語でもOKでした。もちろんカスタムフィールドに登録するデータ(meta_value)も日本語でOKです。これで、なんとか使えそうです。

※外国で生まれたツールは、とりあえず半角英数使いえば無難ですね。

 

「WP Page-Navi」でページ送りを付けた時のコードを挙げときます。

1
2
3
4
5
6
7
8
9
10
<?php if(have_posts()) :while(have_posts()): the_post();?>
 
<div><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<div><?php the_content(); ?></div>
 
<?php
endwhile;endif;
?>   
 
<div><?php wp_pagenavi(); ?></div>
 
「is_search()」での条件分岐が効かない

※「Custom Field Search」を利用した検索結果ページ(search.php)は「is_search()」での条件分岐が効きませんでした。

 

これを利用して条件分岐します。

 

「Custom Field Search」を利用した検索結果ページの場合、必ずURLのお尻に「?search-class=○○&widget_number=○○…」の様なパラメーターが付いているはずです。

header.php等の共通テンプレートにこんな感じのタグを書くと今表示しているのが検索結果ページかどうかを判定できます!

1
2
3
<?php if($_GET['search-class']){ ?>
<!--検索結果ページにだけ表示されるコンテンツ-->
<?php } ?>

 

パラメーターで渡された「search-class」に値が入っているかどうかで今表示しているのが検索結果ページかどうかを判定できる。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

WordPressで「ホームページ」をつくる!STEP9トップページを作り込む

参考記事 奮闘記

1、TOPページを作りこむ

トップページのコンテンツ内容を作り込んでいきます。

1-①、お店の紹介文を載せる

f:id:yumeji773:20170314180830p:plain

続きを読む

WordPressで「ホームページ」をつくる!STEP8サイドバーに最新記事を表示

参考記事 奮闘記

1、サイドバーに最新記事を表示する

サイドバーに新着記事を表示してみます。

f:id:yumeji773:20170314175918p:plain

続きを読む

WordPressで「ホームページ」をつくる!STEP7スキンを変更

参考記事 奮闘記

1、スキンを変更する

「Simplicity」ではカスタマイズメニューから「スキン」を変更することによって、ナビゲーションメニューなどの見た目を変更することが可能です。

1-①、いろいろなスキンを選択

f:id:yumeji773:20170314165514p:plain

続きを読む

WordPressで「ホームページ」をつくる!STEP6メインビジュアルを追加

参考記事 奮闘記

6、メインビジュアルを追加する

メインビジュアルを追加するために、「固定ページ一覧」から「トップページ」を開きます。
メインビジュアルとはホームページを最初に開いた時に上部に表示される、ホームページの顔となる大きなイメージ画像のことです。編集画面に移ったら「メディアを追加」をクリックします。

 

f:id:yumeji773:20170314161303p:plain

続きを読む

WordPressで「ホームページ」をつくる!STEP5タイトルロゴやメインイメージを追加

参考記事 奮闘記

ホームページのイメージを決める

ホームページのスタイルが完成したら、ホームページの印象を決めるタイトルロゴメインイメージを追加していきます。

 

ホームページに訪れるユーザーがそのページを読むかどうか判断する基準の一つが「写真デザインに惹かれるかどうか」です。

 

5、ロゴ画像をタイトルにする

タイトルをテキストからロゴ画像に変更します。

続きを読む

WordPressで「ホームページ」をつくる!STEP4「トップページ」を最初のページに

参考記事 奮闘記

ホームページを訪れた最初のページが任意のページになるように設定します。

最初の状態では初めのページが投稿一覧ページになっていますが、先ほど追加した固定ページである「トップページ」を最初のページに設定します。

4、ダッシュボード>表示設定

f:id:yumeji773:20170315205311p:plain

4ー①、「フロントページの表示」を「固定ページ」に変更

下の項目で先程作成した「トップページ」を選びましょう。変更が完了したら「変更を保存」をクリックします。

 

f:id:yumeji773:20170315205530p:plain

※固定ページが一つも存在しない場合この設定はできません。必ず固定ページを追加してから設定しましょう。

 

サイトを表示して確認してみます

f:id:yumeji773:20170315205643p:plain