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

    自分で作れると便利!illustratorでチェック柄を描く方法

    みなさんこんにちは、mayukouです。※熊本・大分で地震の被害に…

  3. Web Design

    WordPressブログを同じサーバーに複数作る方法

    これ、実は知らなかったのですが、とっても簡単でした。そんなことも知…

  4. Photoshop

    いい味が出る!リアルな水彩画風タッチに最適なPhotoshopのブラシ

    こんにちは、mayukouです!今日は水彩画に最適なPhotosho…

  5. Photoshop

    あっという間に!Photoshopのブラシで写真を手描き風にする方法

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

  6. wordpress

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

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

コメント

  • コメント (2)

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

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

    • mayukou
      • mayukou
      • 2018年 11月 18日

      >ゆきじゃ様

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive …
  2. Web Design

    コピペでOK!wordpressに設置するシンプルな検索ボックス
  3. photoshopでカンプ作成

    Photoshop

    photoshop CCでデザインカンプを作成。メリットとデメリット
  4. Photoshop

    5ステップ!photoshopで水彩画をスキャンして切り抜く方法
  5. illustration

    混色できる水彩画テイストの表現が可能なipad proアプリ!Tayasui S…
PAGE TOP