【Simplicity】シェアボタンの場所をアイキャッチ画像の下に移動してみた

Simplicity シェアボタン WordPress

ある日ふと「SNSシェアボタンってアイキャッチ下のほうが目に付きやすくね」と思いました。

正直デザイン的にこっちの方が好きという理由が大きいんですけどね(笑)

ほら、アイキャッチと記事本文のセパレーター的な存在になることで、デザインがまとまる感じしませんか?TOP画像のアイキャッチ感も強くなりますし。

 

Simplicityでシェアボタンを設置する場所と言ったら、「記事タイトル下」と「記事最後」の2カ所。

ですが、記事下のシェアボタンは広告よりも下に表示されるので気づいてもらえない気がするんですよね。最初の場所でシェアボタンの存在をアピールすることは結構重要かもしれません。

そんなわけで今回は、そのシェアボタンを好きな位置に移動させる方法を紹介しますよ。

スポンサーリンク

Simplicityアイキャッチ下にシェアボタンを移動

今回カスタマイズするPHPファイルは「entry-body.php」。

Simplicityでは、このファイルでbody(ページのコンテンツ部分)内のHTMLが組み立てられているんですよ。

当然シェアボタンに関するコードもこの中に組み込まれています。

つまりこのコードをファイル内の任意の位置に移動すれば、好きな位置にシェアボタンを表示させることが出来るわけですね。

カスタマイズの手順はこちら。

  1. シェアボタンを呼び出すコードを探し、コードを切り取る
  2. アイキャッチを呼び出すコードを探し、その下にシェアボタンのコードを張り付ける

順番に見ていきましょう。

※PHPファイルのカスタマイズなんで子テーマを使ってやりましょう

Simplicity子テーマ内のファイルが少ない?必要なファイルを追加するよ
Simplicityをカスタマイズするには、子テーマを使うのが安心安全ですね。それは親テーマがアップデートされても、子テーマは影響を受けないからです。 子テーマを実装するのはとても簡単に出来ます...

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ファイルをカスタマイズする際の注意点を1つ。

PHPファイルの中を見ると、ところどころ改行やスペースが入っていると思います。これはコードを見やすくするためのもで、基本的に意味を持ちません。

しかし全角のスペースは別。コンテンツ内に改行のような空白が入ってしまいます。

必ず半角スペースを使うようにしましょうね。コメントアウト(メモ書き)以外は基本全角NGです。