【WordPress】Instagramをサイドバーに表示させる方法

【WordPress】Instagramをサイドバーに表示させる方法 WordPress

Instagramの投稿をサイドバーに表示させる方法

基本的にはサイドバーのヴィジェットに表示させたいTwitter、InstagramアカウントのカスタムHTMLをペッって貼り付けるだけです。

WordPress1ヶ月の初心者でも無事出来ました。

TwitterとInstagramのサイドバーへの表示に関しては以下を見て頂けたら、CSC、HTMLの知識がなくても大丈夫です。新参者なのでエディターはGutenbergです。

本記事ではInstagramの投稿をサイドバーに表示する方法を説明します。

Twitterのタイムラインをサイドバーに表示する方法は【WordPress】Twitterのタイムラインをサイドバーに表示させる方法で説明しています。

サイドバーに表示するためのプラグインのインストール

プラグインをインストールする。

その名も「Smash Balloon Social Photo Feed

プラグイン画面

WordPressの管理画面からプラグイン->新規追加の順でプラグインの追加画面を表示し、検索小窓で下記を検索する。

Smash Balloon Social Photo Feed
プラグインまでの道筋

インストールだけでは機能は有効になっていないため、手動で有効化する必要がある。

インストールが完了すると、ボタンの表示が「今すぐインストール」から「有効化」に変わるのでそのまま押下する。

有効化ボタンを押下

Smash Balloon Social Photo Feed の有効化が済めば、次は設定を編集する。

設定を押下

サイドバーに表示するためのコード取得

「Instagramアカウントを接続する」というボタンを押下する。

わかりやすい操作画面

PesronalとBusinessか尋ねられるが、Personalを選択する。

Personal

Business

Pesronalとの違いはFacebookと連動させることによって、サイドバーに表示するインスタグラムにプロフィール写真とアカウントの紹介欄が表示できること。

Instagramのアカウントとの接続の許可を求められるので許可すると、再度アカウントの確認ポップアップが表示されるので問題がなければ、「このアカウントを接続する」を選択する。

アカウントの確認

「変更を保存」を押下する。

変更保存ボタン

インスタグラムの表示に関する設定は「2.カスタマイズ」タブから設定可能。

カスタマイズタブ

無料版でも表示する枚数や列数を決められる。

好みに合わせて表示枚数を決めよう

他にもインスタグラムの表示サイズや、ボタンの表示に関する設定が可能。

サイドバーに表示するためのコード貼り付け

Classic Editorも似たようなものですが、追加するヴィジェットわからん! ってなったらすみません。

Twitter用にサイドバーにヴィジェットを追加

外観->ヴィジェットを押下するとサイドバーが表示する(①)。

Twitterのタイムラインを挿入したい場所で「+」を押下する(②)。

カスタムHTMLが表示されていれば、「カスタムHTMLを選択する。

表示されていなければ、「すべて表示」を押下する(③)。

カスタムHTML挿入までの操作手順

ヴィジェットの「カスタムHTML」を選択する。

カスタムHTMLの選択画面

取得したコードの貼り付け

カスタムHTMLのヴィジェットが挿入されるので、 ヴィジェット内に以下のコードを貼り付ける。



カスタムHTMLの中身はこれだけでOK

「更新」を押下する。

完了!

ブログを表示して問題なければ完了です。

コメント

タイトルとURLをコピーしました