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

執筆者:

関連記事

WordPressのテキストモードでタグボタンを追加する方法

Web担当業務でクライアントサイトに見出しや太字などのタグがリセットされていたのでCSSの設定した際に、エディタ上のテキストモードでタグボタンを追加する方法を解説します。   下記画像の青枠 …

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

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

サイトのパスワード設定

【解説】WordPressサイトでURLを知っているひとしか閲覧できない設定方法

サイトでURLを知っているひとしか閲覧できない設定方法を知っていますか? 今回は、WordPressサイトで、どんな方法で設定するかをお伝えします。 設定には、Google検索に掲載させない方法やパス …

ALTタグ入力の方法

【Webマーケティング】画像検索一覧に表示させる方法なら、ALTタグ入力がおすすめ

ビジュアル商材を扱っているサイトですと画像検索からの流入も意識したいですね。どんな対策があるか知っていますか? そんなときは、画像のALTタグの入力がおすすめです。 ALTタグの入力で画像検索で自商材 …

Androidで確認するとサイトの右にできる余白を消す方法

iPhoneでは普通のサイトもAndroidで確認するとサイトの右に余白ができることがあります。今回はその解消方法です。 調べると3つほど解決法があります。 min-widthを指定してみる view …

スマホページで最下部にお知らせなどを固定表示させる方法【コピペ対応】

­スマホでサイトを閲覧すると出てくる、最下部の案内を自サイトで表示させたいときの方法です。 クライアントサイトでのケース、WordPressのテーマOnepress使用の場合の方法を解説します。 We …

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

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