テンプレート賢威7.1のSNSボタンのカスタマイズについての話です。デフォルトのソーシャルボタンが小さいので大きくしてみました。

はじめに

こちらの記事ではオープンソースのブログソフトウェアのWordPressとSEOテンプレートの賢威を使用していることを前提に解説をしていますのでご注意ください。



ソースコードを書き換える前に必ずバックアップをとってください。

賢威7.1はSNSボタンの表示・非表示の切り替えが簡単

賢威7.1ではSNSボタンの表示切替はダッシュボードの中の賢威の設定から変更します。チェックボックスだけで切り替え可能です。

賢威7.1の標準のSNSボタンは小さくて押しにくい

こちらが標準の賢威7.0のSNSボタンです。小さくて目立たないため下のようなボタンに表示を変えます。

賢威7.1のSNSボタン変更手続き

social-button2.phpの書き換え

まずダッシュボード>外観>テーマの編集の中にある「social-button2.php」の中のコードをすべて削除してください。

次に以下のコードを貼り付けます。【Twitterのアカウント名】のところには自分の「ユーザー名@○○」の「○○」の部分を記入してください(例:keni@abc124の場合は「abc124」です)。【】も消してください。

base.cssへ追加

ダッシュボード>外観>テーマの編集の中にある「base.css」の最下部(ここへ貼り付けと書いてある場所)にコードをつけ足します。

貼り付けるのは以下のコードです。

ボタンの大きさや色を調節したいときはここで調節してください。

プラグイン「sns count cache」でSNSの数値を表示する

「sns count cache」というプラグインを導入すると上の画像のようにシェアされた数が表示されるようになります。お好みで入れてみてください。

導入方法はダッシュボード>プラグイン>新規追加「sns count cache」を検索してインストール・有効化するだけです。

賢威7.1の記事上部のSNSボタンを削除する方法

賢威の標準設定では記事のSNSボタンを表示設定にすると記事上部と下部に自動的に表示されてしまいます。記事上部のSNSボタンはあまり押されることがないため削除しました。

single.phpの一部を削除

ダッシュボード>外観>テーマの編集の中にある「single.php」の一部を削除します。

最後まで記事を読んでいただきありがとうございます。この記事が役に立ったなと思ったらSNSでシェアしていただけるとうれしいです。