# ユーザープロフィールカードにカスタムボタンを追加する方法
**URL:** https://meta.discourse.org/t/how-to-add-a-custom-button-in-user-profile-card/300826
**Category:** Development
**Created:** [2024 年 3 月 25 日午後 1:13 UTC](https://meta.discourse.org/t/how-to-add-a-custom-button-in-user-profile-card/300826 "2024-03-25T13:13:46Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@junbetterway](https://meta.discourse.org/u/junbetterway)
#### Post date: [2024 年 3 月 25 日午後 1:13 UTC](https://meta.discourse.org/t/how-to-add-a-custom-button-in-user-profile-card/300826/1 "2024-03-25T13:13:46Z")
ユーザープロフィール概要とカードビューにカスタムボタンを追加するにはどうすればよいですか？
（例：リダイレクトなど）何かを行うCTAを追加したいのですが、データ保存は不要です…
プロフィールカードでも同様です：
以下の私の最初のコードはほぼ達成していますが、ヘッダーセクションにあり、ユーザープロフィール概要とカードでそれを行う方法が見つかりませんでした。
```plaintext
```
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2024 年 3 月 25 日午後 1:37 UTC](https://meta.discourse.org/t/how-to-add-a-custom-button-in-user-profile-card/300826/2 "2024-03-25T13:37:29Z")
こんにちは、ようこそ:wave:
この場所では、[プラグインのアウトレット](https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727)を使用する必要があります。具体的には`user-profile-controls`です。
例はこちらで確認できます。
> [@Chat button on profile page](https://meta.discourse.org/t/chat-button-on-profile-page/298816/7?u=arkshine):
>
> Here is a theme component for that. +1
---
### Author:  [@junbetterway](https://meta.discourse.org/u/junbetterway)
#### Post date: [2024 年 3 月 25 日午後 2:06 UTC](https://meta.discourse.org/t/how-to-add-a-custom-button-in-user-profile-card/300826/3 "2024-03-25T14:06:33Z")
@Arkshineありがとうございます。プラグインは初めてなので、ヘッダーボタンと同じようなものだと思っていました。
いずれにしても、`user-profile-controls` はプラグインですか？どのようにすれば実現できるか教えていただけますか？
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2024 年 3 月 25 日午後 3:03 UTC](https://meta.discourse.org/t/how-to-add-a-custom-button-in-user-profile-card/300826/4 "2024-03-25T15:03:46Z")
[Using Plugin Outlet Connectors from a Theme or Plugin](https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727) を参照することをお勧めします。質問への回答があります。
基本的に、プラグインのアウトレットは、特定の場所にコードを挿入する方法です。
[theme CLI](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950) を使用してテーマコンポーネントを作成し、私のテーマコンポーネントで行ったように[別のファイル](https://meta.discourse.org/t/split-up-theme-javascript-into-multiple-files/119369) を使用することをお勧めします（テスト/変更できるように、私のリポジトリをクローンすることを躊躇しないでください）。
>
ただし、`
>
> ```
この場合、次のように記述します。
```js
```
最初の行に注意してください。コネクタ名として `user-profile-controls` を使用し、`my_connector_name` は好きなものにすることができます。
---
### Author:  [@junbetterway](https://meta.discourse.org/u/junbetterway)
#### Post date: [2024 年 3 月 25 日午後 3:08 UTC](https://meta.discourse.org/t/how-to-add-a-custom-button-in-user-profile-card/300826/5 "2024-03-25T15:08:08Z")
素晴らしい！これで理解できました。スクリプトタグでテストできるので、コンポーネントを作成する前にまずテストできますね。どうもありがとうございます 🍻
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [2024 年 4 月 24 日午後 3:08 UTC](https://meta.discourse.org/t/how-to-add-a-custom-button-in-user-profile-card/300826/6 "2024-04-24T15:08:42Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.