Wordpressにインスタグラムを埋め込んで連携！プラグインと使い方を解説！

Wordpressのブログに、インスタグラムのフィードや、投稿内容を表示させるためには、埋め込み用プラグインが必要になってきます。プラグインとは、簡単に説明すると、追加する機能のことを言います。

埋め込み用プラグインがあれば、簡単にWordpressのブログに、インスタグラムのフィードや、投稿内容を表示することができます。ここでは、埋め込み用プラグインの1つである、Instagram Feedについて解説していきます。

Wordpressにインスタグラムのフィードや、投稿内容を表示させるために、埋め込み用プラグインである、Instagram Feedをインストールしていきます。インストール方法は、Wordpressの「メニュー画面」を開き、「プラグイン」をクリックします。

画面左上にある、「新規追加」をクリックします。

画面右上にある「検索窓」に、「Instagram Feed」と入力して、検索します。

「今すぐインストール」をクリックして、Instagram Feedをインストールしてください。

Instagram Feedのインストールが完了したら、「有効化」をクリックしてください。有効化にしておかないと、使うことはできませんので必ず行ってください。

これで、Instagram Feedのインストールと有効化が完了しました。

次に、Instagram Feedの設定をしていきます。設定方法は、Wordpressの「メニュー画面」を開き、「Instagram Feed」をクリックします。

Instagram Feedの画面が表示されるので、「Instagram」をクリックします。

ログイン画面が表示されるので、「ユーザーネーム」と「パスワード」を入力して、「ログイン」をクリックします。

Access TokenとUser IDが表示されるので、User ID（S）に、「表示されたUser ID」をコピーして貼り付けます。貼り付けたら、「設定を保存」をクリックして、保存すれば設定の完了になります。

設定が完了したら、WordPressにインスタグラムの投稿を表示させます。表示方法は、「Instagram Feedの画面」を開いたら、「Display Your Feed」をクリックします。

Display Your Feedの下にある「instagram-feed」というコードをコピーします。コピーしたら、WordPressの表示させたい箇所に貼り付けたら、インスタグラムの投稿を表示させることができます。

WordPressにインスタグラムの投稿を表示させたら、次は、表示フィードのカスタマイズをしていきます。カスタマイズ方法は、「Instagram Feedの画面」を開いたら、「Castomize」をクリックします。

Generalは、WordPressにインスタグラムの投稿を表示する幅と高さ・背景色を設定します。
 

• Width of Feed：表示する幅を設定します。％とpxで設定できます。
• Height of Feed：表示する高さを設定します。％とpxで設定できます。
• Background Color：背景色を設定できます。

Layoutは、WordPressにインスタグラムで投稿した画像枚数と、列の数を設定できます。
 

• Number of Photos：表示する画像枚数を設定できます。
• Number of Columns：表示する画像の列の数を設定できます。
• Padding around Images：表示する画像と画像の間にある余白を設定できます。
• Disable mobile layout：チェックを入れると、スマホで表示したときに、自動で画像の列の数を調整できます。

Photosは、WordPressにインスタグラムで投稿した画像を表示する順番と、表示サイズを設定できます。
 

• Sort Photos By：画像を表示する順番を設定できます。Newest to oldesr・Randomのどちらかを選択します。
• Image Resolution：表示する画像のサイズを設定できます。

Headerは、WordPressにインスタグラムのアカウントを表示する・非表示にするかを設定できます。
 

• Show the Header：チェックを入れると、ヘッダーを表示することができます。
• Show Bio Text：チェックを入れると、アカウントの説明を表示することができます。
• Header Text Color：ヘッダーの背景色を設定できます。

’Load More' Buttonは、WordPressにインスタグラムの画像を追加で読み込み、表示させるための、Load Moreボタンの設定ができます。
 

• Show the 'Load More' button：チェックを入れると、Load Moreボタンを表示することができます。
• Button Background Color：Load Moreボタンの背景色を設定できます。
• Button Text Color：Load Moreボタンの文字色を設定できます。
• Button Text：Load Moreボタンの文字を、「次へ」など他の文字へ変更することができます。

’Follow' Buttonは、WordPressにインスタグラムのフォローボタンの設定ができます。
 

• Show the Follow button：チェックを入れると、フォローボタンを表示することができます。
• Button Background Color：フォローボタンの背景色を設定できます。
• Button Text Color：フォローボタンの文字色を設定できます。
• Button Text：フォローボタンの文字を、「アカウント名」など他の文字へ変更することができます。

