如何在 wordpress 帖子区域中添加自定义 javascript？答案

【问题标题】：How to add custom javascript in wordpress posts area?如何在 wordpress 帖子区域中添加自定义 javascript？
【发布时间】：2017-01-12 20:57:35
【问题描述】：

我想在 WordPress 中添加一个 JavaScript 测验。我已经尝试过以 HTML 方式使用这种方法。但它不起作用。

Here 是这个 java 脚本测验链接。

【问题讨论】：

链接到 jsfiddle 时需要有代码...
我已经用html代码在wordpress帖子区添加了所有的javascript、jquery和css文件，但没有什么可显示的，只有帖子标题在那里显示。
请将外部托管代码编辑到帖子中；这样做将确保即使链接断开，它仍然有用。我的脚本 is not allowed to do this 因为潜在的许可问题。

标签： javascript wordpress

【解决方案1】：

如果您可以访问 wordpress 模板，则可以使用简单的简码。例如使用以下代码（注意测试）：

class MyShortCodes {
    public function __construct() {
        $this->init();
    }

    public function init() {
        add_shortcode('my_javascript', array($this, 'my_javascript'));
        add_shortcode('my_javascript_file', array($this, 'my_javascript_file'));
    }

    public function my_javascript($attributes, $content = null) {
        return ''; // REPLACE THIS BY YOUR JAVASCRIPT CODE.
    }

    public function my_javascript_file($attributes, $content = null) {
        // Except for pasting all the JavaScript into the post's content,
        // enqueue the JavaScript file here and only add a call to it in the
        // post's content above.
        wp_enqueue_script('my_javascript_file', get_bloginfo('template_directory') . '/js/my_javascript_file.js');
    }
}

new MyShortCodes();

将此文件放在您的 wordpress 模板的 include 目录中，并将其包含在 functions.php 中：

require_once 'includes/my_shortcodes.php';

如您所见，有两种选择：您可以通过调用 [my_javascript] 短代码（并编辑 my_javascript 函数以包含您的所有代码）将完整的 JavaScript 代码粘贴到帖子的正文中，或者您可以使用 [my_javascript_file] 将包含封装为对象或函数的代码的 JavaScript 文件（例如模板中的 quiz.js ）排入队列（即使显示更多帖子，它也会被包含一次），并且只包含一个小的通过[my_javascript] 在每篇文章中添加JavaScript sn-p（只需调用quiz.js 中提供的函数即可）。

还可以简要查看短代码文档：https://codex.wordpress.org/Shortcode_API。

【讨论】：