次のようなサービスを使用する場合 Googleマップ、場所を選択して、ウェブサイトに地図を埋め込むだけです。 ただし、マップをその場で編集することはできません。また、同僚も編集できません。これは、共同プロジェクトで必要になることがよくあります。

これがインタラクティブマップの出番です。 チームの全員が編集できる可動マーカーを配置できます。 

このチュートリアルでは、このタイプのカードがいつ役立つかについて説明します。 さらに、WordPressにXNUMXつの方法でそれらを追加する方法を示します。

しかし、始める前に、時間をかけて見てください WordPressのテーマをインストールする方法どのように多くのプラグイン私はワードプレスにインストールする必要があります.

次に、m仕事に行こう!

インタラクティブマップとは何ですか(そしていつ使用するのですか?)

ウェブサイトに地図を追加するのはとても簡単です。 などのツール Googleマップを使用すると、数分でページにマップを埋め込むことができます。 このアプローチの利点は、訪問者がマップ内を移動したり、ズームイン、ズームアウトしたりできることです。

これらのタイプのマップは、単なる写真よりもインタラクティブですが、Webサイトに追加した後は、変更を加えることはできません。

一方、インタラクティブマップを使用すると、新しいマーカー、アイコン、テキストなどを追加できます(場合によっては同僚も)。 たとえば、Webサイトのメンバーのための会議を計画していると想像してください。 複数のピンを使用してマップを構成し、場所を提案できます。

ちなみに発見 ブログに位置情報を追加するための5 WordPressプラグイン

インタラクティブマップを使用して、ユーザーが現在地を共有したり、訪問したい場所に移動したりすることもできます。 より正確には、これらはニッチなアプリケーションです。 ただし、インタラクティブマップ  缶  さまざまな状況で役立ちます。 

さらに、それらは必ずしも対応するものよりも追加するのが難しいというわけではありません。

WordPressサイトにインタラクティブマップを追加する方法

インタラクティブマップに関しては、Webサイトに埋め込むか、プラグインを使用してそれを行うことができます。 最初のアプローチはより単純ですが、ご想像のとおり、プラグインは多くの場合、より多くの機能を搭載しています。 プラグインのアプローチを調べて、これらの機能が何であるかを示しましょう。

1.プラグインを使用する Maps Marker Pro

マップメーカープロを使用する

プラグイン Maps Marker Pro は、WordPressにマップを追加するためのワンストッププレミアムソリューションです。 複数の部門のマップを表示したり、マップに事実上無制限の数のマーカーを追加して整理したりできる機能など、多数の高度な機能が付属しています。 さらに、訪問者はマップに表示したいマーカーのタイプをフィルタリングできます。

このプラグインを使用して実行できるその他の楽しいことは、マーカー間の距離とルート情報を追加することです。 あなたがそうする傾向があるならば、あなたはあなたのウェブサイトマップを通してあなた自身の場所をリアルタイムで共有することさえできます。 プラグインが提供する豊富な機能を考えると、プラグインのセットアップには少し時間がかかる場合があります。 

ただし、想像するほど難しくはありません。 

開始するには、他のプラグインと同じようにプラグインを構成してアクティブ化します。 WordPressを初めて使用する場合は、 ワードプレスでプラグインをインストールする方法

プラグインの準備ができたら、新しいマップまたはレイヤーを追加する必要があります。これは、タブから実行できます。 Maps MarkerPro>新しいレイヤーを追加. ここで、他のオンライン マッピング ツールと同じように、レイヤーに認識できる名前を設定し、表示する場所を入力します。

新しいレイヤーを追加します

これで、左側のメニューを使用して、デフォルトとして設定するサイズとズームレベルを調整できます。 と呼ばれるオプションもあります マーカークラスタリング 、以下の例のように、ズームインしすぎると、エリア内のマーカーの数を示すアイコンが表示されます。

マーカーを表示する

オプション 検索マーカー、他方では非常に明示的です。 マーカーに関する追加情報を含める場合に役立ちます。

マーカーのリスト

下にスクロールしてオプションを見つけます « このレイヤーに新しいマーカーを追加« 。 次の画面では、前のマップと同じマップを使用して、マーカーの名前と場所を定義できます。

発見も ワードプレスで画像を圧縮してサイズを変更する方法

アイコンを選択して、マーカーのポップアップテキストを設定することもできます。 これは、訪問者がマーカー自体をクリックするか、マーカーを含めることを選択した場合はリストからマーカーを選択すると表示されます。

いずれにせよ、ボタンを押すことを忘れないでください パブリッシュ 終わったら。 いくつかのマーカーを追加すると、最初のレイヤーは次のようになります。

ブロック上のレイヤーの例

新しいインタラクティブマップをページのXNUMXつに追加する準備ができたら、 ショート。 タブの一番上までスクロールします レイヤーを編集  そして、彼の対応するIDを探します:

カード識別子を保存する

今、 ショートコード[mapsmarkerlayer = "X"] あなたの投稿やページで。 プレースホルダーを置き換えることを忘れないでください  ただし、事前に「レイヤー」のIDで。

