WordPressでサイトをつくるときに、Jetpackは便利なプラグインなので私の場合はサイトを作ると必ずインストールしています。先日、Jetpackのショートコードプラグインの説明を見ていたら色々なショートコードがあることに気がついたので使い勝手を試してみました。
Jetpackのショートコード機能を確認
ダッシュボード Jetpack＞設定 をクリックし、一覧を表示します。
ショートコード埋め込み 行があります。インストールした時点で有効化されています。ショートコード埋め込み をクリックすると、
ショートコードの説明が表示されます。
今まで使ったことがあったのは youtubeぐらいで、他はまだ使ったことがありませんでした。
中でも googlemaps が気になりましたので使い方を試しました。
貼り付けたい地図をGoogleMapから表示する
googleにログインした状態で、GoogleMapで貼り付けたい場所に関する地図を検索します。
地名や店名などを入力して検索
地図が表示されます。
右下に歯車のマークが表示されているので、
クリックします。ポップアップされたメニューから 地図を共有または埋め込む をクリック
このように表示されるので 地図を埋め込むタブ をクリックします。
URLが表示されるので、
コピーします
コピーしたコードをJetpackのgooglemaps用に書き換える
コピーしたコードは
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7908457261024!2d139.33715949999996!3d35.65752439999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60191dd856de197f%3A0xe206cd84f9aec58d!2z44Kz44Ov44O844Kt44Oz44Kw44K544Oa44O844K55YWr546L5a2QIDhCZWF0!5e0!3m2!1sja!2sjp!4v1435556143559" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
こんな感じのものでした。これをJetpackのgooglemaps用に書き換えてみます
1. 頭の <iframe 部分を書き換える
<iframe src=" ↓
これで書き換えると、
こういうコードになります。
固定ページにコードを貼り付けてmapが表示されるかどうかを見る
このコードを固定ページに貼り付けてみます
表示すると、
こんな感じに表示されました。
実際の感じは → https://usortblog.com//8beatmap/
地図の拡大縮小やルートなども普通のmapと同じように使えるので便利ですね。
Jetpackをインストールしていたらこれは是非使ってみていただければと思います。
おまけ:Facebookショートコードを試してみた
Facebookのショートコードもあったので試してみました。
ショートコードFacebookの説明を見ると、自分の単独投稿みたいなものを埋め込んでいたので、
投稿の時間をクリックして、単独で表示させたときの
URLをコピーして、
ショートコードを使ったときと使わなかったときの場合を見比べようとしたのですが、
どちらも正しく表示されてしまって、、あれ？あれ？となりました。
知らないうちにWordPressでは標準的にこのようになってるのかと試してみたのですが、JetpackがインストールされていないWordPressで同じように入力すると、
こんな感じで埋め込まれません。その後、ググって検索したところ、Jetpackがインストールされていてショートコード機能が有効なときはFacebookの単独記事のURLを書くだけで埋め込まれるようになっていたようでした。
ということは！とgooglemapもURLをそのまま貼り付けてみましたが、埋め込まれなかったのでそれぞれやり方があるようです(^_^;。
どちらにしてもショートコードで埋め込めるのは便利なので色々使ってみたいと思いました。
コメント