使用WP自定义页面模板的jQuery

时间：2013-08-29 作者：rpd

我有一个简单的jQuery脚本来启用图像鼠标悬停效果，我想在我的WP自定义页面模板上使用它，但它还不适合我，我假设它没有链接到jQuery。不会显示悬停图像。

这是页面模板代码的一部分（主题=Twenty\\u-Eleven）

<?php
/**
 * Template Name: rpdcustompagetemplateportfolio
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>
<div id="primary">
<div id="content" role="main">
<div id="portfoliop">

<script type=\'text/javascript\'> $(document).ready(function(){ $(".logobutton").hover(function() { $(this).attr("src","<?php bloginfo(\'template_directory\'); ?>images/logobutton_hover50pc.png"); }, function() { $(this).attr("src","<?php bloginfo(\'template_directory\'); ?>images/logobutton50pc.png"); }); }); </script> 

<img src="<?php bloginfo(\'template_directory\'); ?>/images/logobutton50pc.png" alt="My button" class="logobutton" /> 
<h1>Portfolio</h1>

我在使用jQuery时总是遇到一些问题&；WordPress很不幸！我想这就是jQuery没有在这里链接/工作的问题所在。

我非常感谢您的帮助&；建议，期待回复，非常感谢

（注意，由于某些原因，我也无法在此处正确剪切/粘贴代码..抱歉）

4 个回复

SO网友:gmazzap

wpse中可能有很多问题/答案解释了这类问题以及在wordpress中使用jquery和其他js。

然而

wordpress中的never 将javascripts放入模板文件中。Javascript应单独存在。js文件wp_register_script / wp_enqueue_script 使用挂钩的函数wp_enqueue_scripts<?php echo $something ?> 功能wp_localize_script 应使用这对所有javascript文件/库都有效。

关于jQuery

Always 使用嵌入在Wordpress中的jQuery版本wp_enqueue_script(\'jquery\'), 每次您取消注册jQuery并注册其cdn版本时，都会出现异常。狗感觉不好noConflict 模式，因此$ 只有使用noConflict wrappers

文档wp_register_script function

wp_enqueue_script function

wp_enqueue_scripts hook

wp_localize_script function首先，您必须创建一个javascript文件，将其命名为“templateportfolio.js”，并将其保存在主题的“js”文件夹中，然后将js代码放在那里，记住使用noConflict包装器：

jQuery(document).ready( function($){
  $(".logobutton").hover(
    function() { $(this).attr("src", my_script_data.logobutton_hover); },
    function() { $(this).attr("src", my_script_data.logobutton); }
  );
});

这里有两个变量：my_script_data.logobutton_hover 和my_script_data.logobutton 需要传递给脚本的wp_localize_script.

事实上function.php, 您必须仅为页面模板将脚本排队，并使用wp_localize_script 要传递图像的url，请执行以下操作：

function enqueue_templateportfolio_js() {
  // change the template file name according to your file
  if ( ! is_page_template(\'templateportfolio.php\') ) return;
  wp_enqueue_script(\'enqueue_templateportfolio_js\', get_template_directory_uri() . \'/js/templateportfolio.js\', array(\'jquery\'), null, true );
  $imagesurl = get_template_directori_uri() . \'/images/\';
  $images = array(
    \'logobutton_hover\' => $imagesurl . \'logobutton_hover50pc.png\',
    \'logobutton\' => $imagesurl . \'logobutton50pc.png\',
  );
  wp_localize_script(\'enqueue_templateportfolio_js\', \'my_script_data\', $images );
}
add_action(\'wp_enqueue_scripts\',\'enqueue_templateportfolio_js\');

SO网友:Prince Singh

将$符号替换为jQuery示例-$(document).ready(function()

应该是

jQuery(document).ready(function()

等等。。。用jQuery替换脚本中的所有$符号，这是在wordpress中使用jQuery的正确方法。

SO网友:Geert

TwentyEleven主题只在其showcase.php 模板文件。您需要自己将其加载到自定义模板文件中，这很容易做到。在get_header(); 呼叫

wp_enqueue_script( \'jquery\' );

SO网友:RRikesh

jQuery(document).ready(function($){
  $(".logobutton").hover(function() {
    $(this).attr("src","<?php bloginfo( \'template_directory\' ); ?>/images/logobutton_hover50pc.png");
  },
  function() {
    $(this).attr("src","<?php bloginfo( \'template_directory\' ); ?>/images/logobutton50pc.png");
});

你有一个不必要的}); 在第二次回调中，WordPress在noConflict mode, 您应该使用noConflict Wrappers./ 在<?php bloginfo( \'template_directory\' ); ?>wp_enqueue_script()

结束

小码农CODE

使用WP自定义页面模板的jQuery

相关推荐

带有jQuery脚本的挂钩在wp-admin中不起作用