WordPressのインスタグラム埋め込み用プラグインである、Instagram Feedについて解説しましたが、もっとおしゃれにWordpressにインスタグラムの投稿を連携させるためには、InstaShow Liteというインスタグラム埋め込み用プラグインが必要になってきます。

Instagram Feedも充分使いやすく、良いプラグインなのですが、InstaShow Liteはもっとおしゃれにできます。では、具体的にどのように違うのかを、次に解説していきます。

InstaShow Liteを使うメリットは、WordPressにインスタグラムの写真一覧を表示させたときに、写真の部分にマウスを持っていくと、写真のテキストが浮かび上がり、青いエフェクトがかかることで、うっすらとテキストの下にある写真が見えるように表示されるところです。

Instagram Feedでは、うすく白いエフェクトがかかるだけで、テキストは浮かび上がりません。また、写真の詳細を見るためには、写真をクリックして、インスタグラムのページへ移行しないと見ることができません。

しかし、InstaShow Liteは、写真をクリックすると、写真一覧の上に、クリックした写真が表示され、コメントやいいねなど詳細部分まで見ることができます。何より、インスタグラムのページに移行しなくても、見ることができるのが大きなメリットです。また、写真一覧の端に、次のページへ移動する「矢印マーク」が付いているのも便利です。

次に、InstaShow LiteでWordpressにインスタグラムのフィードや、投稿内容を連携する方法を解説していきます。

WordpressにInstaShow Liteをインストールしていきます。インストール方法は、Wordpressの「メニュー画面」を開き、「プラグイン」をクリックします。

「新規追加」をクリックします。

「検索窓」に、「InstaShow Lite」と入力して検索すると、InstaShow Liteのインストール画面が表示されるので、「今すぐインストール」をクリックします。InstaShow Liteのインストールが完了したら、「有効化」をクリックしてください。有効化にしておかないと、使うことはできませんので必ず行ってください。

InstaShow Liteのインストールと、有効化が完了したら、Wordpressにインスタグラムアカウントを連携させていきます。連携方法は、Wordpressの「メニュー画面」を開き、「InstaShow」をクリックします。

「Authorize In Instagram」をクリックします。

インスタグラムの「IDとパスワード」を入力して、インスタグラムにログインします。

「Authorize」をクリックしたら、Wordpressにインスタグラムのアカウント連携は完了です。

Wordpressにインスタグラムのアカウント連携が完了したら、Wordpressでの表示設定をしていきます。SizeのGridは、Wordpressに表示するインスタグラム写真の枚数を設定できます。
 

• Columns：横の列に表示する写真の枚数を設定できます。
• Rows：縦の列に表示する写真の枚数を設定できます。

UIのControlsは、インスタグラムの写真一覧の表示設定ができます。
 

• Arrows：チェックを入れると、写真一覧に、ページ移行の矢印マークを表示させることができます。
• Drag：チェックを入れると、写真一覧をスワイプしてページ移行することができます。

Wordpressにインスタグラムのフィードや、投稿内容を連携するために、InstaShow Liteプラグインの埋め込みをしていきます。「Get Shortcode」をクリックすると、下にコードが表示されます。下の赤枠内にある「コード」をコピーして、Wordpressの貼り付けたい箇所に貼り付けて、「保存」すれば完了です。

InstaShow LiteでWordpressに表示する、キャプションをカスタマイズしていきます。

フォント変更をしていきます。変更方法は、CSSを挿入できる箇所に、コードを貼り付けて変更します。
 

1. font-family: serif;
2. }

文字色の変更をしていきます。変更方法は、CSSを挿入できる箇所に、コードを貼り付けて変更します。
 

1. color: #f7d165;
2. font-family: serif;
3. }

背景色の変更をしていきます。変更方法は、CSSを挿入できる箇所に、コードを貼り付けて変更します。
 

1.  color: #f7d165;
2. font-family: serif;
3. }
4. .instashow-gallery .instashow-gallery-media-cover {
5.  background: rgba(30,60,114,.9);
6. }

グラデーション設定をしていきます。設定方法は、CSSを挿入できる箇所に、コードを貼り付けて設定します。
 

1.  color: #f122a4;
2. font-family: serif;
3. }
4. .instashow-gallery .instashow-gallery-media-cover {
5.  background: #FFAFBD;
6.  background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD);
7.  background: linear-gradient(to right, #ffc3a0, #FFAFBD);
8. }

今回は、Wordpressにインスタグラムを埋め込んで連携させる方法と、プラグインと使い方を解説しました。インスタグラムを埋め込む方法は簡単なので、ご紹介した方法で連携してみてください。Wordpressにインスタグラムを連携して、もっと多くの人に見てもらって楽しんでください。