在WordPress函数文件中包含JS（使用PHP）的最佳实践

Question

我正在制作一个自定义WordPress主题，并且有一个关于WordPress和Functions.php的问题需要解决。

我编写了500行jQuery代码，用于我自定义的主题管理面板的部分功能。jQuery代码位于我的functions.php文件中，在自定义管理菜单页面被显示时调用。

理想情况下，我希望将JavaScript代码从functions.php文件中移出，并使用wp_register_script + wp_enqueue_script，但是代码中也混杂了一些php代码。请看下面的示例：

//Function that Provides Options within the Menu Page
function quz_custom_theme_options(){
  global $quz_default_colors, $quz_default_fonts;

    ?>

   <style type="text/css">';

    <?php   include('admin-style.php'); ?>

   </style>';



<script type="text/javascript">
function asf_toggle_box(element)
{
  if (jQuery(element).next('.expandable').is(':visible') )
  {
    jQuery(element).next('.expandable').fadeOut('slow', function(){
      jQuery(element).val('+ Settings');
      jQuery(element).next('.expandable').find('.indicator').val('');  
    });
  } else {
    jQuery(element).next('.expandable').fadeIn('slow', function(){
      jQuery(element).val('- Settings');
      jQuery(element).next('.expandable').find('.indicator').val('visible');  
    });
  }
}

在js中使用PHP的示例

function quz_reset_colors(t)
  {
    var theme_name = jQuery(t).attr('id').substr(6);
    var color_fields = jQuery(t).parent().find('div.color_admin_area').find('.color-input-wrap > input[type="text"]');
    // jQuery(color_fields).css('border', '1px solid red');
    // console.log(color_fields);
    var colors = new Array();
    <?php
    foreach ($quz_default_colors as $key => $value)
    {
      echo 'var ary = new Array(\'' . implode('\',\'', $value) . '\');' . "\r\n";
      echo 'colors[\'' . $key . '\'] = ary;' . "\r\n";
    }
    ?>
    jQuery(color_fields).each(function(index, elem){
      jQuery(elem).val(colors[theme_name][index]);    
    });

什么是最好的处理方式？我是否应该将所有的JS放在单独的php文件中，并使用include('my_script.php');，就像上面语句中的CSS一样？我有多种方法可以使其工作，但我想要做到最好。你有什么想法吗？

- user1721855

---

哇，这编程真难啊...我也在做类似的事情，但是当你回到代码进行调试时，特别是有500行的时候，这更加令人困惑...我赞扬你。 - Clint Bugs

Answer 1

我在我的Easy Retweet WordPress Plugin中使用了一个小技巧来实现这个。

// Enqueue the script
add_action('template_redirect', 'add_script');

function add_script() {
    wp_enqueue_script('retweet', get_option('home') . '/?retweetjs');
}

add_action('init', 'deliver_js');

function deliver_js() {
    if ( array_key_exists('retweetjs', $_GET) ) {

        header('Content-Type: text/javascript');
        print_retweet_js($options);

        // die after printing js
        die();
    }
}

function print_retweet_js($options) {
     include_once('path/to/your/js/script.php');
}

希望这对你有所帮助。

- Sudar

---

如果这个答案解决了你的问题，希望你能接受它。 - Sudar

抱歉，我对StackOverflow系统还不熟悉。 :) - user1721855

Answer 2

function theme_script() {
?>
    < script type="text / javascript" >
      here is your script
    < /script >
<?php
 wp_enqueue_script( 'theme_script_id', get_bloginfo('template_directory').'/js/theme_script.js', array( 'jquery' ) );
}
 add_action( 'wp_print_scripts', 'theme_script' );

- softsdev

---

这样行不通，看看代码，它充满了PHP。它需要在一个以.php扩展名结尾的文件中，首先通过PHP解释器运行。 - McNab