HOME > > > WordPressのビジュアルエディターでYouTubeなどの「iframe」を表示する方法

WordPressのビジュアルエディターでYouTubeなどの「iframe」を表示する方法

埋め込み

WordPressのビジュアルエディターって?

WordPressで記事を書くエディターは「ビジュアル」と「テキスト」の2種類があります。
「ビジュアルエディター」は文章と画像のみを書いていきます。通常のブログの書き方ですね。
「テキストエディター」はhtmlタグで書いていく為、ビジュアルエディターよりも細かな対応ができます。
タイトルと文章の間にmarginを空けたり、hタグをタイトルに使ったり、画像のpositionを設定したり。
htmlタグを使えるという事は、YouTubeの埋め込みタグもそのまま貼り付けると公開した時に映像が表示されます。
しかし、ビジュアルエディターには「ソース」の考え方は無いので、ソースも単なる文字として扱われてしまいます。
では、ビジュアルエディターではYouTubeは埋め込めないのか。
いえいえ。YouTubeには沢山ためになる映像もあるし、自分の動画なんかもブログにアップしたいですよね。
では、ビジュアルエディターでもYouTubeを埋め込んじゃいましょう。

プラグイン「iframe」を入れる

WordPress管理画面左メニューから「プラグイン」→「新規追加」をクリック。
検索窓に「iframe」と入力して検索してください。
一番上に「iframe」が出てきますので、ダウンロードし有効化してください。
これでプラグイン設置は完了です。

YoutTubeから埋め込みコードをコピーする

ブログに掲載したいYouTubeの映像を
「共有」→「埋め込み」のiframeコードを全部コピーしてください。

YouTube

ビジュアルエディタにYoutTubeを埋め込む

コピーしてきたコードをビジュアルエディターにペースト(貼り付け)します。
ですが、このままではただの文字としてコードがそのまま表示されてしまいます。
なので少しコードを触ります。

<iframe width="640" height="360" src="//www.youtube.com/embed/GcuUXmx2n2c?rel=0" frameborder="0" allowfullscreen></iframe>

この元のコードを下記に直します。

[iframe width="640" height="360" src="//www.youtube.com/embed/GcuUXmx2n2c?rel=0" frameborder="0" allowfullscreen]

変更した場所は3ヶ所。

・<iframe width・・・の「 < 」を「 [ 」に変更。
・</iframe>の手前の「 > 」を「 ] 」に変更。
・最後の</iframe>を削除。

これでビジュアルエディターでもYouTubeが表示されます。

最後に反省

よく考えてみるとhtmlを触らない場合って「テキストエディター」の出番はないですよね。
WordPressを設定し終わって、使う人がビジュアルエディターのみを使う場合、テキストエディタとどっち?と考えさせる方が間違ってました。
最初から両方の話をし、必要なければ
「ユーザー」→「あたなのプロフィール」→「ビジュアルリッチエディターを使用しない」にチェックをすればタブは表示されません。

う~ん。。。
そもそも迷わせるのがいけなかったのですよね。
今後の仕事の為、勉強になりました。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.03.18