[wp]Instagram Feed Proの調整

Reading Time: 1 minute

基本的には何も文句ないんだけどね。

Contents

1 環境とか
2 参考
3 480px未満の挙動
- 3.1 css
- 3.2 js
4 まとめ

環境とか

WP4.98
Instagram Feed Pro Personal3.0.4

<div id="instagramFeed">
	[instagram-feed user="InstagramAccount"]
</div>

[instagram-feed user="InstagramAccount"]

</div>

参考

Instagram Feedのカスタマイズ | bassen_blog

480px未満の挙動

ブラウザ幅480px以下？未満？要するにスマホ縦位置表示だとカラム数が1になる。
そんな状態でギャラリー代わりに設置するとページが無駄に長くなるので、せめて2カラムにしたい。

css

CSSでwidthを指定すればカラム数を増やせる。
InstagramFeedの「Custom CSS」でこんな感じに書く。

@media all and (max-width: 480px) {
	#instagramFeed #sb_instagram.sbi_mob_col_auto #sbi_images .sbi_item{
		width: 50%;
	}
}

@media all and (max-width: 480px) {

#instagramFeed #sb_instagram.sbi_mob_col_auto #sbi_images .sbi_item{

width: 50%;

}

自前で親を作って括れば差別化できるのでお勧め。
大元のcssではセレクタに「.sbi_col_3」的なのが入ってるけどなんかの拍子に指定から外れたら困るので削っておく。

js

縦長になってるこの高さはブラウザ幅に依存していて、jsで制御されている。
カスタマイズで上書きしようとすると画像表示に至らずずっとロード状態なので、本体をいじらないといけない。
管理画面左メニュー「プラグイン > プラグイン編集」
右上の編集するプラグインを選択で「Instagram Feed Pro Personal」
右側の一覧から「js > sb-instagram.js」
3513行目の「if( sbiWindowWidth <= 480 && parseInt(cols) > 2 ) sbi_num_cols = 1;」をコメントアウトしてファイルを更新。

//if( sbiWindowWidth <= 480 && parseInt(cols) > 2 ) sbi_num_cols = 1;

1	//if( sbiWindowWidth <= 480 && parseInt(cols) > 2 ) sbi_num_cols = 1;

まとめ

プラグインの更新をすると何を書き換え（置き換え）られるか分からない。
プラグインは本体をいじった瞬間から更新を諦めなければいけない。
もしくは更新のたびに修正しなければいけない。
だから最終手段になる。
本当はやりたくないので、もっと良い手段はないのかと思う。