gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 04:00:26 24 4
gpt4 key购买 nike

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

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com