新潟県妙高市を拠点とする、ホームページと広告の相談相手

MENU [+]閉じる [×]
【WordPress】プラグイン「AccessPress Instagram フィード」とウィジェット活用でサイドバーに投稿を表示する方法

今回は「WordPressとInstagramの連携の方法」についてです。

WordPressのサイト内にInstagramの最新投稿を表示させるとき、皆さんはどうしていますか?

Instagramの投稿を1件だけWordPressの記事本文に表示させる場合はInstagramの側に「埋め込み」の機能がありますが、記事本文以外の場所、例えばサイドバーや記事下に表示させる場合はプラグインを使って表示させる方法が一般的です。

今回はその中でも「サイドバーへの表示」としてWordPressのウィジェットとプラグイン「AccessPress Instagram フィード」の活用方法についてご紹介します( ^∀^)

この記事の目次

WordPressプラグイン「AccessPress Instagram フィード」について

「AccessPress Instagram フィード」のプラグインのURLはこちらです。

「AccessPress」で検索すれば似たような名称のプラグインと迷いにくいとは思いますが、念のため。

本稿執筆時点(2017年10月13日)で最新バージョンの「WordPress4.8.2」で検証済みであるとの旨の記述が見られます。

ページの先頭へ戻る

インストール&有効化から設定画面へ

「AccessPress Instagram フィード」のインストールや設定についての手順は以下の通りです。

手順1:「AccessPress Instagram フィード」をインストール&有効化する

まずはプラグイン「AccessPress Instagram フィード」をインストールして、有効化します。

すると、WordPressの管理画面の左側の、「設定」の少し下あたりに「AccessPress Instagram フィード」という、カメラのアイコン付きの項目が増えているかと思います。

そちらをクリックして、次の手順から細かい設定を行なっていきます。

手順2:「Instagram プロフィール」で「ユーザー名」「ユーザーID」「アクセストークン」を入力する

WordPressの管理画面の左側メニューにある「AccessPress Instagram フィード」をクリックすると「Instagram プロフィール」というタブが選択された状態かと思います。

そこで、下記の3項目を入力します。

[Instagram ユーザー名]
WordPressに最新投稿を表示させたいInstagramのアカウント名です。
当サイト管理人の私で言えば[web.ya.kiyoshi]がそれに該当します。

[Instagram User ID(Optional)]
こちらはInstagramのアカウント名とは異なり、WordPressとInstagramを連動させるために必要なIDとお考えください。
入力欄の下の「Please enter the instagram user ID.You can get this information from …」というテキストの下に、取得用のURLがリンク付きで表示されていますので、リンク先を参考にして見てください(^^)

[Instagram アクセストークン]
ランダムに表示される文字列です。
ここでは、
「WordPressのサイト管理者とInstagramのアカウント管理者とが同一人物か、あるいは連動させることに問題ありません」
ということを示すパスワードのようなもの、とお考えください。
アクセストークンの取得も、入力欄の下に「Get Access Token」という文言からリンクできます。

手順3:「表示設定」でレイアウトを選択&「使い方」でコードを取得

「ユーザー名」「ユーザーID」「アクセストークン」の3項目を適切に入力できたら、次は表示方法の選択です。

WordPress管理画面の「表示設定」のタブ内では、4つの表示方法を選択できます。

AccessPress Instagram フィード:表示設定-4つのテーマレイアウトから選択可能

[1]モザイクレイアウト
[2]モザイク LightBox レイアウト
[3]スライダーレイアウト
[4]グリッドローテーター

これだけ選べれば、ご自身のInstagramのお気に入りの写真をWordPressのサイトに様々な形式での表現ができそうですね( ^∀^)

その次は、Instagramの投稿の表示に必要なショートコードの取得です。

「使い方」のタブを選択して、「表示設定」のタブと同じ選択内容のショートコードを選択してみてください。

AccessPress Instagram フィード:使い方-選択したテーマレイアウトに応じてコードを取得可能

問題なければ、このショートコードを希望の箇所に入れることで、Instagramの投稿がWordPressサイト内で表示されるかと思います。

