STINGER PLUSでSNSボタンを記事トップに表示させる方法

こんにちは。鳥取もん(@tottorimon)です。

このブログは「STINGER PLUS」というテーマを利用させていただいております。
このテーマはデフォルトで良い感じのSNSボタンが付いているので、ソーシャルとの連携もバッチリです。

今回はこのSNSボタンを記事トップ(記事の上部)に表示させる方法について紹介します。

表示させるまでの流れ

SNSボタンを記事トップに表示させるまでの流れは下記のとおりです。

１．sns.phpをコピーして、新たにsns_kizi_top.phpというファイルを作成
２．sns_kizi_top.phpを記事トップに表示させるためのコードをsingle.phpに追加

※作業を行う前にはバックアップを取っておいてくださいね。

sns_kizi_top.phpについて

今回作成するsns_kizi_top.phpについてですが、記事上部と下部で同じSNSボタンを表示させたい場合は作成する必要がありません。
その場合、手順２を実施すれば記事トップにSNSボタンが表示されるようになります。

ただ、記事上部と下部で表示させるSNSボタンを変えたい、ボタンのデザインを変えたいという場合に備えて作成しておいた方が良いと思います。

１．sns.phpをコピーして、新たにsns_kizi_top.phpというファイルを作成

▼まずはsns.phpをFFFTPを使ってダウンロードします。
sns.phpは「…/wp-content/themes/stingerplus」にあります。

▼次にsns.phpをコピーし、sns_kizi_top.phpという名前のファイルを作成します。

▼最後にsns_kizi_top.phpをFFFTPを使ってアップロードします。
(推奨)子テーマを使っている方は「…/wp-content/themes/stingerplus-child」にアップロード。
子テーマを使っていない方は「…/wp-content/themes/stingerplus」にアップロード。

２．sns_kizi_top.phpを記事トップに表示させるためのコードをsingle.phpに追加

▼下記のコードをコピーする

<?php get_template_part( 'sns_kizi_top' ); //ソーシャルボタン読み込み ?>

▼single.phpで下記の部分を探し、コピーしたコードを追加する

＜追加前＞

<div class="mainbox">
   <?php the_content(); //本文 ?>

＜追加後＞

<div class="mainbox">
　　<?php get_template_part( 'sns_kizi_top' ); //ソーシャルボタン読み込み ?>
　　<?php the_content(); //本文 ?>

これで完了です！

まとめ

今回はSTINGER PLUSで記事上部にSNSボタンを追加する方法について紹介しました。

現状はただ表示させているだけなので、見た目や表示させるボタンの見直しが今後必要になるかもしれません。
(記事上部にボタンを置くとコンテンツが多少下に下がってしまうので)

※追記※
SNSボタンを１列にしてシンプルに表示させてみました。
STINGER PLUSで記事上のSNSボタンをシンプルに表示させる方法

カスタマイズ関連記事：STINGER PLUSでアドセンスを横並び(ダブルレクタングル)にする方法

最後まで読んでいただきありがとうございました。
良かったらシェアしていただけると嬉しいです。