在jQuery脚本中使用php代码 - wp_localize_script()无效

时间:2013-10-04 14:05:53

标签: jquery wordpress twitter-bootstrap

我想在wordpress循环中的元素上使用Bootstrap pop-over。我有一个javascript函数,理想情况下应该拉出帖子的标题,将其存储在变量中并返回变量...但是,php块存储为sting。我在这里和其他地方看过很多线程,解决方法是将php块放在<?php ?>里面,但这在这里不起作用。

弹出框显示:<?php echo the_title(); ?>

我的脚本执行得太早了吗?

我的.js文件中的代码,其中包含了wp_enque_script():

jQuery(document).ready(function($){  
share = function() {
    var title = "<?php echo the_title(); ?>";
    return title;
}

$('.share').popover({
    content: share(),
    placement: 'bottom'
    });
});

编辑

我在其中一个答案中建议使用wp_localize_script(),但变量返回null

functins.php

wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array(), '', true );

wp_localize_script('scripts', 'script_vars', array(
        'title' => the_title(),
        'url' => the_permalink()
        )
    );

scripts.js中

jQuery(document).ready(function($){  

share = function() {
    var title = script_vars.title;

    return title;
}

$('.share').popover({
        content: share(),
        placement: 'bottom'
        });
});

另外,the_title()the_permalink()会在每页<body>标记后回显

3 个答案:

答案 0 :(得分:2)

.js文件不由php引擎处理,因此不会解释php标记。

你可以这样做..

在你的php文件中:

window.postTitle = "<?php echo the_title(); ?>";

在你的js文件中:

$('.share').popover({
    content: window.postTitle,
    placement: 'bottom'
});

答案 1 :(得分:2)

您的代码存在一些问题,这似乎是WordPress dev新手的常见小错误。让它排序。

  1. 本地化脚本是执行此操作的正确方法。
  2. 你需要知道循环外可用的值,以及当你不在循环中时如何获得标题和永久链接。
  3. 关于你如何排队你的剧本存在一些小问题。
  4. 我们将使用一些特定功能

    • get_the_title( $ID );这将需要在循环之外的帖子ID并返回它以便在PHP中使用而不是回应它。link
    • get_peramlink( $ID )也可以在循环外工作,并返回永久链接以供PHP使用。 link
    • 我们将调整您传递给排队脚本的参数,特别是array()应该是array('jquery')以显示它对您在脚本中使用的jQuery的依赖性,我们将会排队jquery,也使用wp_register_script

    functions.php 文件

         function do_scripts()
         {  
             /* Get the ID of the current post */
             global $post;
             $ID = $post->ID;
    
             /* register the script */
             wp_register_script( 'custom', get_template_directory_uri() . '/js/scripts.js', array('jquery'), false, true );
             $script_vars = array(
                 'title'    => get_the_title( $ID ),
                 'url'      => get_permalink( $ID )
             );
    
             /* actually enqueue jquery (that ships with WP) and your custom script */
             wp_enqueue_script( 'jquery' );
             wp_enqueue_script( 'custom' );
    
             /* Localize the vairables */
             wp_localize_script('custom', 'script_vars', $script_vars);
    
        }
    
         /* If we're not in the admin section call our function on the wp_enqueue_scripts hook  */
         if ( !is_admin() ) add_action( "wp_enqueue_scripts", "do_scripts", 10 );
    

    这可以通过创建一个全局javascript对象并在包含脚本之前输出它来实现。

    scripts.js 文件中,您可以访问此对象。

     script_vars.title // will return the title
     script_vars.url // will return the permalink
    

答案 2 :(得分:1)

你不能那样做,因为PHP不处理Javascript。它只是像文本文件一样发送到浏览器。

可以使用wp_localize_script将标题传递给您的脚本。这个功能最初是为国际化/本地化而编写的,但它在插件和广告中被广泛使用。用于在PHP和PHP之间传递值的主题的JavaScript。