APIを使って他のサイトから単一の投稿のデータを取得し、アイキャッチ画像付きでカード表示させるショートコードの作り方を紹介します。頑張ってカスタマイズしたのにこんなのしかできないの?とならないよう、まずは以下が今回のカスタマイズで出力できたリンクカードの表示サンプルです(本サイトでこの機能を使っていない可能性を考慮して、画像で表示しています)。こんな感じのものでよければ、本ページを参考に取り組んでみてください。APIを使ってデータの取得を行う方法と、アイキャッチ画像なしで情報表示を行うショートコードの作り方の応用として、公開しており、アイキャッチ画像のデータを取得する方法とそれを踏まえたリンクカードショートコードの作り方を紹介しています。従って以下のページの内容がお分かりでないと、何をしているのかがほぼ分からないと思いますので、必ず参照ください。APIを使って単一の投稿からデータを引き出して表示する方法アイキャッチ画像のデータを取得する流れ上記リンク先ページで、単一の投稿データを取得してみると分かる通り、アイキャッチ画像そのもののデータは単一投稿のデータには存在せず、その投稿に設定されているアイキャッチ画像のIDだけが取得できるようになっています。従って、以下のようにしてアイキャッチ画像のデータは取得する必要があります。投稿のデータを取得する1の中にあるアイキャッチ画像のIDを取得する画像用のAPIを叩いて、2のIDに合致する画像データを取得する3の中から必要な情報を取得して表示させる何段階も経てアイキャッチ画像のデータは取得できるため、投稿データと同様に、画像用の全データの取得ができるかを確認した上で、最終的にアイキャッチ画像付きのリンクカード表示までを行いたいと思います。冒頭で紹介している投稿データの取得についてのページの内容を理解されていることを前提にしていますので、細かい説明は省いています本ページ掲載のコードを使用するときは本ページで掲載しているコードは、以下に了承した上で使用くださいコードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いませんコードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでくださいコードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがありますコードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください掲載しているのは参考コードです。単一の投稿に紐づくアイキャッチ画像の全データを取得してみる投稿データの中にあるアイキャッチ画像のIDを基に、画像用のAPIを叩いてデータを取得するという2段階のことをする必要があります。以下のコードを有効化しているテーマのfunctions.phpへ追加します。'画像が見つかりませんでした。$result_html;}add_shortcode('post-featured-image','pwcn_rest_api_featured_image_shortcode');コード中の「ここにトップページのURL」と「スラグ」を目的のページに合わせて入力します。投稿などを作成し、post-featured-imageというショートコードを挿入します。すると以下のような情報が得られます(サンプルとして一部を画像表示しています)。APIの制限などをかけていなければ、上図のような形で表示されるはずです。データの取得方法自体は投稿データと同じですので割愛します。APIを使用して、アイキャッチ画像を含めたリンクカードを表示させてみようと思います。以下のコードで実装できます。$result_html;}add_shortcode('fimage-card-post-data','pwcn_rest_api_post_data_with_fimage_for_card_sc');コードをコピーしたら、「ここにトップページのURL」と「ここにスラグ」の部分を設定し、新規に投稿などを作成し、「fimage-card-post-data」ショートコードを挿入すると取得した情報が表示されるはずです。以下が簡単なコードの構造と流れです。投稿用のデータのアイキャッチ画像のIDを基に、画像用のjsonから中サイズの画像情報を取得ショートコードで取得した情報をHTMLとして出力このままでは、単純に取得した情報が表示されるだけでカード表示にはなっていません。以下のスタイルコードなどをテーマのstyle.cssなどへ追加すれば下図のような感じに表示できると思います。0.8rem;}リンクカードの表示例(画像)※画像で挿入していますので、クリックしても何も起こりませんひとまずアイキャッチ画像、タイトル、抜粋を表示させています。その他の情報を表示させたい場合は、ここまでの内容を読んでいれば簡単ですね。以下のように発展させて、このショートコードをより便利に使えるようにもできますね。APIを使用して(APIを叩いて)取得した情報をカード形式で表示するという方法について紹介しました。APIの使い方を知る目的も兼ねています。APIに対する接続制限を行っているサイトのページは、情報を取得できないため、カード表示できません。運よく情報が取得できたとしても、そのサイトが永遠に制限をかけないとは限らないため、いつの間にか表示できなくなるということも想像できます。安定的に埋め込み表示を行うには、段落ブロックの先頭からURLを入れると埋め込みカード表示を行うWordPressの機能を使うか、WordPressで運営していないサイトでも一般的に出力されている、OGP(SNSへの埋め込み用のタグ)から取得して表示したほうが無難かも知れません。本ページで掲載した内容や、紹介した参考コードなどがお役に立てたようでしたら、ページ末尾のコメント欄よりコメントを残す、SNS等で拡散するなどしていただけましたら幸いです。本ページ掲載の方法やコード等はあくまでも最終更新日時点での私の環境において動作確認等を行ったものです。動作不良やカスタマイズの詳細な方法などをコメント欄よりいただきましても原則回答は致しませんのでご了承ください。WordPressのカスタマイズに関するご要望はココナラにてお受けしております。お問い合わせ方法など詳しくはこちらをご覧ください。最後までお読みいただきありがとうございました。Tenテーマがデフォルトになる前と結構な期間お世話になっています。興味に応じて、いろいろなサイト作っては壊しを繰り返しながら、独自テーマの作成やプラグインの作成などを行っています。Utility】プラグインの紹介などをしています。コメントをキャンセルメールアドレスが公開されることはありません。次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(PWCN)WordPressで実際に行ったカスタマイズの記録、発生したトラブルに対処した時のメモ、ブロックテーマのカスタマイズなどこのスライドメニューは以下のページの方法を使って実装しています。以下のページでタブ切り替え式のコンテンツの作り方を公開しました。Utility】プラグインをバージョン5.1へ更新しました。