WordPressでホームページを作るには

【チュートリアル】WordPress編集画面で、DB(カスタムフィールド情報)のサジェスト機能の実装方法

投稿日:2021年7月16日 更新日:

表題、WordPress管理画面のカスタムフィールド入力で、DB情報のサジェスト機能実装の方法の解説です。

例えばWordPressで、定期イベント開催など、ゲストの名前を入力していく、過去に登壇履歴があればサジェストさせる。

こんなイメージです。

サジェスト機能1

今回の記事を参考にできること

サジェスト機能

任意のデータを保存し、サジェストで表示、選択できる編集ページの機能拡張

カスタマイズによりサジェスト機能の充実

コードを若干変更すれば、イベント以外にもデータベースに入力している特定情報をサジェストさせたいときなどにご活用ください。

運用効率の改善

過去に記録したデータなどを参照したい際にサジェストがあると編集効率、しいては運用効率が改善できます。

※あくまで当方実装の例です。当記事を参考にされてもうまく実装できない場合の責任は負いかねますこと、ご了承ください。

作成の全体イメージ

作成の全体イメージを共有します。

まず前提として、必要な情報をDBに保存しておくため、(今回例ですと、イベントの登壇者のデータを保存)、下記3つの手順でカスタムフィールドの設定準備をしておきます。

  1. カスタムフィールドボックスの追加
  2. 投稿ページに追加したカスタムフィールドのHTMLを追加
  3. カスタムフィールドの保存

サジェスト機能の実装の流れ

サジェスト機能の実装の流れを箇条書きします。

下記はあくまで事例です。違う方法ももちろんあるので、参考イメージとして活用ください。

1 前提で作成したカスタムフィールドのデータをDBから取得
2 1を配列化
3 JavaScript(今回jQuery)で2の配列を扱える状態にする
4 カスタムフィールドの入力時に、3のjs配列を走査させる
5 二文字入力後に、候補を表示させる
6 候補をクリックすると、入力フォームに入力できる

作成ファイル

1 autocomplete.php(上記の1、2、3を処理)
2 autocomplete.js(上記の4,5,6を処理)

それでは、ここから流れにそっての手順とコード解説です。

サジェスト機能の設定方法、解説チュートリアル

以降、設定方法を解説チュートリアルです。

なお、本文は有料販売とさせていただいております。

購入方法は、

  1. Web365のオンラインショップにて、パスワードを購入いただき、
  2. 下記フォームより購入データ記載のパスワードを入力いただき、
  3. 記事を閲覧ください。

チュートリアルの内容ですが、

  1. 前提 カスタムフィールドの設定方法(コード付き)
  2. 前提で作成したカスタムフィールドのデータをDBから取得(コード付き)
  3. 2を配列化(コード付き)
  4. JavaScript(今回jQuery)で2の配列を扱える状態にする(コード付き)
  5. カスタムフィールドの入力時に、3のjs配列を走査させる(コード付き)
  6. 二文字入力後に、候補を表示させる(コード付き)
  7. 候補をクリックすると、入力フォームに入力できる(コード付き)

※あくまで当方実装の例です。当記事を参考にされてもうまく実装できない場合の責任は負いかねますこと、ご了承ください。

Protected Area

This content is password-protected. Please verify with a password to unlock the content.






Web制作+Webマーケティングの個別講座開講中

Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております


・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方


どうぞWeb365の「自社のWebサイトを自身で作りたい、改善したい人のオーダーメイド個別講座」をご覧ください。






外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。

Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています

・成果にこだわるサイト制作改善をお望みの方
・良いweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方


是非Web365までご相談ください。

WordPressでホームページを作るには

執筆者:

関連記事

【体験】オンラインビジネスチャットサポートってなに?無料体験の流れと機能を解説

Webサイトの閲覧ユーザーの満足度をあげる機能「オンラインビジネスチャットサポート」、つまりチャットってどんなものなの?いちサービスを無料体験してみた流れと機能解説などしてみたいと思います。 Web3 …

aタグカット、下層要素残し、jQueryでの方法

【コピペ】aタグだけをカットして、その下層の要素は残したいときのjQueryで対応方法

aタグだけをカットして、その下層の要素は残したいときのjQuerで対応方法です。 用途としては、 ・aタグが勝手に挿入されていたバグ などで取り急ぎ対応しました。 Web365とは 本題のまえに、自己 …

【コピペ】WordPress、FacebookのOGPをプラグインなしで作成する方法

【コピペ】WordPress、FacebookのOGPをプラグインなしで作成する方法

【コピペでできる、WordPressでの、FacebookのOGPをプラグインなしで作成する方法の解説です。 なぜ必要か? Facebookでリンクを貼ると、OGPというサムネイル、タイトル、概要など …

【解説】WordPressサイトが自動更新でログインできないときの対応一例(WPとEC系プラグインの競合エラー)

WordPressサイトの各バージョンが自動更新され、気づいたらエラーでサイトが見れない、ログインできないときはありませか? 今回は、WordPressのバージョンアップによるエラー対応の方法について …

【完全網羅】WordPressの費用は?ホームページ作成運用の料金相場まとめ

【5分で読めます】 企業でコーポレートサイトとしてWordPressを採用する際、費用はいくらかかるのか?相場やサービス別など網羅的にまとめました。 この記事読了後は、 WordPressでの費用感が …

【コピペ】見積もりの簡易フォームを作成しましたので活用ください

Word Pressで、見積計算機能を作成しました。各項目と個数入力などで小計と合計を計算する仕様です。 カスタマイズや別途作成のご相談承っております。 この記事でわかること見積もり計算機能の仕様見積 …

コピーライティングで悩んだときの15の考え方

自社の商材をPRする際に、どう表現していいか悩むこともあるかと思います。アイデアのたたき台として、コピーライティングで悩んだときの15の考え方を解説します。 Web365とは Web365は、外部We …