只需简单三步，你就能轻松拥有同款动态灵动岛。本教程特别适用于子比主题，其他主题的朋友们可自行测试哦~

第一步 添加动态灵动岛美化样式代码至自定义 CSS

将以下精心设计的动态灵动岛美化样式代码，添加到网站的自定义 css 区域。这段代码巧妙地定义了灵动岛在不同状态下的样式，包括鼠标悬停时的变化，以及条形波动的动画效果等，让你的灵动岛更加生动有趣。

第二步 添加代码至后台自定义头部 HTML

接着，把下面这段代码添加到后台的自定义头部 html 中。此代码构建了灵动岛的基本结构，包含图片、提示文字以及波动的条形元素，为灵动岛的显示奠定基础。

<div class="dynamic-island inactive" id="dynamicIsland" style="opacity: 0;">
    <img src="https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01lajerM1QbIl9aoHcJ_!!2210123621994.png" alt="通知图标" width="30" height="30">
    <div class="island-content">
        <div class="bars" style="line-height: 50px; margin: 0;">
            <p style="line-height: 50px; margin: 0; font-size: 12px; padding-right: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"> 欢迎访问九二分享</p>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </div>
</div>

第三步将下面代码添加到zibll文件夹中的function.php或func.php文件中

// 灵动岛
function add_dynamic_island_script() {
  ?>
      <script type="text/javascript">
          window.onload = function() {
    // 触发灵动岛的显示
    triggerIsland();
    // 获取当前页面的标题
    let title;
    const currentUrl = window.location.pathname;
    // 获取当前 URL 路径
    if (currentUrl.includes('/message/')) {
      // 如果访问了消息页面
      document.querySelector('.bars p').innerText = "正在访问消息页面";
    } else if (currentUrl.includes('/user/')) {
      // 如果访问了用户中心页面
      document.querySelector('.bars p').innerText = "欢迎来到用户中心";
    } else if (document.body.classList.contains('home') || document.body.classList.contains('front-page')) {
      // 如果是首页
      document.querySelector('.bars p').innerText = "欢迎来到斗罗大陆网博客";
    } else if (document.body.classList.contains('single')) {
      // 如果是单篇文章
      title = "<?php echo addslashes(html_entity_decode(get_the_title())); ?>";
      // 获取文章标题并解码
      document.querySelector('.bars p').innerText = "正在访问：" + title;
    } else if (document.body.classList.contains('category')) {
      // 如果是分类页面
      const category = "<?php echo addslashes(html_entity_decode(get_queried_object()->name)); ?>";
      // 获取当前分类的名称
      document.querySelector('.bars p').innerText = "正在访问：" + category + " 分类";
    } else if (document.body.classList.contains('page')) {
      // 如果是单个页面
      title = "<?php echo addslashes(html_entity_decode(get_the_title())); ?>";
      // 获取页面标题并解码
      document.querySelector('.bars p').innerText = "正在访问：" + title;
    } else {
      // 如果以上都不匹配，可以使用默认值
      document.querySelector('.bars p').innerText = "欢迎来到斗罗大陆网博客";
    }
  }
  ;
  // 触发灵动岛的显示
  function triggerIsland() {
    const island = document.getElementById('dynamicIsland');
    if (island) {
      island.style.opacity = 1;
      island.classList.add('active')
                      island.classList.remove('inactive');
      // 在4秒后触发关闭动画
      setTimeout(() => {
        closeIsland();
      }
      , 4000);
    }
  }
  function closeIsland() {
    const island = document.getElementById('dynamicIsland')
                if (island) {
      island.classList.remove('active');
      island.classList.add('inactive');
      setTimeout(() => {
        island.style.opacity = 0;
        // 使灵动岛透明
      }
      , 600);
      // 与 transform 动画持续时间一致
    }
  }
  </script>
      <?php
}
add_action('wp_head', 'add_dynamic_island_script');

请务必注意，这三步操作环环相扣，缺一不可。按教程操作完成后，记得保存所作更改，然后刷新网站，就能亲眼见证动态灵动岛的炫酷效果啦！