<span class="new-txt">New!</span>Cocoonの「設定 > ボタン」機能で『トップへ戻る』から『インデックスページに戻る』に変更

ある団体のホームページ（Cocoonテーマを使用したWordPressサイト）を運営しています。

これまでは、Cocoonの「設定 > ボタン」機能を使い、「トップへ戻る」ボタンを設定していました。このボタンをクリックすると、現在表示中のページの先頭にスクロールで戻る仕様でした。

しかし、当サイトでは記事の分量が少ないため、この機能を利用するニーズは少ないと思われます。

そこで、「トップへ戻るボタン」クリック時に、現在のページの先頭ではなく、インデックスページ（フロントページ）へ遷移するように変更しました。また、それに合わせてアイコンのデザインも変更しました。

以下のスクリプトを functions.php に追加しています：

`functions.php` 追記内容

phpコピーする編集する// トップへ戻るボタンをフロントページへ遷移させる（Cocoonのボタン設定対応）2025/07/23
function change_back_to_top_link() {
  ?>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const topBtn = document.querySelector('.go-to-top-button'); // Cocoonの「トップへ戻る」ボタンを取得

      if (topBtn) {
        // 元のクリックイベントを無効にするため、ボタンをクローンして置き換え
        const newTopBtn = topBtn.cloneNode(true);
        topBtn.parentNode.replaceChild(newTopBtn, topBtn);

        newTopBtn.addEventListener('click', function (e) {
          e.preventDefault();
          e.stopImmediatePropagation(); // Cocoon側のスクロール処理をブロック
          window.location.href = '<?php echo esc_url(home_url('/')); ?>'; // フロントページへ遷移
        });
      }
    });
  </script>
  <?php
}
add_action('wp_footer', 'change_back_to_top_link');

functions.php 追記内容

`functions.php` 追記内容