srcmini因此, 我尝试了一段时间, 将我的jQuery脚本(一个插件, 一个自行编写)包含到我的自定义wordpress主题中。尽管阅读了很多有关如何正确包含它们的信息, 但我还是无法设法使其正常工作。因此, 我有一个插件脚本(jQuery.fullPage.js)和一个自定义的书面形式(main.js), 两者都放在” assets / scripts /”目录中。
如说明中所述, 我将它们注册在functions.php中：
function load_theme_scripts() {
wp_register_style('fullPageStyle', get_template_directory_uri() . '/custom-css/jquery.fullPage.css');
wp_enqueue_style( 'fullPageStyle');
wp_register_script( 'theFullPage', get_template_directory_uri() . '/assets/scripts/jquery.fullPage.js', array('jquery'), false, true );
wp_enqueue_script( 'theFullPage');
wp_register_script( 'mainScript', get_template_directory_uri() . '/assets/scripts/main.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script( 'mainScript');
}
add_action( 'wp_enqueue_scripts', 'load_theme_scripts' );`
仅具有此代码就什么也没有发生。经过一番阅读后, 我发现(不知道这是否是正确的方法)我也必须在html代码的<head>中调用脚本。因此, 在home.html的<head>中, 我现在有以下代码：
<head>
<title><?php wp_title()?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<script type='text/javascript' src='http://localhost/portfolio_wordpress/wp-content/themes/myportfolio/assets/scripts/jquery.fullPage.js'></script>
<script type='text/javascript' src='http://localhost/portfolio_wordpress/wp-content/themes/myportfolio/assets/scripts/main.js'></script>
<?php wp_head(); ?>
</head>现在调用了脚本(如果不按最佳实践, 请更正我！), 但我得到了错误：在main.js中找不到变量：$。我认为这可能是因为WordPress在jQuery中的兼容模式, 所以将$替换为jQuery, 然后错误是找不到变量：jQuery。
$。的main.js代码：
$(document).ready(function() {
alert("Main script is workin!");
$('#fullpage').fullpage({
scrollingSpeed: 1000
});
alert("Main script is workin!");
});
带有jQueryinmain的main.js：
jQuery(document).ready(function($) {
alert("Main script is workin!");
$('#fullpage').fullpage({
scrollingSpeed: 1000
});
alert("Main script is workin!");
});
请帮助我, 这真的使我发疯！由于我是第一次为wp编写自定义主题, 因此欢迎以更好或更简洁的方式编码此功能的技巧！
#1
这只是一个例子
function wptuts_scripts_important()
{
// Register the script like this for a plugin:
wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ) );
// or
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_important', 5 );
#2
如果该js位于plugin文件夹中, 则需要使用plugin_url()路径而不是get_template_directory_uri()。因为模板目录函数用于已激活主题的定位路径。希望对你有帮助。例如：
add_action( 'wp_enqueue_scripts', 'load_plugin_scripts');
function load_plugin_scripts(){
wp_enqueue_script( 'plugin_custom_lm_js', plugins_url( 'assets/scripts/jquery.fullPage.js', __FILE__ ) );
}
#3
找到解决方案！
所以我找出了问题所在！其实……真的很蠢。要加载jQuery, 请使用<？php wp_enqueue_script(” jquery”); ？>必须在<？php wp_head();之前调用； ？>。所有自定义脚本, 例如main.js必须这样调用：<script type =’text / javascript’src =” <？php bloginfo(” template_url”);？> / assets / scripts / main.js”> </ script> <？php wp_head(); ？>功能。
所以现在我的HTML总<head>看起来像这样：
<head>
<title><?php wp_title()?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script type='text/javascript' src="<?php bloginfo("template_url"); ?>/assets/scripts/jquery.fullPage.js"></script>
<script type='text/javascript' src="<?php bloginfo("template_url"); ?>/assets/scripts/main.js"></script>
克里斯·科耶尔(Chris Coyier)的https://digwp.com/2009/06/includes-jquery-in-wordpress-the-right-way/中的帖子对我解决这个问题有很大帮助！谢谢！
评论前必须登录！
注册