ソーシャルボタン賢威7
僕がWordPressのテンプレートの中で、最も愛用している賢威7ですが、デフォルトのソーシャルボタンだけはオシャレにならないか?といつも悩んでいました。

そこで今回はコピペで簡単!賢威7のソーシャルボタンをオシャレにカスタマイズする方法についてご紹介していきます!

ちなみに完成図はこんな感じ↓↓

賢威7ソーシャルボタン

ソーシャルボタンをオシャレにカスタマイズする理由


僕がソーシャルボタンを変えたいと思った理由は2つ。

  • デザインがダサい
  • 表示速度アップ


賢威7のデフォルトのソーシャルボタンはこんなかんじ↓↓

ソーシャルボタンオシャレ
なんかあまりオシャレじゃないし、サイズも小さくて押してほしいのか押してほしくないのか分かりません(笑)

また、このデフォルトのソーシャルボタンは表示速度が遅いんです。

表示速度が遅いというのは、ページを開いてからソーシャルボタンが表示されるまでに時間がかかるのですが、これは遅くてイライラするだけではなく、SEOにも悪影響を及ぼすため今回ご紹介するボタンに変更をした方がいいですよ。

賢威7のソーシャルボタンをオシャレにカスタマイズする方法


まず賢威のデフォルトではソーシャルボタンが非表示設定になっているので、一度確認をしましょう。

メニューから『賢威の設定→SNSの設定』を選択します。

ソーシャルボタン賢威7
そして、ソーシャルボタンの表示で『投稿ページ』のチェックを外しましょう。

ソーシャルボタン賢威7
これで、各記事にソーシャルボタンが表示されるようになります。

ソーシャルボタンのカスタマイズ方法


まずWordPressのダッシュボード画面のメニューで『外観→テーマ編集』を選択します。

賢威7ソーシャルボタン

【1】social-button2.phpに書いてある文字消す


テーマ編集に移動したら、『social-button2.php』をクリックします。

ソーシャルボタン賢威7
すると、たくさん文字が書いてありますがこれを全部カットしてメモ帳かなにかに保管しておきましょう。

全部消してもいいのですが、何かあった時にサイトを元に戻すためにバックアップとしてとっておいてくださいね。

ソーシャルボタン賢威7
↓↓↓
賢威7ソーシャルボタン

【2】コードをコピペする


次に以下のコードをコピーして、social-button2.phpに貼り付けましょう。



注意したいのが「$twitter_account = ‘yuukivp(あなたのアカウント)’;」の部分には、あなたのTwitterアカウント(拡散用でよい)を差し替えてしておきましょう。

サンプルのコードには、僕のTwitterアカウントが表記してあります。


上記をコピーして、

ソーシャルボタン賢威7
こんな風に貼り付けます。

すると、ブログの記事を確認すると・・・。

ソーシャルメディア賢威7
こんなかんじで、縦並びの箇条書きになっていたらOKです。

【3】Simple Custom CSSにコードを追記する


プラグインのSimple Custom CSSに以下のコードを貼り付けます。

プラグインSimple Custom CSSをインストールしていない方はこちら


コピーしたら、メニューから『外観→カスタムCSS』を選択します。

ソーシャルボタン賢威7
賢威7ソーシャルボタン
貼り付けて『カスタムCSSの更新』をクリックしたら、完了です。

ソーシャルボタンにシェアした回数をつけるには?

ソーシャルボタン賢威7
ソーシャルボタンは記事をシェアするために設置されているボタンですが、デフォルトではシェアした回数の表示がされません。

まあ、しなくていいならば大丈夫ではあるのですが、回数を表示したい場合はプラグイン『SNS Count Cache』を使用します。

ダッシュボード画面から『プラグイン→新規追加』で検索窓に「SNS Count Cache」と検索しましょう。

ソーシャルボタン賢威7
今すぐインストールをクリックして、『有効化』をしましょう。

このプラグインを有効化するだけでシェアの回数が表示されるようになりますよ!

あとがき


今回は賢威7のソーシャルボタンをオシャレにカスタマイズする方法についてご紹介しました。

個人的な感想ですが、デフォルトのボタンよりも押してもらいやすくなると思いますし、表示速度も上がってストレスがなくなりました。

SEO対策としても役立つので、是非導入をオススメしますよ!