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

    ブログリニューアルしました。そのときやったことなど。

    3連休まっただ中!ちょっといつもよりグダグダな生活です。福岡はあい…

  2. Illustrator

    空を可愛く!Illustratorで虹を簡単に描ける方法&ダウンロードできる素材を作りました

    みなさん、こんにちはmayukouです。台風も過ぎ去り、梅雨ももう…

  3. Photoshop

    Photoshopのウィンドウを見やすく!ワークスペースを工夫してみよう

    こんにちは、mayukouです。なんだかすっきりしない天気です。九…

  4. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  5. wordpress

    wordpressが重たい!そんな困った時に便利なプラグイン

    近頃、調子に乗ってwordpressにいろいろプラグインを入れてパワー…

コメント

  • コメント (2)

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

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

    • mayukou
      • mayukou
      • 2018年 11月 18日

      >ゆきじゃ様

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. ブログ

    webデザイナー4年目!その間に身につけたスキル
  2. Photoshop

    必見!Photoshopでスタンプ風のかすれた表現をする方法まとめ
  3. デザイン

    脱自己流!上手くいくデザインの手順とは。
  4. 書評

    超クール!webマーケティングが学べる「沈黙のwebマーケティング」を読みました…
  5. Photoshop

    イラストをスタンプにしよう!描いたイラストをphotoshopのカスタムシェイプ…
PAGE TOP