表題、WordPress管理画面のカスタムフィールド入力で、DB情報のサジェスト機能実装の方法の解説です。
例えばWordPressで、定期イベント開催など、ゲストの名前を入力していく、過去に登壇履歴があればサジェストさせる。
こんなイメージです。
この記事でわかること
今回の記事を参考にできること
サジェスト機能
任意のデータを保存し、サジェストで表示、選択できる編集ページの機能拡張
カスタマイズによりサジェスト機能の充実
コードを若干変更すれば、イベント以外にもデータベースに入力している特定情報をサジェストさせたいときなどにご活用ください。
運用効率の改善
過去に記録したデータなどを参照したい際にサジェストがあると編集効率、しいては運用効率が改善できます。
※あくまで当方実装の例です。当記事を参考にされてもうまく実装できない場合の責任は負いかねますこと、ご了承ください。
作成の全体イメージ
作成の全体イメージを共有します。
まず前提として、必要な情報をDBに保存しておくため、（今回例ですと、イベントの登壇者のデータを保存）、下記３つの手順でカスタムフィールドの設定準備をしておきます。
- カスタムフィールドボックスの追加
- 投稿ページに追加したカスタムフィールドのHTMLを追加
- カスタムフィールドの保存
サジェスト機能の実装の流れ
サジェスト機能の実装の流れを箇条書きします。
下記はあくまで事例です。違う方法ももちろんあるので、参考イメージとして活用ください。
１ 前提で作成したカスタムフィールドのデータをDBから取得
２ １を配列化
３ JavaScript（今回jQuery）で２の配列を扱える状態にする
４ カスタムフィールドの入力時に、３のjs配列を走査させる
５ 二文字入力後に、候補を表示させる
６ 候補をクリックすると、入力フォームに入力できる
作成ファイル
１ autocomplete.php（上記の１、２、３を処理）
２ autocomplete.js（上記の４，５，６を処理）
それでは、ここから流れにそっての手順とコード解説です。
サジェスト機能の設定方法、解説チュートリアル
以降、設定方法を解説チュートリアルです。
なお、本文は有料販売とさせていただいております。
購入方法は、
- Web365のオンラインショップにて、パスワードを購入いただき、
- 下記フォームより購入データ記載のパスワードを入力いただき、
- 記事を閲覧ください。
チュートリアルの内容ですが、
- 前提 カスタムフィールドの設定方法（コード付き）
- 前提で作成したカスタムフィールドのデータをDBから取得（コード付き）
- ２を配列化（コード付き）
- JavaScript（今回jQuery）で２の配列を扱える状態にする（コード付き）
- カスタムフィールドの入力時に、３のjs配列を走査させる（コード付き）
- 二文字入力後に、候補を表示させる（コード付き）
- 候補をクリックすると、入力フォームに入力できる（コード付き）
※あくまで当方実装の例です。当記事を参考にされてもうまく実装できない場合の責任は負いかねますこと、ご了承ください。
Web制作+Webマーケティングの個別講座開講中
Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております
・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方
どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。
外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。
Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています
・成果にこだわるサイト制作改善をお望みの方
・自社にとって最適なweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方
是非Web365までご相談ください。
【パートナー募集】
Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング、Web改善のプラン検討している方
・社内のWebマーケティングのリテラシーを高めたい方
・分析から改善運用まで一括でサポート依頼したい方
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
・クライアントへのWeb改善プラン実行のディレクションサポート
・社内のGoogleアナリティクスなどのレクチャー
・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
・クライアントへのWeb広告運用代行
・クライアントへの計測ツール設定代行（Googleアナリティクス、eコマース、ヒートマップClarityなど）
まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。
