l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在 WordPress 文章中添加阅读进度条 (3种简单方法)

如何在 WordPress 文章中添加阅读进度条 (3种简单方法)

Bug编译狮

Bug编译狮

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

方法一：使用静态插件

步骤：

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

示例代码：

假设我们选择的是顶部显示方式：

// 添加到 functions.php 文件中
function add_reading_progress() {
    echo '<div id="reading-progress"></div>';
}
add_action('wp_footer', 'add_reading_progress');

这个代码会在每个文章的底部添加一个阅读进度条区域。

方法二：使用 JavaScript 动态加载

步骤：

  1. 编辑模板文件：在文章的 HTML 结构中插入一个容器来放置进度条。
  2. 编写 JavaScript 代码：使用 jQuery 或其他 JavaScript 库来动态创建和显示阅读进度条。

jQuery 示例：

<!-- 在文章的 <head> 部分 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="progress">
    <div id="reading-progress" style="width: 0%; height: 20px; background-color: #4CAF50;"></div>
</div>

<!-- 在文章的 <body> 部分 -->
<script>
$(document).ready(function(){
    var readingProgress = $('#reading-progress');
    readingProgress.width(0);
});
</script>

CSS 样式（在 CSS 文件中）：

.progress {
    position: relative;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#reading-progress {
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    bottom: 0;
    transition: width 0.3s ease-in-out;
}

方法三：使用 PHP 代码

步骤：

  1. 编辑主题的模板文件：例如 single.php 或 page.php，插入 PHP 代码来计算并更新阅读进度条的位置。
  2. 编写 PHP 代码：
<?php
$total_words = get_post_meta(get_the_ID(), '_readable_word_count', true);
$percentage = ($total_words / $word_limit) * 100;

if (!empty($percentage)) :
?>
    <div id="reading-progress" style="width: <?php echo $percentage . '%'; ?>;">
        <span><?php _e('Reading Progress:', 'your-theme'); ?></span>
    </div>
<?php endif; ?>

CSS 样式（在 CSS 文件中）：

.reading-progress {
    position: relative;
    display: inline-block;
    padding-left: 50%;
    width: 0;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: white;
    border-radius: 5px;
    background-color: #4CAF50;
    font-size: 12px;
    text-transform: uppercase;
    z-index: 1;
}

这些方法可以帮助你在WordPress文章中有效地展示阅读进度条。根据你的需求和偏好，可以选择最适合的方式实现这一功能。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

如何在 WordPress 文章中添加阅读进度条

在 WordPress 中，添加阅读进度条是一种吸引用户注意力和增强用户体验的好方法。这里介绍三种简单的、有效的实现方式：

1. 使用 CSS 和 JavaScript 来创建动态阅读进度条

方法一：使用自定义 CSS

首先，在您的主题文件（通常是 functions.php 或 style.css）中编写一些CSS来显示阅读进度条。

<!-- 在主题文件 -->
<style>
    .progress-bar {
        width: 0%;
        height: 25px;
        background-color: #eee;
        border-radius: 4px;
        transition: width 1s ease-in-out;
    }

    .progress-bar-fill {
        height: 100%;
        background-color: green; /* 设置进度条颜色 */
        transition: width 1s ease-in-out;
    }
</style>

<!-- 在文章页面上 -->
<div class="post-content">
    <div class="progress-bar" style="width: 25%;"></div>
    <div class="progress-bar-fill"></div>
</div>

方法二：使用 jQuery 插件

如果需要更直观的效果，可以考虑使用第三方插件如 Progressive Download Plugin。安装并激活后，可以在文章页面上轻松地添加进度条。

  • 下载并激活 Progressive Download Plugin。
  • 将以下代码添加到 .js 文件或 <head> 部分： 
    // 在文章页面上
$(document).ready(function() {
  $('.download-button').click(function() {
      var progress = parseInt($(this).data('progress'));
      var progressBar = $('.progress-bar');
      progressBar.attr('style', 'width:' + progress + '%');
      return false;
  });
});

方法三：使用 Bootstrap 提供的进度条组件

Bootstrap 提供了多种进度条组件，包括但不限于 <progress> 元素。如果您喜欢简洁的设计，可以选择使用 <progress> 元素结合 CSS 实现进度条效果。

  • 在 HTML 结构中插入 <progress> 元素： 
    <progress value="0" max="100">0%</progress>

  • 在 CSS 中设置样式以控制进度条宽度和颜色：

    .progress-bar {
  width: 0%;
  height: 25px;
  background-color: #eee;
  border-radius: 4px;
  transition: width 1s ease-in-out;
}

.progress-bar-fill {
  height: 100%;
  background-color: green; /* 设置进度条颜色 */
  transition: width 1s ease-in-out;
}

通过以上任何一种方法，您都可以在 WordPress 文章中为用户提供一个清晰的阅读进度条，从而提高用户的体验感和满意度。

,

最新更新