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. Illustrator

    スキャンした画像をIllustratorでベクターにする方法2 (追記)

    みなさんこんにちは、mayukouです。今日は福岡ではめずらしく雨…

  2. Photoshop

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

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

  3. Tutorial

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

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

  4. Photoshop

    スキャンで取り込んだイラストの線をPhotoshopで抽出するSeparate Lineartが便利…

    みなさん、こんにちは、mayukouです。デザインやイラストの仕事…

  5. Tutorial

    簡単!photoshopでスタンプ風のかすれた表現をする方法

    今回は、スタンプ風のかすれた表現をご紹介します。私は、仕事で使うこと…

  6. wordpress

    自分のブログを冬仕様に!wordpressに雪を降らせるプラグイン

    12月になり、一段と寒くなりましたね。冬になったら、自分のブログを…

コメント

  • コメント (2)

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

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

    • mayukou
      • mayukou
      • 2018年 11月 18日

      >ゆきじゃ様

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Tutorial

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

    クライアントに喜ばれる!集客用ホームページを作る手順
  3. 未分類

    wordpress初期化してしまいました。
  4. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。
  5. illustration

    インスタ映えな挿絵が描ける!ステキな水彩画イラストの描き方本に出会いました。
PAGE TOP