WordPress iframe プラグイン

Sponsored Link
ロリポップ!レンタルサーバー

WordPress

WordPressプラグイン”iframe”のご紹介。

名前の通り、投稿にiframeを埋め込めるプラグインです。

プラグイン iframeについて

iframe

iframeプラグイン

WordPressにプラグインをインストールして有効化しましょう。

iframeで検索すればすぐに見つかります。

更新が2週間前でしたので、こちらを導入しました。

Sponsored Link

プラグインの使い方(Google Map)

プラグインを導入したら、あとはショートコードを書けばそこに埋めこむことが出来ます。

詳細画面などを見ていただければわかりますが、基本的な書き方は以下の通りです。

プラグインの動作を回避するため、最初の[をダブルクォーテーションで囲んでいます。

"["iframe src=”埋めこみたいURL” width=”100%” height=”500″]

[]で囲み、URLと幅、高さを指定します。

他のオプション(スクロールの有無など)も指定できます。

例として、東京駅のGoogle Mapを埋めこんでみます。

埋め込みコードの取得

まず埋めこみたい場所を検索してGoogle Mapを表示しましょう。

そして、共有をクリックします。(下図)

Google Map

共有の窓が開くので、”地図を埋めこむ”タブを選択して、埋めこみたいサイズを選び、表示されるHTMLをコピーをしましょう。

”HTMLをコピー”をクリックすればOKです。

Google Map

すると以下のコードがコピーされます。

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12963.312118305756!2d139.7671248!3d35.6812362!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1570725334819!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

そして以下の通り本文に入力すれば埋めこむことが出来ます。

閉じタグを削除して、前後を[]に変更しただけです。

プラグインの動作を回避するため、最初の[をダブルクォーテーションで囲んでいます。

"["iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12963.312118305756!2d139.7671248!3d35.6812362!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1570725334819!5m2!1sja!2sjp" width="90%" height="450" frameborder="0" style="border:0;" allowfullscreen=""]
 

直接埋めこむ

さっきGoogle Mapでコピーした<iframe>を”テキストモード”でエディタに入力して埋めこんでみました。

埋めこめました。。。

このプラグインの用途としては、iframeタグの生成ツール的な位置づけなのかもしれません。

おまけ

以前投稿した、Smartyの出力をiframeで埋めこんでみました。

お暇でしたら覗いてみてください。

Smartyでできること


 

Sponsored Link