Cocoon設定画面に「トップへ戻る」ボタンを追加する方法

はじめに

Cocoon設定画面は非常に多機能である一方、設定項目が多くページが長くなりがちです。
そのため、画面下部までスクロールした後に別のタブへ切り替えようとすると、再び一番上まで戻る操作を手間に感じることがあります。

そこで、Cocoon設定画面内に「トップへ戻るボタン」を設置して、操作性を向上させます。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

add_action('admin_footer', function () {
  $page_hook = get_plugin_page_hookname('theme-settings', '');

  if ($hook_suffix !== $page_hook) {
    return;
  }

  ?>
  <a href="#" class="admin-top"><span class="fas fa-angle-up"></span></a>

  <style>
  .wp-admin .admin-top {
    background-color: #333;
    border-radius: 5px;
    bottom: 10px;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    display: grid;
    font-size: 22px;
    height: 40px;
    place-items: center;
    position: fixed;
    right: 10px;
    text-decoration: none;
    width: 40px;
  }
  </style>
  <?php
});

さいごに

今回紹介した方法を使えば、Cocoon設定画面でのスクロール疲れから解放されます。
特に、タブを頻繁に切り替える作業において、ワンクリックで最上部へ戻れる機能は大きな時短に繋がります。
ちょっとしたカスタマイズですが、日々のサイト管理をより快適にするためにぜひ役立ててください。