流行りのインスタグラム。利用されている方も多いのではないかと思います。
インスタ映えという言葉もすっかり市民権を得た印象がありますよね。
今回はインスタグラムに投稿した写真をWordPressで作成したサイトに表示させるプラグインをご紹介します。
サイトが華やかになるだけでなく、サイトからインスタグラムへの流入なども見込めるので両方やられている方はぜひ試してみてください。もちろん無料です。
※2019年9月現在、InstaShow Liteプラグインは公開停止されており利用ができません。
今後はInstaShowの公式ページに登録⇒連携用コードをWordPressに記述という流れでサイトにインスタを表示できるようになります。
↓最新のInstagram連携方法はこちらをご覧ください
InstaShow Liteとは
名前の通りインスタグラムの投稿をWordPressに表示するためのプラグインになります。
写真を整列してサイト上に表示させるだけでなく、写真にマウスカーソルを合わせると投稿した文章が写真に重なって表示されたり、写真をクリックする事で写真を拡大表示させることができるなど、非常に使いやすいプラグインになっています。
実際の見た目はこんな感じですね。
InstaShow Liteをインストールする
「プラグイン」→「新規追加」からInstaShow Liteを検索します。
すると
このようにプラグインが出てきます。
これ、instagram Feedじゃないの？と思いますが、アイコン部分を見ていただくとInstaShow Liteと表記されているので勘違いしないようにしてください。
「今すぐインストール」→「有効化」でプラグインを使うことができます。
＼プラグインのインストール方法をもう少し詳しく見たい方はこちら／
InstaShow Liteの設定をする
有効化が完了すると、管理画面のメニューの下部に「InstaShow」という項目が追加されます。
ここを押して設定画面を開きましょう。
WordPressとインスタグラムのアカウントを紐づける
それでは早速インスタグラムとアカウントを紐づけましょう。と、その前に今開いているブラウザで紐づけたいインスタグラムのアカウントにログインしておきましょう。
そうする事でこの後の作業が楽になります。
ログインが完了したら、
Connect to instagramという項目の「Authorize in instagram」をクリックします。
すると
このようにアカウントを紐づけてよいかどうかの確認画面が出ますので、アカウントに間違いがないことを確認して「承認」をクリックします。
アカウントとの紐づけを承認すると
このように先ほど赤色だった枠が緑に変わり、Access Tokenが発行されます。
これでWordPressのサイトとインスタグラムの紐づけは完了です。
どのように表示するのかを設定する
アカウントとの紐づけが終わったら、次にインスタグラムをどのように表示させるかを設定します。
Connect～から下に進むとInstallationという項目がありますので、ここで見た目を調整しましょう。
Lite版（無料）で設定できる項目は
・Source
・Sizes
・UI
になります。
InfoとStyleについては有料版でのみ設定できる内容ですので今回は触れません。
1つずつ詳しく見ていきましょう。
Source
Lite版で設定できるのはCache media timeだけですが、ここは0のままで問題ありません。
Sizes
Lite版では縦、横にいくつ画像を並べるかのみ設定できます。
GridのColumnsの数字を変更すれば横に並べる画像の数を、Rowsを変更すれば縦に何行で画像を並べるかを指定できます。
Columnsを「3」に、Rowsを「1」に設定するとこのように横に3枚、縦に1行で表示
Columnsを「4」に、Rowsを「2」に設定するとこのように横に4枚、縦に2行で表示されます。
UI
ここでは写真表示時のUIを変更できます。
写真のインターフェースの設定
まずはこちらの項目、Controlsでは以下の項目を設定できます。
デフォルトではArrows、Dragともにチェックが入っていますが、こちらは
Arrows → 写真を矢印でスライドできるようにする
Drag → 写真をドラッグでスライドできるようにする
という内容なので基本的にはチェックを入れたままで問題ないかと思います。
Autorotationの項目はデフォルトでは0になっていますが、ここを1以上にすると指定した秒数で写真が自動でスライドするようになります。
例えばここを2000msにしておくと2秒毎に自動で写真がスライドして切り替わる、という感じですね。
スライダーの下についているPause on hoverにチェックを入れておくと写真にマウスカーソルが乗っている時には自動スライドが止まるようになります。
もし自動で写真をスライドさせたい場合はUI上チェックしておいた方が良さそうですね。
写真の動き（アニメーション）の設定
次にアニメーションの設定です。
デフォルトではSlideになっていますが、Fadeにチェックを入れることで横にスライドする形ではなく、その場で表示画像がふわっと消え、次の画像がふわっと現れるという切り替わり方をします。
ここは好みだと思うのでお好きな方を使用してください。
Animation Speedで動くスピードを変更できます。デフォルトでは600ms=0.6秒で画像の切り替えが終了する形です。あまりにゆっくりだと見ている人はもどかしく感じてしまいますので、少し早くする程度なら問題ないですが特に狙いが無いのであればそのままにしておくことをおすすめします。
Easingではアニメーションの際のエフェクトを設定できます。こちらもお好みで調整してみてください。
拡大表示時の動きを調整する
最後に拡大表示（ポップアップ）で画像を表示した際の動きを設定できます。
switch speedのスピードを変更すると拡大表示した際のスライドのスピードを、switch easingでスライド時の動きの設定ができますのでお好みで調整してみてください。
これで表示に関する設定は完了です。
文字数が多くなってしまいましたが実際やること自体はそこまで多くありません。
迷うようであればSizesの項目だけ見せたい形に設定しておき、その他はデフォルトのままでも問題ありません。
サイト内にインスタグラムを表示させる
それではようやくですが、サイト内にインスタグラムを表示させてみましょう。
先ほどの設定項目の下に＜/＞Get Shortcodeという項目がありますのでタブを開きます。
ここに表示させるためのショートコードが記載されていますので、こちらをコピーします。
あとはインスタグラムを表示させたい位置に
このように先ほどのショートコードをペーストすると、
設定した通りにサイトにインスタグラムが表示されたかと思います。
インスタっぽく見た目を整えてみる
折角なのでもう少しインスタっぽく見た目を整えてみましょう。
今のままだとただ画像がスライドで見えてるだけですもんね。
という事でまずはタイトル部分を追加。
インスタグラムと表示させるだけでは味気ないので
こんな感じでちょっとインスタのロゴっぽく色味を調整してみました。
CSSはこちら
padding: 5px 30px 8px;
background: -moz-linear-gradient(177deg,#4d4c9d,#e75f71 65%,#ffa66b);
background: -webkit-linear-gradient(177deg,#4d4c9d,#e75f71 65%,#ffa66b);
background: linear-gradient(177deg,#4d4c9d,#e75f71 65%,#ffa66b);
color: #ffffff;
font-family: cursive;
font-size: 25px;
font-weight: bold;
margin-bottom: 15px;画像にマウスカーソルを合わせた時の色をインスタ寄りにするのであればこんな感じ
.instashow-gallery
.instashow-gallery-media-cover{
background: -moz-linear-gradient(177deg,#4d4c9db8,#e75f71b8 65%,#ffa66bbd);
background: -webkit-linear-gradient(177deg,#4d4c9db8,#e75f71b8 65%,#ffa66bbd);
background: linear-gradient(177deg,#4d4c9db8,#e75f71b8 65%,#ffa66bbd);
}両方適応させると、
こんな感じの表示になります。
ちょっとやりすぎかもしれませんね…。
サイトのカラーなんかもあると思うので、上記のcssを参考にお好みの色に指定してみてください。
インスタをサイトに表示させるまとめ
ということで「InstaShow Lite」を使ってサイトにインスタグラムを表示させる方法でした。
色々と書きましたが、プラグインをダウンロードする→アカウントを紐づける→表示させたい位置にショートコードを記述する、とやること自体は単純です。
cssを弄れるのであれば見た目もよりインスタっぽくすることが可能ですので是非試してみてください。
※2019年9月現在、InstaShow Liteプラグインは公開停止されており利用ができません。
今後はInstaShowの公式ページに登録⇒連携用コードをWordPressに記述という流れでサイトにインスタを表示できるようになります。
↓最新のInstagram連携方法はこちらをご覧ください
