Tweet

Pocket

みなさんこんにちは、mayukouです。
さて今回は、wordpressのウィジェットにInstagramのフィードを乗せる方法をご紹介します。
実際に当ブログのサイドバーに設置してみました。
自分のinstagramを見せることで、より自分らしさを伝えることができるのでオススメです。
方法は、プラグインのインストールと
ちょっとコードを書かないといけないんですが、
たったの一行だけ。
今回はその方法をご紹介します。

プラグインダウンロード＆instagram設定

まず、プラグインをダウンロードします。
プラグイン名はinstagram feedです。インストールをクリックして、有効化しましょう。

プラグイン＞インストール済みプラグイン＞Instagram Feed のSettingsをクリックして、設定画面に行きます。

Instagramのユーザーネームとパスワードを入力します。

するとAccess TokenとUser IDが発行されるので、図のようにコピー＆ペーストしましょう。

（Customize）カスタマイズをクリックして、表示する画像の数や、カラム数（何列表示にするか）などを設定できます。私の場合カラム数は２列にしています。

Display your feedをクリックし、ショートコード［instagram-feed］をコピーします。※←これはカッコが全角になっています

このショートコードを、見せたいところに貼り付ければ、表示される仕組みになっているのですが、このままだと投稿ページや固定ページにのみ使える状態です。

functions.phpにコードを一行書く

ショートコードをウィジェットに貼り付けて終わり…と行きたいところですが、
投稿ページに使えるショートコードは、そのままウィジェットには使えません。
そこで、ウィジェットにもショートコードを使えるようにカスタマイズします。

そのためには、functions.phpに一行書き加えるだけ。
適応しているテーマフォルダから、functions.phpをダウンロードしたら、
一行加えてアップロードしましょう。

この一行でOKです。書き加えたら、ショートコードが使えるようになっているはずです。

テキストウィジェットをアップ

ウィジェット設定ページに行き、テキストウィジェットを選び、その中に例のショートコードを入れて完成です。

最後に

いかがでしたか？インスタグラムのウィジェット設置方法をご紹介しました。よかったら当ブログのサイドバーをみていただき、
ぜひ参考にされてください。

投稿者プロフィール

mayukou

Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら

最新の投稿

この著者の記事一覧

• 2022.05.20jQueryfullpage.jsで全画面表示＆スクロールを実現できます。その方法をご紹介
• 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
• 2022.02.23デザイン人は色で判断している！？ブランディングにおける色彩設計の基本
• 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。