AstroでWordPress.orgのプラグイン情報を取得・表示する

個人ポートフォリオサイトをAstroで作り直し中です。

公開しているWordPressプラグインの情報を取得・表示したかったので、やり方をまとめました。

プラグイン情報をAPIから取得する方法

api.wordpress.org/plugins/info/1.2/?action=query_pluginsでWordPressプラグイン情報を検索・取得できます。

そこで検索用の関数を用意しました。

  export const searchWordPressPlugins = async (query) => {
    try {
      const res = await fetch(
        `https://api.wordpress.org/plugins/info/1.2/?action=query_plugins&${query}`,
      )
      const result = await res.json()
      return result
    } catch (e) {
      console.log(e)
      throw e
    }
  }
  

クエリを引数で渡すと、プラグイン情報を検索できます。

await searchWordPressPlugins('request[author]=hideokamoto')

Astroでデータ取得と表示を行う

検索関数をコンポーネントスクリプトに追加しましょう。

---
const plugins = await searchWordPressPlugins('request[author]=hideokamoto')
---

あとは取得したデータを元に、テンプレートを記述するだけです。

<ul>
    {plugins.map(plugin => (
        <li>
            <a href={`https://wordpress.org/plugins/${plugin.slug}`}>{plugin.name}</a>
            <span>{plugin.short_description}</span>    
        </li>
    ))}
</ul>

これで表示されました。