みなさんこんにちは、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をダウンロードしたら、
一行加えてアップロードしましょう。
1 | add_filter('widget_text', 'do_shortcode'); |
この一行でOKです。書き加えたら、ショートコードが使えるようになっているはずです。
テキストウィジェットをアップ
ウィジェット設定ページに行き、テキストウィジェットを選び、その中に例のショートコードを入れて完成です。
最後に
いかがでしたか？インスタグラムのウィジェット設置方法をご紹介しました。よかったら当ブログのサイドバーをみていただき、
ぜひ参考にされてください。
投稿者プロフィール
- Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2019.09.29jQuery画像も文字もスライド可能！Swiper.jsでコンテンツスライダーを簡単に！
- 2019.07.27デザインお店の顔！仕事の幅も広がる私流ロゴデザインマニュアル
- 2018.11.10Photoshop画像からフォントを探してくれる！Photoshopのマッチフォントが素敵。
- 2018.09.02CSSフレームワークサイト制作が早くなる！Bootstrapの特徴
ブログ拝見しました～
この記事の内容と若干違う手順が表示されると、少し戸惑うところありますね～
でも何とか解決できるよう頑張ります！
>ゆきじゃ様
コメントありがとうございます！
確かに、最近のinstagramフィードプラグインの設定画面は少し変わっているようです。
新たに調べて、また記事を変更しておきます^^
ご指摘ありがとうございました♩