# WordPress 外掛

> 在協會的 WordPress 網站上實現使用 Vimine 登入、會員卡和入會——無需編寫程式碼。

URL: https://developers.vimine.network/zh-hant/guides/wordpress/

**Vimine** WordPress 外掛在伺服器端為協會網站提供三項基本功能（瀏覽器中沒有權杖，也不依賴 JavaScript）：

- **使用 Vimine 登入**——會員用自己的帳戶登入（OAuth 2.1 加 PKCE；外掛是一個機密用戶端，在伺服器上用 secret 交換授權碼）；
- **會員卡**——已登入會員的會員卡，以帶 QR Code 的圖片顯示（`GET /v1/me/membership/card.svg`）；
- **入會**——協會的入會表單（嵌入）。

## 安裝

1. 在 WordPress 中開啟“外掛 → 安裝外掛”，搜尋“Vimine”，安裝並啟用：這個外掛已收錄在 [WordPress.org 外掛目錄](https://wordpress.org/plugins/vimine/)中。
2. 在“開發者”頁面中登記一個**機密**用戶端。重新導向 URI 請使用網站上“設定 → Vimine”中顯示的網址（通常為 `https://yoursite/vimine-callback/`）；選擇權限（至少 `profile:read membership:read`）。
3. 在“設定 → Vimine”中填入 client ID 和 secret（儲存後 secret 不會再顯示）。

:::note[更新]
WordPress 會像對待目錄中的其他外掛一樣自動提示新版本，也可以在“外掛”頁面啟用自動更新。透過本頁面以前提供的 zip 檔案安裝的網站也會以同樣的方式收到更新，不必重新安裝，設定會被保留。
:::

## 使用

| 短代碼 | 區塊 | 作用 |
|---|---|---|
| `[vimine_signin label="" return_to="" scope=""]` | Vimine — 登入 | “使用 Vimine 登入”按鈕；會員已登入時顯示“登出”（撤銷權杖，並同時登出 Vimine） |
| `[vimine_card]` | Vimine — 會員卡 | 已登入訪客的會員卡；未登入時提示登入 |
| `[vimine_enroll slug="…" height="900" lang=""]` | Vimine — 入會表單 | 協會的入會表單，使用網站的語言（如果 Vimine 支援該語言，否則使用義大利語；可用 `lang` 指定）；對已有 Vimine 帳戶的人，提供“前往 Vimine 繼續”，在新分頁中開啟頁面，一步即可入會（[為什麼用新分頁](https://developers.vimine.network/zh-hant/guides/embed-and-verify/#已有-vimine-帳戶的人)） |
| `[vimine_events slug="…" filter="upcoming" limit="10"]` | Vimine — 活動 | 協會的活動及剩餘名額（訪客看到公開活動，已登入會員看到全部活動）；每個活動都連結到其在 Vimine 上的頁面，在那裡報名（[指南](https://developers.vimine.network/zh-hant/guides/events/)） |

這些區塊位於編輯器的“小工具”分類下，選項與短代碼相同。

## 工作階段的運作方式

從託管的登入頁面返回後，外掛交換授權碼（使用 PKCE verifier 和 secret），把權杖儲存在 WordPress 的 *transient* 中，只把工作階段 id 交給瀏覽器（HttpOnly Cookie，SameSite=Lax）。存取權杖藉助重新整理權杖自動續期；“登出”會撤銷重新整理權杖，並經過 Vimine 的 `/oauth/logout`，因此那裡的工作階段也會結束。在該協會沒有會員卡的會員會看到相應的提示；未開通 API 的協會會收到 `api_disabled`。

## 自訂

樣式表非常精簡，使用 `--vimine-accent` 和 `--vimine-accent-contrast` 變數；每個元素都帶有 `vimine-…` 類別名稱。如需更豐富的功能（在主題中顯示會員資料、從管理系統辦理入會），請使用外掛的憑證直接呼叫 [API](https://developers.vimine.network/api/) 或[伺服器 SDK](https://developers.vimine.network/zh-hant/sdk/server/)。