みなさんこんにちは、mayukouです。
さて今回は、wordpressのウィジェットにInstagramのフィードを乗せる方法をご紹介します。
実際に当ブログのサイドバーに設置してみました。
自分のinstagramを見せることで、より自分らしさを伝えることができるのでオススメです。
方法は、プラグインのインストールと
ちょっとコードを書かないといけないんですが、
たったの一行だけ。
今回はその方法をご紹介します。
スポンサードリンク
プラグインダウンロード&instagram設定
まず、プラグインをダウンロードします。
プラグイン名はinstagram feedです。インストールをクリックして、有効化しましょう。
プラグイン>インストール済みプラグイン>Instagram Feed のSettingsをクリックして、設定画面に行きます。
Instagramのユーザーネームとパスワードを入力します。
するとAccess TokenとUser IDが発行されるので、図のようにコピー&ペーストしましょう。
(Customize)カスタマイズをクリックして、表示する画像の数や、カラム数(何列表示にするか)などを設定できます。私の場合カラム数は2列にしています。
Display your feedをクリックし、ショートコード[instagram-feed]をコピーします。※←これはカッコが全角になっています
このショートコードを、見せたいところに貼り付ければ、表示される仕組みになっているのですが、このままだと投稿ページや固定ページにのみ使える状態です。
functions.phpにコードを一行書く
ショートコードをウィジェットに貼り付けて終わり…と行きたいところですが、
投稿ページに使えるショートコードは、そのままウィジェットには使えません。
そこで、ウィジェットにもショートコードを使えるようにカスタマイズします。
そのためには、functions.phpに一行書き加えるだけ。
適応しているテーマフォルダから、functions.phpをダウンロードしたら、
一行加えてアップロードしましょう。
1 |
add_filter('widget_text', 'do_shortcode'); |
この一行でOKです。書き加えたら、ショートコードが使えるようになっているはずです。
テキストウィジェットをアップ
ウィジェット設定ページに行き、テキストウィジェットを選び、その中に例のショートコードを入れて完成です。
最後に
いかがでしたか?インスタグラムのウィジェット設置方法をご紹介しました。よかったら当ブログのサイドバーをみていただき、
ぜひ参考にされてください。
投稿者プロフィール

-
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2022.05.20jQueryfullpage.jsで全画面表示&スクロールを実現できます。その方法をご紹介
- 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
- 2022.02.23デザイン人は色で判断している!?ブランディングにおける色彩設計の基本
- 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。
ブログ拝見しました~
この記事の内容と若干違う手順が表示されると、少し戸惑うところありますね~
でも何とか解決できるよう頑張ります!
>ゆきじゃ様
コメントありがとうございます!
確かに、最近のinstagramフィードプラグインの設定画面は少し変わっているようです。
新たに調べて、また記事を変更しておきます^^
ご指摘ありがとうございました♩