WordPress用にjQueryでTOPに戻るボタン作成

a-01

「よし、WordPressを高速化しよう!」

プラグインも、子テーマもカオスと化してきた当ブログ、これはダイエットせねばと重い腰を上げたのはいいが、何からやろうか考えた。

最初は、アイコンフォントを使い、SNSボタンを作ろうとしたが、途中で挫折orz

その時の話。

まずは、やれる事から始めようと思い、あまり影響なさそうだが、今まで使っていた、【Scroll Back to Top】というプラグインが1つ減るので【TOPに戻る】ボタンを自作する事にした。

最初は失敗・・・

functions.phpで作っては見たものの、あえなく500エラー・・・

何度記述を変えてもエラーの嵐なので、他の方法をGoogle先生の先の人達のを参考に作ってみました。

スポンサーリンク

ボタンの準備をする

子テーマでの編集前提ですので、あしからず。

まず、footer.phpを編集しますので「テーマの編集」で開いてください。

表示したい文字やアイコンを任意に変えて、このコードを</dody>タグの直前に貼り付けてください。

お次は、スタイルシートです。style.cssに次のコードを書き込んでください。

以上で、ボタンが出来上がったのですが、私のは、楕円形になってますよね?(▲)だけであれば円になります。

この部分の数値を変えるか、書き換えて自分好みにしてくださいな。まだこの段階では表示されないので、表示されるようにしていきましょう。

一応、途中でデザインを変えるかも知れないので、出来上がりを表示しておきます。

top

ヘッダーにコードを追加

header.php内に<?php wp_head(); ?>という記述がありますので、それを探します。

【Ctrl】+【F】で探せば楽なので、使ってください。見つけたら、以下のコードを直下に追加して下さい。

何のコードって?

javascript.jsのファイルを作成してthemeフォルダに作ったからです。

これは、子テーマフォルダではなく、オリジナルのテーマフォルダに入れてください。

私の場合は、Twenty Twelveを使用していますので、その中のフォルダに入れるという事です。

jQueryを書いて完成させる

さてさて、いよいよ最終段階です。

先程、空で作成した【javascript.js】に記述していきます。

これで、完成のはずです。

最後に

ここまでやってなんなんだが、スコアに変動はなかった・・・

ただ、プラグインが一つ減ったし良いとしようか。勉強になったしね_¢(・ω・`) 

スポンサーリンク

シェアする

フォローする

スポンサーリンク