ワードプレス便利帳

WordPressの使い方を初心者から上級者までわかりやすく画像で解説

© ワードプレス便利帳 All rights reserved.

insta

Instagramの写真一覧をホームページに表示できるプラグイン『Instagram Feed』

Instagramの写真をホームページ上に表示したい!

最近注目されている写真共有SNS、Instagram(インスタグラム)。
せっかく写真をとって公開しているのだから、
ホームページ上にも公開したい、という方のために、
プラグイン1つで簡単に表示で切るプラグイン。それが『Instagram Feed』です。

インストール方法

管理画面、またはWordPress.orgのプラグインページよりダウンロードしてください。
WordPress org. – Instagram Feed

insta01

設定方法

左メニューに『Instagram Feed』が追加されるので
クリックして設定画面を開きます。

insta02

  1. Instagramにログインした状態で「Instagram Log in and get my Access Token and User ID」をクリックします。
  2. 先ほど押したボタンの下に、Access TokenとUser IDが表示されます。
  3. 表示されたAccess TokenとUser IDをそれぞれコピペして貼り付けます。

設定が終わったら『3.Display You Feed』タブに移ります。

insta03

■Feedの表示

[instagram-feed]

■Feedの表示(横3列、9つ表示)

[instagram-feed num=9 cols=3]

■フォローボタンを非表示

[instagram-feed num=9 cols=3 showfollow=false]

上記のコードを固定ページ、またはテーマファイルに追加すれば設定完了!

スマホにも対応してみる

※PCは4列、スマホは2列の場合

#sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item {
width: 25%;
}

@media (max-width: 767px){
#sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item {
width: 50%;
}
}

カスタマイズも豊富

  • Feedの横幅
  • 写真の並び順、表示する数(最大33枚)
  • 写真の余白
  • ヘッダー(インスタグラムアカウントへのリンク)
  • 続きを見るボタンのカラー設定
  • インスタグラムフォローボタンの設定

など。

設定画面でのカスタマイズ設定も豊富なので、
CSSわからない、って方でもある程度カスタマイズ設定できるのが嬉しいですね。

  • このエントリーをはてなブックマークに追加

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

gsvgadvg

20172/17

カスタムフィールドでカレンダーを自作【プラグインいらず】

カスタムフィールドだけでカレンダーを自作 プラグイン不要というのはカレンダープラグインを使わずという意味であってカスタムフィールド系のプラ…

20161102200516

201611/2

ループの中に罫線を追加する方法

ループ出力の中に区切り線を追加する ブログや製品・商品情報として、1行ごとに罫線を追加したい、というデザインもあると思います。 しかしル…

20161017154512

201610/17

『WordPress importer』と『Search Regex』を使って画像ごと記事の引越しを行う

『WordPress importer』について WordPressからWordPressへ投稿記事の引越しに関して、WordPressは…

bsfvgs1s

201610/6

WordPressの記事・固定ページを親ごとに出力する。

投稿・カスタム投稿・固定ページのループ出力について WordPressではquery_postsやWP_Queryなどのループを使うとペー…

20160801185626

20168/1

WordPressのtitleタグのデザインを変更する

WordPressの見出しに工夫を加える WordPressは用意されたテーマを使うにしろ、独自テーマを使うにしろ、共通したページのレイア…

ページ上部へ戻る