Использование параметров PHP в слайдере Jquery

Question

Так что я не уверен, что я упустил что-то очевидное в этом. (Я думаю, что это может быть связано с несовместимостью двух языков, поскольку, насколько я знаю, PHP интерпретируется на сервере?)… Хотя я довольно плохо знаком с PHP.

Я использую замечательные Jquery Plugin ResponsiveSlides на первой странице моего собственного сайта на основе WordPress. Это прекрасно работает с этим кодом:

$(".home-slides").responsiveSlides({
auto: true,
speed: 500,
pause: true,
timeout: 7000,
pager: true,
nav: true,
maxwidth: 1280,
namespace: "home-slides",
prevText: "",
nextText: "",
navContainer:".home-slides",
manualControls: "#home-tabs"
});

Тем не менее, я хочу иметь возможность позволить клиенту иметь некоторый контроль над плагином, используя настраиваемые поля на домашней странице в бэкэнде WordPress. Эти настраиваемые поля можно легко вызвать и правильно отобразить в предупреждении:

var speed = <?php echo the_field( "speed" ); ?>;
var timeout = <?php echo the_field( "timeout" ); ?>;

Однако, если я попытаюсь вставить их как переменные или напрямую с помощью приведенного выше PHP, мне не повезет. Самое близкое, что у меня есть:

$(".home-slides").responsiveSlides({
auto: true,
speed: <?php echo the_field( "speed" ); ?>,
pause: true,
timeout: <?php echo the_field( "timeout" ); ?>,
pager: true,
nav: true,
maxwidth: 1280,
namespace: "home-slides",
prevText: "",
nextText: "",
navContainer:".home-slides",
manualControls: "#home-tabs"
});

Который правильно отображается в источнике живой страницы (т.е. timeout: 7000 и т. д.), но ломает слайдер. Есть ли способ заставить это работать? Я что-то пропустил?

Спасибо вам всем!

РЕДАКТИРОВАТЬ:

Благодаря предложению Тома Крика, я могу правильно повторить сценарий. Это приводит к правильному сценарию в источнике живой страницы, но ползунок все еще не работает. Однако, если я скопирую тот же сценарий из исходного кода страницы в реальный файл и протестирую его, он отлично работает. По какой-то причине кажется, что браузер игнорирует скрипт при отображении PHP.

Answer 1

echo '<script type="text/javascript">
    $(".home-slides").responsiveSlides({
    auto: true,
    speed: '. the_field("speed") .',
    pause: true,
    timeout: '. the_field("timeout") .',
    pager: true,
    nav: true,
    maxwidth: 1280,
    namespace: "home-slides",
    prevText: "",
    nextText: "",
    navContainer:".home-slides",
    manualControls: "#home-tabs"
});
</script>';

Answer 2

Чтобы включить плагины jQuery в WordPress, нужно поставить сценарии в правильном порядке (с wp_enqueue_scripts) и передать наши пользовательские метаданные в файл JavaScript (с wp_localize_script).

Простой пример, обратите внимание, что файлы JS находятся внутри подпапки плагина /my-plugin/js/, MAIN-PLUGIN-FILE.js соответствует файлам плагина jQuery (слайдер, плеер, галерея), добавить больше wp_register_script по мере необходимости. И CUSTOM-CONFIG.js файл содержит инициализацию плагина.

plugin.php

<?php
/**
 * Plugin Name: (SO) Simple jQuery plugin enqueue
 * Plugin URI: http://stackru.com/a/25531753/1287812
 * Author: brasofilo 
*/

class SO_25527828
{
    private $plugin_url;

    public function __construct()
    {
        $this->plugin_url = plugins_url( '/', __FILE__ );
        add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
    }

    public function enqueue()
    {
        # Enqueue only on specific places
        # http://codex.wordpress.org/Conditional_Tags
        if( !is_home() && !is_front_page() )
            return;

        # Can be anything from unheap.com
        wp_register_script(
            'main_plugin',
            $this->plugin_url . 'js/MAIN-PLUGIN-FILE.js'
        );

        # You'll have to play with dependencies, on_footer and do separately wp_enqueue_script's
        # to achieve the exact HTML that the jQ plugin requires 
        wp_enqueue_script( 
            'config_plugin', 
            $this->plugin_url . 'js/CUSTOM-CONFIG.js', 
            array( 'jquery', 'main_plugin' ), // dependencies
            false, // version
            true // on footer
        );

        # Pass PHP values to JS
        wp_localize_script( 
            'config_plugin', 
            'my_cfg', 
            array(
                'url'    => $this->plugin_url, // To load stuff from the plugin's dir
                'option' => get_option( 'my_option' ), // Your custom config values, simple value or full object
            )
        );
    }
}
new SO_25527828();

CUSTOM-CONFIG.js, my_cfg var напечатан в заголовке и содержит значения, которые мы локализовали

jQuery(document).ready(function($) 
{   
    console.dir(my_cfg);
});