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でホームページを作るには

執筆者:

関連記事

文字起こしは音声データを口頭でGoogleドキュメントに音声入力するがなんだかんだ一番かもです

文字起こしは音声データを口頭でGoogleドキュメントに音声入力するがなんだかんだ一番かもです。 クライアントさんの話を聞き書きし、記事化する業務をしています。 その際に、音声データを文字起こしする必 …

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

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

webサイトの問合せを増やすためのサイト運用方法の解説

【資料配布】Webサイトの問合せを増やすための運用・改善方法の解説

【5分で読めます】 自身のビジネス用のWebサイトを作る上での最終的な目標は、2つ、 問い合わせを増や 購入を増やす がゴールではないでしょうか。 最終的なゴールの数字を増やす上でサイトを、下記の2つ …

イメージ01_ヒートマップの分析改善方法

【事例】ヒートマップ分析でWebサイト改善、1ヶ月で有効熟読率が4.5倍向上した分析と改善方法を解説

Webサイトの改善で、ユーザーの閲覧具合をみて、改善をはかりたいとき、「ヒートマップ」での分析はひとつの選択肢です。 今回は、ヒートマップでWebサイト改善、1ヶ月で有効熟読率が4.5倍向上した分析と …

Word原稿をWordPressにUPするとき画像が横向きなる対応や効率的な公開方法

クライアントさんからいただいたWord原稿をWordPressにUPしたいときの効率的な公開方法を解説します。その際の画像がWordPressのメディア内で横向きになってしまうときの対応も解説します。 …

インタビュー方法

【テンプレート】事例紹介のインタビューページで大事な5項目と手順マニュアル解説

自社サイトで実績事例を紹介したい、インタビュー記事を作成したいと考えてはいませんか? クライアントサイトで、事例コンテンツ作成するときに、どんな構成で作成すると良いのか? インタビュー記事の訴求ポイン …

【簡単】WordPressで独自のショートコードを作成し、本文に挿入する方法

WordPressで独自のショートコードを作成し、本文に挿入する方法を解説します。お決まりの文章や、機能などは、ショートコードを書くだけで、ページに実装できると効率的です。ショートコードの作成方法と、 …