Tiktokは@を必要とし、YoutubeはフォーラムのURLを使用します🤷♂️
TikTokは使っていません。実験に使えるユーザー名の例はありますか？
私のユーザー名はjagster64です。公開していないので、これは安全に使用できます。
修正済み - プルリクエストに追加しました
「いいね！」 2
Stravaサポートを追加するためのプルリクエストを提出しました。@weallwegotが私の少し乱雑なプルリクエストを許容してくれることを願っています :-s
「いいね！」 1
Hm、temporary-twitter-x が fab-twitter に戻されました。これは意図的なものですか、それとも間違いでしたか？いずれにしても、新しい X ロゴの代わりに古い Twitter の鳥が再び表示されています。
「いいね！」 1
ご指摘ありがとうございます。Twitterのブランド変更に合わせて更新するプルリクエストを作成しました。
「いいね！」 2
ありがとうございます！しかし残念ながら、fa-x-twitter は Fontawesome 6 であり、Discourse ではまだ動作しないため、temporary-twitter-x に変更する必要があります。
「いいね！」 2
動作するはずだと思います
「いいね！」 3
正しいXアイコンに更新しました…ブランディングおよびマーケティングの専門家全員が理由を説明できないのに、なぜか身震いしたことを知っています
「いいね！」 3
テストを行いました。FA6アイコンが機能することを確認しました。プルリクエストを更新しました。
「いいね！」 2
はい、興味深いですね。Fontawesome 6 は Discourse で動作するようです！
正しいアイコンがあれば、それも確認できます。素晴らしい！どうもありがとうございます！
「いいね！」 2
FontAwesomeのアイコンの代わりにカスタムSVGを追加することは可能ですか。例えば、Custom Header Links (icons) でできるようなことですか？
このような感じですか？
「公開プロフィールに表示」の選択を解除すると、公開プロフィールからユーザーフィールドが削除される（予想通り）ことに気づきましたが、このテーマコンポーネントによって提供されるアイコンの動作はより不安定です。
- 管理者アカウントでは、アイコンが引き続き表示されます。
- テストアカウント（信頼レベル1）では、アイコンも消えます。
つまり、ほとんどのログインユーザーとすべての匿名ユーザーにとって、カスタムユーザーフィールドのアイコンは、対応するラベルとテキスト値が表示されている場合にのみ表示されます。一方を非表示にすると、もう一方も非表示になります。
奇妙ですが、さまざまなブラウザやシークレットウィンドウで試しましたが、これを確実に再現できます。他にこの問題を再現できる方はいらっしゃいますか？
これは、管理者としては見落としやすいことの1つです。ユーザーが問題を報告した後にのみ、この動作に気づきました。
参考までに、これはマストドンのアイコンでテストしています。
ユーザーのソーシャルメディアプロファイルにリンクが正しく移動しないという問題が発生しています。現在いるページの URL にカスタムユーザーフィールドが追加されるだけのようです。
これまで、Steam と Discord でこれを確認しています。
links-settings.js の github リポジトリを見ると、Steam と Discord の base: や baseregex: の行がありません…Bluesky と Twitter（すみません、すべてを扱うアプリの X）は正常に動作しており、これら両方の行があるので、これが問題なのではないでしょうか？
{
name: "Discord",
icon: "fab-discord",
link: {
value: settings.discord_custom_field_name,
},
},
{
name: "Steam",
icon: "fab-steam",
link: {
value: settings.steam_custom_field_name,
},
},
Bluesky の場合：
{
name: "Bluesky",
icon: "fab-bluesky",
link: {
value: settings.bluesky_custom_field_name,
base: "https://bsky.app/profile/",
baseregex: "^http(s)?://(www.)?bsky.app/profile/",
},
},
Twitter の場合：
{
name: "X",
icon: "fab-twitter",
link: {
value: settings.twitter_custom_field_name,
base: "https://twitter.com/",
baseregex: "^http(s)?://(www.)?twitter.com/",
},
},
他のエントリをざっと見たところ、これらにも base: や baseregex: の行がないようですが、テストするためのライブの例がありません。
- mastodon
- discord
- steam
- bandcamp
（追記）プルリクエストを作成しました。
09096b8: email、steam、linkedin の base url を追加
0ec40a0: discord、bandcamp、mastodon を追加し、readme を更新しました。bandcamp と mastodon はユーザーによって base url が異なるため（一貫性がないため）、また Discord の場合はユーザーがユーザー名ではなくユーザー ID を入力するため、readme で説明が必要だと感じたため、これは別々に行いました。
作成したカスタムユーザーフィールドが使用したいものと一致しました。アイコンは数個しか表示されませんでしたが、プロフィールカードの下部にもソーシャル名とURLが表示されました。これを避けて、すべてのアイコンを表示させるにはどうすればよいですか？Facebookアイコンを fab-facebook-f に更新し、TwitterをXに名前変更してこのアイコン fab-x-twitter を使用し…、Snapchatをこのアイコン fab-snapchat で追加する必要があります。
TwitterをXに変更する（URLとアイコン）必要があります…そして、テキストとしても表示される理由がわかりません。こちらをご覧ください。
とても参考になりました、ありがとうございます。
Ok、TwitterをX（アイコンとURLの両方）に更新したい場合は、次の手順に従ってください。
-
管理 > 外観 > テーマとコンポーネント > コンポーネント > インストール > 新規作成 に移動します。
-
CSSタブに次のコードを追加します（「XXXXX」を@ユーザー名ハンドルに置き換えてください）。
/* 1. 元のTwitter SVGアイコンを非表示にする */
a[href="https://twitter.com/XXXXX"] svg.d-icon-fab-twitter,
a[href="https://x.com/XXXXX"] svg.d-icon-fab-twitter {
display: none;
}
/* 2. 疑似要素とCSSマスクを使用してXアイコンを挿入する */
a[href="https://twitter.com/XXXXX"]::before,
a[href="https://x.com/XXXXX"]::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,\u003csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"\u003e\u003cpath d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/\u003e\u003c/svg\u003e') no-repeat center;
mask: url('data:image/svg+xml;utf8,\u003csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"\u003e\u003cpath d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/\u003e\u003c/svg\u003e') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
}
- < head > タブに次のコードを追加します（「XXXXX」を@ユーザー名ハンドルに置き換えてください）。
<script>
// リンクを見つけて変更する関数を作成
function updateTwitterLinks() {
const oldLinks = document.querySelectorAll('a[href="https://twitter.com/XXXXX"]');
oldLinks.forEach(link => {
link.href = 'https://x.com/XXXXX';
});
}
// 1. 念のため、すぐに実行してみる
updateTwitterLinks();
// 2. 動的に読み込まれるコンテンツ（Discourseの投稿など）の「ウォッチャー」を設定する
const observer = new MutationObserver(function(mutations) {
updateTwitterLinks();
});
// ページ本体全体を監視して、新しく追加された要素を検出する
observer.observe(document.body, { childList: true, subtree: true });
</script>
完了です。