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

ブログのソーシャルボタンっていろんな種類があると思うんですが、

賢威7のソーシャルボタンって、ちょっと地味なんですよね。。。

こんな感じで、実は表示速度も遅めなんです↓

賢威7ソーシャルボタン

 

もう少し目立たせたいなと思ったのと、表示が遅いことは読者さんにもストレスを与えてしまいますし

SEO的にもよろしくないのでこんなふうに、おしゃれカスタマイズしてみました(^-^)

賢威7ソーシャルボタン

 

賢威の設定を確認しよう

まずはソーシャルボタンが表示される設定になっているかを確認してみましょう。

 

①WordPressダッシュボードの『賢威の設定』→【SNSの設定】をクリック

賢威7ソーシャルボタン

矢印

②『投稿ページ』の【表示しない】のチェックを外す

賢威ソーシャルボタンの設定

もともとチェックが入っていなければそのままでOKです

矢印

③(変更した場合は)【変更を保存】をクリック

賢威ソーシャルボタンの設定

 

social-button2・phpの記述を変更する

【賢威7】で表示されるソーシャルボタンの記述をいったん削除します。

テーマを編集していきますので、事前に必ずバックアップを取っておいてくださいね!

WordPressのバックアップをエックスサーバーで簡単に取る方法

 

テーマの編集についてはこちらの記事も参考になさってください。

テーマの編集はFileZilla(FTPソフト)でを使って安全に!

 

 

①ダッシュボードの『外観』から【テーマの編集】をクリック

賢威7ソーシャルボタンの設定

矢印

【social-button2.php】をクリックして開きます

賢威7ソーシャルボタンの設定

矢印

③現在の記述をメモ帳などにコピーを取ってから、すべて削除します

賢威7ソーシャルボタンの設定

矢印

④全部消しました

賢威7ソーシャルボタン

矢印

⑤以下のコードをコピーして④に貼り付け

 

矢印

⑥11行目の記述をあなたのtwitterアカウントに書き換えます

賢威7ソーシャルボタンの設定

※11行目【$twitter_account = ‘あなたのアカウント‘;】

あなたのアカウント』の部分を、『@』を除いたあなたのtwitterアカウントに書き換えてください。

私の場合は『koemi2525』となります。

矢印

【ファイルを更新】をクリック

賢威7ソーシャルボタンの設定

 

以上で【social-button2.php】の記述の変更は完了です♪

プレビューで、今の表示がどうなっているかを確認してみると・・・

ボタンのデザインではなくなっているので、次はこれを変更していきましょう。

 

base.cssの記述を変更する

①ダッシュボードの『外観』から【テーマの編集】をクリック

賢威7ソーシャルボタンの設定

矢印

【base.css】をクリックして開く

賢威7ソーシャルボタンの設定

矢印

③以下のコードをすべてコピー

矢印

④コピーしたコードを一番下に貼り付けます

賢威7ソーシャルボタンの設定

矢印

【ファイルを更新】をクリック

賢威7ソーシャルボタンの設定

 

 

プレビューを見てみると。。。

ちゃんとボタンのデザインになりましたね♪♪

賢威7ソーシャルボタンの設定

 

 

ボタンにアイコンを表示させるともっとオシャレに♪

このままでもキレイな表示になっているのですが、各SNSのアイコンも表示させるとさらにオシャレになるのでやってみましょう!

こんな感じに↓なります。

賢威7ソーシャルボタン変更

 

①ダッシュボードの『賢威の設定』から【賢威の設定】をクリック

賢威7ソーシャルボタン変更

矢印

②以下のコードをコピーして。。。

矢印

③【</head>直前に挿入するコード欄】に貼り付け

賢威7ソーシャルボタン変更

※アナリティクス、サーチコンソールのタグが入っていると場合は、一番下に貼り付ければOKです。

矢印

④【変更を保存】をクリック

賢威7ソーシャルボタン変更

 

プレビューを見てみましょう・・・

アイコンが表示されて、一層オシャレになりました♪

 

シェア回数を表示させるには?

ここまでのカスタマイズでは、シェアされた回数の表示はされません

私は特に必要ないと思っているのでこのまま使用していますが、もし回数も表示させたい場合はプラグインを導入しましょう。

 

SNS Count Cache】というプラグインで対応可能です。

SNS Count Cache

このプラグインは、インストールして有効化するだけで特に設定は必要ありません。

 

記事上のソーシャルボタンを削除する

賢威7のデフォルトの設定では、記事の上下にソーシャルボタンが表示されるようになっています。

でも、今回のカスタマイズでボタンのサイズも大きくなったので、【記事上】にボタンが表示されるとパッと見がゴチャついて見えてしまうんですよね(^^;)

私の場合は記事の最初にアイキャッチ画像を表示させているので、なんだかバランスもおかしいのです。。。

 

そもそも、記事を読んでいただいて、『その内容がよかったらシェアしてくださいね』ってことで設置されているのがソーシャルボタンなので、記事上にボタンがあっても意味がないかなと・・・

【記事上のソーシャルボタンを消す】ことにしました。

 

では、その手順もご紹介していきますね!

 

①ダッシュボードの『外観』から【テーマの編集】をクリック

矢印

【個別投稿(single.php)】をクリックして開く

記事上のSNSボタンを消す

矢印

上から30行目前後にある、以下の記述を削除します

【<?php if (the_keni(‘social_post_view’) == “y”) get_template_part(‘social-button2’); ?>】

記事上のSNSボタンを消す

【Ctrl】+【F】で、検索窓が出るので、『social』などど入力すると探しやすくなると思います。

※注意※

今回削除するのは【記事の上】に表示させるソーシャルボタンのコードです。

下の方にも同じ記述があって、そちらは【記事の下】に表示させるためのコードなので、必ず上のコードを削除してください。

矢印

【ファイルを更新】をクリック

記事上のSNSボタンを消す

以上で【記事の上】のソーシャルボタンは表示されなくなりました(^-^)

 

まとめ

賢威7のソーシャルボタンのカスタマイズについてご紹介しました。

【social-button2.php】と【base.css】の編集は必須ですが、

  • アイコンの表示
  • シェア回数の表示
  • 記事上のボタンの削除

の3つは、お好みで取り入れてみてください(^-^)

 

実際に表示のもたつきもなくなりましたし、ボタンが目立つようになって押してもらいやすくなりました。

デザインは自己満足な部分もありますが、『見やすい』『表示速度が速い』は、読者さんに見ていただくためには大切なことなので、ぜひ取り入れてみてください。