WordPressテーマの「LION MEDIA」でページのフッターから先頭に戻ることができる「Back to Top」のボタンを、もっとページの先頭に戻りやすくカスタマイズしました。
ページのトップに戻るボタンのデザインや配置、スクロール動作に使う記述は、応用すれば他のWordPressサイトでもカスタマイズできます。自分用のメモもかねてますが作業のときの流れをまとめたので参考になればと思います。
LION MEDIAのページの先頭に戻るボタン
ページの先頭に戻るボタン、またはトップに戻るボタンとも表現しますが、WordPressテーマ「LION MEDIA」のデフォルトのページの先頭に戻るボタンは、ページのフッター最上部に中央配置したBack to Topボタンです。
LION MEDIAのようにページの先頭に戻るボタンがフッターにあっても、LION MEDIAのテーマ仕様に適応させて、ブログ記事下からフッターまでの関連記事や関連カテゴリ一覧でも興味が湧くようにしよう。
またはLION MEDIAのヘッダーのグローバルメニューをカスタマズで固定してるなど、ページのトップに戻る必要なく、移動しやすい仕組みやLION MEDIAに適応した狙いがあればいいのですが、何もない場合はページの先頭に戻るボタンがページの右下にあると便利です。
Webサイトにあると便利な「ページの先頭に戻るボタン」をWordPressテーマのLION MEDIAでは、どのようにカスタマイズするか、よければ読み進めてみてください。
ページの先頭に戻るボタンをカスタマイズ
LION MEDIAでページの先頭に戻るボタンをカスタマイズするときは、LION MEDIAの子テーマ「lionmedia-child」でカスタマイズします。
子テーマのlionmedia-childフォルダで、ページの先頭に戻るボタンのカスタマイズに使うファイルは以下の2つです。
- style.css
- footer.php
style.cssはLION MEDIAをWordPressサイトのテーマとしてインストールするときに入っていますが、footer.phpの子テーマは作成します。
footer.phpの子テーマ作成は、親テーマのfooter.phpをlionmedia-childフォルダにコピペします。
footer.phpの子テーマ作成がよくわからない場合は、ワンクリックで作成可能なWordPressプラグインで簡単に作成できます。
ページの先頭に戻るボタンのHTML
LION MEDIAの子テーマのfooter.phpをテキストエディタで開いて、ページの先頭に戻るボタンの要素をHTMLを記述して作ります。
子テーマのfooter.phpを開いた中に<!–l-footer–>のコメントを目印にします。
<!–l-footer–>の下にある、<div class=”container”>と<div class=”pagetop u-txtShdw”>の間に、HTMLのdiv要素とaタグでページ内リンクの要素を記述します。
<div class="top_jump">
<a class="top_jump_link" href="#top"></a>
</div>
divタグにはclass属性を記述してクラス名をつけておきます。LION MEDIAのページの先頭に戻るボタンのカスタマイズで使います。
aタグはhref属性の値に指定する#topが、LION MEDIAのページで先頭に戻るボタンをクリックしたら、ページのトップまでジャンプできるリンクになります。
トップまで戻るスクロール動作
次にLION MEDIAのページのトップまで戻るボタンをクリックしたら、ページの先頭に戻るときのスクロール動作をカスタマイズします。
ページの先頭に戻るスクロール動作をゆっくりな感じのスクロール速度にするのと、ページのトップから下にマウススクロールして最初の見出し下あたりでトップに戻るボタンが出現するようにjqueryを記述します。
jqueryの記述場所は、ページの先頭に戻るボタンのHTMLを記述したLION MEDIAの子テーマのfooter.phpです。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var pageTop = $('.top_jump');
pageTop.hide();
$(window).scroll(function() {
if ($(this).scrollTop() > 600) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
pageTop.click(function() {
$('body, html').animate({
scrollTop: 0
}, 500, 'swing');
return false;
});
});
</script>
子テーマのfooter.phpの中に</body>の終了タグが下の方にあるので、</body>の直上に上のコードを貼り付けます。
そしてLION MEDIAのページの先頭に戻るボタンにするHTMLを先に記述したときに、divタグにclass属性を記述してクラス名をつけました。このdivタグにつけたクラス名と、上のコード4行目のvar pageTop = $(‘.top_jump’);のカッコの中とを同じにしたらファイルを保存します。
一応上のコードの説明ですが、1番上のscriptタグで囲んだ記述が、その下から</body>直上までのコードを動作できるようにするjquery本体です。
jquery本体の下から</body>直上までのコードは、LION MEDIAのページでトップに戻るボタンをクリックしたら、ページの先頭に戻るときのスクロール動作で速度調整できるようにと、ページ途中からページの先頭に戻るボタンが出現するようにできるというものです。
CSSでボタンのデザインと位置の調整
LION MEDIAのページの先頭に戻るボタンをCSSでデザインしながら位置の調整をしていきます。
.top_jump {
width: 85px;
height: 80px;
background: linear-gradient(0deg, #ACB6E5, #86FDE8);
position: fixed;
bottom: 20px;
right: 20px;
opacity: 0.7;
border-radius: 50%;
z-index: 999;
}
.top_jump::before {
content: "🔝";
font-size: 45px;
position: absolute;
top: 20px;
left: 20px;
}
position: fixed;でLION MEDIAのフッター右下の位置にページの先頭に戻るボタンをページをスクロールしても固定されるように配置にします。
固定したフッター右下の位置の微調整はbottomとrightの値でお好み配置にします。
そしてページの先頭に戻るボタンに幅と高さをつけて背景色をつけたら、border-radiusでボタンを丸くデザインします。
トップに戻るボタンに表示する矢印はCSSの擬似要素beforeで表示します。上のコードではアイコンフォントを使ってませんが、IcoMoonやFont Awesomeを使用してボタンに表示する矢印を表示します。
擬似要素のbeforeで表示させた矢印はposition: absolute;でボタンの上に配置します。topとleftでボタンのちょうどいい位置に配置が来るように調整が必要です。
CSSでデザインと位置調整すると、LION MEDIAのフッターでページの先頭に戻るボタンが表示されます。
ボタンをクリックやタップすると、ページの先頭に戻るボタンのHTMLにjqueryでトップまで戻るスクロール動作を加えているので、ページのトップへとゆっくりめな動作でスクロールします。
逆にページのトップからページ下へとマウススクロールすると、最初の見出しをすぎたあたりでボタンが出現します。
LION MEDIAのBack to Topをカスタマイズ
LION MEDIAのテーマにページの先頭に戻るボタンをカスタマイズできると、無事にページの先頭に戻るボタンが表示されますが、LION MEDIAのデフォルトのBack to Topボタンがあるので、ページトップに戻るボタンが2つあることになります。
LION MEDIAのBack to Topのボタンは消します。そして必要ならBack to Topを消した部分をカスタマイズします。
デフォルトのBack to Topボタンを消す
LION MEDIAのBack to Topボタンを表示してる要素は、以下のHTMLのようにpagetopとu-txtShdwのクラス名でデザインされてるので、pagetopあたりをCSSのセレクタにして、display:none;でデフォルトのBack to Topボタンを消します。
<div class="pagetop u-txtShdw"><a class="pagetop__link" href="#top">Back to Top</a></div>
もしくはLION MEDIAの子テーマにしたfooter.phpでカスタマイズしてるので、子テーマのfooter.phpを開いた上記のHTML部分を削除しても大丈夫です。
LION MEDIAのデフォルトのBack to Topボタンを消したことで、Back to Topボタンの下のコンテンツが押し上げられレイアウトが崩れます。
レイアウト崩れを直すためにLION MEDIAのフッターを囲む要素のクラス.l-footerにCSSでpadding-topを30pxから40pxくらいにして、ページトップに戻るボタンがあったときと同じスペースを作ります。
消したトップに戻るボタン部分を活用
サイトにアクセスしてくれる検索ユーザーさんが、フッターまでコンテンツを見てくれてるサイトの場合なら、消したトップに戻るボタン部分を活用するのも有りだと思います。
無難な活用方法だと横並びのメニューとかアドセンス広告を貼る場所に活用したりとかですかね。
上記はほんの一例ですが、LION MEDIAのテーマで消したデフォルトのトップに戻るボタン部分は、ページの先頭に戻るボタンを右下にカスタマイズしたことで、今後コンテンツを何か組み込む必要があるときに活用できます。
まとめ
今回のLION MEDIAのページの先頭に戻るボタンをカスタマイズするやり方だと難しく感じる方もいるかと思います。
それでもLION MEDIAのページの先頭に戻るボタンを変えたい。
という場合はWordPressプラグインの「WPfront Scroll Top」を試してみるのも有りかなと思います。
プラグインは増やしたくない、自由度の高いカスタマイズをしたい、という場合は今回の記事で紹介したやり方がおすすめです。
