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の設計を思い出したかったので・・・。

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

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

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

Dynamic Dependent Select Box using jQuery, Ajax and PHP

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

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

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

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

WordPress流のお作法を模索するなら

上記のやり方、Wordpress流じゃない気もしますよね。ajaxはwordpressでajax実践編[ページネーションをajaxで行ってみる]が半端ないです。参考になります。いつ見ても素晴らしい。概念図が明快過ぎる!ありがたや。
REST APIやjsonなどはWordpressと合わせておググりください。たくさんコンテンツがでてきます。httpメソッドによる画面遷移を伴うリクエスト/レスポンスのpostあたりを使うのか、javascriptの非同期系か、などを考えて組み合わせて使う事を考えるのが開発時の勘所。httpリクエストとhttpレスポンスの前の3ウェイハンドシェイクやsyn flood攻撃など、ネットワークに近い部分の通信の仕組み学習をすると、このあたりの内容が腑に落ちる様になります。Wordpressから初めてphp学習に入るとコピペ開発になりがちでサーバーサイドの技術も身に着けにくいので、真の意味のSEとしての実力は伸ばしにくいです。phpのPDOフルスクラッチ開発など、一度やってみると、視点も変わり、ワードプレス開発のハードルがぐっと下がり楽になり怖いものが減ります。また、非同期は速そうに思えますが、処理が増えると結構レンダリングの時間が長くなるのでお気をつけください。長くなりすぎると、開発モチベーションまで削がれ、辛いです。こういう小さな悪因の積み重ねが、心を蝕む事に繋がりますので、開発環境の使いにくさなどは多少の投資も考えながら積極的に改善されることを強くお勧めします。技術力向上速度の差がつきます。

ajaxでタクソノミーを使うならFilter WordPress posts by multiple taxonomy terms with AJAXも良さそうですね。

 

コメントを残す