WordPressのソーシャルリンクブロックのTwitterアイコンをXに置き換えるカスタマイズについてのメモ

こんばんは、今日は、WordPressのソーシャルリンクブロックのアイコンのツイッターをXに置き換えるコードについてのメモを書きます。

まずは、jQueryのCDNをお使いになられているテーマに無いようでしたら、組み込んでおきます。

あとは、SVGの画像を置き換えます。fill=なんちゃらの部分が色になっています。

<script>
// jQueryが利用できることを確認し、コードを実行します
jQuery(document).ready(function($) {
    // wp-social-link-twitterクラス内のsvgタグを置き換えます
    $('.wp-social-link-twitter svg').replaceWith('<svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg"> <rect height="100%" width="100%"  fill="none"/> <path d="m714.163 519.284 446.727-519.284h-105.86l-387.893 450.887-309.809-450.887h-357.328l468.492 681.821-468.492 544.549h105.866l409.625-476.152 327.181 476.152h357.328l-485.863-707.086zm-144.998 168.544-47.468-67.894-377.686-540.2396h162.604l304.797 435.9906 47.468 67.894 396.2 566.721h-162.604l-323.311-462.446z" fill="#555"/> </svg>');
});
</script>

これでXアイコンに置換ができましたので、適当なクラス名をつけてCSSで大きさや位置などを整えてください。

クラス名は任意です。以下は例です。

.twitter-x {
  margin-bottom: 10px!important;
  width: 22px !important;
  height: 22px !important;
  margin-right: 8px!important;
}

よろしくお願いします。