短代码可以很方便快捷地实现一些特定功能。

经过一番搜索，网上找到了一个叫做 ShortCode 的短代码插件，再经过一番学习，终于实现了短代码功能。

一、下载插件

下载下面的 ShortCode 插件，解压放入usr/plugins目录，并启用该插件。

ShortCode

二、注册短代码

可以通过 ShortCode 类的 set 方法来实现短代码注册：格式为：

ShortCode::set(names, collbacks,overried);
参数名类型说明
namesmixed短代码名称，可以一个字符串或字符串数组
callbacksmixed短代码对应回调函数，可以一个回调函数或回调函数数组
overriedbool覆盖已存在的短代码设置,可选，默认false

接下来就是在 function.php 中注册短代码了。

// 短代码注册
if (class_exists('ShortCode')) {
    ShortCode::set(['video', 'audio', 'grid', 'album', 'img'], 'ShorCode');
}
//短代码回调函数
function ShorCode($name, $attr, $text, $code)
{
    switch ($name) {
        case 'video':
            return '<video width="100%" controls="controls"' . $attr . '><source src="' . $text . '" type="video/mp4"></video>';
        case 'audio':
            return '<audio controls="controls"' . $attr . '><source src="' . $text . '"></audio>';
        case 'grid':
            //将set属性转换为html
            preg_match('/set\=\"(.*?)\"/', $attr, $set); // 获取set属性
            $sets = explode(",", $set[1]); // set属性值转化为数组
            $attr = 'class="grid';
            foreach ($sets as $set) {
                $attr = $attr . ' row-cols-' . $set;
            }
            $attr = $attr . '"';

            // 将text内容转换为数组
            $textarrs = explode("\n", $text); // 使用"\n"作为内容分隔符      

            // 将短代码转换为html
            $str = '<div ' . $attr . '>';
            foreach ($textarrs as $textarr) {

                if (strlen($textarr) > 1) {
                    $str = $str . '<div class="d-flex align-content-center">' .  $textarr . '</div>';
                }
            }
            $str = $str . '</div>';
            return $str;
        case 'img':
            return '<div class="d-flex"><img' . $attr . ' src="' . $text . '"></div>';
        case 'album':
            return '<div class="album"' . $attr . '>' . $text . '</div>';
    }
    return $code;
}

对上面回调函数中相册短代码(album)和grip短代码(grip)用到的css类为：

/* 短代码-相册样式 */
.album {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}
.album img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.album img:hover {
  transform: scale(1.05);
  transition: all 0.2s ease;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

/* 短代码-grid样式 */
.grid {
  --bs-gutter-x: 0.5rem;
  --bs-gutter-y: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.grid > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}
/* 注意：grid子元素用到了bootstrap样式 */

三、使用短代码

编辑文章，对上面的几个短代码使用和验证其效果。

### 演示视频短代码
[video]https://www.runoob.com/try/demo_source/mov_bbb.mp4[/video]

### 演示grid短代码
[grid set="sm-1,md-2,lg-3"]
[img]https://www.hollowman.cn/usr/themes/ymz/images/logodemo/logo_1.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/logodemo/logo_3.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/backgroundimages/pub_1.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/backgroundimages/pub_2.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/backgroundimages/pub_3.jpg[/img]
[/grid]

### 演示相册短代码
[album]
[img]https://www.hollowman.cn/usr/themes/ymz/images/logodemo/logo_1.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/logodemo/logo_3.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/backgroundimages/pub_1.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/backgroundimages/pub_2.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/backgroundimages/pub_3.jpg[/img]
[/album]

演示视频短代码

演示grid短代码

演示相册短代码