WordPress 插件开发

概述

毫末科技插件模板：

开发

实现短代码

将短代码保存到你当前的主题的 functions.php中即可。

// 短代码相关函数
add_shortcode('mycode', 'function_name'); // 定义一个新的 Shortcode
remove_shortcode('mycode');               // 移除一个 Shortcode
remove_all_shortcodes();                  // 移除所有的 Shortcode
shortcode_exists( 'test' );               // 段代码是否存在
has_shortcode( $content, 'test' );        // 判断内容中是否包含短代码
$return = do_shortcode($content);         // 应用 Shortcode 到内容而不输出

短代码示例：

/**
 * $attr $key=>$value 的数组
 * $content 是 shortcode 中包含的字符串
 */
function bio_shortcode($atts, $content = null) {
   $content = wpautop(trim($content));
   return '<div class="bio">' . $content . '</div>';
}
add_shortcode('bio', 'bio_shortcode');

参考：

• WordPress 短代码（Shortcode）详细介绍和使用

实现参数配置

编写Vue短代码

引入JS依赖

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

编写vue组件

使用create-guten-block

# 在<wordpress-home>/wp-content/plugins/下运行以下命令:
npx create-guten-block HmGutenPlugin
cd HmGutenPlugin
npm start

参考：

• 使用Vue.js构建WordPress Gutenberg块

组件文档说明：StoryBook

参考

• WordPress Plugin Template
• WordPress 代码规范