[Simplicity]「トップへ戻るボタン」の変更


WordPressで、テーマ『Simplicity』を使っている人は、初期設定のままで、あまりイジっていない「トップへ戻るボタン」。

ちなみにこんなの↓↓↓です。

topmark200

今回は、この「トップへ戻るボタン」の変更をしたいと思います。

これが、どんなのに変わるかというと…

お手数ですが、下にスクロールしてみてください。

右下に、現れます。

さらに、SEO対策も施しますよ♪

レッツ、カスタマイズ!

注意点
親テーマをいじるので、テーマを更新するたびに、変更が必要です。

Simplicityの「トップへ戻るボタン」の変更&SEO対策

PHPファイルにコピペするだけで終わりますので、気楽に読んでくださいね。

スポンサーリンク

「トップへ戻るボタン」を表示する

トップへ戻るボタンを非表示にしている方は、表示状態にしてください。

ちなみに表示・非表示の設定は、次の通り。
※初期設定では、表示状態になっています。

①WordPress管理画面の左メニューから、「外観」>「カスタマイズ」と進みます。

②カスタマイズ画面の左メニューから、「レイアウト(全体・リスト)」内の『トップへ戻るボタンの表示』の項目にチェックを入れる。

「トップへ戻るボタン」の変更方法

「トップへ戻るボタン」は、親テーマの「button-go-to-top.php」というPHPファイルで変更することができます。

通常であれば、この「button-go-to-top.php」をイジればいいのですが、僕は直接「トップへ戻るボタン」が書き込まれている、親テーマの「footer.php」をイジります。

理由は次の通りです。

  • 変更前の方がいいと思ったら、簡単に元に戻せる
  • PHPファイルの呼び出しを1つ減らせるので、ページの表示が少しだけ速くなる

それでは、footer.phpを見てみましょう。

footer-botton

このファイルの下の方に、次のコードが書き込まれています。

<?php get_template_part('button-go-to-top'); //トップへ戻るボタンテンプレート?>

これは、「button-go-to-top.php」というファイルを呼び出すというコードです。

この呼び出しコードは、コメントアウトさせておきます。
※コメントアウトとは、書き込んだコードを一時的にコメント化し、非表示にすることです。
読み込みたくないコードを『コメントアウト・タグ(赤字)』で「<?php /*  コード  */ ?>」のように挟みます。

具体的には下のようにします。

 <?php /*get_template_part('button-go-to-top'); //トップへ戻るボタンテンプレート*/ ?>

もし元に戻したい場合は、コメントアウト・タグを消せば、簡単に元に戻ります。


そして、このコードの下に、新たに「トップへ戻るボタン」のコード↓↓を記入します。





<div id="page-top">
 <a id="move-page-top" style="line-height:150%">
  <strong><?php echo get_the_title(); ?></strong><br/>
ページ先頭へ<i class="fa fa-chevron-circle-up fa-lg fa-fw"></i>
 </a>
</div>





コード等の書き込みの完成が、下↓↓↓の画像です。
footer-bottom2
※画像をクリックすると少しだけ大きくなります。


「トップへ戻るボタン」に、SEO対策を兼ねて、以下の追加をしています。

  • ページタイトル」を追加し、さらに強調タグ(<strong>)で囲む
  • ページ先頭へ」の文言

変更後の状態は、当Webサイトの右→を見てください。

こんな感じになります。

スポンサーリンク

最後に

この変更には弱点がありました。

ページタイトルが長くなると、そのぶん、「トップへ戻るボタン」が横長になることです。

それを回避するために、2行にしました。

もし、ウザいと思ったら、元に戻してくださいね(笑)

それでは、お疲れさまでした。

ではでは…

スポンサーリンク
ページ先頭へ