WordPress にYouTube動画やGoogleマップなどのメディアを表示する

2015/5/18

スポンサーリンク

投稿や固定ページにメディアを埋め込む

WordPress 標準装備のショートコードを使うことで、 WordPress サイトに動画・画像・ツイート・音楽などのコンテンツを、簡単に埋め込む（embed）ことができます。

YouTube、Twitter、Flickrなど、WordPress のメディア埋め込み機能に対応してるサイト一覧（サービス）は以下のURLを参考にしてください。
WordPress Codex 日本語版：Embeds「メディア埋め込み機能に対応してるサイト一覧」

メディアを埋め込むには、

  • メディアのコード（URL）を取得する
  • メディアを埋め込む

の手順になります。

※YouTube動画などの著作権で保護されているコンテンツを記事内に貼るときは、自分で撮ったものや、著作権フリー、公式動画だけにするなどの注意が必要です。

YouTube動画を埋め込む

動画のURLを直接記述

YouTubeは、メディア埋め込み機能に対応してるサイト一覧にあるので、ショートコードを使って埋め込むことができます。

手順は、

  1. YouTubeにアクセスし、画面下の「共有」をクリックします
  2. 動画の共有用URLが表示されるので、コード（URL）をコピーします
  3. コピーした URL を、ページの表示したい場所に貼り付けます

記述例と表示

投稿や固定ページにYouTube動画を埋め込むには、本文中に URL を直接書くだけです。この方法では画面サイズの指定はできず、投稿画面の横幅に合わせて自動設定されます。

埋め込む URL は、下記の例のように独立した行として１行に１つ記述してください。

URL直接記述のサンプルです。
https://youtu.be/-7-8D_3Hw90

URL直接記述のサンプルです。

ショートコード embed でサイズ指定

画面サイズを指定したい場合は、ショートコードembedでサイズ指定を行います。

記述形式：［embed width=”幅” height=”高さ”］URL［/embed］

記述例と表示

embedで記述する場合は、独立した行で１行に１つである必要はありません。文中でも記述可能です。

画面サイズ指定のサンプルです。［embed width=”310″ height=”260″］https://youtu.be/-7-8D_3Hw90［/embed］

※「[」「]」は大文字で表記しています。コピーするときは小文字に変更してください。

画面サイズ指定のサンプルです。

Googleマップを埋め込む

Googleマップは、上記メディア埋め込み機能に対応してるサイト一覧にないので、上のショートコードを使って埋め込むことができません。

Googleマップには、埋め込みコードが用意されているので、これを使って埋め込みます。

手順は、

  1. Google マップにアクセスし、検索窓から表示したい場所をを検索します
  2. 地図右下の「歯車アイコン」をクリック
  3. メニューの「地図を共有/埋め込む」をクリック
  4. ポップアップ画面が表示されたら「地図を埋め込む」タブをクリック
  5. 地図のサイズを「小」（400 × 300）、「中」（600 × 450）、「大」（800 × 600）、「カスタムサイズ」から選びます
  6. 表示された地図の埋め込み用コードをコピーします
  7. コピーしたコードを、ページの表示したい場所に貼り付けて、Google マップを埋め込みます

記述例と表示

Googleマップの埋め込みサンプルです。
<iframe src=”https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d12998.158871207052
!2d139.622715!3d35.466188!3m2!1i1024!2i768
!4f13.1!5e0!3m2!1sja!2s!4v1431601604393″
width=”600″ height=”450″ frameborder=”0″ style=”border:0″></iframe>

Googleマップの埋め込みサンプルです。

スポンサーリンク