この記事は約 7 分で読めます。
この記事をおすすめする方
- 普段ワードプレスで埋め込み動画の挿入をする方
- 一つの記事にたくさんの埋め込み動画を挿入する方
まずは、下のボタンをクリックしてください。
当記事では、ワードプレスの記事の中に、このような形で埋め込み動画を挿入し、読み込ませるための記述方法をご紹介します。
なぜボタンクリックで読み込ませる必要があるのか？
正直、埋め込み動画が一つ、二つであれば導入する必要はないかもしれません。
理由は、ページの表示速度にそこまで支障がないからです。
むしろ、読者にクリックさせるという一手間をかせさせてしまうため、読者によってはストレスを与えてしまい動画自体を見てもらえない原因になるかもしれません。
しかし仮に埋め込み動画が5個、10個と増えていけばどうでしょう。
おそらく、ページの読み込み速度に影響が出てしまうと思います。
そんな場合に、この方法が有効な解決手段の一つになるかと思います。
次の項目で、その導入方法をご説明させていただきます。
導入方法
HTMLコードを記事に挿入する。
まず、挿入するためのサンプルコードを下に記載します。
(ただし、書き換える箇所がありますので、そのままでは使えません。)
書き換えの際は、適当にメモ帳などに貼り付けてご利用ください。
<div class="subwindow-wrap" >
<button type="button" name="" value="" onClick="window.open('埋め込み動画のURL','任意の文字列')">↓ 動画を表示する</button>
</div>
<iframe src="" width="500" height="400" name="任意の文字列"></iframe>
書き換えが必要なコードの説明ですが、
まずは、2列目の「埋め込み動画のURL」に、埋め込み動画のURLを貼り付けます。
例：youtubeの動画だと「https://www.youtube.com/embed/oRaWSb_i0Fo」などです。
それから、2列目の「↓ 動画を表示する」の箇所は、ボタンに表示される文字列です。そのままでは気に入らない場合は、自分の好きな文字列に書き換えてください。
次に2列目の「任意の文字列」と4列目の「任意の文字列」はどんな文字列でも問題ありませんが、同じものにする（一致させる）必要があります。
例：「sample」など何でも大丈夫です。
ただし、二つ以上の埋め込み動画を同じ記事内に貼り付ける場合は、この「任意の文字列」が重複してしまうと問題が起きます。(同じ記事内で無ければサイト内で重複しても問題ありません。)
二つ以上の埋め込み動画を貼り付けたい場合は、連番（一つ目の埋め込み動画は「任意の文字列１」、二つ目の埋め込み動画は「任意の文字列２」）などを付与するなどして、重複しないようにしてください。
例：「sample1」「sample2」「sample3」などです。重複していなければ「連番」で無くても問題ありません。
ちなみに、動画の表示サイズを変更したい場合は4列目のwidth(横のサイズ)とheight(縦のサイズ)の数値を変更してください。
私の場合、以下のようなコードにしました。
<div class="subwindow-wrap">
<button type="button" name="" value="" onclick="window.open('https://www.youtube.com/embed/oRaWSb_i0Fo','sample1')">↓ 動画を表示する</button>
</div>
<iframe src="" width="500" height="400" name="sample1"></iframe>
自分が表示したい埋め込み動画のURLのコードが出来たら、記事に挿入してください。
ちなみに「クラシックエディタ」と「ブロックエディタ」では挿入の仕方が違いますので次の項目で説明したいと思います。
クラシックエディタの場合
事前に忠告しておくことがあります。
下の項目でも説明しているのですが、
クラシックエディタの場合はHTMLコードを挿入した後「ビジュアルエディタ」に切り替えると、「テキストエディタ」側で2列目の＜button＞タグの「onclick」属性が消えてしまう問題
が起きる可能性があります。
この問題はワードプレスの自動成形の仕様が問題です。
なので、本番用の記事ではなく、まずは適当に新しく記事を作成してテストしてみることをおすすめします。
問題が起きた場合は、下の項目の『「onclick」が消えてしまう場合』という説明を参考にしてみてください。
・・・というわけで本題に入ります。
クラシックエディタの場合は、テーマによってはビジュアルエディタ側に「HTML」を挿入できるボタンがあるかもしれません。
その場合は、自分の入れたい場所で、作成したHTMLコードをコピペすればすぐに挿入できます。
下の画像のようなボタンがあれば便利です。
無い場合は、以下のリンクで「HTML挿入ボタン」を導入できるプラグインについて説明していますので是非ご参考ください。
-
【時短】ワードプレスのビジュアルエディタでHTMLタグを挿入できるようになる無料プラグイン
この記事をおすすめする方 ビジュアルエディタで埋め込み動画の挿入をしたい方 ビジュアルエディタのツールバーにHTMLタグの挿入ボタンが無くて困っている方 HTMLタグの挿入ボタンを追加出来る無料プラグ ...
続きを見る
もし、HTML挿入ボタンを利用しない場合は、テキストエディタ側に直接コピペする形になりますので、まずは「テキストエディタ」に切り替えてください。
下の画像のように、作成したHTMLコードを貼り付けたら画面右上の「プレビュー」で確認してみてください。
問題なく表示されれば完了なのですが、クラシックエディタの場合注意点があります。
ビジュアルエディタに切り替えた後、再度「プレビュー」で動画が表示されるか確認してみてください。
表示されない場合は修正が必要になります。
初めにも書きましたが一度ビジュアルエディタに切り替えた後、テキストエディタに戻した際に「onclick」属性が消えてしまっている可能性があります。
その場合は、下の項目『 「onclick」が消えてしまう場合 』に修正方法が書いてありますので参考にされてください。
ブロックエディタの場合
ブロックエディタの場合の説明をします。ワードプレスの記事編集画面を開いていることを前提として説明させていただきます。
まずは、HTMLコードを挿入したい箇所にカーソルを持っていきます。
そして、画面左上の「＋」ボタンをクリックしてください。
「ブロックタグ」でスクロールバーを使って下に移動していくと「カスタムHTML」というボタンがあると思いますのでクリックしてください。
ブロックが挿入されたら、HTMLを入力というフォームに作成した「HTMLコード」を貼り付けてください。
貼り付けられたら右上の「プレビュー」画面で確認してみてください。問題なく表示されれば完了です。
以上で完了です。
「onclick」が消えてしまう場合
私の場合ですが、「ブロックエディタ」で行った場合問題なかったのですが、「クラシックエディタ」で行った場合、この問題が発生しました。
これは、ビジュアルエディタの仕様で記載内容が自動で成形されてしまうことが原因のようです。（ありがた迷惑な仕様）
そこで、「onclick」が自動で消えないように設定する必要があります。
下の「PHPコード」を、子テーマのワードプレスの管理画面から
【外観⇒テーマエディター⇒functions.php】
に移動しコピペします。
※子テーマがない場合は親テーマで問題ありません。
注意点ですが「functions.php」はテーマに関する重要なことが記載されており、元々書いてあるプログラムを削除してしまうと不具合が起きる可能性がありますので、慣れていない方は事前にサイトデータのバックアップを行っておくことをお勧めします。
function custom_editor_settings( $initArray ){
$initArray['body_id'] = 'primary';
$initArray['body_class'] = 'post';
$initArray['extended_valid_elements'] = '*[*]'; //すべてのタグを許可(削除防止のため)
$initArray['valid_children'] = '+body[style],+div[div|span],+span[span]+button[onClick],+input[onClick]';
$initArray['verify_html'] = false;
return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );ワードプレスの管理画面の左側の「外観」にマウスカーソルを重ねてください。その後、表示されるメニューから「テーマエディター」をクリックしてください。
次に、テーマエディター画面の右側に「（functions.php）」という項目があると思いますので、クリックしてください。（下の画像の①）
※使用しているテーマによって若干違いがあると思いますが、 どのテーマであっても「（functions.php）」 はあると思いますので探してみてください。
※画像のテーマは「Affinger5」です。
それから、先ほどコピペした「PHP」のプログラムを貼り付けてください。（ 下の画像の ②）
※コピペする箇所は、「 functions.php 」内の一番下の行にしておくのが分かりやすいので無難です。
また、分かりやすいように、 「 functions.php 」 でコピペしたプログラムの上辺りにコメントアウト（/*と*/で囲むとコメントアウトできます）で「このプログラムはonclickを自動成形しないプログラムです。」と記載しておくと後々忘れても困らないので便利かもしれません。
「コメントアウト」とはプログラム実行に影響しない「メモ」のようなものです。
最後に、左下の「ファイルの更新」ボタンをクリックすれば完了です。（ 下の画像の ③）
これで「ビジュアルエディタ」に切り替えても「onclick」が消えないと思います。
再度、前の項目を参考に投稿記事画面でHTMLコードを挿入して実行してみてください。
まとめ
・・・というわけで、ボタンクリックによる埋め込み動画の説明でした。
記事内の埋め込み動画の数が１つや２つとそこまで多くなければ支障は無いと思いますが、動画のまとめサイトなどを作成する際に10個、20個と数が増えれば、ページの読み込み速度や、動画の再生などに支障が出てくると思います。
そんな時に、当記事に書いたことが役に立つかなと思います。
是非利用してみてください。
当記事を閲覧頂きましてありがとうございました。