wordpress爱找主题

要纯代码实现 WordPress 文章阅读进度条，你可以按照以下步骤进行操作：

1. 在主题的 functions.php 文件中添加必要的 JavaScript 和 CSS：

   function custom_read_progress_bar_scripts() {
      wp_enqueue_script('jquery');
      wp_enqueue_script('readprogressbar', get_template_directory_uri() . '/js/readprogressbar.js', array('jquery'), '1.0', true);
      wp_enqueue_style('readprogressbarstyle', get_template_directory_uri() . '/css/readprogressbar.css');
   }
   add_action('wp_enqueue_scripts', 'custom_read_progress_bar_scripts');

2. 创建一个 JavaScript 文件（readprogressbar.js）：

   在你的主题文件夹中创建一个名为 js 的文件夹，然后在其中创建 readprogressbar.js 文件，添加以下代码：

   jQuery(document).ready(function($) {
      $(window).scroll(function() {
          var scrollDistance = $(window).scrollTop();
          var documentHeight = $(document).height();
          var windowHeight = $(window).height();
          var scrollPercentage = (scrollDistance / (documentHeight  windowHeight))  100;
          $('#readprogressbar').css('width', scrollPercentage  '%');
      });
   });

3. 创建一个 CSS 文件（readprogressbar.css）：

   在你的主题文件夹中创建一个名为 css 的文件夹，然后在其中创建 readprogressbar.css 文件，添加以下代码：

   #readprogresscontainer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      backgroundcolor: #0073e6; / 进度条颜色 /
      zindex: 9999;
   }
   
   #readprogressbar {
      height: 100%;
      width: 0;
      backgroundcolor: #ff6600; / 进度条背景颜色 /
   }

4. 在文章模板中添加 HTML 代码：

   在你的 WordPress 主题的单篇文章模板（通常是 single.php）中，添加以下 HTML 代码来显示进度条：

5. 保存并激活主题：

   确保你的主题文件夹中包含了上述的 JavaScript 和 CSS 文件，然后保存并激活主题。

现在，当用户滚动浏览文章时，将显示一个进度条，以显示他们已经阅读的文章部分。你可以根据需要自定义进度条的颜色和样式。