phpとjQueryで絞り込み検索向け連動プルダウン、WordPressの場合は?

絞り込み検索は、ワードプレスではカテゴリー/タグ/カスタムタクソノミーやら無料のプラグインを使うと親のoptionタグのchangeが子供や孫に非同期で反映出来ないものまでなら比較的に簡単に出来る。でも、それでは実用性が無い。県⇒市、メーカー⇒車種などは出来ない。商品価値が低い。ということで、DBから子や孫のoptionのvalueなどをjsonで非同期でひっぱってきて画面遷移無しで随時表示させる方法、もしくは、子や孫のoptionをレンダリング時に全て吐き出させて、それをjQueryでコントロールする2つの方法が浮かんだ。2~3年前にhtml、css、javascript、jQuery,ajax、php、MySQLの学習を初めて3ヶ月程度のド素人状態でphpフルスクラッチ開発の際に実装した時に検索して見つけたのが下記の前者です。後者のjQueryでドリルダウンがワードプレスの場合は、簡単。ただ、子にあたるoptionが多い場合、レンダリングで、全部htmlを吐き出すのはそれなりに表示速度に影響してしまう可能性もある。その為、子どもで吐き出すhtmlの数が少ない場合に限られるという大きな弱点もあると思います。自動車新車メーカー⇒車種 の場合は子どものoptionの数が多いので非同期で随時DBから引っ張ってきてajaxを使わないと厳しいと思います。

DB操作して実装しようの巻(前者)

DBから引っ張って来て実装する場合、phpのjson _encodeを使う。尚、DBとの接続方式は参照元がPDOだったので、mysql_connectやら他の接続方式やら環境に合わせてメリットデメリットも調べて検討した方が無難です。

htmlとjQueryの子の操作とDB接続(PDO)

これについては、一旦、ワードプレスから離れてphp、MySQLの環境をどっかの無料サーバーで作って検証するしかないです。

Load JSON data with jQuery, PHP and MySQL

※HTML CODEとjQuery CODE は同じファイル内に書いてOK。fruit-varieties.phpは別でphpファイルで作る

DBを作るSQLクエリ

Example table for MySQL

先にDB内にこれを作る必要あり。

optionタグが全部吐き出された状態からjQueryで絞り込み検索(後者)

キーワードで、jQuery、連動プルダウン、ドリルダウン、などで検索すると日本語記事出て来ます。すみません・・・。根本的なフルスクラッチの際のソースコードやDBの設計を思い出したかったので・・・。

ワードプレスなら、カスタムタクソノミーやらカスタムフィールドを使って子や孫のopstionを一気に全部吐き出させてjQueryドリルダウンでなんとか行ける。

追記、基本的なajaxを用いた連動プルダウン。データベースの各テーブルからオプションタグの中身をひっぱってくるソースコード

ajaxとデータベースに接続して引っ張てックルSQLはここを参考に

Dynamic Dependent Select Box using jQuery, Ajax and PHP

SQL文をプルダウンの追加に応じてドットで後ろにどんどん追加する方法、CODEZINEは中途半端な本を読むりもよっぽど身に付く。2~3時間程度、下記の記事の周辺を読み進めていけばphp/SQLの考え方の基礎的な部分が見えて来ます。このあたりまでくると、素人脱出、プログラマレベル1でしょうか(笑)

ECサイトの設計書を理解しよう!プログラミング未経験から始めるPHP入門~応用編(1)

セキュリティにはくれぐれもご注意を!

安全なウェブサイトの作り方

コメントを残す