「Instagram feed」でスマホ・PCの表示数を変更する方法

<!--固定ページのショートコードの場合-->
[instagram-feed]

<!--テンプレートファイルのショートコードの場合-->
<?php echo do_shortcode('[instagram-feed]'); ?>

切り替え

.SpOnly{
  display: block;
}
.PcOnly{
  display: none;
}

@media screen and (min-width: 769px) {
.SpOnly{
  display: none;
}
.PcOnly{
  display: block;
} 
}

<!--スマホで10つ表示させるショートコード-->
<div class="SpOnly">
  <?php echo do_shortcode('[instagram-feed num=10]'); ?>
</div>

<!--パソコンで5つ表示させるショートコード-->
<div class="PcOnly">
  <?php echo do_shortcode('[instagram-feed num=5]'); ?>  
</div>

◆一般設定

• ・id – InstagramのユーザーID – 例：[instagram-feed id=AN_INSTAGRAM_USER_ID]
• ・width – Instagramフィードの幅。任意の数 – 例：[instagram-feed width=50]
• ・widthunit – Instagramフィードの幅の単位。’px’または ‘％’ – 例：[instagram-feed widthunit=%]
• ・height – Instagramフィードの高さ。任意の数 – 例：[instagram-feed height=250]
• ・heightunit – Instagramフィードの高さの単位。’px’または ‘％’ – 例：[instagram-feed heightunit=px]
• ・background – Instagramフィードの背景色。任意の16進数カラーコード – 例：[instagram-feed background=#ffff00]
• ・class – InstagramフィードコンテナにCSSクラスを追加します – 例：[instagram-feed class=feedOne]

◆写真のオプション

• ・sortby – Instagramの投稿を最新のものから古いもの（なし）またはランダムなもの（ランダム）に並べ替え – 例：[instagram-feed sortby=random]
• ・num – 最初に表示するInstagramの投稿数。最大は33です – 例：[instagram-feed num=10]
• ・cols – Instagramフィードの列数。1 – 10 – 例：[instagram-feed cols=5]
• ・imageres – Instagramの写真の解像度/サイズ。’auto’、full、 ‘medium’、または ‘thumb’ – 例：[instagram-feed imageres=full]
• ・imagepadding – Instagramの写真の周囲の間隔 – 例：[instagram-feed imagepadding=10]
• ・imagepaddingunit – Instagramフィード内のパディングの単位。’px’または ‘％’ – 例：[instagram-feed imagepaddingunit=px]
• ・disablemobile – Instagramフィードのモバイルレイアウトを無効にします。’true’または ‘false’ – 例：[instagram-feed disablemobile=true]

◆ヘッダオプション

• ・showheader – Instagramのフィードヘッダを表示するかどうか。’true’または ‘false’ – 例：[instagram-feed showheader=false]
• ・headercolor – Instagramフィードのヘッダの色。任意の16進数カラーコード – 例：[instagram-feed headercolor=#333]

◆「もっと読み込む」ボタンのオプション

• ・showbutton – ‘Load More’ボタンを表示するかどうか。’true’または ‘false’ – 例：[instagram-feed showbutton=’false’]
• ・buttoncolor – ボタンの背景色 任意の16進数カラーコード – 例：[instagram-feed buttoncolor=#000]
• ・buttontextcolor – ボタンのテキストカラー。任意の16進数カラーコード – 例：[instagram-feed buttontextcolor=#fff]
• ・buttontext – ボタンに使用されるテキスト – 例：[instagram-feed buttontext=”Load More Photos”]

◆[Instagramでフォロー]ボタンのオプション

• ・showfollow – 「Instagramでフォロー」ボタンを表示するかどうか。’true’または ‘false’ – 例：[instagram-feed showfollow=true]
• ・followcolor – [Instagramでフォロー]ボタンの背景色。任意の16進数カラーコード – 例：[instagram-feed followcolor=#ff0000]
• ・followtextcolor – [Instagramでフォロー]ボタンのテキスト色。任意の16進数カラーコード – 例：[instagram-feed followtextcolor=#fff]
• ・followtext – [Instagramでフォロー]ボタンに使用されるテキスト – 例：[instagram-feed followtext=”Follow me”]