php - 在 wordpress 的 javascript 中使用 php

Question

我在名为 custom.js 的 javascript(jquery) 文件中获得了以下代码:

    blabla = new Date(2014, 06 - 1, 2);
        $('.days').countdown({
        until: blabla,
        layout: '{dn} {dl}',

1.现在我希望用户能够更改上述日期。我创建了一个名为 theme-options.php 的主题选项页面

2.我正在使用<?php require_once('theme-options.php'); ?>在 functions.php 中链接到 theme-options.php。

3.这是theme-options.php:

<?php
add_action('admin_menu', 'director_create_menu');
function director_create_menu() {
add_submenu_page( 'themes.php', ' Theme Options',
'Theme Options', 'administrator', __FILE__,
'director_settings_page');
add_action( 'admin_init', 'director_register_settings' );
}
function director_register_settings() {
register_setting( 'director-settings-group', 'director_date' );
}

div class="wrap">
  <h2>Theme Settings</h2>
  <form id="landingOptions" method="post" action="options.php">
    <?php settings_fields( 'director-settings-group' ); ?>
    <table class="form-table">
<tr valign="top">
          <th scope="row">Date:</th>
          <td>
            <input type="text" placeholder="2014, 06 - 1, 2" name="director_date"
            value="<?php print get_option('director_date');
            ?>" />
          </td>
        </tr>
<p class="submit">
        <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
        </p>
      </form>
    </div>
    <?php } ?>

基本上发生的事情是有一个主题选项页面。用户在其中给出一个日期。现在我想在 javascript 文件中使用那个日期。 如果我必须在 index.php 中使用它，那就是

<?php $date = get_option('director_date'); ?>
<?php if( $date ) : ?> <?php echo $date; ?><?php endif; ?>);

.然而这是javascript。我如何在此处执行此类操作？

替代路径但仍然不起作用。将 custom.js 重命名为 custom.php 并添加:

           gapinvite = new Date(<?php $date = get_option('director_date'); ?>
           <?php if( $date ) : ?> <?php echo $date; ?><?php endif; ?>);
           $('.days').countdown({
           until: gapinvite,
           layout: '{dn} {dl}',

在 functions.php 中:

<?php require_once('js/custom.php'); ?>

Answer 1

看看wp_localize_script .虽然表面上是为了翻译，但它可以让您将 PHP 值传递给 JS。 Here's a fairly good walkthrough on how to use it .

编辑:

首先，确保您正在使用 wp_enqueue_script 加载您的 JS，因为您需要引用句柄。在您的 functions.php 中，您将拥有:

$date = get_option('director_date');
wp_enqueue_script('my-script', get_stylesheet_directory_uri() . 'js/my-script.js');
wp_localize_script('my-script', 'my_script_vars', array(
        'date' => $date
    )
);

wp_localize_script 采用三个参数:

1. 要将变量对象传递到的脚本的句柄。这应该与 wp_enqueue_script
中使用的句柄匹配
2. 要创建的变量对象的名称。您将使用此名称来引用 JS 中的对象
3. 传递给对象的变量数组。在这里，我只是传递我们之前声明的 $date 变量，但显然您可以传递任何您想要的。

然后在 my-script.js 中，您可以非常简单地访问此对象:

var $date = my_scripts_vars.date;
alert($date); // Or do whatever you want with it