向WordPress添加自定义JavaScript，CSS和HTML [英] Adding custom JavaScript, CSS and HTML to WordPress
问题描述
我有一个简单的代码来计算句子中的单词数。这个字计数器有3个部分，一个CSS，JS& HTML文件。我知道它可能在WordPress中运行这个脚本，但我不知道如何实现这一点。以下是代码：
JS：
$ ）{
$（＃sys-tbox）。each（function（）{
var input ='＃'+ this.id;
counter（input）;
$（this）.keyup（function（）{
counter（input）;
}）;
}）;
}）;
函数计数器（字段）{
var number = 0;
var text = $（field）.val（）;
var word = $（field）.val（）。split（/ [\\\
\r] /）;
words = word.filter（function（word）{
return word.length> 0
}）。
$（'。words'）。text（words）;
$（'。character'）。text（text.length）;
}
HTML：
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8/>
< title> Sysadmin字计数器< / 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 =stylesheethref =css / css-style.css/>
< / head>
< body>
< div id =sys-mbox>
< textarea id =sys-tbox>< / textarea>
< / div>
< div class =sys-results>
总字数：< span class =words> < / span>
字符总数：< span class =character> < / span>
< / div>
< / body>
< / html>
这里是小提琴
我在WordPress文档中阅读过这个可以使用 wp_enqueue_script我不知道从哪里开始，因为它出现的方法可能会根据使用的WordPress主题不同，因为文件结构是不同的。
任何人都可以指向我的方向正确的方向
添加此代码到Function.php：
/ p> function wordcount_scripts（）
{
//注册一个插件的脚本：
wp_register_script（'wordcountjs'，plugins_url（'/js/wordcountjs.js'，__FILE__））;
//或
//为主题注册这样的脚本：
wp_register_script（'wordcountjs'，get_template_directory_uri（）。'/js/wordcountjs.js'）;
//对于插件或主题，你可以将脚本放入队列：
wp_enqueue_script（'wordcountjs'）;
}
add_action（'wp_enqueue_scripts'，'wordcount_scripts'，5）;
JS和CSS br>
有多种方法。我会开始阅读这个。正如您提到 wp_enqueue_script 是一个好方法：
http://code.tutsplus.com/articles/the-ins-and-outs-of-the -enqueue-script-for-wordpress-themes-and-plugins - wp-22509
HTML
您正在查找儿童主题：
WP ：WordPress子主题是一种主题，继承另一个主题的功能，称为父主题。子主题允许您修改或添加该父主题的功能。子主题是修改现有主题的最安全和最简单的方法，无论您想要进行一些微小的更改还是进行大量更改。而不是直接修改主题文件，您可以创建一个子主题并覆盖。
I have a simple code that counts number of words in a sentence. This word counter has 3 parts, a CSS, JS & HTML files. I know its possible to run this scripts in WordPress but I am not sure how to achieve this. Below is the codes:
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>
Here is a Fiddle
I have read in WordPress document that this can be achieved using wp_enqueue_script() but I am not sure where to start from since its appears the methods might differe based on the WordPress theme used since file structure's are different.
Please can anyone point me in the right direction or provide me with links to similar answered questions.
Thanks
Added this code to 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 and CSS
There are multiple ways. I would start reading this. As you mentioned wp_enqueue_script is a good way:
http://code.tutsplus.com/articles/the-ins-and-outs-of-the-enqueue-script-for-wordpress-themes-and-plugins--wp-22509
HTML
You're looking for Child Theme:
WP:A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.
这篇关于向WordPress添加自定义JavaScript，CSS和HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
