ある日ふと「SNSシェアボタンってアイキャッチ下のほうが目に付きやすくね」と思いました。
正直デザイン的にこっちの方が好きという理由が大きいんですけどね（笑）
ほら、アイキャッチと記事本文のセパレーター的な存在になることで、デザインがまとまる感じしませんか？TOP画像のアイキャッチ感も強くなりますし。
Simplicityでシェアボタンを設置する場所と言ったら、「記事タイトル下」と「記事最後」の2カ所。
ですが、記事下のシェアボタンは広告よりも下に表示されるので気づいてもらえない気がするんですよね。最初の場所でシェアボタンの存在をアピールすることは結構重要かもしれません。
そんなわけで今回は、そのシェアボタンを好きな位置に移動させる方法を紹介しますよ。
Simplicityアイキャッチ下にシェアボタンを移動
今回カスタマイズするPHPファイルは「entry-body.php」。
Simplicityでは、このファイルでbody（ページのコンテンツ部分）内のHTMLが組み立てられているんですよ。
当然シェアボタンに関するコードもこの中に組み込まれています。
つまりこのコードをファイル内の任意の位置に移動すれば、好きな位置にシェアボタンを表示させることが出来るわけですね。
カスタマイズの手順はこちら。
- シェアボタンを呼び出すコードを探し、コードを切り取る
- アイキャッチを呼び出すコードを探し、その下にシェアボタンのコードを張り付ける
順番に見ていきましょう。
※PHPファイルのカスタマイズなんで子テーマを使ってやりましょう
1、シェアボタンを呼び出すコードの場所は？
「entry-body.php」45行目あたりのコードに注目。
分かりやすく「タイトル下の小さなシェアボタン」というメモ書きがしてあるはずです。
<?php if ( is_single() ) get_template_part('sns-buttons-top');//タイトル下の小さなシェアボタン?>
正にこれが通常タイトル下に表示されているシェアボタンのコードを呼び出すコードなんです。
あとはこのコードをアイキャッチ画像を呼び出すコードの下に移動すれば完了。
2、アイキャッチ画像を呼び出すコードの場所は？
先ほどと同様に、「アイキャッチ挿入機能」というメモ書き付きのコードを探してください。
たぶん真ん中あたりにあるはず。
<?php get_template_part('entry-eye-catch');//アイキャッチ挿入機能?>
これがSimplicityのアイキャッチ画像を呼び出すコードです。
この下に先ほどのコードを張り付けちゃってください。こんな感じに。
<?php get_template_part('entry-eye-catch');//アイキャッチ挿入機能?>
<?php if ( is_single() ) get_template_part('sns-buttons-top');//タイトル下の小さなシェアボタン?>
できたでしょうか？
合わせて読みたい
最後に
最後にPHPファイルをカスタマイズする際の注意点を１つ。
PHPファイルの中を見ると、ところどころ改行やスペースが入っていると思います。これはコードを見やすくするためのもで、基本的に意味を持ちません。
しかし全角のスペースは別。コンテンツ内に改行のような空白が入ってしまいます。
必ず半角スペースを使うようにしましょうね。コメントアウト（メモ書き）以外は基本全角NGです。
