WordPressでは、YouTube動画やツイートを簡単に埋め込むことができます。
ツイートを埋め込む
ツイートを埋め込みたいときは、そのツイートのURLをエディタに貼り付けるだけでOKです。何かのタグで囲う必要はありません。
これで下のようにツイートが埋め込まれます。
「力尽きたときでも作れるレシピ」をひたすら追加していく新ページを開設しました。残りのHPを選択してレシピを探すことができます。
— サルワカくん (@saruwakakun) May 21, 2017
力尽きたときのためのレシピ 〜超簡単に作れるズボラ飯〜 https://t.co/pUmBIe51kU
Instagramを埋め込む
Instagramの写真を埋め込みたいときも、その写真のURLをエディタに貼り付けるだけでOKです。
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]これでスマホ表示でも動画の縦横比が保たれるようになります。
ショートコードの中に入れるのはiframeタグ（YouTubeで埋め込み共有を選んだときに表示されるコード）でもOKです。
地図を埋め込む
以下のように地図を埋め込むこともできます。Google Mapのメニューの「地図を共有または埋め込む」⇒「地図を埋め込む」からコードを取得できます。これを「テキスト」エディタの方へとコピペすればOKです。
素晴らしいテーマをありがとうございます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
先日、サンゴ を購入させていただいのですが、バージョンは全てアップデートしないといけないのでしょうか？
それとも最新バージョンだけでいいんですか？
最新バージョンだけ入れればOKです！
美しいテーマで快適に使わせていただけているのですが、ピンタレストを埋め込み表示させる方法はないのでしょうか？
埋め込み系はWordPressであらかじめ設定されているものから変更を加えていません。
１分でできるWORDPRESSでPinterestを埋め込み表示させる方法などが参考になると思います。
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の左右）に余計なものがついていないか
確認してみると良いかもしれません（もうすでにされていますかね）。
そうですね。一旦そのように対応するのが良いかと思います。
同じ問題で困っていましたが、下記の記事の方法でさしあたり解決しました。
https://twitter.com/【ID】/status/*****
→https://twitter.com/【ID】/statuses/*****
参考元：https://benkyo-2-0.com/wordpress-copy-link-to-tweet/
貴重な情報のご提供ありがとうございます。勉強になります。
YouTube動画をレスポンシブ対応用のショートコードで貼り付けると、
改行しても文字が動画にくっついてしまうのですが、
動画の後に改行を入れることは可能でしょうか？
あれは、本当ですか…。Enterキーを2〜3回くらい押しても、改行が入らないでしょうか。
もしそれでも改行が入らない場合「テキスト」エディタの方を開き、改行したい位置
<br>を入れると確実です。https://yahoo.jp/box/-erzfK
どのような状態なのかキャプチャーしてアップしてみたのですが、
写真2枚目のように（動画URLは消しただけです）ショートコードを記述すると、
写真1枚目のように改行なしでくっついてしまいます。
（MacとiPhone、iPadで確認済み）
確かにEnterを余計に押せば改行は入るのですが、
3枚目のように「 」と言う文字がソースを見ても入ってしまうのですが、
これは特に問題ないのでしょうか？
なお、テキスト編集で入れれば確かに改行が入りましたが、
可能ならコードを書くだけで参考例のように改行入ると助かります。
ありがとうございます。
以下のCSSを追加してみて頂けますか？ これで前後に適度なスペースが入るかと思います。
という文字列は問題ありませんが、上のCSSを追加した場合にはEnterを余計に押す必要はありません。よろしくお願いします。
間違いなくスペース入りました。
全て修正されたので手間なしでした。
ご丁寧な対応有難うございました！
こんにちは。
外部MAでフォームを作成し、埋め込みコードをテキストモードで貼り付けましたがうまく表示されません。対処法を教えていただけますでしょうか。
埋め込みコードは以下のようになっています。
~
テーマ側ではそのあたりについて一切変更を加えていないため、
（WordPressにはデフォルトで埋め込み機能が搭載されています）
大変申し訳ないのですが、私の方では原因の追求と解決ができません。
外部MAの提供元にお尋ね頂くのが良いかと思います。
度々すみません。scriptの埋め込みはできない仕様でしょうか？
テーマに関係なく、WordPressではscriptの埋め込みが可能です。
そのあたりの処理はテーマとは関係ない部分で行われているからです。
そのため、埋め込みがうまくいかない場合も、テーマ側で対処することができないのです・・・
こんにちは。SANGOを愛用しています。
初めて質問させて頂きます。
記事にFacebook動画を埋め込んだ場合、PCだと綺麗に表示されますがスマホで確認すると動画下に謎の空白が出てしまいます。
コードはFacebook側が埋め込み用に提供している以下のようなコードです。
★以外は改変していません。
複数の動画で試しましたが全てスマホ表示のみ動画下に空白が出てしまいます。
ちなみにストークを使っているサイトで試した所、スマホでも空白は出てきませんでした。
こちら側の問題なのか、ワードプレス側の仕様なのか、他に原因があるのかがわからな買ったのでご質問させて頂きました。
もし宜しければ教えて頂けると大変助かります。
確認したところ、そもそもfacebookの仕様に問題がある気がします（最近変わったかもしれないです）。
storkでその問題が起こらないということなのですが、
storkのサイトのどこかに、そちらのコードを貼って頂き、URLを教えて頂けませんか？
返信に気づくのが遅れてしまい申し訳ございません。
ストークのサイトを送ろうと思いコードを確認して見ると、埋め込んであるFacebook動画のコードはiframeではなく
というコードを使っていました。
なぜこの時こんなコードを使っていたのか全く記憶がありません・・・。
これと同じように変更してみた所、SANGOのスマホビューで空白なくいい感じで表示されました。
さるわか様のおっしゃる通り、Facebook上の動画を埋め込むボタンで取得したiframeの埋め込みコードはストークで試しても同じくスマホでは下に空白が出ました。Facebookの仕様のようですね。
この度はご返信くださって誠にありがとうございました。
とても綺麗なテーマ、これからも愛用させていただきます！
そうだったのですね。うまくいったようで安心しました。
貴重な情報提供、ありがとうございました。
初めまして。
SANGOを使っております。
埋め込みについて質問なのですが、
ここでも紹介されているインスタグラムやツイッターなどの埋め込みは問題なく表示されるのですが、
「ピンタレスト」の画像を埋め込もうとすると表示されません。
全く同じ方法でほかのテーマのブログで埋め込むと問題なく表示されます。
SANGO独自の埋め込み方法となるのでしょうか。
ピンタレストの埋め込みツールはこちらです。
https://developers.pinterest.com/tools/widget-builder/?type=pin
他のサイトでは、下に表示される2つのコードをどちらもwordpressのテキストに貼り付けると問題なく表示されます。
もしSANGOで貼り付け方法がある場合は教えていただけると助かります。
よろしくお願いいたします。
僕の環境で試してみたところ、２つのコードをテキストエディタに貼り付けることで、問題なく表示されました。
おそらく、このあたりはテーマは関係のない部分な気がしますね…（SANGO含め、ほとんどのテーマではデフォルトのWordPressの標準埋め込み機能をそのまま活かしています）。
表示されないとなると、プラグインなどが影響しているのかもしれません。
お返事ありがとうございました！
プラグインをひとつずつ止めてみた結果、ひとつが相性が悪かったらしく無事表示されるようになりました。
プラグインというヒントいただき、本当に助かりました。
ありがとうございました。
ご報告ありがとうございます。ちなみになんというプラグインか教えて頂くことはできますか？
インスタグラムの写真を横並び２列とかにしたいのですが、もともとショートコードにあった横並び２列ではうまくできませんでした。
インスタグラムの公式の方の仕様で、一定以上はサイズが小さくならないようになっているので、厳しいかもしれません。
レスポンシブの横2列を使えば、PC表示では横並びにできそうですが・・・。
はじめまして。
数日前までは、インスタの埋め込みがうまく表示されていましたが、表示されなくなってしまいました。
https://spomani-mty.com/mie/
上記のURLのようになっています。
プラグインなどの追加はしていないのですが、プラグインなど以外に表示されなくなる原因として何かありますか？
ご返信いただけると幸いです。
拝見したところ埋め込まれておりますが（三重県代表白山高校（初出場）のすぐ下）、この部分で合っていますか？
ちなみにInstagramの埋め込み機能はWordPressの標準機能で、SANGOではPCへの埋め込み時の最大幅の指定のみ行っています。
表示されないとすると、WordPressあるいはInstagram自体に原因がある可能性が高いですね・・・。
初めまして。素晴らしいテーマをありがとうございます。
インスタグラムの埋め込みについてですが、埋め込みコードを書き換えてサイズ変更したら、写真部分が表示されません。あと、横に２つ並べたいのですが、どのようにすればよろしいのでしょうか？？
ご返信いただけると幸いです。
おそらく、それはSANGOではなく、Instagramの仕様ですね・・・。
申し訳ないのですが、こちらでは対応ができないです。
2列表示については、こちらのコメントの内容は試しましたか？
【スマホ閲覧時のインスタレイアウト崩れについて】
【現象】
・1回目の読み込み時、インスタグラムのレイアウトが崩れる。下部が切れる（”instagramでもっと見る”の部分で中途半端に切れます）
・正確に言えばキャッシュをクリアーしたときの1回目の読み込み時です
・2回目に読み込時はOK
【その他】
・パソコン閲覧時はOK。スマホで起こる現象
1回目の読み込み時にレイアウトが正しく表示されない現象はインスタの仕様でしょうか？
お手数ですがアドバイスをお願いできますしょうか。
関係ないかもしれませんが、こちらのCSSは試し済みです。
.instagram-media {
position: static!important;
}
そちらはインスタの埋め込みAPIの仕様ですね。
（インスタは本当に埋め込みが微妙なんですよね・・・）
お力になれず大変申し訳ないのですが、こちらではちょっと対処が難しいですね。
おそらくそのうち修正されるとは思うのですが。
APIの仕様なのですね！
こればかりは仕方ないですね。コメントありがとうございました。
修正されるまで気長に待ちます。
ご理解ありがとうございます。
よろしくお願いします。
sango愛用しております。
ツイートの埋込みについて質問です。
ツイートを埋め込むとPCではtwitterカードの形で正常に表示されるのですが、スマホでは引用文で文章のみ表示されます。
前後に改行は入れています。
スマホでもiPhoneでは正常に表示されています。確認できているのはAndroidで引用文になることです。
スマホ自体の問題かもしれませんが、解決方法があれば助かります。
そちらはTwitterのデフォルトの埋め込み機能の問題なので、恐縮ながら僕の方では原因の究明が難しいですね・・・。
考えられるのは、その端末でJavaScriptをオフにしている、もしくはアドブロックが入っているとかですかね。
スマホ側に原因がありそうですね。
お忙しい中コメントありがとうございます。