Tutorial

自分らしさがアップ!WordPressのサイドバーにInstagramウィジェットを乗せる方法


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

スポンサードリンク

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

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

81-insta-yuko

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

82-setting1

83-setting2

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

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

84-setting3

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

85-setting4

86-setting5

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

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

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

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

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

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

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

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

87-widget

最後に

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

投稿者プロフィール

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

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. wordpress

    wordpressバックアップツールの決定版!All in one Migration のプレミアム…

    こんにちは、webデザイナー5年目のmayukouです。wordpr…

  2. Photoshop

    画像からフォントを探してくれる!Photoshopのマッチフォントが素敵。

    みなさんこんにちは、mayukouです。「このフォント何を使っている…

  3. Tutorial

    ワイヤーフレームがプロ仕様に!素敵なグラフィックスタイル「WireMagic」

    みなさんこんにちは、mayukou です!目薬が欠かせない今日…

  4. Illustrator

    簡単!Illustratorで写真の淵をぼかす方法

    みなさんこんにちは、mayukouです。まだまだ梅雨の時期ですが、…

  5. Photoshop

    Photoshopでスタンプ表現が簡単に!PSD素材で一発表現!

    こんにちは、mayukouです。最近ランニングウェアを新調して、ち…

  6. Photoshop

    表現の幅が広がる!photoshopのパスでラインを引く方法

    味のあるイラストを描きたい時に。Illustratorでラインを描…

コメント

  • コメント (2)

  • トラックバックは利用できません。

  1. ブログ拝見しました~
    この記事の内容と若干違う手順が表示されると、少し戸惑うところありますね~
    でも何とか解決できるよう頑張ります!

    • mayukou
      • mayukou
      • 2018年 11月 18日

      >ゆきじゃ様

      コメントありがとうございます!
      確かに、最近のinstagramフィードプラグインの設定画面は少し変わっているようです。
      新たに調べて、また記事を変更しておきます^^
      ご指摘ありがとうございました♩

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Web Design

    ブログ作りの参考に♬ジャンル別オススメwordpressテーマを考察してみました…
  2. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法
  3. 日記

    2015年の振り返りと今年の抱負
  4. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。
  5. マーケティング

    コンテンツマーケティングにおける有益な記事とは?ブログ運営3年目の私の最適解
PAGE TOP