Ver1.3.2をリリースしました(1/27)

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

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

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

ツイートを埋め込む

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

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

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

Instagramを埋め込む

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


Instagramのレイアウト崩れについて

2018年2月追記:Instagramを1記事に複数箇所に貼り付けるとレイアウトが崩れることがあるようです(重なって表示されてしまう)。こちらはテーマのバグではなく、WordPressの新バージョンのバグだと思われます(他のテーマでも同様の現象がおこっているようです:参照)。
以下のCSSをstyle.cssに追記すれば修正されるかと思います。

.instagram-media {
    position: static!important;
}

YouTube動画を埋め込む

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

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

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

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

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

MEMO

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


地図を埋め込む

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


19 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動画以外の埋め込みにも使われているものなので、他の埋め込みコンテンツに影響がないか念のため調べみます)

返信する
オクサン

サルワカ様、お世話になります。

Youtube動画の埋め込みがうまく表示されません。

[youtube]
https://動画のURL
[/youtube]

をWordpressのビジュアルではなく、テキストのほうに入力しましたが、動画表示部分は空白スペースになり、下にyoutubeのURLのみ表示されている状態です。
https://kininaruetc.com/kousodrink-demerit/
何卒、ご教授ください。

[追伸]
SANGOのテーマを入れて、wordpressが楽しくなってきました。ありがとうございます。

返信する
サルワカくん

テキストエディタを見たときにURLの前後に、pタグなどがついていませんか?
また、前後に改行は入っていますか?

申し訳ないのですが、YouTubeのURLの貼付け⇒埋め込みはWordPressの基本機能なので、テーマ以外の原因によるものだと想います。
上記の方法でうまくいかない場合には、プラグインを一旦全て停止して、直るか確認
なおった場合には、1つずつプラグインを戻していき、どれが原因かを特定
という流れで進めると良いかと思います。

返信する
オクサン

サルワカ様
早々のご回答ありがとうございます。

私は、youtbueの埋め込みのやり方を知りませんでした。
ただ、youtubeのURLを[youtube][/youtube]の間に入れれば良いと思っていましたが、
<iframe 以下のコードを入れないといけないんですね。

プラグインを全て停止したりして、試行錯誤しましたが、ようやく解決しました。

一つ勉強になりました。
ありがとうございます。m(_ _)m

返信する
ぽっきー

先日、サンゴ を購入させていただいのですが、バージョンは全てアップデートしないといけないのでしょうか?
それとも最新バージョンだけでいいんですか?

返信する
キン

美しいテーマで快適に使わせていただけているのですが、ピンタレストを埋め込み表示させる方法はないのでしょうか?

返信する
まこ

SANGO使用させていただいているものでございます。

インスタグラムの埋め込みにおいてレスポンシブになるものとならないものがあるようです。下記を埋め込むとレスポンシブにならないようですが、原因はどのような可能性がありますでしょうか。

https://www.instagram.com/p/BdHdkJXhKfD/

もしわかれば、ご教示いただけると幸いです。

返信する
サルワカくん

なるほど。原因確認のために、可能であれば実際に問題のあるページのURLを教えて頂けますか?
(コメント欄では公開しないようにします)

返信する
まこ

サルカワ様

ご確認ありがとうございます。
PCではレスポンシブになるのですが、スマホで見るとオーバーフローしてしまっているのが下記2件などです。

こちらは上のワイン画像の埋め込みはレスポンシブになっているのですが、下のお菓子の家の画像がスマホで見るとはみ出てしまいます。

お手数ですが、宜しくお願い致します。

返信する
まこ

サルワカ様、上記コメントにてお名前を間違っておりました。
こちらのコメントにてお詫び申し上げます。

引き続きどうぞ宜しくお願い申し上げます。

返信する
サルワカくん

確認したのですが、こちらはInstagramの仕様ですね…。
Instagram自体の表示を変えることができないので、テーマ側では対処ができません。
(どのテーマを使ってもこの表示になります)
恐れ入りますが、ご理解の程よろしくおねがいします。

返信する
まこ

サルワカ様ご確認ありがとうございます。

こちらでもほかのテーマで試したところ、そのようでしたのでInstagramの仕様が変わることを願うしかなさそうですね。

ご確認誠にありがとうございます。

SANGOのテーマ非常に使いやすく、助かっております。
これからもよろしくお願い致します。

もんもん

こんにちわ。質問させてください。
ツイッターの埋め込みですが、何も修正していないのに、ある日突然URLだけが表示されていることがあります。
前後の改行等もないことは確認しています。

試しに新規ページにURLを貼り付けると正常に表示されます。
同様の事象等、何か原因は考えられますでしょうか?

返信する
サルワカくん

お世話になっております。
そんな現象が起こってしまうのですね。
SANGOでは、WordPressに元から備わっている埋め込み機能に特に変更を加えていないため
申し訳ないのですが、原因は分かりません。
逆にURLの前後に改行がないとうまくいかない場合がありますが、改行は入っておりますよね?

返信する
もんもん

そうなんですねー。ありがとうございました。
URL前後の改行は確認しております。テキストで見た際に以下のようになってればOKですよね?上下の行に何か記述が必要ですか?

https://twitter.com・・・・・

ひとまずはURLコピーではなく、面倒ですが、ツイッターより「リンクコピー」ではなく「サイトに埋め込み」の方で対応してます。

返信する
サルワカくん

上下の行に何らかの記述は必要ないはずです。
ビジュアルエディタではなく、テキストエディタの方で開いて、前後(URLの左右)に余計なものがついていないか
確認してみると良いかもしれません(もうすでにされていますかね)。

そうですね。一旦そのように対応するのが良いかと思います。

返信する

コメントを残す

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