Ver1.3.1をリリースしました(11/22)

記事にツイートやInstagram、YouTube動画を埋め込む

ツイートや動画を埋め込む

WordPressでは、YouTube動画やツイートを簡単に埋め込むことができます。

ツイートを埋め込む

ツイートを埋め込みたいときは、そのツイートのURLをエディタに貼り付けるだけでOKです。何かのタグで囲う必要はありません。

これで下のようにツイートが埋め込まれます。

注意
ただし、URLが貼られる行の前後には改行をはさむようにしてください。URLと同じ行に文字などが含まれているとURLがそのまま表示されてしまいます。

Instagramを埋め込む

Instagramの写真を埋め込みたいときも、その写真のURLをエディタに貼り付けるだけでOKです。


YouTube動画を埋め込む

YouTube動画についても、URLをエディタ上にペーストするだけで埋め込むことができます。ただし、注意したいのがこのままだとスマホで見たときに左右が切り取られてしまいます(高さが保たれてしまうのですね)。

動画の縦横比をレスポンシブに固定する方法

SANGOでYouTubeのレスポンシブ対応用のショートコードを用意しておきました。使い方は簡単。動画のURLを[youtube]〜[/youtube]ではさむだけです。

使い方例
[youtube]
https://動画のURL
[/youtube]

これでスマホ表示でも動画の縦横比が保たれるようになります。

MEMO

ショートコードの中に入れるのはiframeタグ(YouTubeで埋め込み共有を選んだときに表示されるコード)でもOKです。


地図を埋め込む

以下のように地図を埋め込むこともできます。Google Mapのメニューの「地図を共有または埋め込む」⇒「地図を埋め込む」からコードを取得できます。これを「テキスト」エディタの方へとコピペすればOKです。


2 Comments

Coco

素晴らしいテーマをありがとうございますm(_ _)m

YouTubeのショートコードについてです。

私のサイトではもともとYouTubeを多く貼り付けており、ひとつひとつにYouTubeショートコードを入れていくのは大変です(^_^;)

以上のことから、2つの質問がございます。

1, 簡単にショートコードを設置できる方法はないか
→ 例えば、search regex的なプラグインを使用して一括でYouTube動画のURLをショートコードで囲えないか。

一応こんな記事も見つけたのですが、あまりファイルをいじりたくないもので・・・。

>> WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法 – WordPressサイトの制作ならOffise Kondo http://takayakondo.com/wordpress-youtube-responsive/

2, YouTube動画をショートコードなしで縦横比に対応していただけないか(次回のアップデートで)

ご多忙かと存じますが、よろしくお願いいたします。

返信する
サルワカくん

そういうことですね…。

1番目の質問について、
Search Regexでは難しいですね。紹介して頂いたリンク先に書かれている下記コードを子テーマのfunctions.phpに貼り付ければ、全埋め込み動画が自動でレスポンシブになります。
===================================
function iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<iframe/i', '<div class="youtube"><iframe', $the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');
===================================
ただし、すでに[youtube]のショートコードを使ってしまっている場合には、レスポンシブ用のCSSが二重に適用されてしまい、空白が出来てしまいます。
すでに挿入済みのショートコードはSearch Regezで一括削除して頂くと良いのではないかと思います。
・[youtube]⇒空白に置換
・[/youtube]⇒空白に置換

2番目の質問について、
次回のアップデートで対応させて頂くことを検討します。
(iframeタグというのがYouTube動画以外の埋め込みにも使われているものなので、他の埋め込みコンテンツに影響がないか念のため調べみます)

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です