WP Rocket - WordPress Caching Plugin

画像の上の任意の場所をクリックするとポップアップされるhostposが出来るプラグイン

HanamiWEBオンラインスクールでは

●バーチャル自習室でのリアルタイム質問!

●チャットで質問し放題!

●24時間学び放題のEラーニング教材!

全部ついて 2,500円/月!

レンタルスペースのWEBサイトを作る機会があり、図面の任意の場所をクリックしたら、詳細が出てくる機能のノーコードで実装出来ないか調べました。

図面のとある場所をクリックしたら詳細が表示され、また図面上の違う場所をクリックしたら違う詳細が表示されるというあれです。このような機能を通常【Hotspots】と呼ぶそうです。

調べてみると、WordPressではHotspotsがノーコードで実装出来るプラグインが色々とあるみたいなので、紹介したいと思います!

 グーテンベルクにHotspotsを追加できるGetwid

WordPress標準のグーテンベルクブロックへ追加できるGetwidです。

2022年3月現在では、最終更新3か月前になっているので、随時更新が行われているプラグインと判断できます。

Getwidをインストール

インストールしてみました。ブロックの新規追加でGetwidブロックが入っています。

Getwidには、Hotspots機能以外にも、沢山の機能が入っていました。

使いたいのは【Hotspots】

アイコンと色も選べます

Hotspots設定手順

  1. Hotspotsブロックを追加
  2. ベースとなる画像をアップロード
  3. ポップアップさせたい場所にピンを打つ
  4. ピンのアイコン・色・クリックした時に表示されるコンテンツを追加

上記の作業でノーコードでHotspotsが設置できました。

Image Hotspots by DevVNプラグイン

次に紹介するのは、Hotspotsを作る専用のDevVNプラグイン。

2022年3月現在、最終更新日が1週間前だったので、こちらのプラグインも頻繁に更新されているので使用しても大丈夫だと思います。

Image Hotspot by DevVNプラグインインストール

WordPressダッシュボードに新しい項目が追加されました。

アイコンは好きな画像を設定

先ほどのGetwidとの違いは、アイコンに好きな画像を設定できました。

Hotspotsの設定方法

  1. アイコン画像を設定
  2. ベースとなる画像を設定
  3. Add spotsでアイコンを画像の上に追加
  4. 好きな位置にアイコンをドラッグで移動

Getwidと違う点は、クリックして表示されるコンテンツが充実している事です。この中にショートコードも埋め込めるので、ギャラリーやお問い合わせフォームも追加する事が可能です。

ショートコードで好きな場所に埋め込める

Image Hotspots for DevVNはショートコードになっているので、作成したHotspotsを好きな場所に埋め込むことが出来ます。

番外編

無料ではないのですが、360度パノラマビューの画像にHotspotsを追加できるプラグインがあったのでご紹介。【iPanorama 360 WordPress Virtual Tour Builder】

このようなサイト構築を依頼されたら、是非提案したいな~と思いました☆彡

ホームページのリスキリングはお任せください!

2019年よりWordPressやホームページに関するスキルシェアを行ってきました。事例やノウハウが蓄積され、スピーディーかつ的確にお悩みを解決へと導く事を得意としています。ホームページに関するお悩みがございましたら、LINE公式アカウントよりお気軽にご相談ください!

↑クリックするとLINE公式が開きます

新着記事

WordPressでレストラン・飲食店予約付ホームページ制作【WP Cafe】予約を指定して予約する設定
WordPressでレストラン・飲食店予約付ホームページ制作【WP Cafe】予約スケジュール設定
WordPressでレストラン・飲食店予約付ホームページ制作【WP Cafe】予約時メール設定
WordPressでレストラン・飲食店予約付ホームページ制作【WP Cafe】席予約フォームカスタマイズ方法
お悩み解決!
WordPressのお悩みにマンツーマンレッスンで解決

スポットレッスン

自力で解決出来ない時はオンラインレッスンでサクッと解決!

Click→

WordPressのお悩みにオンラインスクールで解決

オンラインスクール

安心してWordPressサイトを運用したい方は着実に疑問を解決!

Click→

WordPressのお悩みに代行で解決

代行依頼

ギブアップ!作業をお願いしたい時は代行依頼ですっきり解決!

Click→

ホームページ制作依頼

3年以上前の状態からホームページをメンテナンスしていない方!まずは一度無料相談をご利用ください。メンテナンスできるホームページを制作します。

Click→

講師依頼

年間約300件の相談実積で得た最新情報とノウハウで、講師としてセミナー開催も可能。WordPressスキルをシェアしています。

Click→

目次

Amelia

Brizy

HivePress

Paid Membership Pro

Simple Membeships

LearnDash

LifterLMS

Hbook