動画ウィジェットの使い方

動画ウィジェット

WordPress講座をご覧くださいましてありがとうございます。

WordPressでサイドバーやフッターなどのウィジェットエリアに動画を入れたい場合、動画ウィジェットを使います。

以前のバージョンではテキストウィジェットにhtmlを書き表示させる必要がありましたが、WordPressのバージョン4.8から追加された「動画」というウィジェットを使ってアップロードされた動画や、YouTube、Vimeo等の動画を表示させることが可能です。

今回は「動画」ウィジェットを使ってサイドバーやウィジェットエリアに動画を貼り付けていく手順を初心者にもわかるように詳しく説明していきます。

「動画」ウィジェットの使い方

以下が「画像」の追加の手順です。

管理画面 → 外観 → ウィジェットを開く

今回は公開画面のサイドバーに動画を表示させていきます。

WordPress カスタムHTMLウィジェット 追加

まずWordPressの管理画面を開きます。

WordPressの管理画面の開き方 → WordPressの管理画面(ダッシュボード)を表示する

WordPress 管理画面

外観 → [ウィジェット]をクリックし、ウィジェット画面を開きます。

WordPress ウィジェット

左側が利用できるウィジェットで、右側がウィジェットエリアです。

様々なウィジェットを右側のウィジェットエリアに追加することで、ウィジェットを表示することが出来ます。

ウィジェットを追加する方法は、2パターンありますので両方説明していきます。

「画像」ウィジェットをドラッグしてウィジェットエリアに追加する

左側のウィジェットが並んでいるところから、「画像」ウィジェットを探します。

「画像」ウィジェットをドラッグして、右側のウィジェットエリアに追加します。

動画ウィジェット

ウィジェットエリアはテーマによって違いますが、今回は全てに共通して表示させたいため、[サイドバー(共通上部)]にドロップします。

動画ウィジェット WordPress

「動画」ウィジェットが追加されました。

「動画」ウィジェットをクリックしてウィジェットエリアに追加する

左側のウィジェットが並んでいるところから、「動画」ウィジェットを探します。

「動画」ウィジェットをクリックします。

動画ウィジェット 追加 WordPress

追加したいウィジェットエリアを選択してクリックします。

今回は全てに共通して表示させたいため、[サイドバー(共通上部)]をクリックし、[ウィジェットを追加]をクリックします。

WordPress 動画ウィジェット 追加

「動画」ウィジェットが追加されました。

動画ウィジェット 追加

一番下に追加されるので、「動画」ウィジェットのタイトル部分をドラッグして、サイドバー(共通上部)の中での位置を変えておきましょう。

動画ウィジェット 追加 WordPress

「動画」ウィジェットの設定を行う

今回はサイドバーにYouTube動画を表示させます。

WordPressを用いて、サーバーにアップロードした動画を使うことも可能なのですが、サーバーのスペックなどで表示が遅くなったりする場合があります。

その為、基本的にはYouTubeにアップロードした動画を使うようにしましょう。

「動画」ウィジェットの横の▼をクリックして動画ウィジェットパネルを開きます。

動画を追加をクリックします。

動画を追加 WordPress

左上のURLから挿入をクリックします。

WordPress 動画ウィジェット URLから追加

今回はYouTube動画を設定します。

予め表示したい動画のURLをコピーします。

今回は下の動画をサイドバーに表示しますので、YouTube動画を右クリックしてURLをコピーしておきます。

コピーしたURLを貼り付けます。

ウィジェットに追加 WordPress YouTube

「ウィジェットに追加」をクリックします。

タイトルが必要でしたらタイトルを入力します。

今回はYouTubeの動画内にタイトルが表示されますので、未入力のままです。

「保存」をクリックします。

動画ウィジェット 動画 追加

以上で動画ウィジェットに動画の追加が完了しました。

公開画面で確認する

WordPressの公開画面で確認を行います。

動画ウィジェット WordPress 追加

しっかりとウィジェットが表示されているのが確認できました。

きちんと動画が再生されることも確認しましょう。

これで「動画」ウィジェットの追加は完了です。

 

投稿者プロフィール

古田 健
古田 健
WordPressを使ったホームページの構築を得意としており、その中でも企業が勝ち残るため、強みを徹底的に研ぎすませた、一点突破型ランディングページを提案している。 ECサイトからスタートアップのサイトまで幅広く手がけ、、サイトの改善をおこなうことで、売上をあげる実践的なWebマーケティングを行っている。

コメントを残す

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