README

此插件注册了一个可配置的短代码，用于渲染HTML5 <progress>元素。

安装

使用Composer安装

$ composer require tfrommen/progress-bars

或者

1. 下载ZIP.
2. 将内容上传到您的Web服务器上的/wp-content/plugins/目录。
3. 通过WordPress中的插件菜单激活插件。
4. 在WordPress编辑器的任何位置使用新的[progress]短代码。

要求

此插件需要PHP 5.4或更高版本，但实际上您应该使用PHP 7或更高版本，众所周知。

使用方法

以下部分将帮助您开始使用进度条。说实话，这没什么大不了的。

过滤器

为了自定义插件的一些方面，它为您提供了一些过滤器。以下为每个过滤器的简短描述以及如何修改默认行为的代码示例。只需将相应的代码片段放入您的主题的functions.php文件或您的定制插件中，或放入其他适当的位置。

\tfrommen\ProgressBars\Shortcode::FILTER_TAG (progress_bars.shortcode_tag)

此过滤器允许您自定义短代码标签，默认标签为progress。

使用示例

<?php
/**
 * Filters the shortcode tag.
 *
 * @param string $tag The shortcode tag.
 */
add_filter( \tfrommen\ProgressBars\Shortcode::FILTER_TAG, function () {

	return 'progressbar';
} );

短代码

该插件注册了一个新的可配置短代码[progress]，您可以使用它来渲染HTML5 <progress>元素。以下是可以使用的所有属性，每个属性都有简短描述和用法示例。

class

class短代码属性代表<progress>元素的相应HTML属性。

默认值是一个空字符串，但是渲染的进度条将始终具有HTML类progress-bar。

使用示例

[progress class="my-awesome-progress-bar"]

上面的短代码将生成以下HTML

<progress class="progress-bar my-awesome-progress-bar" ...></progress>

id

id短代码属性代表<progress>元素的相应HTML属性。如果您提供一个空字符串（或只包含空白字符的字符串），则不会渲染idHTML属性。

默认值是一个空字符串，这意味着HTML属性将不会包含在生成的标记中。

使用示例

[progress id="my-awesome-progress-bar"]

上面的短代码将生成以下HTML

<progress id="my-awesome-progress-bar" ...></progress>

max

max短代码属性代表<progress>元素的相应HTML属性。这是进度条的最大值，意味着最右侧的值。如果您提供一个空字符串（或只包含空白字符的字符串），则不会渲染maxHTML属性。

默认值为100，这意味着进度条将显示总共100个单位的进度，换句话说，即百分比。

使用示例

[progress max="1"]

上面的短代码将生成以下HTML

<progress max="1" ...></progress>

您现在有一个从0到1的范围的进度条。

value

《value》简码属性表示《`》元素的相应HTML属性。这是进度条的值，即当前进度。如果您提供一个空字符串（或仅包含空白字符的字符串），则不会渲染《value》HTML属性。

默认值为42。

使用示例

[progress value="0"]

上面的短代码将生成以下HTML

<progress value="0" ...></progress>

现在您有一个显示进度（值）为0的进度条，因此没有任何进度。

内容

简码可以用作自闭合的，或者将自定义内容包裹在简码中。提供的任何内容都将被包裹在《`》元素中，并附加到进度条标记中。

使用示例

[progress max="12" value="5"]May[/progress]

上面的短代码将生成以下HTML

<progress max="12" value="5" ...></progress><span class="progress-bar-label">May</span>

许可证

版权所有（c）2017 Thorsten Frommen

此代码根据MIT许可证授权。