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担当者として月額サポートします。

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

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


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






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

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


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


どうぞWeb365の個別講座をご覧ください。

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

執筆者:

関連記事

【簡単】WordPressサイトでのスパムメールの保守対応方法

WordPressでのお問い合わせフォームからのスパムメールを減らす対応方法を解説します。 クライアントサイトで対応例です。前提条件もありますが、プラグイン2つで対応します。 Web365とは Web …

SEO対策の記事を無料ツールを使って4ステップでつくる方法

SEOを意識したサイト作りをする際に、ページや記事を作成する必要があります。Googleなどの無料ツールを活用しながらSEOに合った記事構成案までつくる方法を解説します。 ※メモ書きです。後日詳細を追 …

お問合せを増やしたいフォームの制作の方法と考え方

【コピペ】お問合せを増やしたいフォームの制作の方法と考え方_前年比200%増の成果事例

お問合せを増やしたいときには、お問い合わせフォームの制作や改善が優先度の高い施策になります。ビジネスに活用するサイトでは集客から逆算したサイト作り意識しましょう。 今回はお問合せを増やすためのフォーム …

【チュートリアル】WordPressで記事の途中からパスワード保護出来るプラグインを使った有料販売の方法

WordPressで記事の途中からパスワード保護出来るプラグインを使った有料販売の方法を解説します。 プラグイン1つと簡易なECショップので対応します。 ・記事の途中からパスワード保護出来るプラグイン …

【秒速解決】WordPressの管理画面が真っ白の対処法_サーバー【ロリポップ】

Word Pressのログイン画面だったり、管理画面が真っ白になってお手上げ、という事象があります。管理しているサイトで発生したので、対処解決方法を解説します。 Web365とは Web365は、外部 …

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

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

WordPressで特定カテゴリーのみ一覧から非表示にする方法

WordPressで特定カテゴリーのみ一覧から非表示にする方法を解説します。 Web365とは Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行していま …