如何在WordPress区块中添加第三方JS/CSS并优化后台显示？

一、用原生「自定义HTML」区块（最直接） #

直接在编辑器里找「自定义HTML」区块（搜索框输入HTML就能快速定位），把第三方代码粘贴进去即可。为了让后台能一眼识别区块用途，在代码开头加个注释：

<!-- Wundercoach插件代码区块，请勿随意删除 -->

这个区块专门用来处理HTML/JS/CSS代码，不会像段落区块的代码编辑器那样出现异常黄色空标签，前端渲染正常，后台也有明确标识，避免客户误删。

二、封装成短代码（客户操作更省心） #

如果客户担心直接接触代码，把这段代码封装成短代码，后台只需要插入短代码就能调用：

1. 打开主题的functions.php文件（或者使用代码片段插件，避免主题更新导致代码丢失），粘贴以下PHP代码：

function wundercoach_widget_shortcode() {
    ob_start();
    ?>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script id="widget_id_2082" type="text/javascript" src="https://11076.wundercoach.net/api/v1/jsonp/full_filterable_list/b93c78f1-77b9-4096-ba1a-adb1d7fdbb2e.js?locale=de/b93c78f1-77b9-4096-ba1a-adb1d7fdbb2e.js" async="true"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <?php
    return ob_get_clean();
}
add_shortcode('wundercoach_widget', 'wundercoach_widget_shortcode');

2. 保存后，在页面编辑器中添加「短代码」区块，输入[wundercoach_widget]即可。还可以给这个短代码区块添加标题（比如「Wundercoach插件调用」），后台一眼就能识别，后续修改代码只需要更新这个函数里的内容。

三、用代码片段插件管理（无主题权限也能操作） #

如果客户没有主题文件编辑权限，安装Code Snippets插件即可：

• 激活插件后新建一个片段，粘贴上述PHP代码，命名为「Wundercoach Widget短代码」，保存并激活
• 之后在页面中插入短代码区块即可，客户能通过插件的片段列表找到对应的代码进行修改，安全又直观

内容的提问来源于stack exchange，提问作者Mathias Bader