Simplicityで記事タイトル下にソーシャルシェアボタンを表示する（WordPressテーマカスタマイズ）

WordPressテーマ「Simplicity」で表示されるソーシャルシェアボタンを記事タイトル下にも表示されるようにカスタマイズしました。プラグイン無しでできます。

スポンサーリンク

Simplicityのソーシャルシェアボタン

Simplicityはソーシャルシェアボタンが簡単に設置できるようになっています。

記事下部に

• Twitter
• Facebook
• Google+
• はてなブックマーク
• Pocket

のボタンが表示されていますね。これと同じものを記事タイトル下にも表示されるようにカスタマイズします。

子テーマでsingle.phpを修正する

Simplicityは頻繁にバージョンアップしているので、外観→テーマの編集→Simplicityで修正してしまうと、バージョンアップの時に元に戻ってしまいます。面倒なので子テーマを利用して、カスタマイズします。

1. Simplicity公式サイトから子テーマをダウンロードして、外観→テーマから追加。
2. FTPで「/wp-content/themes/simplicity/」の中にある「single.php」をダウンロード。
3. ダウンロードした「single.php」を「/wp-content/themes/simplicity-child/」の中にコピー。
4. 外観→テーマ編集→Simplicity childに「single.php」が追加されています。

→Simplicityの子テーマをインストールする方法

single.phpのコード編集

記事下部でソーシャルシェアボタンを表示している部分の下記コードをまるっと利用します。

<div id="sns-group">
<?php if (wp_is_mobile()) {//モバイルの時は単なるアイコン
  get_template_part('sns-buttons-s');
} else {//PCの時はバルーン付きボタン
  get_template_part('sns-buttons');
} ?>

<?php get_template_part('sns-pages');?>
</div>

上記の部分をコピーして、その中で、下から二行目のソーシャルフォローボタン表示部（下記のコード）を削除します。

<?php get_template_part('sns-pages');?>

ソーシャルシェアボタン表示のみになったコードが下記です。

<div id="sns-group">
<?php if (wp_is_mobile()) {//モバイルの時は単なるアイコン
  get_template_part('sns-buttons-s');
} else {//PCの時はバルーン付きボタン
  get_template_part('sns-buttons');
} ?>
</div>

このコードを、記事本文を表示している下記のコードの直上に貼り付けます。

<?php the_content(); //記事本文?>

「ファイルを更新」ボタンを押して、記事ページを見てみるとソーシャルシェアボタンが表示されています。

※最後の</div>を付け忘れると、レイアウトが壊れてサイドバーが記事の下方に移動してしまうので注意して下さい。

※ID属性は1ページ内で一意でなければならないルールに反します。対応したら記事を更新しますが、とりあえず動いているのでそのままにしています。

※修正をミスするとレイアウトが壊れたりページが真っ白になるので、必ずバックアップを取って、いつでも元のsingle.phpをFTPで上書きして戻せるようにして下さい。

記事タイトル下ソーシャルシェアボタンの効果は？

このサイトで比較測定したことがないので数字で表せませんが、個人的には、特にスマートフォンでブログを閲覧している時に「記事が長いな」とか「あとで読もう」と思い、とりあえずはてなブックマークしたりPocketに保存したりするケースがあるので、記事タイトル下にもあると便利かなと。

ソーシャルシェアの数が少ないうちは、少ないことをアピールしているようでちょっと恥ずかしいですけどね（笑）

photo credit: mkhmarketing via photopin cc