在WordPress函数文件中包括JS(与PHP)的最佳实践 [英] Best Practice for Including JS (with PHP) in WordPress Functions file

问题描述

我正在构建自定义WordPress主题，并对WordPress和Functions.php有一个快速的疑问

I'm building a custom WordPress theme and have a quick question regarding WordPress and the Functions.php

我有500行jQuery用于我的自定义主题管理面板的一部分. jQuery代码位于我的functions.php文件内部，在显示自定义管理菜单页面时调用.

I've got 500 lines of jQuery that run for a portion of my custom theme admin panel. The jQuery code is located inside of my functions.php file, called when the custom admin menu page is displayed.

理想情况下，我想将JavaScript移出functions.php文件，并使用wp_register_script + wp_enqueue_script，但我也将一些php代码与脚本混合在一起.见下文:

Ideally, I would like to move the JavaScript out of the functions.php file and use wp_register_script + wp_enqueue_script, but I also have some php code mixed in with the script. See below:

//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文件中，并像上面声明中使用 CSS 一样使用include('my_script.php');?

What is the best way to handle this? Should I just put all the JS in a separate php file and use include('my_script.php'); Like I've done with the CSS in the above statement?

我有多种方法可以完成这项工作，但是我想做到最好.有想法吗?

I have multiple ways of making this work, but I want to do it the BEST way. Thoughts?

推荐答案

我在我的轻松转推WordPress插件.

// 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');
}

希望这对您有用

这篇关于在WordPress函数文件中包括JS(与PHP)的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！