Instagram Gallery

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

 

アカウントの投稿、ハッシュタグの投稿を抽出して表示したい

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

 

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

 

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

 

 

プラグインをインストールし、ギャラリーを作成

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

パソコン用:6枚を表示・画像サイズは「medium」
スマホ用:3枚を表示・画像サイズは「small」

 

 

セッティングしてhtmlに設置+CSS追記

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

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

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

htmlには以下を記述。

モバイル

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

 

パソコン

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

 

 

プラグインをローカル環境で編集

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

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

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

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

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

 

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

You may also like

コメントを残す

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