Jetpackの ショートコード 機能[GoogleMap]を使って地図を埋め込む

WordPressでサイトをつくるときに、Jetpackは便利なプラグインなので私の場合はサイトを作ると必ずインストールしています。先日、Jetpackのショートコードプラグインの説明を見ていたら色々なショートコードがあることに気がついたので使い勝手を試してみました。

Jetpackのショートコード機能を確認

ダッシュボード Jetpack>設定 をクリックし、一覧を表示します。

ショートコード埋め込み 行があります。インストールした時点で有効化されています。ショートコード埋め込み をクリックすると、

img_5590d14c5fc24

ショートコードの説明が表示されます。

今まで使ったことがあったのは youtubeぐらいで、他はまだ使ったことがありませんでした。

中でも googlemaps が気になりましたので使い方を試しました。

貼り付けたい地図をGoogleMapから表示する

GoogleMap

googleにログインした状態で、GoogleMapで貼り付けたい場所に関する地図を検索します。

地名や店名などを入力して検索

地図が表示されます。

右下に歯車のマークが表示されているので、

クリックします。ポップアップされたメニューから 地図を共有または埋め込む をクリック

このように表示されるので 地図を埋め込むタブ をクリックします。

URLが表示されるので、

コピーします

コピーしたコードをJetpackのgooglemaps用に書き換える

コピーしたコードは

こんな感じのものでした。これをJetpackのgooglemaps用に書き換えてみます

1. 頭の <iframe 部分を書き換える

2. 後半を書き換える

これで書き換えると、

こういうコードになります。

固定ページにコードを貼り付けてmapが表示されるかどうかを見る

このコードを固定ページに貼り付けてみます

表示すると、

こんな感じに表示されました。

実際の感じは → https://usortblog.com/8beatmap/

地図の拡大縮小ルートなども普通のmapと同じように使えるので便利ですね。
Jetpackをインストールしていたらこれは是非使ってみていただければと思います。

おまけ:Facebookショートコードを試してみた

Facebookのショートコードもあったので試してみました。

ショートコードFacebookの説明を見ると、自分の単独投稿みたいなものを埋め込んでいたので、

投稿の時間をクリックして、単独で表示させたときの

URLをコピーして、

ショートコードを使ったときと使わなかったときの場合を見比べようとしたのですが、

どちらも正しく表示されてしまって、、あれ?あれ?となりました。

知らないうちにWordPressでは標準的にこのようになってるのかと試してみたのですが、JetpackがインストールされていないWordPressで同じように入力すると、

こんな感じで埋め込まれません。その後、ググって検索したところ、Jetpackがインストールされていてショートコード機能が有効なときはFacebookの単独記事のURLを書くだけで埋め込まれるようになっていたようでした。

ということは!とgooglemapもURLをそのまま貼り付けてみましたが、埋め込まれなかったのでそれぞれやり方があるようです(^_^;。

どちらにしてもショートコードで埋め込めるのは便利なので色々使ってみたいと思いました。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る