……でも!!

こういった設定には、時として「予想外」もつきものです(^^;)

私が試した時でもInstagramの最新の写真は表示できるものの、CSSがうまく利いておらず、写真の並びが縦に「びろーん」となってしまったというケースを確認しました。

CSSがお得意な方は、追加でCSSの設定を行うなどすれば解決できる場合もあるでしょう。

ただ、どうしても難しいという方で、サイドバーのみの表示でも良いという場合は、次にご紹介する方法をお勧めします(^^)b

ページの先頭へ戻る

サイドバーのみの表示で良いなら「ウィジェット」を活用する

さぁ。

「AccessPress Instagram フィード」をインストール&有効化して、表示形式を設定して、表示用のショートコードまでセットして、ブラウザで確認してみたとします。

それでも、CSSが利いていないなどの原因でレイアウトが崩れている場合は、整形していくのにも一苦労ですよね(^^;)

CSSを駆使して直せるなら問題ありませんが、やはり手を入れるのは慎重になってしまうもの。

そこで、サイドバーのみの表示で良いなら「ウィジェット」を活用するという方法をご提案します!

もちろん「AccessPress Instagram フィード」のプラグインはアンインストールする必要はありません( ^∀^)

ウィジェットはWordPressの標準機能として[外観]のサブメニューとして搭載されています。

AccessPress Instagram フィード:ウィジェット設定-写真の枚数や各項目の表示・非表示などもカスタマイズ可能

「ウィジェット」を選択すると、表示される画面に「Sidebar(サイドバー)」という項目があるかと思います。

デフォルトで中に入っている項目を全部削除したうえで、「AP: Instagram フィード」という項目をドラッグ&ドロップで、「Sidebar(サイドバー)」の枠内に持っていきます。

すると、サイドバーに「AccessPress Instagram フィード」によるInstagramの投稿写真が表示されるようにすることができます。

さらに、細かい項目を設定することでカスタマイズできます。

[タイトル]
Instagramの最新の投稿の表示エリアのタイトルです。

[画像の数]
表示させる最新の投稿の件数です。
3列で表示されるので3の倍数を設定しておくのがオススメですが、そこは自由です。

[Hide Header]
ここにチェックすると、プロフィールのアイコン画像やユーザー名が非表示となります。

[Hide Instagram Post]
ここにチェックすると、Instagramの投稿件数が非表示となります。

[Hide Followers]
ここにチェックすると、フォロワー数が非表示となります。

[Hide Instagram Following]
ここにチェックすると、フォローしているユーザー数が非表示となります。

[Hide Instagram Follow Button]
ここにチェックすると、フォローボタンが非表示となります。

[Link Images to Instagram]
ここにチェックすると、表示されている写真をクリックしたときにInstagramのその投稿にリンクできます。

設定を終えたら、サイドバーの表示させたい箇所に、下記のコードを追加してください。

<?php if ( ! is_active_sidebar( 'sidebar-1' ) ) {return;} ?>
<?php dynamic_sidebar( 'sidebar-1' ); ?>

もちろん、必要に応じてHTML&CSSなども含めつつ、体裁を整えることは可能です。

これでWordPressのサイトを実際に見てみると、無事に表示されているのを確認できました!

Instagramの最新投稿&投稿数&フォロワー数をWordPressサイトに表示させた結果

みなさんも、自由にカスタマイズしてWordPressサイトにInstagramの投稿を表示させて見てください。

色とりどりの写真を並べることで、特に食品系・美容系のWebサイトなどは見栄えがだいぶ変わってきそうですね(^-^)

ページの先頭へ戻る

この記事の感想をお寄せください

[【WordPress】プラグイン「AccessPress Instagram フィード」とウィジェット活用でサイドバーに投稿を表示する方法]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

いいね!と思っていただけたらSNSでシェアしてください♪

関連記事一覧:【WordPress】プラグイン「AccessPress Instagram フィード」とウィジェット活用でサイドバーに投稿を表示する方法

Copyright (C) 妙高Web屋 All Rights Reserved.

ページの先頭へ