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

    webデザインに活用するゴーストボタンを作るときの文字をセンタリングする方法

    みなさんこんにちは、mayukouです。今回は、アピアランスに関す…

  2. Tutorial

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

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

  3. Photoshop

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

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

  4. jetpack

    wordpress

    多機能プラグイン!Jetpack for wordpressのインストール方法

    みなさんこんにちは、mayukouです。みなさんはwordpr…

  5. Photoshop

    便利!Photoshopで描いた絵をIllustratorで使えるパスに変換する方法!

    みなさんこんにちは、mayukouです。今回は、Photoshopで…

  6. wordpress

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

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

コメント

  • コメント (2)

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

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

    • mayukou
      • mayukou
      • 2018年 11月 18日

      >ゆきじゃ様

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. 写真

    食べ物やブツ撮りにおすすめ♩PENTAXの単焦点レンズ買いました。撮ったものなど…
  2. Photoshop

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

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法
  4. 日記

    wordpressでコーギーブログ始めました♫
  5. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpres…
PAGE TOP