【コラム】ワードプレスにInstagramのウィジェットを置こう!

まず最初に。
まこはパソコン・インターネット共に初心者です。
Windows95から使い続けてはいますが、本当に初心者の域を出ません。
ので、間違ったことを書くかもしれません。
この記事に書いてあることを実行し、データなどに被害が出ても、当方は責任を取れません。
以上のことを了解できる方のみ、記事内容をどうぞ。

+*+*+*+*+*+*+*+*+*+*+


今回は、Instagram(インスタ)のウィジェット(いわゆるブログパーツ)を作れる方法を、備忘録として書き記していこうと思います。
上の画像をクリックするとTOPページに飛びます。いろいろ見てみてください。

今回参考にしたのは

「InstaShow Lite」でWordPressにインスタグラムの写真を表示させる方法を解説! | – WP topics –

流行りのインスタグラム。利用されている方も多いのではないかと思います。インスタ映えという言葉もすっかり市民権を得た印象がありますよね。今回はインスタグラムに投稿した写真をWordPressで作成したサイトに表示させるプラグインをご紹介します。サイトが華やかになるだけでなく、サイトからインスタグラムへの流入なども見込めるので両方やられている方はぜひ試してみてください。もちろん無料です。

判りやすい記事をありがとうございます。この場を借りてお礼申し上げます。

まず、ここで使うのはWPのプラグイン『InstaShow Lite』。
本当に、『– WP topics –』さまの記事が詳しすぎる&初心者にも優しいので、インストール方法・普通のページへの設置方法はそちらを見て頂くとして(ヲイ仕事しろ)。

私がしたいのは、補足説明でございます。

Instagram

↑これ、やりたい場合なんですが、『– WP topics –』さまが提示しているCSSは『Simple Custom CSS and JS』というプラグインにて記述していれば動きます。
ワードプレスのテーマ弄るのが怖い人はそちらを使いましょう。
基本操作方法は

に書いています。JS用の解説しかしていませんが、基本的に同じです。

あと、これ、出力されるのはショートコード
[Instagramウンチャラカンチャラ]←こーゆーやつね。
なので、ウィジェット(ワードプレスのブログパーツ)には基本的に使えません。
なんで『基本的に』と書いたかというと、『functions.php』というファイルを弄れば使えるようになるからです。

と、ここまで書いたところで、衝撃の事実。

WordPressのウィジェットでショートコードを実行できるようにするための手順

WordPressではテキストウィジェットとカスタムHTMLウィジェットでショートコードを動作させることができます。この記事では、テキストウィジェットとカスタムHTMLウィジェットそれぞれの場合にショートコードを実行できるようにするための手順をメモします。

引用します。

WordPressのバージョン4.9以降では(function.phpに追記したりする処理が)不要となりました。以下にWordPressの公式メッセージが記載されています。

 (; ・`д・´) ナ、ナンダッテー !! (`・д´・ (`・д´・ ; )

そこで、引用されていたワードプレスの公式を見にいくと……。

 

テキストウィジェットのショートコード

8年以上にわたる、非常に長年の要望の1つは、Textウィジェットでのショートコードのサポートです。これはついにWordPress 4.9で実装されました。

実装されてるぅぅぅぅぅうぅぅぅぅぅぅ!

私は自己責任でテキストウィジェットをカスタマイズしていたので、試しにコードを消してみましたら。

動く! 動くぞ!

と、言う訳で……。


テキストにショートコード入れれば、ウィジェット作れるようになりました!
やったね!

ちなみに2019年6月中旬現在、『カスタムHTML』というウィジェットではショートコードを使えないそうです。
『テキスト』ウィジェットでもHTMLを扱うことはできますので、ショートコードと共に使いたい場合は『テキスト』ウィジェットを使いましょう。

上の『テキスト』ウィジェットを実行すると、こんな感じになりますっ!

企業サイトに来たみたいだぜ。テンション上がるなぁ~。

みなさんも是非!