【プラグインなし】インスタグラムAPIでWordPressに投稿の一覧を表示する。contentinokawablogCodeDesignLifeAboutContactホームWordPress【プラグインなし】インスタグラムAPIでWordPressに投稿の一覧を表示する。【プラグインなし】インスタグラムAPIでWordPressに投稿の一覧を表示する。公開日:2019/08/25最終更新日:2019/08/27こちらのサイトでInstagramのAPIを取得できます。非常にわかりやすくまとめてあり、手順通りにやれば大丈夫です。今はv3.3ではなくv4.0が使用することができるのでそちらを使用しています。いくつかデザインのサンプルも用意しました。最後におまけで下からふわっと写真が現れるアニメーションを実装するコードも書いてあります。最初に、先ほどのサイトで、一つだけ間違えている(最新版ではない)部分があったのでそこを修正して下さい。【3-2、InstagramビジネスアカウントIDを取得】の、me?fields=instagram_business_accountの部分があると思います。me?fields=instagram_business_accountではなく、{page-id}?fields=instagram_business_accountの形が正しいビジネスアカウント情報の取得のurlです。公式にも書いてありました。/{page-id}?fields=instagram_business_accountpage_idは【2-3、3段階目のアクセストークンを取得する】で取得した、nameの次のidです。用意するデータ先ほど紹介したサイトで、以下のデータを用意してください。json_decode($result['body'],true);?>これだけです。{}に対応するデータを入れてください。解説$instagram_business_id$queryはカンマ区切り(,)で指定します。mediaの中の要素は{}で指定することができます。データ量が大きくなると表示速度が遅くなるので必要最低限のデータだけ取得するようにしましょう。$target_urlでAPI用のurlを生成しています。wp_remote_getのレスポンスはbodyの中に入っているのでjson_decodeで配列に直します。2種類のデザインを紹介します。デザイン共通部分です。?>先ほど紹介したものと同じで、ifで囲った間に、以下に紹介するデザインの共通部分を入れてください。両方のデザインともレスポンシブ対応しています。一つ目は、写真同士の幅の余白を狭くしタイル状に並べたレイアウト。写真を並べるとなると、このレイアウトが結構一般的。Masonayと言われるレイアウトです。hoverしたら文章が出てきます。}}2つ目はタイル状に並べるのは同じですが、hoverした時のスタイルと、画像のスタイルを変えています。私は結構こちらも好きです。}}おまけ下からふわっと写真が現れるアニメーションimgタグにclass=”fadein”を付け加えて下さい。translateY(100px);}初期設定でopacityで隠し、y方向に100pxずらしておきます。});});</script>fadeinクラスを全て取得し、スクロール位置と取得した要素の高さからアニメーションを実行しています。これで下からふわっと出てくるアニメーションができます。これは画像だけでなく、文字や見出しにも使うことができるので汎用性が高いです。APIは非常に扱いやすいAPIでした。facebookです。API叩くの結構楽しい。次はアリババのAPIでも叩こうかな。Packについて考察する。Consoleの設定。WordPressをインストールしたらまずやること(表示設定)WordPressをインストールしたらまずやること(投稿設定)WordPressをインストールしたらまずやること(メディア・パーマリンク設定)プロフィールこのサイトを運営しているイノカワです。静岡でフリーランスをやっています。コードを書くのが大好き。いろんな技術に触れて日々気づいたこと・感じたこと・詰まったこと・生活のことを書いています。技術においては雑食です。