javascript - 向 WordPress 添加自定义 JavaScript、CSS 和 HTML

标签 javascript html css wordpress

我有一个简单的代码可以计算句子中的单词数。这个单词计数器有 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 );

最佳答案

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 子主题是继承另一个主题(称为父主题)功能的主题。子主题允许您修改或添加该父主题的功能。子主题是修改现有主题的最安全和最简单的方法,无论您是想进行一些微小的更改还是大量更改。您可以创建一个子主题并在其中覆盖,而不是直接修改主题文件。

关于javascript - 向 WordPress 添加自定义 JavaScript、CSS 和 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22166206/

相关文章:

javascript window.print CSS @media 不工作

asp.net - Javascript 弹出窗口打开函数

html - 哪种CSS组织方式最快?

Javascript window.open 在 Win7 x64 上的 32 位 IE8 中返回 null

javascript - 我如何使用ajax发布表单数据

javascript - 检查多个输入字段中是否至少有一个具有值

html - flexbox 和屏幕尺寸的问题

html - 悬停效果不改变 anchor 链接的颜色

jquery - 全屏响应 3d css3 立方体底部关闭

javascript - 在 Backbone View 中取消注册 Material Design Lite 组件