WordPressテーマArkheにはToolkitというプラグインがあり、そのプラグインを適用するとシェアボタンが実装できるようになります。
ブルースカイのアイコンも入れたかったので、やってみましたが、PHPでやり方がわからなかったのでJSでむりやり追加いたしました。
なお、カスタマイザーには反映させる技量がなかったため、そこらへんは割愛しております。
臨時の方法と位置づけていただければと思います。
以下のサイト様を参考とさせていただきました。
Bon appetit! artworks - - Anythi...
【コードコピペフリー】Blueskyの共有ボタンが作れるようになりました【WordPress】 - Bon appetit! artwor...
Twitter(X)の移住先として注目を集めているSNS「Bluesky」が1.70にアップデートし、徐々に機
ありがとうございます！
<script>
document.addEventListener('DOMContentLoaded', function () {
// シェアボタンリストを取得
const shareBtnsList = document.querySelector('.c-shareBtns__list');
if (shareBtnsList) {
// BlueskyボタンのHTMLを生成
const blueskyBtn = document.createElement('li');
blueskyBtn.className = 'c-shareBtns__item -bluesky';
// 現在のURLとタイトルを取得してエンコード
const shareUrl = encodeURIComponent(window.location.href);
const shareTitle = encodeURIComponent(document.title);
// Blueskyシェア用のリンク
const blueskyShareUrl = `https://bsky.app/intent/compose?text=${shareUrl} ${shareTitle}`;
blueskyBtn.innerHTML = `
<a class="c-shareBtns__btn u-flex--c" href="${blueskyShareUrl}" target="_blank" rel="noopener noreferrer" title="Share on Bluesky">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="c-shareBtns__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/></svg>
</svg>
</a>
`;
// シェアボタンリストにBlueskyボタンを追加
shareBtnsList.appendChild(blueskyBtn);
}
});
</script>うーん、ほかになんかいい方法があるかもしれませんが、今日はこちらの方法で終わりにします。
