WordPressにフローティングボタンを設置する方法（プラグインなし）

2026/3/16 WordPress

こんにちは、さるまりんです 🐒🔧

前回の記事では、HTML / CSS / JavaScriptだけで
フローティングボタン（スクロールしてもついてくるボタン）を作りました。

今回はそれを WordPressに組み込む方法 を紹介します。

まずは完成イメージ

今回作るのは、スクロールしても画面の右下についてくる
「ページトップボタン」です。

  • スクロールすると表示される
  • クリックするとページトップへ戻る
  • 画面の端に固定される

よくあるUIですが、WordPressでは
プラグインなしでも簡単に作れます。

どんな動きをするのかは前回記事に埋め込んでいるので見てみてくださいね。

プラグインでも実装できます

WordPressには
「Back to top」「Scroll to top」などで検索するとのプラグインが出てきます。

そのため、ページトップボタンは
プラグインで簡単に実装することもできます。

それでも自作するメリット

ただ、小さな機能の場合は
自作する方がメリットが大きいこともあります。

  • プラグインを増やさなくて済む
  • サイトが軽くなる
  • 自由にカスタマイズできる
  • トラブル時に原因を追いやすい

特にWordPressは
プラグインが増えるほどサイトが重くなる傾向があります。

シンプルな機能なら
自分で実装した方が軽くて管理もしやすいです。

今回やること

今回追加するのは次の3つです。

  • HTML
  • CSS
  • JavaScript

やること自体は前回の記事と同じです。

「WordPressでするにはどうするか？」

です。

WordPressの場合は
どこに書くかがポイントになってきます。

① HTMLを追加する

テーマの footer.php に追加します。


<button id="pageTopBtn">TOP</button>

フッターに置くことで、すべてのページで表示されます。

② CSSを追加する

テーマの style.css に次のCSSを追加します。


#pageTopBtn {
  position: fixed;
  right: 20px;
  bottom: 20px;

  padding: 10px 16px;
  background: #333;
  color: white;
  border: none;
  border-radius: 6px;

  cursor: pointer;

  display: none;
}

#pageTopBtn.show {
  display: block;
}

ポイントは position: fixed です。

これを指定すると、
スクロールしても画面の同じ位置に固定されます。

③ JavaScriptを追加する

テーマのJavaScriptファイルに追加します。


const btn = document.getElementById("pageTopBtn");

window.addEventListener("scroll", () => {
  if (window.scrollY > 200) {
    btn.classList.add("show");
  } else {
    btn.classList.remove("show");
  }
});

btn.addEventListener("click", () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
});

これで

  • スクロールするとボタン表示
  • クリックするとページトップへ戻る

という動きになります。

カスタマイズ例

自作の良いところは、簡単にカスタマイズできることです。

位置を変更する

右下 → 左下にする場合

left: 20px;
bottom: 20px;

表示タイミングを変更する

if (window.scrollY > 500)

この値を変更すると
表示されるタイミングを調整できます。

スマホだけ表示する

@media (min-width: 768px) {
  #pageTopBtn {
    display: none;
  }
}

まとめ

フローティングボタンは

  • HTML → ボタン
  • CSS → 位置固定
  • JavaScript → スクロール制御

この3つだけで実装できます。

WordPressでも特別な仕組みは必要ありません。

小さな機能なら
プラグインを使わず自作する方が軽くて柔軟
なことも多いです。

少しずつ自作していくと、
サイトのカスタマイズがどんどん楽しくなります。

読んでくださってありがとうございます。

それではまた！