ワードプレスのテーマSimplicity2のTwitterシェアボタンをXのシェアボタンに変える方法について解説いたします
Simplicity2 のシェアボタン
Simplicity2 はわいひら氏の開発した非常に軽くて優れたテーマで現在でも非常に多くのサイトで利用されています。(独自テーマもSimplicity2を改造したものである例が多々あります)
ただ、現在ではアップデート等のサポートが終わってしまい、現在はCocoonというより高機能なテーマにサポートが移行しているようです。
Simplicity2はサポートが終わっていますので、シャアボタンがXではなく、現在もTwitterボタンのままになっています。
クライアント様からのさまざまなテーマのカスタマイズの依頼から、こちらをＸのシェアボタンに変えるというのがございましたので、簡単に変える方法を公開いたします。
Simplicity2 のシェアボタンをXに ①アイコンのアップロード
まず下記のXのアイコンをZIPを解凍いただき、wp-content\themes\simplicity2-child (子テーマの場合) もしくはwp-content\themes\simplicity2 に画像をアップロードします。
x-social-media-white-icon
次にテーマフォルダのstyle.cssに下記のCSSコードをコピペして最下部に追加します。
.sns-group-viral .icon-twitter::after {
content: 'X(Twitter)';
}
ul.snsbs a.twitter-btn-icon-link {
background-color: #222;
}
.icon-twitter::before {
content: url('./x-social-media-white-icon.png');
display: inline-block;
}
このCSSコードは、元々あるsimplicity2のTwitterのスタイルを上書きして、背景を黒にしたり、先ほどアップロードいただいたアイコン画像に置き換える為のスタイル(デザイン指定)です。
↓ 置き換え結果
※シェアボタン表示タイプが「大きめボタン」の時のみ適応されます
※上記コードではSimplicity2のシェアボタンの仕組みは書き換えていませんのでご注意ください。Simplicity2のシェアボタンはTwitter.comに向けてシェアしますが、現状xにちゃんとリダイレクトされるようですので問題なくシェアできます。ただ、今後はX.comに向けてシェアするように仕組み自体も変更する必要が出てくるかもしれません。
ご参考になりましたら幸いです。
WordPress 他社製のテーマでも、小さなカスタマイズでもご依頼いただけます。ワードプレスのテーマのカスタマイズのご依頼・ご相談はWPドクターまでお気軽にお送りください
