Лучшая практика для включения JS (с PHP) в файл функций WordPress

Я создаю пользовательскую тему WordPress и задаю быстрый вопрос относительно WordPress и функций.

У меня есть 500 строк jQuery которые запускаются для части моей настраиваемой панели admin. Код 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'); }); } } 

Пример PHP внутри js

 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 в приведенном выше утверждении?

У меня есть несколько способов сделать эту работу, но я хочу сделать это ЛУЧШИМ способом. Мысли?

Я делаю небольшой трюк, чтобы сделать это в моем плагине WordPress Easy Retweet .

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

Надеюсь, это вам полезно

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