賢威7.0

賢威サイトの好きな場所にトップに戻るリンクを複数追加する方法

goto-top-button-thumbnail

今回の記事では、WordPressテーマ:賢威7で作ったサイトの好きな場所に「トップに戻る」リンク(ボタン)を複数追加する方法を紹介したいと思います。

もともと賢威7には、トップに戻るボタンが用意されていますが、そのままの状態では複数設置することはできません。ただ、ほんの一手間かけると、本文中やサイドバー、フッターなど、どこにでもスムーズにスクロールする複数の「トップに戻る」リンクを設置することが出来るようになります。

文章が長いサイトや、セクション分けがしっかりされているサイトはもちろん、よくあるタイプのサイトでもユーザービリティが向上すると思うので、ぜひお試し下さい!

カスタマイズ後

本文中に「トップに戻る」リンクを表示

↓ 好きな文章のトップに戻るリンクを、複数設置することができます

goto-top-after-1
サイドバーに「トップに戻る」リンクを表示

↓ 本文以外の場所にも複数設置することができます

goto-top-sidebar

[ad]

また、今回はPHPファイルを編集していきます。
ほんの少しの編集ですが、ミスの内容によっては画面が真っ白になってしまうこともあるので、バックアップを取ってから作業するようにして下さい。

1. footer.php を編集

まずは footer.php ファイルから編集していきます。
文章で書くと少し分かりづらいかもしれませんが、

画面右下に固定表示される「トップに戻る」ボタンに別のクラス名(fixed)を追加して、、、

.page-top というクラス名の要素を非表示+右下に固定しているコードのセレクタを .fixed に変更、

という流れで進めていきます。

footer.php の23行目付近に以下のコードがあるので、

<!--▼ページトップ-->
<p class="page-top"><a href="#top"><img class="over" src="<?php bloginfo('template_url'); ?>/images/common/page-top_off.png" width="80" height="80" alt="ページの先頭へ"></a></p>
<!--▲ページトップ-->

これを下のコードで置き換えます。
<p class="page-top">fixed というクラスを追加)

<!--▼ページトップ-->
<p class="page-top fixed"><a href="#top"><img class="over" src="<?php bloginfo('template_url'); ?>/images/common/page-top_off.png" width="80" height="80" alt="ページの先頭へ"></a></p>
<!--▲ページトップ-->

2. base.css を編集

次に base.css ファイルを編集していきます。
base.css ファイルの1149行目付近に以下のコードがあるので、

/*ページトップボタン*/
.page-top{
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99;
    line-height: 1.2;
    margin-bottom: 0;
}

こちらについても下のコードで置き換えます。
.page-top 部分を .fixed に変更)

/*ページトップボタン*/
.fixed{
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99;
    line-height: 1.2;
    margin-bottom: 0;
}

これでページ右下で固定されることなく、通常のリンクと同じように(画面右下ではなく、その場所に)表示されるようになりました。

3. 「トップに戻る」リンクを表示させる

ここまでの編集で準備が整ったので、編集画面から「トップに戻る」リンクを表示させましょう。
投稿の編集画面にある「テキスト」と書かれている方(ビジュアルエディタではない方)のエディタで、以下のコードを入力します。

<a href="#top" class="page-top">トップへ戻る</a>
goto-top-text-editor

↓ 画像だと全く分からないと思いますが、ちゃんとスムーズにトップまで移動してくれます。

goto-top-after-1

ちなみに画像では下のように入力していますが、

<a href="#top" class="page-top">トップへ戻るリンク1</a>
<a href="#top" class="page-top">これもトップへ戻るリンク</a>

「トップに戻る」という文字を入れずに、お好みの文字にしてもらっても大丈夫です。

4. 本文以外の場所に表示させる

それでは最後に「トップに戻る」リンクを本文以外の場所に表示させましょう。
設置するには、先ほどの本文中の場合と全く同じように表示させたい場所で

<a href="#top" class="page-top">トップへ戻る</a>

というaタグを追加するだけです。
例えばテキストウィジェットを使って以下のように入力すると、、、

goto-top-widget

サイドバーにも「トップに戻る」リンクが表示されます。

goto-top-sidebar

このような形で、どこにでもトップに戻るリンクを作ることができます。
ぜひお試し下さい。