ワードプレスサイトでフローティングアクションボタンを追加したい。

イメージ説明ワードプレスで作成したサイト(テーマはcocoon)で、
以下の参考サイトの右下に表示されているようなフローティングアクションボタンを追加したいです。(https://job-q.me/)
その場合はどのようなコードを追加する必要があるのでしょうか？

また、基本的にはサイト全体で表示するようにしたいのですが、特定のページのみ表示されないようにしたいです

ご教示お願いします。
適用したいサイトはこちらです
https://gift-box.bright-web.jp/

arcxor

2022/12/20 06:52

フローティングアクションボタンって何ですか？右下に表示されているというのがどれのことだか分かりませんでした。

nekokotk

2022/12/20 07:11

参考サイトのhttps://job-q.me/の右下にある「質問をする」というボタンのことですこちらのサイトのように右下にボタンを常時設置したいと考えています。という意味です🙇‍♂️ 画像も添付しました。

arcxor

2022/12/20 07:15

（レスポンシブでの）スマホ幅限定での表示内容でしたか。PC版で見ていたので気づきませんでした。

nekokotk

2022/12/20 07:35

あ、スマホと記載しておらず失礼しました🙇‍♂️

行動規範の内容に同意します

回答1件

ベストアンサー

cocoon-child-master テーマをお使いかと思いますが、cocoon-child-master/tmp-user/main-before.php を編集して以下の記述を追加してみてください。

html
1<style>
2.floating-button {
3  position: fixed;
4  bottom: 10px;
5  right: 10px;
6  display: flex;
7  justify-content: center;
8  align-items: center;
9  width: 80px;
10  height: 80px;
11  border-radius: 100%;
12  background: #0f88c4;
13  color: #fff;
14  text-decoration: none;
15}
16</style>
17<a class="floating-button" href="/path/to/">ボタン</a>

また、基本的にはサイト全体で表示するようにしたいのですが、特定のページのみ表示されないようにしたいです

特定のページのみ、id または class 属性値を与えておいて、CSS で非表示にする方法
main-before.php 中で PHP による条件分岐を用いて、特定のページのみコードを出力しない方法

上記の2つの方針が考えられます。特定のページというのは具体的にどのようなページなのでしょうか。それによって具体的なソースコードの記述内容が変わります。

追記

html
1<style>
2#floating-action-button {
3  z-index: 1;
4  position: fixed;
5  bottom: 10px;
6  right: 10px;
7  display: flex;
8  flex-direction: column;
9  justify-content: center;
10  align-items: center;
11  width: 80px;
12  height: 80px;
13  border-radius: 100%;
14  background: #0f88c4;
15  color: #fff;
16  text-decoration: none;
17  font-size: 15px;
18}
19#floating-action-button i {
20  font-size: 20px;
21}
22</style>
23<a id="floating-action-button" href="/path/to/"><i class="fas fa-edit"></i>質問する</a>
24<script>
25(function() {
26  const path = location.pathname;
27  if (path === '/new-thread/' || path.startsWith('/bright/forum/')) {
28    document.getElementById('floating-action-button').remove();
29  }
30}());
31</script>

a 要素の class 属性を id 属性に変えました
JavaScript で URL 判定をして floating-action-button の削除処理を加えました
CSS に z-index を追加しました
HTML に font-awesome アイコンを追加しました
CSS に flex-direction: column; を追加しました
CSS に font-size を追加しました

投稿2022/12/20 07:39

編集2022/12/20 09:19

arcxor

総合スコア2857

nekokotk

2022/12/20 07:59

回答いただき、そしてコードありがとうございます😭🙇‍♂️ 表示をしたくない特定のページとは、ちなみにこちらになります。 https://gift-box.bright-web.jp/new-thread/ https://gift-box.bright-web.jp/bright/forum/choice/ https://gift-box.bright-web.jp/bright/forum/giftmanner/ https://gift-box.bright-web.jp/bright/forum/oiwai/ https://gift-box.bright-web.jp/bright/forum/free/

arcxor

2022/12/20 08:35

本文に追記しました。本来は PHP 側で固定ページの page_name などを元に条件分岐をすべきですが、内部設計が分からずコードを示せないので、ここでは JavaScript で URL 判定をするコードを示しておきます。

nekokotk

2022/12/20 08:40

迅速な対応誠にありがとうございます🙇‍♂️🙇‍♂️🙇‍♂️ 実際に貼ってみたのですが、スマホ画面では一番下までスクロールすれば表示されるのですが、上にスクロールすると被ってしまい消えてしまいました。こちら原因わかりますでしょうか…？

nekokotk

2022/12/20 08:46

追加で質問すみません・・・・ボタンにfont awasomeのアイコンを追加する子などは可能なのでしょうか？可能な場合以下のアイコンを入れたいと考えております。 https://fontawesome.com/v5/icons/edit?s=solid&f=classic お手隙の際にご確認お願いいたします

arcxor

2022/12/20 09:19

コードを更新しました。追記セクションをご確認ください。 > 上にスクロールすると被ってしまい消えてしまいました。 z-index プロパティで制御できます。 > ボタンにfont awasomeのアイコンを追加する子などは可能なのでしょうか？追加してみました。flex-direction: column で縦並びにして font-size でサイズを調整してみました。

nekokotk

2022/12/20 09:26

凄すぎます。！！！！コード貼り付けたら、イメージ通りになりました。本当に追加質問含め、ご対応いただきありがとうございます😭！

行動規範の内容に同意します