現在、ワードプレスのテーマとしてG3 PRO UNITを使用している。
最近、ページ右下に上記のようなボタンが設置してあるのを見かける。
クリックすると即座にページ上段に飛ぶ機能を有するアレだ。

G3でも同じ機能を有するボタンが備えられている。
が、地味なので変えたい思っていたところ、ワシの好みに合う上記ボタンを見付けた。
https://summer-log.com/220327topbutton/
早速設置しようとして説明を読みながら設定を終えたが、全然機能しない。
デザインも崩れまくり。

一旦挫折して放置していたが、何とか設置できないかと試行錯誤していたところ、ハマりまくって一日潰した・・
とりあえず子テーマを作って下記設定を行うことにより、流麗な見た目とともに機能した。
プチ感動である。

STEP 1

topbutton.js の中身を確認

場所：

/wp-content/themes/子テーマ名/js/topbutton.js

中身をこれにする。

document.addEventListener('DOMContentLoaded', function(){

    // TOPボタン生成
    const btn = document.createElement('a');

    btn.href = 'javascript:void(0)';

    btn.className = 'maz-top-btn';

    btn.innerHTML = 'TOP';

    // body直下へ追加
    document.body.appendChild(btn);

    // スクロールで表示切替
    window.addEventListener('scroll', function(){

        if(window.scrollY > 300){

            btn.classList.add('show');

        }else{

            btn.classList.remove('show');
        }

    });

    // TOPへ戻る
    btn.addEventListener('click', function(){

        window.scrollTo({

            top:0,

            behavior:'smooth'

        });

    });

});

保存。

---

STEP 2

functions.php に追記

子テーマの：

functions.php

へこれを追加。

function mazmoto_topbutton_script() {

    wp_enqueue_script(

        'maz-topbutton',

        get_stylesheet_directory_uri() . '/js/topbutton.js',

        array(),

        null,

        true

    );

}

add_action('wp_enqueue_scripts', 'mazmoto_topbutton_script');

---

STEP 3

Lightning標準 PAGE TOP を消す

管理画面：

外観
↓
カスタマイズ
↓
追加CSS

へこれを追加。

/* Lightning標準 PAGE TOP を消す */

#page_top,
.page_top_btn{
    display:none !important;
}

---

STEP 4

TOPボタン用CSSを追加

そのまま「追加CSS」へ続けてこれを入れる。

/* ===================================
   スムーススクロール
=================================== */

html{
    scroll-behavior:smooth;
}

/* ===================================
   オリジナル TOPボタン
=================================== */

.maz-top-btn{

    position:fixed !important;

    right:20px !important;
    bottom:20px !important;

    z-index:999999 !important;

    width:70px;
    height:70px;

    border-radius:50%;

    background:#f39800;
    color:#fff;

    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;

    text-decoration:none !important;

    font-size:13px;
    font-weight:bold;

    box-shadow:0 4px 10px rgba(0,0,0,.2);

    opacity:0;

    pointer-events:none;

    transition:
        opacity .3s,
        transform .3s,
        background .3s;
}

/* 表示時 */

.maz-top-btn.show{

    opacity:.9;

    pointer-events:auto;
}

/* 矢印 */

.maz-top-btn::before{

    content:"";

    width:10px;
    height:10px;

    border-top:2px solid #fff;
    border-right:2px solid #fff;

    transform:rotate(-45deg);

    margin-bottom:5px;
}

/* hover */

.maz-top-btn:hover{

    transform:translateY(-3px);

    opacity:1;

    background:#fff;

    color:#f39800;
}

/* hover時矢印 */

.maz-top-btn:hover::before{

    border-top:2px solid #f39800;
    border-right:2px solid #f39800;
}

/* スマホ */

@media(max-width:768px){

    .maz-top-btn{

        width:56px;
        height:56px;

        font-size:11px;

        right:14px !important;
        bottom:14px !important;
    }
}

保存。

---

STEP 5

キャッシュ削除

かなり重要。

もし：

• LiteSpeed Cache
• WP Fastest Cache
• Autoptimize

などを使っているなら削除。

さらに：

Ctrl + F5

でブラウザ更新。