如何使用wp_寄存器脚本/wp_enQueue_脚本进行多个查询

时间:2018-08-30 作者:Melinda

我有一个wp\\u register\\u script/wp\\u enqueue\\u script,需要在多个状态下重用它,我该如何做?

代码如下:

  wp_register_script( \'scount\', get_template_directory_uri() . \'/assets/js/us-states.js\' );

  // Localize the script with our data that we want to use
  $args = array(
    \'post_type\' => \'property\',
    \'fields\' => \'ids\',
    \'meta_query\' => array(
    \'relation\' => \'AND\',
     array(
         \'key\' => \'state\',
         \'value\' => \'NC\'
         ),
     array(
         \'key\' => \'available\',
         \'compare\' => \'=\',
         \'value\' => \'1\'
     )
     )
  );
  $results = new WP_Query($args);
  $completed = count($results->posts);
  wp_localize_script( \'scount\', \'completed\', $completed );

  // The script can be enqueued now or later.
  wp_enqueue_script( \'scount\' );
所以我需要在美国的每个州都使用这个。我有一个仅用于NC。我试图复制并更改到另一个州,它起作用了,但它增加了美国的州。js文件两次,所以如果我对每个州都这样做,我会得到美国各州。js文件添加了50次!!

我需要使用completed将结果添加到json文件中:(json.stringify(completed))

每个州我都需要。

非常感谢。

1 个回复
SO网友:filipecsweb

如果我理解正确,您必须对代码进行一些重构并调用wp_localize_script 战略上。

根据你的代码,我认为你有两个选择。

你可以打电话wp_localize_script 一次,添加任意多个值$l10n 阵列并仅创建一个$object_name 在JS中使用wp_localize_script 你需要多少次,但你的$object_name 每次调用时都需要保持唯一性

function register_scount_script() {
    // As a best practice use `get_stylesheet_directory_uri` instead of `get_template_directory_uri`, unless you really know what you are doing.
    wp_register_script( \'scount\', get_stylesheet_directory_uri() . \'/assets/js/us-states.js\', array( \'jquery\' ), \'1.0.0\', true );
}

/**
 * First method. You will call `wp_localize_script` once, add as many values as you want within $l10n array
 * and create only one $object_name to be used within JS.
 */
function localize_scount_script_first_method() {
    $args = array(
        \'post_type\'  => \'property\',
        \'fields\'     => \'ids\',
        \'meta_query\' => array(
            \'relation\' => \'AND\',
            array(
                \'key\'   => \'state\',
                \'value\' => \'NC\'
            ),
            array(
                \'key\'     => \'available\',
                \'compare\' => \'=\',
                \'value\'   => \'1\'
            )
        )
    );

    $results      = new WP_Query( $args );
    $nc_completed = count( $results->posts );

    // At this point, you can execute the query again and just change \'state\' key value to \'SC\', for instance.
    // Then you would have/create a new variable $sc_completed.

    /**
     * @param string $handle Script handle the data will be attached to.
     * @param string $object_name Name for the JavaScript object. Passed directly, so it should be qualified JS variable.
     * @param array $l10n The data itself. The data can be either a single or multi-dimensional array.
     */
    wp_localize_script(
        \'scount\',
        \'completed\',
        array(
            \'nc_completed\' => $nc_completed, // This value would be accessible in JS using var completed.nc_completed
//          \'sc_completed\' => $sc_completed // This value would be accessible in JS using var completed.sc_completed
        )
    );

    // Make sure you reset $wp_query global. If not you might have trouble somewhere else in your code.
    wp_reset_query();
}

/**
 * Second method. You will call `wp_localize_script` as many times as you need, but your $object_name needs to be unique
 * for each time you call it.
 */
function localize_scount_script_sec_method() {
    $args = array(
        \'post_type\'  => \'property\',
        \'fields\'     => \'ids\',
        \'meta_query\' => array(
            \'relation\' => \'AND\',
            array(
                \'key\'   => \'state\',
                \'value\' => \'NC\'
            ),
            array(
                \'key\'     => \'available\',
                \'compare\' => \'=\',
                \'value\'   => \'1\'
            )
        )
    );

    $results   = new WP_Query( $args );
    $completed = count( $results->posts );

    /**
     * @param string $handle Script handle the data will be attached to.
     * @param string $object_name Name for the JavaScript object. Passed directly, so it should be qualified JS variable.
     * @param array $l10n The data itself. The data can be either a single or multi-dimensional array.
     */
    wp_localize_script(
        \'scount\',
        \'nc_completed\', // Needs to be unique!
        array(
            \'completed\' => $completed, // This value would be accessible in JS using var nc_completed.completed
        )
    );

    // At this point you could perform a new query and localize again:
    $args = array(
        \'post_type\'  => \'property\',
        \'fields\'     => \'ids\',
        \'meta_query\' => array(
            \'relation\' => \'AND\',
            array(
                \'key\'   => \'state\',
                \'value\' => \'SC\' // Changed to SC.
            ),
            array(
                \'key\'     => \'available\',
                \'compare\' => \'=\',
                \'value\'   => \'1\'
            )
        )
    );

    $results   = new WP_Query( $args );
    $completed = count( $results->posts );

    /**
     * @param string $handle Script handle the data will be attached to.
     * @param string $object_name Name for the JavaScript object. Passed directly, so it should be qualified JS variable.
     * @param array $l10n The data itself. The data can be either a single or multi-dimensional array.
     */
    wp_localize_script(
        \'scount\',
        \'sc_completed\', // Needs to be unique!
        array(
            \'completed\' => $completed, // This value would be accessible in JS using var sc_completed.completed
        )
    );

    // Make sure you reset $wp_query global. If not you might have trouble somewhere else in your code.
    wp_reset_query();
}

function enqueue_scount_script() {
    wp_enqueue_script( \'scount\' );
}

add_action( \'wp_enqueue_scripts\', \'register_scount_script\' );
add_action( \'wp_enqueue_scripts\', \'localize_scount_script_first_method\', 11 );
//add_action( \'wp_enqueue_scripts\', \'localize_scount_script_sec_method\', 11 );
add_action( \'wp_enqueue_scripts\', \'enqueue_scount_script\', 12 );
确保始终使用wp_enqueue_scripts 行动挂钩。

结束

相关推荐