STINGER

footer.phpにサクッとコードを追加してSTINGER PLUS2にページトップボタンを表示する

投稿日: 更新日: 2017年11月20日

STINGER PLUS2カスタマイズに関する記事もこれで7記事目になったでででーさん(@d3_dayo) です!

 
前回の記事では、WordPressプラグインのMetaSliderを使ってヘッダー下にカルーセルスライダーを設置する方法を紹介しました。

そして今回のテーマであるページトップボタンとは…このブログだと右下に奇妙奇天烈なイラストが追尾してくると思うんですが、これのことです(笑)
 
クリックまたはタップすると一気にページの先頭まで戻ってくれるボタンのことですね。
 
STINGERシリーズだと基本的に搭載されているはずなんですが、そういえばSTINGER PLUS2だと基本的に表示されていないですよね。テストで弄りながら「何か前と比べてないものがあるな」と思っていたんですが、見当たらないものはこのページトップボタンでした。
 
個人的には、特にAndroidでサイト閲覧する時にはあると便利なボタンだと思っています。AndroidだとiPhoneみたいにブラウザ上部をダブルタップしても、ページの先頭には戻ってきませんからね。
 
この記事では、そんなページトップボタンの表示を旧バージョンと同じように復活させるためのコードを紹介します。コピペ一発でできるので簡単です!
 
 

スポンサーリンク

STINGER PLUS2

ダウンロード及び規約
STINGER PLUS2は上記のリンクからダウンロードすることができます。
 
 

完成図

今回紹介するカスタマイズを実際にテスト環境で施してみたので、まずは完成図としてスクリーンショットをお見せしたいと思います。
 
・PCでの表示

 
・スマホでの表示

 
デフォルトのままなのでボタンの色やデザインはともかくとして、これまでのシリーズ同様にページ右下にボタンを復活させることができました。
 
 

ページトップボタンを表示する方法

今回の手順は非常に簡単です。ボタンの表示自体はfooter.phpにコードを1つ貼り付けるだけです。というのも、機能自体はこれまでのバージョン同様にテーマ側で書かれているようなんですが、純粋にボタンを表示させる箇所にこれまで書かれていたコードが書かれていないだけなんですね。
 
なので、そのコードを戻してあげることでボタンもこれまで通りの状態で表示されるというわけなんです。
 

footer.phpにコードを追記する

以下のコードをfooter.phpに追記することでページトップボタンが復活します。footer.phpへのアクセスはWordPressの管理画面から外観→テーマの編集です。作業の前には状態を元に戻せるようにphpファイルを事前にバックアップすることを強くオススメします。

貼る位置はfooter.phpの下から2行目、このコードの1行下に貼ります。

あとはPHPファイルを保存すれば、上記のコードが適用されてページトップボタンが表示されるようになります。
 

ページトップボタンのカラー変更

ページトップボタン自体のカスタマイズについては、改めて別の記事でもっと詳しく紹介しようと思っていますが、取り急ぎ上記の手順で復活させたページトップボタン…場合によっては背景色と同一色でよく見えないといった状況が起こり得ると思います。
 
そこでとりあえず、サクッとページトップボタンの背景色とカーソル部分の文字色を変更するCSSも載せておきます。

色はサイトデザインやご自身の好みに合わせて設定してみてください!
 
 

おわりに

今回は「コピペ一発!コードを追記するだけで復活させることができるページトップボタン」を表示させる手順を紹介しました。
 
ページトップボタンについては、改めて別の記事で、より詳細なカスタマイズ(このブログのように画像をボタンとして設定したりなど)を紹介する予定です!
 
 
以下の記事ではこれまでにブログで紹介したSTINGER PLUS2カスタマイズ記事をまとめています!今回の記事で紹介したカスタマイズ以外にもいろいろと弄れる部分はありますので、こちらもどうぞご覧ください!
 
【誰でも簡単】これまでに書いたSTINGER PLUS2のカスタマイズ記事まとめ | カキタクナッタラ

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