[英]Adding custom JavaScript file in WordPress
我有一个子主题,其中有一个页面 test.php。 在此页面中,我有一个 select 元素。 When value of option is RED then heading should be displayed. 我为此编写了 JavaScript 代码,但它不起作用。 下面提到了 PHD 和 JavaScript 代码。
<Select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none">
<h1>Red</h1>
</div>
JavaScript是
<script>
$(document).ready(function(){
$('#colorselector').on('change', function() {
if ( this.value == 'red')
{
$("#red").show();
}
else
{
$("#red").hide();
}
});
});
</script>
我将 JavaScript 代码写入文件 custom.js,该文件与 test.php 和 style.css 位于同一文件夹中。 我将以下代码放在子主题的 function.php 中。
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
wp_enqueue_script('custom',
get_stylesheet_directory_uri().'custom.js', array(), false, true);
}
未达到预期输出...我错过了什么? 任何人都可以指导我吗?
我也遵循链接中的方法 2。 我在function.php 中使用以下代码,但它不起作用。
function wpb_hook_javascript() {
?>
<script>
$(document).ready(function(){
$('#colorselector').on('change', function() {
if ( this.value == 'red')
{
$("#red").show();
}
else
{
$("#red").hide();
}
});
});
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
按照这个代码:
将以下代码添加到您的 functions.php 文件中
add_action('wp_footer', 'my_code');
function my_code(){
?>
<script>
jQuery(document).ready(function($){
$('#colorselector').on('change', function() {
if ( $(this).value == 'red')
{
$("#red").show();
}
else
{
$("#red").hide();
}
});
});
</script>
<?php
}
跳这将解决您的问题。
有一个名为 Simple Custom CSS and Javascript 的 Wordpress 插件。 见https://sv.wordpress.org/plugins/custom-css-js/
下载 -> 从管理面板创建新的 .js 文件并在那里输入您的代码
如果您不想使用插件,请按照本指南操作: https : //www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/
Wordpress 将所有 '$' 转换为 'jQuery',这样它就不会与任何 php $ 冲突(如果发生任何错误)。 我们需要再次将其转换为 '$' 对象。 并且还需要对您的代码进行一些更改。
<script>
jQuery(document).ready(function($){
$('#colorselector').on('change', function() {
if ( $(this).val() == 'red') {
$("#red").show();
} else {
$("#red").hide();
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.