{"id":3211,"date":"2025-06-11T19:25:53","date_gmt":"2025-06-11T11:25:53","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/3211.html"},"modified":"2025-06-11T19:25:53","modified_gmt":"2025-06-11T11:25:53","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8-wordpress-%e6%96%87%e7%ab%a0%e4%b8%ad%e6%b7%bb%e5%8a%a0%e9%98%85%e8%af%bb%e8%bf%9b%e5%ba%a6%e6%9d%a1-3%e7%a7%8d%e7%ae%80%e5%8d%95%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/3211.html","title":{"rendered":"\u5982\u4f55\u5728 WordPress \u6587\u7ae0\u4e2d\u6dfb\u52a0\u9605\u8bfb\u8fdb\u5ea6\u6761 (3\u79cd\u7b80\u5355\u65b9\u6cd5)"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n
\r\n

要在WordPress文章中添加阅读进度条，可以采用以下三种简单的方法：静态插件、JavaScript动态加载和PHP代码。以下是每一种方法的详细说明和示例代码。<\/p>\n

方法一：使用静态插件<\/h3>\n

步骤：<\/h4>\n
    \n
  1. 安装插件<\/strong>：首先，在WordPress后台的“插件”菜单下找到并安装“阅读进度条”插件。<\/li>\n
  2. 激活插件<\/strong>：安装完成后，点击插件名称以激活它。<\/li>\n
  3. 自定义设置<\/strong>：进入插件设置页面，根据需要调整显示方式（如顶部、底部或中间）和其他选项。<\/li>\n<\/ol>\n

    示例代码：<\/h4>\n

    假设我们选择的是顶部显示方式：<\/p>\n

    \/\/ 添加到 functions.php 文件中\nfunction add_reading_progress() {\n    echo '<div id=\"reading-progress\"><\/div>';\n}\nadd_action('wp_footer', 'add_reading_progress');<\/code><\/pre>\n
    这个代码会在每个文章的底部添加一个阅读进度条区域。<\/p>\n
    方法二：使用 JavaScript 动态加载<\/h3>\n
    步骤：<\/h4>\n
      \n
    1. 编辑模板文件<\/strong>：在文章的 HTML 结构中插入一个容器来放置进度条。<\/li>\n
    2. 编写 JavaScript 代码<\/strong>：使用 jQuery 或其他 JavaScript 库来动态创建和显示阅读进度条。<\/li>\n<\/ol>\n
      jQuery 示例<\/strong>：<\/p>\n
      <!-- 在文章的 <head> 部分 -->\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n<div class=\"progress\">\n    <div id=\"reading-progress\" style=\"width: 0%; height: 20px; background-color: #4CAF50;\"><\/div>\n<\/div>\n\n<!-- 在文章的 <body> 部分 -->\n<script>\n$(document).ready(function(){\n    var readingProgress = $('#reading-progress');\n    readingProgress.width(0);\n});\n<\/script><\/code><\/pre>\n
      CSS 样式<\/strong>（在 CSS 文件中）：<\/p>\n
      .progress {\n    position: relative;\n    width: 80%;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n#reading-progress {\n    position: absolute;\n    top: -10px;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    transition: width 0.3s ease-in-out;\n}<\/code><\/pre>\n
      方法三：使用 PHP 代码<\/h3>\n
      步骤：<\/h4>\n
        \n
      1. 编辑主题的模板文件<\/strong>：例如 single.php<\/code> 或 page.php<\/code>，插入 PHP 代码来计算并更新阅读进度条的位置。<\/li>\n
      2. 编写 PHP 代码<\/strong>：<\/li>\n<\/ol>\n
        <?php\n$total_words = get_post_meta(get_the_ID(), '_readable_word_count', true);\n$percentage = ($total_words \/ $word_limit) * 100;\n\nif (!empty($percentage)) :\n?>\n    <div id=\"reading-progress\" style=\"width: <?php echo $percentage . '%'; ?>;\">\n        <span><?php _e('Reading Progress:', 'your-theme'); ?><\/span>\n    <\/div>\n<?php endif; ?><\/code><\/pre>\n
        CSS 样式<\/strong>（在 CSS 文件中）：<\/p>\n
        .reading-progress {\n    position: relative;\n    display: inline-block;\n    padding-left: 50%;\n    width: 0;\n    height: 20px;\n    line-height: 20px;\n    text-align: center;\n    color: white;\n    border-radius: 5px;\n    background-color: #4CAF50;\n    font-size: 12px;\n    text-transform: uppercase;\n    z-index: 1;\n}<\/code><\/pre>\n
        这些方法可以帮助你在WordPress文章中有效地展示阅读进度条。根据你的需求和偏好，可以选择最适合的方式实现这一功能。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
        \r\n
        \r\n
        \r\n
        \r\n
        \r\n
        \"黑板前的Bug语法讲师\"<\/figure>\r\n\r\n\r\n\r\n
        黑板前的Bug语法讲师<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
        \r\n
        \r\n
        如何在 WordPress 文章中添加阅读进度条<\/h3>\n
        在 WordPress 中，添加阅读进度条是一种吸引用户注意力和增强用户体验的好方法。这里介绍三种简单的、有效的实现方式：<\/p>\n
        1. 使用 CSS 和 JavaScript 来创建动态阅读进度条<\/h4>\n
        方法一：使用自定义 CSS<\/strong><\/p>\n
        首先，在您的主题文件（通常是 functions.php<\/code> 或 style.css<\/code>）中编写一些CSS来显示阅读进度条。<\/p>\n
        <!-- 在主题文件 -->\n<style>\n    .progress-bar {\n        width: 0%;\n        height: 25px;\n        background-color: #eee;\n        border-radius: 4px;\n        transition: width 1s ease-in-out;\n    }\n\n    .progress-bar-fill {\n        height: 100%;\n        background-color: green; \/* 设置进度条颜色 *\/\n        transition: width 1s ease-in-out;\n    }\n<\/style>\n\n<!-- 在文章页面上 -->\n<div class=\"post-content\">\n    <div class=\"progress-bar\" style=\"width: 25%;\"><\/div>\n    <div class=\"progress-bar-fill\"><\/div>\n<\/div><\/code><\/pre>\n
        方法二：使用 jQuery 插件<\/strong><\/p>\n
        如果需要更直观的效果，可以考虑使用第三方插件如 Progressive Download Plugin<\/strong>。安装并激活后，可以在文章页面上轻松地添加进度条。<\/p>\n
          \n
        • 下载并激活 Progressive Download Plugin。<\/li>\n
        • 将以下代码添加到 .js<\/code> 文件或 <head><\/code> 部分：\n
          \/\/ 在文章页面上\n$(document).ready(function() {\n  $('.download-button').click(function() {\n      var progress = parseInt($(this).data('progress'));\n      var progressBar = $('.progress-bar');\n      progressBar.attr('style', 'width:' + progress + '%');\n      return false;\n  });\n});<\/code><\/pre><\/li>\n<\/ul>\n
          方法三：使用 Bootstrap 提供的进度条组件<\/strong><\/p>\n
          Bootstrap 提供了多种进度条组件，包括但不限于 <progress><\/code> 元素。如果您喜欢简洁的设计，可以选择使用 <progress><\/code> 元素结合 CSS 实现进度条效果。<\/p>\n
            \n
          • 在 HTML 结构中插入 <progress><\/code> 元素：\n
            <progress value=\"0\" max=\"100\">0%<\/progress><\/code><\/pre><\/li>\n
          • \n
            在 CSS 中设置样式以控制进度条宽度和颜色：<\/p>\n
            .progress-bar {\n  width: 0%;\n  height: 25px;\n  background-color: #eee;\n  border-radius: 4px;\n  transition: width 1s ease-in-out;\n}\n\n.progress-bar-fill {\n  height: 100%;\n  background-color: green; \/* 设置进度条颜色 *\/\n  transition: width 1s ease-in-out;\n}<\/code><\/pre>\n<\/li>\n<\/ul>\n
            通过以上任何一种方法，您都可以在 WordPress 文章中为用户提供一个清晰的阅读进度条，从而提高用户的体验感和满意度。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
            Bug编译狮 要在WordPress文章中添加阅读进度条，可以&#3..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[2107,2106],"tuisongtax":[],"class_list":["post-3211","post","type-post","status-publish","format-standard","hentry","category-wpdt","tag-cjyy","tag-cjzn"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/3211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/comments?post=3211"}],"version-history":[{"count":0,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/3211\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/media?parent=3211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/categories?post=3211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tags?post=3211"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tuisongtax?post=3211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}