WordPressにInstagramのギャラリーを埋め込む方法を解説します。
WordPressのプラグイン「Smash Balloon Social Photo Feed」を使用すれば簡単に設置できます。
設置までの流れを解説しますので、ぜひ参考にしてみてください。
WordPressにInstagramのギャラリーを埋め込む方法
まずは「Smash Balloon Social Photo Feed」をインストール
↓管理画面へログインし「プラグイン」⇒「新規追加」をクリックしてください。
↓「プラグインのインストール」画面が開きますので、「検索」の入力部分へ「Smash Balloon Social Photo Feed」と入力し、検索してください。
↓検索一覧に「Smash Balloon Social Photo Feed」が表示されますので「いますぐインストール」をクリックしてください。
↓プラグインがインストールされますので「有効化」をクリックしてください。
↓プラグインの一覧に戻りプラグインが有効化されているのを確認してください。
これで「Smash Balloon Social Photo Feed」のインストール完了です。
「Smash Balloon Social Photo Feed」の設定
↓管理画面の左メニューにある「Instagram Feed」をクリックしてください。
↓「Instagram Feed」の設定画面が開きますので「Connect an Instagram Account」をクリックしてください(自分のインスタのアカウントと連携します)。
↓「Instagram」には個人とビジネス用の2つのアカウントがありますが、今回は個人のアカウントなので「Personal」にチェックし「Connect」をクリックしてください(ビジネスの場合は「Business」)。
↓個人のアカウントと連携しても問題ないなら「Continue」をクリックしてください。
↓「Instagram Feed」の設定画面に戻りますので「Connect This Account」をクリックしてください。
これでInstagramのギャラリーを埋め込む準備ができました。
Instagram情報の更新頻度を設定
「Check for new posts」の項目で、Instagramの情報を更新する頻度を設定できます。
↓例) 1日1回で良い場合は以下のように設定し「変更を保存」をクリックしてください。
- Minutes：分
- Hours：時間
- Days：日
ギャラリーを表示する枚数やカラムを決める
↓「Customize」をクリックしてください。
今回は、
- レイアウト：グリッド
- 最大枚数：6枚
- カラム：2列
- 写真の余白：5px
で設定します。
↓レイアウトは「Layout Type」の「Grid」を選択してください。
↓最大枚数は6枚にするので「Number of Photos」に「6」を入力してください。
↓カラムは2列にするので「Number of Columns」に「2」を選択してください。
↓写真の余白は5pxにしたいので「Padding around Images」に「5」を入力し「px」を選択してください。
↓設定に問題なければ「変更を保存」をクリックしてください。
ヘッダーに説明文を入れる
↓Instagramのギャラリーの上に説明文を入れることができます。
↓「Header」の「Show Bio Text」に説明文を入力してください。
↓設定に問題なければ「変更を保存」をクリックしてください。
Instagramのギャラリーの下のボタンのテキスト設定
↓「もっと見る」と「フォローする」ボタンのテキストを設定
↓「’Load More’ Button」の「Button Text」に任意のテキストを入力してください(今回は「もっと見る」にします)。入力後に「変更を保存」をクリックしてください。
↓「’Follow’ Button」の「Button Text」に任意のテキストを入力してください(今回は「フォローする」にします)。入力後に「変更を保存」をクリックしてください。
ウィジェットにコードを貼り付ける
今回はサイトの右サイドバーにInstagramのギャラリーを埋め込みます。
↓「Display Your Feed」をクリックしてください。
↓「[instagram-feed]」をコピーする
↓「外観」⇒「ウィジェット」をクリックしてください。
↓「サイドバーウィジェット」に新しい「カスタムHTML」をドラッグし、先ほどコピーしたコードを貼り付けてください(タイトルは「Instagram」にしています)。貼り付け後に「保存」をクリックしてください。
Instagramのギャラリーの表示確認
右サイドバーの一番下にInstagramのギャラリーが表示されていれば設定成功です。
↓確認すると問題なく表示されてました。
最後に
プラグインを導入し、簡単な設定だけで、常にInstagramにアップした最新の写真が表示されます。
以上「WordPressにInstagramのギャラリーを埋め込む方法！」でした！
それではまた。
コメント