向 WordPress 添加自定义 JavaScript、CSS 和 HTML答案

【问题标题】：Adding custom JavaScript, CSS and HTML to WordPress向 WordPress 添加自定义 JavaScript、CSS 和 HTML
【发布时间】：2014-03-04 08:06:33
【问题描述】：

我有一个简单的代码来计算一个句子中的单词数。这个单词计数器有 3 个部分，一个 CSS、JS 和 HTML 文件。我知道它可以在 WordPress 中运行这个脚本，但我不知道如何实现这一点。以下是代码：

JS：

$(function() {
    $("#sys-tbox").each(function() {
        var input = '#' + this.id;
        counter(input);
        $(this).keyup(function() {
            counter(input);
        });
    });
});

function counter(field) {
    var number = 0;
    var text = $(field).val();
    var word = $(field).val().split(/[ \n\r]/);
    words = word.filter(function(word) {
        return word.length > 0
    }).length;
        $('.words').text(words);
        $('.character').text(text.length);
}

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Sysadmin Word Counter</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <script src="js/jscript.js"></script>
        <link rel="stylesheet" href="css/css-style.css" />
    </head>
    <body>
        <div id="sys-mbox">
            <textarea id="sys-tbox"></textarea>
        </div>
        <div class="sys-results">
        Total number of words: <span class="words"> </span>
        Total number of chars: <span class="character"> </span>
        </div>
    </body>
</html>

这是Fiddle

我在 WordPress 文档中读到，这可以使用 wp_enqueue_script() 来实现，但我不确定从哪里开始，因为它的出现方法可能会根据文件结构使用的 WordPress 主题而有所不同不一样。

请任何人指出正确的方向或向我提供类似已回答问题的链接。

谢谢

将此代码添加到 Function.php：

function wordcount_scripts()
{
    // Register the script like this for a plugin:
    wp_register_script( 'wordcountjs', plugins_url( '/js/wordcountjs.js', __FILE__ ) );
    // or
    // Register the script like this for a theme:
    wp_register_script( 'wordcountjs', get_template_directory_uri() . '/js/wordcountjs.js' );

    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'wordcountjs' );
}
add_action( 'wp_enqueue_scripts', 'wordcount_scripts', 5 );

【问题讨论】：

标签： javascript html css wordpress

【解决方案1】：

JS 和 CSS
有多种方法。我会开始读这个。正如您所提到的，wp_enqueue_script 是一个好方法：
http://code.tutsplus.com/articles/the-ins-and-outs-of-the-enqueue-script-for-wordpress-themes-and-plugins--wp-22509

HTML
您正在寻找Child Theme：
WP：WordPress 子主题是继承另一个主题（称为父主题）功能的主题。子主题允许您修改或添加到该父主题的功能。子主题是修改现有主题的最安全和最简单的方法，无论您是想进行一些微小的更改还是进行广泛的更改。您可以创建一个子主题并在其中覆盖，而不是直接修改主题文件。

【讨论】：

OK 看看这个
我已将上述代码添加到我的functions.php文件中，不知道如何加载我的html
你有自己的主题吗？
将原始文件（例如header.php）复制到您的子主题文件夹并更改您需要更改的内容。
OK 会这样做，并让您知道进展如何。感谢您到目前为止的时间