AFFINGER5でSNSボタンのテキストを変更する方法|中級者向けカスタマイズ
AFFINGER5でSNSボタンのテキストを変更する方法|中級者向けカスタマイズ
AFFINGER5では、SNSボタンの設定をすると下記のようなボタンが表示されます。

AFFINGER5のSNSボタン

AFFINGER5のSNSボタン

SNSボタンの詳しい設定方法については、下記の記事も参考にしてみてください。

今回は、このSNSボタンに表示されているテキストを変更する方法を解説したいと思います。

カスタマイズの前に

SNSボタンの設定

WordPress管理画面左メニューから『AFFINGER5 管理SNS』という順にクリックします。

WordPress管理画面左メニューから『AFFINGER5 管理→SNS』という順にクリック

WordPress管理画面左メニューから『AFFINGER5 管理→SNS』という順にクリック

投稿ページの上にSNSボタンを表示する』にチェックを入れましょう。

『投稿ページの上にSNSボタンを表示する』にチェックを入れる

『投稿ページの上にSNSボタンを表示する』にチェックを入れる

 『SNSボタンをシンプルにする』にチェックを入れている場合は、チェックを外しておきましょう。

ページ最下部の『save』ボタンをクリックし、設定を反映させます。

『save』ボタンをクリック

『save』ボタンをクリック

AFFINGER5をカスタマイズするときの注意点

AFFINGER5をカスタマイズする時は、必ず子テーマを使いましょう。

親テーマをカスタマイズしても、テーマをバージョンアップすると、カスタマイズした内容が全て消えてしまいます。

しかし、子テーマを使えば、テーマをバージョンアップしてもカスタマイズした内容がそのまま保持されるので、安心してサイトをカスタマイズすることができます。

SNSボタンのテキストを変更する方法

親テーマの「sns.php」を子テーマにコピーし、ファイルを開きましょう。

それぞれのボタンの変更箇所を解説します。

Twitter ボタン

44行目付近の下記のコードを探します。

上記の「Twitter」の部分を任意のテキストに変更しましょう。

Facebook ボタン

51行目付近の下記のコードを探します。

上記の「Share」の部分を任意のテキストに変更しましょう。

Pocket ボタン

59行目付近の下記のコードを探します。

上記の「Pocket」の部分を任意のテキストに変更しましょう。

はてブ ボタン

65行目付近の下記のコードを探します。

上記の「Hatena」の部分を任意のテキストに変更しましょう。

LINE ボタン

75行目付近の下記のコードを探します。

上記の「LINE」の部分を任意のテキストに変更しましょう。

コピー ボタン

82行目付近の下記のコードを探します。

上記の「コピーする」の部分を任意のテキストに変更しましょう。

テキストを変更したら、実際にどのように表示されるか確認しておきましょう。

 テキストは長すぎるとスマホで見たときに改行されて見栄えが悪くなるので、6文字ぐらいで設定するのをおすすめします。
テキストを変更したSNSボタン

テキストを変更したSNSボタン

トップページのSNSボタンのテキストを変更する方法

上記と同じ方法で、トップページのSNSボタンのテキストも変更することができます。

編集するファイルは「sns-top.php」です。

親テーマの「sns-top.php」を子テーマにコピーし、ファイルを編集しましょう。

テキストを変更したトップページのSNSボタン

テキストを変更したトップページのSNSボタン

まとめ

今回は、AFFINGER5でSNSボタンのテキストを変更する方法を解説しました。

特に「コピー」ボタンは、「コピーする」だと何をコピーするのかよく分からないので、「URLコピー」などユーザーが分かりやすい文言に変更するのをおすすめします。

ぜひ試してみてください。

スポンサーリンク

スポンサーリンク

アンケート実施中

テーマニアの内容をさらに充実させるため
アンケートを実施中です。

ご協力お願いいたします。

おすすめの記事