Wordpressでのページトップへ戻るボタン実装

質問

はじめまして。Wordpress初心者です。Wordpressの有料テーマを購入し、デモの親テンプレートから子テーマを作り、自身でウェブサイトを制作中です。

解らない事はネットで調べたり、こちらで教えてもらったりしているのですが、未だHTMLやCSS等を理解できていません。。。＞＜

今回教えて頂きたいのが、ページトップへ戻るボタンの実装方法についてです。

参考にしているのが、(1)https://bit.ly/2naQ0W1、(2)https://bit.ly/2xHZ1ez、(3)https://bit.ly/2NZQAWiなのですが・・・、
記載されているHTMLやCSSはどこに追記したらよいのですか？

例えば、参考(1)に“footerの手前に～”、“HTML側のbody内の～”と記載されているのですが、私のWordpressの外観＞テーマの編集には親テーマを引き継いでいるstyle.cssとfunctions.phpのみで、footerやbodyの記載がありません。。。この場合、親テーマに追記しないといけないのでしょうか？

付随の CSS エディター というのがあるので、そこに参考(1)(2)(3)のCSS部分のコピペもしてみたのですが、エラーでした・・・

詳しく教えて下さる方がいらっしゃいましたら、どうぞよろしくお願いいたします。。。

回答No.2

4017B · ベストアンサー

＞現在26個のプラグイン
ん～、確かにちょっと多過ぎる気がしますね。ちなみに自分は7個ですが、その内の2つはWP標準プラグインの「WP Multibyte Patch」と「Classic Editor」ですので実質5個になります。上級者でも多過ぎるプラグインは管理し切れないので、多くても10個程度に絞った方が良いと思います。

WPの仕様上、確かにプラグインの数が多くなるほどwebサイト全体の表示や実行速度が遅くなっていきますが。もっと重要な問題があって、それはプラグインが1個増える毎にセキュリティホールも1個ずつ増えて行くという事です！無論、プラグインを増やしたらそれがすぐにセキュリティ的に危険になる訳ではありませんが、それぞれのプラグインにはそれぞれのプラグイン作者が存在し開発方針や技術レベルも雲泥の差で異なります。万全にも万全を期して作っている人もいれば、とりあえず動いてるしまあいっか的ないい加減な人もいます。

また基本、WP関連の開発者、特にプラグイン開発者の多くはボランティアでやってるので。最初の頃はやる気が合って更新頻度も高く改良もしていても、4～5年後には更新も滞りがちになり自然消滅する事も少なくありません。そういった放置プラグインを無闇矢鱈にインストールしていると、時間の流れと共にセキュリティ的に非常に危険な存在となり、当人の知らない間にスパムの踏み台にされたりする事あります。WPは世界中で最も利用者が多いCMSなので、悪意あるハッカー達は常に24時間365日体制でそういった間抜けなサイトを狙っています。

# 初心者におすすめのプラグイン
よく巷のWP系解説サイトでは「初心者におすすめのプラグイン10選！」とか銘打って適当なプラグインを紹介してますが。そもそも論から言えば "初心者はプラグインを使うべきではない" というのが大正解です。

後、よくある誤解がパック系プラグインを1個入れるだけで解決！～的な間違った発想ですね。有名所だと「Jetpack」などですが、この手のパック系プラグインは1個にまとめたのでは無く、むしろ使わない無駄で危険な穴となる不要な40個の余分なプラグインをインストールする事と同じになるので初心者は特に避けた方が良いです。

ただし前述の様に「WP Multibyte Patch」と「Classic Editor」は上級者、初心者を問わずに必須プラグインです。これらはWP公式で開発配布しているので、WPが存在し続ける限り管理メンテされ続けますので常に最新版にして置く事で安心安全な運用が担保できます。

また同様に必須のプラグインがあり、それは「Akismet」或いは「Google Captcha by BestWebSoft (または "Google Invisible reCaptcha for WordPress")」です。これらのプラグインはコメント欄にスパムを書き込まれるのを防ぎ、また悪意あるハッカーからの管理画面へのアクセスをブロックします。

逆に言えばこの上記の3つの必須プラグイン以外は全てサイト管理者の怠慢というか、面倒くさいとか技術知識不足を補う目的で導入されるモノですので、可能な限り最低限度のプラグインのみで運用すべきです。

# WordPressを導入する前に
先ずは一旦、深呼吸して自分のwebサイトに何が必要で何が必要で無いのかを正しく把握し、将来への明確なビジョンを持ってWPによるwebサイト運営を考えて行く事が重要です。何となくHP作りたいなあとか、自分のブログを持ちたいなあ～くらいの考えなら、何もWPを使う必要性は全く無く。LiveDoorとかFC2とかの無料ブログサービス等を利用するのが一番正しい方針です。

WPは前段でも申しました通り、Userの自由度が高い反面、それを管理運営するためには使用者自身にもある程度の知識と技術が要求されます。決して初心者向きのCMSではありません。カスタマイズにはHTMLはもちろん、CSS、Javascript、そして何よりPHPのプログラミング知識が必須となります。またその他にもFTP通信やファイル管理の仕方、文字コードに関する知識、画像ファイルの編集加工技術など様々なIT技術と知識が広く深く要求されます。

それらの総合的な知識と技術の習得学習に自ら積極的に取り組み学んで行く姿勢が無いと、WPは宝の持ち腐れになってしまいますし、少しでも管理メンテを怠ってしまうと即座にハッカーの攻撃対象となり、サイト乗っ取りや下手をすると警察沙汰になる事も決して少なくはありません。一生涯、WPの勉強をし続けて行く覚悟が無い人は、最初から手を出さない方が良いと思います。

