WordPressで制作したサイトのトップページに、インスタグラムの投稿記事を表示し、Carouselでスライド表示。
スマホ表示でのカスタマイズが少し手間がかかったが、希望通りに作ることができた。

インスタのギャラリープラグインは多くあるが、ほとんどが「Access Token」と「User ID」での連携が必要になる。
クライアントさんのインスタにログインして…という方法ではなく、もっと簡易に繋げたかった。

使用したプラグインは「Instagram Gallery」（作成者 Karan Singh）。
> Instagram Galleryについてはこちらを参照

このプラグインは無料かつ単体でカルーセル(スライドショー)表示させることが出来ます。
投稿記事、ページへのリンクはもちろん、インスタグラム上にあるハッシュタグでギャラリーを作成することも可能です。

プラグインをインストールし、セッティング画面でギャラリーを作る。
パソコン表示用とスマホ表示用をそれぞれ作る。
Wordpressのレスポンシブ表示では、を使用して振り分けています。

パソコン用：６枚を表示・画像サイズは「medium」
スマホ用：３枚を表示・画像サイズは「small」

ショートコードをhtml（テーマファイルもしくは固定ページ）に記述。
＊パソコン、モバイルの記述内にそれぞれ記述。

CSSにはモバイル向けに以下を記述。

#ins {
min-height:100px;
margin-bottom:40px;
}

htmlには以下を記述。

モバイル

パソコン

<?php echo do_shortcode(‘[insta-gallery id=”2″]’); ?>

ここまでの作業でパソコンはOKだが、スマホでは大きな表示でサイトのサイズ感がおかしくなってしまい、写真サイズを小さくしても左右に矢印が出て一枚だけの表示になってしまう。
これではせっかくモバイル表示をきれいに整えても台無しになってしまう。

格闘したが、プラグイン側のCSSを希望の表示になるように編集することに行き着いた。

プラグインをFTPでダウンロードし、ファイルを編集する。
研修したのは以下のファイル。

asset/
・insta-gallery-min.js
・insta-gallery-min.css

の２つを編集。
＊記憶が抜けているが「insta-gallery-min.js」は編集してないかも…

アップするとスマホの問題は解決。
パソコン、モバイルともに希望通りの表示ができるようになった。