尝试将在自定义POST中定义的PHP变量放入到一个Java脚本文件中。空值。使用wp_LOCALIZE_SIPT

时间：2017-02-11 作者：lycrake

我试图获取一个PHP变量，该变量是从自定义页面上的一些自定义字段创建的(page-custom.php) 插入到Javascript文件中。

自定义字段工作正常，图像显示在页面上，但我无法将它们放入Javascript文件中。

在我的header.php 在顶部，我有：

    function drum_scripts() {
        wp_enqueue_script( \'animated\', get_template_directory_uri() . \'/js/animated.js\' );
        wp_localize_script(\'animated\', \'MyScriptParams\', array(
            \'foo\' => $meta[\'image\'],
            )
        ); 
    }

    add_action( \'wp_enqueue_scripts\', \'drum_scripts\' );
在我的javascript中，我有：

    $(function() {
        $(".animated").hover(
            function() {
                $(this).attr("src", MyScriptParams.foo);  
            },
            function() {
                $(this).attr("src", "img/gallery1_500px.jpg");
            }                         
        );                  
    });
并且在page-custom.php 我有：

    $custom_query = new WP_Query( $args );
    while ($custom_query->have_posts()) : $custom_query->the_post();

    $meta = get_post_meta( $post->ID, \'your_fields\', true );
javascript正在工作，但它并没有将变量拉过。我知道这与代码的顺序有关，但我不确定该放在哪里。

下面是页面自定义的完整代码。php

<?php get_header(); ?>

<!-- CONTAINER FOR CONTENT -->      
<div class="container">      

        <div class="row">

    <?php 

            $args =  array( 
               \'post_type\' => \'drummers\',
               \'orderby\' => \'menu_order\',
               \'order\' => \'ASC\'
);

            $custom_query = new WP_Query( $args );
                while ($custom_query->have_posts()) : $custom_query->the_post();

            //GETS THE POST ID FROM WP_QUERY
            $post_id = get_the_ID();



            //PULLS THE DATA FROM THE CUSTOM FIELDS BOX ON DRUMMERS PAGE
            $meta = get_post_meta( $post->ID, \'your_fields\', true );

            wp_localize_script(\'animated\', \'MyScriptParams\', array(
            \'foo\' => $meta[\'image\']

        )
    );

echo $meta[\'image\'];echo $meta[\'image\'];echo $meta[\'image\'];


    ?>

    <div class="col-md-4">

        <?php if ( has_post_thumbnail() ) {
                the_post_thumbnail(\'\', array( \'class\' => "img-fluid animated drummers_face$post_id"));
        } ?>


          <h2 class="drummers_face_detail<?php echo $post_id ?>"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
          <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>

        <h1>Text Input</h1><?php echo $meta[\'text\']; ?>

        <br />
        <img src="<?php echo $meta[\'image\']; ?>">

        <?php echo $meta[\'image\']; ?>


     </div><!-- END OF COLUMN-->

    <?php

            endwhile;
    ?>

     </div> <!-- END OF ROW -->

<?php get_footer(); ?>

1 个回复
最合适的回答,由SO网友:Fayaz 整理而成

使用添加JavaScriptwp_enqueue_script:

首先，尽管它可能会起作用（如果您在调用之前添加它wp_head()), 但你不应该添加wp_enqueue_script 代码输入header.php. 使用主题functions.php 文件。

其次，代码中的以下行有问题：

wp_enqueue_script( \'animated\', get_template_directory_uri() . \'/js/animated.js\' );
正如你所用jQuery 在您的animated.js 文件，您必须说它取决于jQuery. 下面是代码的实现方式：

wp_enqueue_script( \'animated\', get_template_directory_uri() . \'/js/animated.js\', array( \'jquery\' ) );
第三，您已分配$meta 变量输入page-custom.php 模板文件，因此您只能调用wp_localize_script 之后，否则变量将保留null. 此外，由于此模板文件将在header.php, 您必须添加/js/animated.js 在页脚中，如下所示：

wp_enqueue_script( \'animated\', get_template_directory_uri() . \'/js/animated.js\', array( \'jquery\' ), null, true );
那么，您添加的最终代码/js/animated.js 将（在functions.php):

    // This CODE should be in functions.php file
    function drum_scripts() {
        wp_enqueue_script( \'animated\', get_template_directory_uri() . \'/js/animated.js\', array( \'jquery\' ), null, true );
    }

    add_action( \'wp_enqueue_scripts\', \'drum_scripts\' );

放置wp_localize_script 一旦变量可访问：

因为您正在分配$meta 变量输入page-custom.php 文件，您应该将调用添加到wp_localize_script 有：

    $custom_query = new WP_Query( $args );
        while ($custom_query->have_posts()) : $custom_query->the_post();

    $meta = get_post_meta( $post->ID, \'your_fields\', true );

    // $meta[image] is only accessible after the above CODE is executed
    wp_localize_script(\'animated\', \'MyScriptParams\', array(
            \'foo\' => $meta[\'image\']
        )
    );
带有jQuery的JavaScript代码：jQuery $ 变量不能在该范围内定义。因此，不要使用此代码：

    $(function() {
        $(".animated").hover(
            function() {
                $(this).attr("src", MyScriptParams.foo);  
            },
            function() {
                $(this).attr("src", "img/gallery1_500px.jpg");
            }                         
        );                  
    });
在主题中使用以下代码/js/animated.js 文件：

    (function($) {
        // assuming you have .animated CSS class in the right place
        $(".animated").hover(
            function() {
                $(this).attr("src", MyScriptParams.foo);  
            },
            function() {
                $(this).attr("src", "img/gallery1_500px.jpg");
            }                         
        );
    })(jQuery);
现在，如果代码中的其他内容都正常，那么修改后的代码应该可以工作了。

您可以学习WordPress执行顺序from Here, 如果你想知道在哪里发生了什么。

更新：

您的page-custom.php 看起来一点都不对劲。您的PHP文件中肯定存在错误&；许多错误-这超出了这个问题的范围。然而，为了确保wp_localize_script 正在工作，请使用下面的简单代码page-custom.php 文件（仅此代码，而非您的代码）：

    <?php get_header(); ?>
    <!-- CONTAINER FOR CONTENT -->
    <div class="container">
        <div class="row">
        <?php
            wp_localize_script(\'animated\', \'MyScriptParams\', array(
                \'foo\' => "It Works!"
                )
            );
        ?>
        </div> <!-- END OF ROW -->
    <?php get_footer(); ?>
调试问题的经验法则是先把简单的事情做好&；然后从中积累。我们不能同时解决许多问题。如果使用上述代码后，您的警报为It Works!, 然后您就可以确定问题出在PHP代码中。

标签： php   query   小码农  

相关推荐

无法在WordPress中通过PHP显示图像

我有一个奇怪的问题，当我尝试使用PHP输入图像标记的源代码时，它会在检查器中显示以下错误<img src=(unknown) alt=\"\"> 这个代码片段为我提供了正确的url，通过查看CPanel并粘贴和复制地址进行检查，但当我尝试通过php输入它时，不会显示图像$image = wp_get_attachment_image_src( $post_thumbnail_id); //echo($image[0]); ?> <img src=