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で集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・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までご相談ください。

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

執筆者:

関連記事

検索上位へのSEO対策、画像にテキストは出来るだけいれないようにしよう

SEOを意識したサイト作りをする際に、画像とテキストは出来るだけ分けたほうがいいです。検索ロボットがテキストを認識して検索順位を決めるので、画像だと埋もれるからです。 今回は具体例と一般的な方法を解説 …

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

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

【提案事例】運営リソースが割けない場合のECサイトの展開案

【5分で読めます】 クライアント事例として、ECサイト(eコマース、つまりオンラインショップ)を開設したいけれど「運営リソースがほぼない」条件での展開案ついての提案事例を解説します。   Web365 …

ALTタグ入力の方法

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

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

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

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

【初心者導入編】WordPressで会社企業のホームページを作るにはまとめ

会社企業でWordPressを使ってホームページを作成制作を検討してる方(初心者)に対しまして、導入編として、メリットデメリットと制作にあたる一連の流れを網羅的に解説しています。 WordPressで …

【解説】Webサイトをリニューアルする前にサイト改善運用をすすめる理由

自社Webサイトのリニューアルを検討されている方にはまず既存サイトのブラッシュアップ、つまり改善運用をおすすめしてます。それはなぜだと思いますか? ただリニューアルをしても数値は改善しないことや、制作 …