これで、あなたのカードはあなたのウェブサイト上で動作するはずです! さらに重要なことは、ダッシュボードを離れることなく、あなたまたはチームの他の誰でもいつでも編集して新しいマーカーを追加できることです。

2.の組み込み埋め込み機能を使用する グーグルマップ

Googleマップ 紹介は必要ありません。世界中から地図を抽出して、他の人と場所を共有したり、住所を見つけたり、現在地を共有したりできるサービスです。 ウェブサイトに関しては、Googleマップをページに埋め込む方法はたくさんあります。 グーグルマップでマップを保存する

ただし、ほとんどのカードは限られた量の対話性を提供します。 それらを使用すると、ナビゲート、ズームイン、外に出てビューを変更できますが、それ以上はできません。

実際、Googleマップは単純なマッピングよりも多くの機能を提供しています。 たとえば、複数のマーカーを追加し、距離を測定し、マップに方向を含めることもできます。 これらの機能を試すには、 Googleマイマップ ボタンをクリックします  +新しい地図を作成する  :

グーグルマップでマップを作成する

次の画面で、マップのタイトルと、作成する最初のレイヤーを設定します。 画面上部の Google マップ検索バーを使用して、共有する場所を見つけます。

新しい地図とグーグルマップの場所

ズームインすると、画面上部のマーカーシンボルを使用して、マップ上の場所の強調表示を開始できます。 マーカーを配置する場所をクリックして、名前とアイコンを設定するだけです。

新しいマップにマーカーを追加します。

複数のマーカーを作成したら、それらの間に線を引いて距離を表示できます。

マップ上のXNUMX点間の距離を表示します

カードの準備ができたら、ボタンをクリックします シェア 左側のメニューにあります。 そこで、アクセス設定を変更します  de 個人的に  à 公共 :

カードアクセスを定義する

チームメンバーを招待してメールを使用して、すぐにマップにアクセスできるようにすることもできます。

パートナーとのコラボレーションのためのマップ

いずれにせよ、あなたは常にあなたのウェブサイトにあなたの新しいカードを埋め込むべきです。 これを行うには、マップタイトルの横にあるXNUMXつのドットのアイコンをクリックし、オプションをクリックします。 この地図を埋め込む  :

地図を埋め込むこれで、埋め込みコードをコピーしてページに貼り付けることができます。 新しいカードは、どこに置いても表示されます。 さらに、同僚はそれを編集し、必要に応じてGoogleマップを介して新しいマーカーを追加できます。

プレミアムWordPressプラグインもご覧ください  

他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 究極の数学キャプチャー

Ultimate Math Captcha は、 WordPressのプラグイン 100% 有効なキャプチャ プレミアム。 に数学的なキャプチャを追加することができます フォーム WordPress ログイン、登録、パスワード回復、コメント、WooCommerce、Easy Digital Downloads、および aux フォーム bbPressより。究極の数学キャプチャワードプレスプラグイン

その機能は次のとおりです。簡単なインストールと構成、多くのキャプチャの追加 フォーム、同じページ上の複数の Math キャプチャのサポート、エラー メッセージのカスタマイズなど。

ダウンロード | デモウェブホスティング

2。 忍者フォームのためのPayPal標準支払いゲートウェイ

忍者フォーム用のPayPal標準ゲートウェイを使用すると、PayPal支払いゲートウェイとシームレスに統合するフォームを作成できます。 パーソナライズされた注文フォームを作成し、標準のPaypalアカウントを使用して支払いを受け取ることができます。

忍者フォーム用のPaypal標準支払いゲートウェイ

その主な機能は、簡単で高速な統合、IPN統合、個々のフォームでPayPalゲートウェイをアクティブ化/非アクティブ化する機能、定期的な支払いのサポートなどです。

ダウンロード | デモ |  ウェブホスティング

3.重力フォーム-リストと編集

このと WordPressのプラグイン プレミアムでは、ウェブサイトのフォームで送信されたエントリを変更または削除することができます。 この拡張機能が作成された理由は、Gravity Forms プラグインに欠けている機能です。重力フォームリスト編集ワードプレスプラグインテーブルの挿入グラフィックサイトブログフォーム

その機能の中でも特に言及するのは、m記録されたデータの編集と保存、入力されたデータの抑制、すでに公開されている記事の変更と削除、ijQuery Datatablesプラグインとの完全な統合および 重力フォーム、条件付き論理のサポート簡単かつ迅速にインストールできます。

ダウンロード デモ | ウェブホスティング

推奨リソース

ウェブサイトの構築と管理に役立つ他の推奨リソースをご覧ください。

まとめ

ここに ! このチュートリアルは以上です。WordPressでインタラクティブなマップを作成できるようになることを願っています。 することを躊躇しないでください お気に入りのソーシャルネットワークで友達と共有する

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにさらに要素が必要な場合は、 WordPressブログの作成。

提案や意見がある場合は、セクションに残してください commentaires.

...