Лучшее использование добавления JS / CSS пользователя в тему с плагином

Я хочу знать, как лучше использовать добавление пользовательских JS/CSS к теме.

Я создал небольшой плагин, в котором есть раздел, позволяющий пользователям добавлять CSS/JS в свою тему. Теперь я пытаюсь понять, что это лучший способ сделать это:

  1. Сохраните весь код внутри настраиваемой базы данных и загрузите его как обычный код внутри верхнего / нижнего колонтитула.

  2. Сохраните весь код внутри пользовательского js / css-файла (без DB) и добавьте файл внутри / header / footer

Обратите внимание: эти пользовательские JS / CSS-файлы настраиваются пользователем пользователями, поэтому пользователь может добавлять собственные правила внутри плагина.

Какое лучшее, наиболее безопасное решение?

Вчера я столкнулся с подобной проблемой. Тема, с которой я работал, добавила 500 строк внутренних стилей в заголовок, который абсолютно сводит меня с ума! Я закончил поиск умного решения онлайн, чтобы обойти это, которое вы могли бы использовать для CSS. Сторона JavaScript я объясню внизу.

— :: CSS :: —

Есть несколько ключевых моментов в том, как работает этот код. Поскольку вам нужно обрабатывать переменные в ваших CSS-файлах, мы должны убедиться, что указанный файл поддерживает PHP и имеет доступ к функциям WordPress, чтобы получить какие-либо пресеты. Мы не можем сделать это, используя только файл .css поэтому нам нужно обмануть сервер, представив наш PHP-файл как CSS.

Это чисто для целей тестирования: создайте файл с именем customcss.php со следующим кодом, обратите внимание на функцию PHP header() необходимую для того, чтобы сообщить серверу, что мы собираемся показать text/css :

 <?php header( "Content-type: text/css; charset: UTF-8" ); $test = 'blue'; ?> body {color: <?php echo $test; ?>;} 

Затем нам нужно загрузить этот файл в контексте WordPress, чтобы мы по-прежнему имели доступ к таким функциям, как get_post_meta() или любые global переменные. Давайте добавим этот «css» файл, используя WP AJAX . Обратите внимание, что при включении или требовании мы должны использовать абсолютные пути. Это будет искать вашу папку плагина и в каталоге /css/ для вашего php-файла «css».

 function plugin_dynamicss() { include_once( plugin_dir_path( __FILE__ ) . '/css/customcss.php' ); exit; } add_action( 'wp_ajax_plugin_dynamicss', 'plugin_dynamicss' ); add_action( 'wp_ajax_nopriv_plugin_dynamicss', 'plugin_dynamicss' ); 

Наконец, нам нужно на самом деле поставить в очередь наш CSS с помощью wp_enqueue_scripts hook:

 function plugin_enqueue_css() { wp_enqueue_style( 'dynamicss', admin_url( 'admin-ajax.php' ) . '?action=plugin_dynamicss', array(), '', 'screen' ); } add_action( 'wp_enqueue_scripts', 'plugin_enqueue_css' ); 

— :: JavaScript :: —

Перечисление JS с переменными намного проще с помощью wp_localize_script() . Все, что вам нужно сделать, это зарегистрировать скрипт , локализовать скрипт с данными и, наконец, поставить в очередь скрипт .

 function plugin_enqueue_js() { wp_register_script( 'plugin_js', plugin_dir_path( __FILE__ ) . '/js/customjs.js' ); $data = array( // Define Our Data 'robert' => 'bobbert', 'nine' => 'nein' ); wp_localize_script( 'plugin_js', 'plugin_data', $data ); // Localize Our Data wp_enqueue_script( 'plugin_js' ); } add_action( 'wp_enqueue_scripts', 'plugin_enqueue_js' ); 

Второй параметр wp_localize_script() фактически определяет наше имя объекта JS. В нашем объекте, если мы хотим получить и использовать одно из значений, мы можем сказать: alert( plugin_data.robert ); который будет предупреждать экран «bobbert».

Вероятно, вы натолкнулись на несколько разных методов для включения JavaScript и CSS.

В WordPress Codex есть один основной метод.

Безопасный и рекомендуемый метод добавления JavaScript на страницу с созданной WordPress и WordPress Theme или Plugin осуществляется с помощью wp_enqueue_script () . Эта функция включает скрипт, если он еще не был включен, и безопасно обрабатывает зависимости.

Безопасный способ добавить / вставить файл таблицы стилей на созданную WordPress страницу. Используйте wp_enqueue_style( $handle, $src, $deps, $ver, $media ); Эта функция wp_enqueue_style () не возвращает значение.