[WordPress] SNSアイコンの変更方法

マルチサイト構成のWordPressにおけるSNS共有ボタンアイコン変更方法を解説します。

Contents

1 TwitterがXに変わったのでSNSボタンを変更する
2 テーマのカスタマイズでSNSボタンを変更する
- 2.1 変更するファイル
- 2.2 注意！Wordpress上で変更するとファイルが空に・・・！ＳＳＨ接続で

TwitterがXに変わったのでSNSボタンを変更する

当ブログでは記事の末尾にSNS共有ボタンを配置しています。

2023年7月にtwitterがXに名称変更、投稿もツイート→ポストに変更となりました。
これにあわせて以下のようにアイコンを変更します。

変更するブログ環境は以下の通り。

マルチサイト構成…WordPressのマルチサイト構成（MultiSite）は、1つのWordPressインストールで複数のサイトを運営できる機能です。これにより、1つのWordPressダッシュボードから複数のウェブサイトを管理できます。
テーマは「Stork」を使用。こちらのテーマをカスタマイズしてSNS共有アイコンを表示しています。
サーバはAWSの「Lightsail」で運用

それでは設定を変えていきましょう

テーマのカスタマイズでSNSボタンを変更する

変更するファイル

テーマのカスタマイズをしていきますが、
マルチサイトの場合、親管理画面からでないとカスタマイズ画面が表示されません。

参加サイト→サイトネットワーク管理→ダッシュボード、と辿り、、、

テーマ→テーマファイルエディター

parts_sns.php を変更していきます。

<li class=”twitter”>～</li>を以下のように書き換えます。svgタグの部分でアイコンを指定しています。

<li class="twitter">
<a target="blank" href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo urlencode( 
the_title( "" , "" , 0 ) ) ?><?php if(get_the_author_meta('twitter')) : ?><?php echo $tw_user ;?><?php endif 
;?>&tw_p=tweetbutton" >

<svg viewBox="0 0 24 24" width="15" height="15"> <g> <path d="M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 
13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 
7.91 11.078h-3.246zm0 0" fill="#FFF" />
</g>
</svg>

<span class="text">POST</span> <span class="count"><?php 
if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); 
?></span> </a>
</li>