プラグインの数がやたら増えて行くのは、正にこのやり取りの最中に質問者自身が行っている様に、根本的なWPの勉強を疎かにして安易に機能追加を思い付く度に出処も良く分からないプラグインを言われるがままに追加インストールして行く事に原因があります。TOPへ戻るボタンが欲しい、Twitterと連携するボタンが欲しい、人気の記事の一覧を表示させたい～等々と考えもなしに思い付くままにプラグインを追加していたら際限がありません。

斯く言う自分も昔は機能が欲しくなる度にプラグインを追加していましたので全盛期には多数のプラグインを使っていました。それでも最大で15個くらいでしたけど(笑)。そこからWPを学んで1つずつ問題(課題？)をクリアして行きながら、ちょっとずつ積み上げて来ました。WPは自由度が高く素人目にも楽しそうに見えますが、その反面、管理者の知識と技術に大きく依存しますので、ただ漠然とコピペするだけの運用だとすぐに行き詰まってしまいます。

元からプログラム弄りが好きで無いのであれば早めに見切りを付けて、自由度は無くても運営会社にお任せでお気楽運営が出来る他の無料ブログサービスなどに乗り換えた方が良いです。

お礼

再び回答ありがとうございます！凄く詳しく教えて頂き大変勉強になっております。
「Jetpack」！どういう物かもよく解らず、広告(？)が出ていたので、インストールしてました。。。！＞＜

もう一度プラグインを見直し、26個→17個まで減らせました。あとWooCommerce関連が5個入っているのですが、必要なのか解らないのでこれらも減らせそうなのと、あと、サイトが出来上がってからページビルダーだったり、ショートコード用のプラグインだったりを減らすことが出来そうなので、15個以内には収まりそうです。

仕事で必要とするウェブサイトなので、WPの勉強をし続けて行く覚悟で、実装できそうな物はプラグインに頼らず自身で実装できるようもっともっと勉強していこうと思います！

詳しい方にたくさんの事を詳しく教えて頂き、大変感謝しております。

回答No.1

4017B

子テーマの functions.php に自作コードを追記してHTMLを書き出す様にする必要がありますが、その際にWP独特の「アクションフック」という概念を理解して置かないとWPの自作改変は一歩も先へ進めません。それが出来ない、難しい、分からない～というのであればWP自作改変なんて夢のまた夢ですので、大人しく分を弁えて自分の希望する機能が最初から導入されているテーマを使って細かい部分には妥協し目を瞑るしかないです。

# 具体的な実装方法
前述の通り子テーマの functions.php に自作コードを追記して最終的に書き出すHTMLを改変させます。

add_action( 'wp_footer', 'my_func_footer' );
function my_func_footer(){
?>
<div id="button-to-pagetop"><a href="#">↑TOPへ戻る</a></div>
<?php
}

～上記の記述例を子テーマの functions.php に追記します。追記する部分は単純に後ろの方で構いません。尚、この時に functions.php の最後に ?> と記述されている様であれば、これを機会に削除して置いた方がPHP運用上は安定します。

技術的な解説をしますと、「WP本体で wp_footer() という関数が実行され、その実行を確認したら my_func_footer() という関数を実行させる」～という命令が add_action('wp_footer','my_func_footer'); の部分です。で、add_action() によって呼び出された my_func_footer() はその時点で即座に実行され結果をHTMLとしてwebページ上に書き出し表示されます。

WPの仕様で wp_footer() が実行されるタイミングはかなり終盤の方で、変テコなテーマを使ってない限り、通常は投稿記事の本文が一通り書き出された後のページ上の最後の部分で呼び出されます。殆どの場合は </body> の直前にHTMLが追記される形になると思います。

P.S.
恐らく質問者としては「コレじゃ無くて、クリックしたら全体がス～ッと動いて戻るヤツ！」とお思いでしょうが。先ずはこの記述例で最も簡単な自作HTMLの実装方法を実験し確かめてみてください。これが全ての基本になりますので。

繰り返しになりますがWP改造の基本は functions.php に自作コードを追記し、それによって最終的に書き出されるHTML(webページ)を改変し、必要ならば style.css にも追記を行い見た目の修正補正を行います。この際、適用しているテーマやWP本体に直に修正を加えると予期せぬ不具合が発生したり、或いはWP本体やテーマ自体の更新によってファイルが自動上書きされ自作改変した部分が全て白紙状態に戻ってしまうので。これを未然に防ぎ継続的に安定安全運用して行くためにも、セキュリティ的にも安定し自動的に最新版へ更新されるWP公式配布のテーマを親として、それに紐付けて自作の「子テーマ」を作って改変発展させて行く手法が望ましいので、先ずは子テーマを作って運用しようという方針は非常に重要です。

お礼

大変詳しく教えて頂きありがとうございました！WP改造の基本は functions.phpへコードを追記するのですね。"「アクションフック」という概念"というもの知らない事なので、調べて勉強してみます。難しい事ばかりで行き詰る事が多いのですが、回答者様からたくさんの事を教えて頂き、勉強になってます。ありがとうございます。

補足

他の方からWPFront Scroll Topというプラグインで簡単に実装できると教えて頂き、プラグインを導入して実装する事が出来ました。
ただ、現在26個のプラグインが有効になってまして、有効プラグインが多くなる事によって、何かHPの読み込みが遅くなる等何か不具合があるのでしょうか・・・？