WordPressを使ってサイトを運用している方の中には、インスタやYouTubeなどの動画を埋め込んでよりユーザーエクスペリエンスの高いサイトにしたいと考えている方もいるでしょう。
この記事では、WordPress(ワードプレス)にインスタやYouTube動画を埋め込む方法について徹底解説します。
是非参考にしてみてください。
【プラグインなし】WordPress(ワードプレス)へのインスタ埋め込み方法
WordPressにはプラグインなしでもインスタを埋め込むことができます。
代表的な方法として以下の3点があるので、それぞれ紹介していきます。
①画像とキャプションを埋め込む方法
インスタの画像とキャプションを両方埋め込みたい場合には、Instagram埋め込みコードを利用しましょう。
こちらは基本的な埋め込み方法なので、初心者にもおすすめです。
手順は以下の通りです。
①ブラウザからインスタにアクセスする。
②埋め込みたい投稿を表示し、右上の「・・・」マークをクリックしてメニュー画面を表示する。
③メニュー画面で「埋め込み」を選択した後、「埋め込みコードをコピー」という青いボタンをクリックする。
④インスタの投稿を埋め込みたいWordPressの記事ページを開く
⑤「＋」マークをクリックし、インスタの投稿を埋め込みたい場所に「カスタムHTML」ブロックを挿入する。
⑥手順③でコピーした埋め込みコードを「HTMLを入力」という欄に貼り付ける。
以上でインスタの画像とキャプションを埋め込みが完了します。
②画像のみを埋め込む方法
キャプションなしで画像だけをWordPressに埋め込むことも可能です。
投稿の画像のみをシンプルに見せたい時に試してみましょう。
手順は以下の通りです。
①ブラウザからインスタにアクセスする。
②埋め込みたい投稿を表示し、右上の「・・・」マークをクリックしてメニュー画面を表示する。
③メニュー画面で「埋め込み」を選択した後、「キャプションを追加」のチェックを外して「埋め込みコードをコピー」をクリックする。
④インスタの投稿を埋め込みたいWordPressの記事ページを開く。
⑤「＋」をクリックし、インスタの投稿を埋め込みたい場所に「カスタムHTML」ブロックを挿入する。
⑥手順③でコピーしたコードを「HTMLを入力」という欄に貼り付ける。
③サイドバーに投稿を埋め込む方法
サイドバーとは、パソコンからサイトを閲覧した時に各ページの左右に表示される領域を指します。
このサイドバー部分には、Webサイト運営者のプロフィールや記事カテゴリー、新着記事などを表示することができます。
この部分にインスタの投稿を埋め込むと、ページ内以外で写真や動画で商品やサービスを強調することができるため、サイト訪問者の興味を惹きつけることができるため、ぜひ試してみてください。
手順は以下の通りです。
①インスタ埋め込みしたい投稿を開き、右上の「・・・」をクリックしてメニュー画面を表示する。
②メニュー画面で「埋め込み」を選択した後、「埋め込みコード」をクリックする。
③WordPressの「外観」内の「ウィジェット」から「テキスト」を選択し、「サイドバー」または「サイドバースクロール追従」に追加する。
④手順②でコピーしたコードを「テキスト」タブに貼り付けて「保存」をクリックする。
【プラグインあり】WordPress(ワードプレス)へのインスタ埋め込み方法
プラグインなしでもワードプレスへインスタの投稿を埋め込むことができますが、プラグインを使用するとより様々なカスタマイズができます。
細かなカスタマイズをして見栄えをよくしたいという場合にはプラグインを使用しましょう。
インスタのプラグインのおすすめは様々なものがありますが、中でも人気の高いものは「Smash Balloon Social Photo Feed」です。
こちらは設定が非常に簡単でレスポンシブデザインにも対応しているためWordPress初心者でも使用しやすいです。
さらに無料で使用可能でるため特にこだわりがない場合にはこちらの使用をお勧めします。
それでは下記にて「Smash Balloon Social Photo Feed」を使用した場合のWordPressへのインスタ投稿埋め込み方法について説明していきます。
①プラグインのインストールと有効化を行う
まずはWordPressの管理画面を開き、「プラグイン→新規追加」をクリックします。
そして右上の検索窓で「Smash Balloon Social Photo Feed」と検索します。
「今すぐインストール」をクリックした後に「有効化」をクリックしましょう。
②インスタのアカウントと連携設定を行う
WordPress管理画面に追加される「Instagram Feed」をクリックして「新規追加」を選択する。
フィード形式を選択する画面に遷移するので、無料版では唯一選択できる「ユーザータイムライン」を選択し、右上の「次へ」をクリックする。
「ソースを追加」をクリックしてインスタアカウントのログイン画面へと進み、画面に従って連携設定を行いましょう。
③フィードの作成・カスタマイズを行う
「Instagramフィードを作成」の画面から、連携したアカウントにチェックを入れて「次へ」をクリックしましょう。
するとフィードの管理画面に進むので、画面左側に表示される「カスタマイズ」「設定」タブから、レイアウトや配色、表示設定をイメージに合わせて変更しましょう。
④タイムラインを表示させる
カスタマイズが完了したら、「Instagram Feed」から「すべてのフィード」に進みましょう。
そして右上にある「＜/＞ 埋め込み」ボタンをクリックして、ショートコードをコピーしましょう。
コピーしたショートコードは、WordPressの投稿ページまたは固定ページに追加可能です。
「埋め込みたい場所にテキストモードでショートコードを貼り付ける」方法か「埋め込みたい場所にショートコードブロックを挿入し、ショートコードを貼り付ける」方法をとることでWordPressに追加できます。
ショートコードを貼り付けたあとには「更新」をクリックすれば、WordPressへのインスタタイムライン表示が完了します。
WordPress(ワードプレス)へのYouTube動画埋め込み方法
WordPressにYouTube動画を埋め込むと、容量の大きい動画も掲載することができるうえに、サーバー側への負担もかからないためサイトが重くなりにくいです。
以下でWordPressへYouTube動画を埋め込む方法について紹介していきます。
①URLを貼り付ける
WordPressにYouTube動画を埋め込む方法として最も簡単な方法が「URL」を貼り付ける方法です。
手順は以下の通りです。
①埋め込みたい動画の「共有」ボタンをクリック。
②「コピー」をクリックし、URLをコピーする。
③WordPress投稿編集画面を開き、動画を掲載したい場所に直接URLを貼り付けると、正しく貼り付けられた場合には動画のサムネイルが表示される。
以上で完了です。
簡単な方法ではありますが、動画サイズの指定ができない難点もあります。
特にこだわりのない初心者の方はぜひこちらの方法をまずは試してみましょう。
②埋め込みコードを利用する
YouTube動画の埋め込み用コードを利用する方法もあります。
こちらの方法では、動画の再生開始時間を変更できるため、動画の一部分を特に見せたいという方におすすめです。
こちらは以下の手順で行います。
①埋め込みたい動画の「共有」をクリックする。
②「埋め込む」をクリックする。
③表示された埋め込みコードをコピーする。
④動画の再生開始位置を指定したい場合には、コード下の「開始位置」にチェックを入れ、再生させたい時間を入力してからコードをコピーする。
⑤WordPressの投稿編集画面を開き、「＋」をクリックする。
⑥「html」と入力し検索する。
⑦表示された「カスタムHTML」をクリックする。
⑧コピーした埋め込みコードをペーストして完成。
③ショートコードを利用する
次に先ほども少し使用したWordPress独自の仕組みである「ショートコード」を利用したYouTube動画の埋め込み方法について紹介します。
こちらは動画サイズの指定ができるため、動画サイズを変更したいという方におすすめの方法です。
手順は以下の通りです。
①埋め込みたい動画の「共有」をクリックする。
②「コピー」をクリックする。
③WordPressの投稿編集画面を開き、「＋」をクリックする。
④「ショートコード」を選択する。
⑤ショートコードのブロックが空いたら、中に「YoutubeのURL」と入力する。
この時、動画の幅×高さの比率はYouTubeのサムネイル比率である「16：9」に合わせることを意識しましょう。
⑥右上のメニューより「プレビュー」、「新しいタブでプレビュー」の順に選択し、正しく反映できていれば完成です。
④クラシックエディターを利用する方法
クラシックエディターとは、WordPress5.0以前に使用していたプラグインを指します。
普段からクラシックエディターを使用している方は、こちらの方法でYouTubeを埋め込むことをおすすめします。
手順は以下の通りです。
①埋め込みたい動画の「共有」をクリックする。
②「埋め込む」をクリックする。
③表示された埋め込みコードをコピーする。
④WordPressの投稿編集画面から「：(オプション)」をクリックする。
⑤メニューから「コードエディター」をクリックする。
⑥動画を挿入する箇所にコピーしたYouTubeのコードをペーストする。
⑦右上の「コードエディターを終了」を押す。
以上で完成です。
また、この方法で埋め込みを行うと動画の両端が切れてしまっていることもあります。
その場合には、「ブロックへ変換」をクリックすると直るので、ぜひ試してみてください。
【まとめ】WordPress(ワードプレス)にインスタやYouTube動画の埋め込みを行いましょう
いかがだったでしょうか。
この記事では、インスタやYouTube動画をWordPressに埋め込む方法について紹介しました。
WordPressにインスタの投稿や動画を埋め込むことで、よりユーザーの関心を惹く良質なコンテンツを作ることができるうえに、インスタやYouTubeのフォロワー獲得にもつなげることができます。
ぜひインスタやYouTubeアカウントをお持ちの方は、WordPressとの連携を行ってみましょう。
