Как добавить встроенный css / js в короткий код

Я работаю над созданием короткого кода, который предназначен для изменения css и js динамически для этого короткого кода в зависимости от ситуации. Теперь проблема в том, что я не понимаю, как использовать add_action() внутри add_shortcode() . Позвольте мне привести пример кода фрагмента, чтобы вы, ребята, могли лучше понять меня:

 add_shortcode('example', function( $atts ) { //extracting the shortcode attributes extract( shortcode_atts( array( 'value1' => null, 'value2' => null, 'value3' => null ), $atts ) ); //Now here I wll do my code for the shortcode // But the shortcode needs some js and css to work // so, I'm trying like this //For the CSS add_action('wp_head', function() { echo '<style type="text/css"> .class { background-color: '. $value2 .'; } </style>'; }); //For the JS add_action('wp_footer', function() { echo '<script type="text/javascript"> var a = '. $value3 .' </script>'; }); }); 

Теперь очевидно, что это не работает, поэтому я надеялся, что кто-нибудь из вас поможет мне правильно подойти к подобной вещи.

Если вы можете, пожалуйста, помогите вместо отрицательного голосования вопрос.

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

Глядя на порядок выполнения перехватчиков, вы можете понять, как это сделать.

Во-первых, вы должны избегать эхо-скриптов. Скорее, wp_enqueue_script (который совпадает с wp_enqueue_style ) – это метод, который следует использовать, если вы хотите избежать конфликтов между сценариями. Поскольку скрипты идут в голову, вы хотите, чтобы ваше действие было объявлено до wp_head . Учитывая, что вам нужно извлечь информацию из сообщения, вы должны подключиться после того, как WP знает, какая публикация находится на этой странице. Этот крючок – wp . Здесь вы должны предварительно оценить содержимое сообщения, чтобы извлечь соответствующий короткий код с помощью регулярного выражения . Примерно ваша функция будет выглядеть так:

 add_action ('wp', 'add_shortcode_script'); function add_shortcode_script () { global $post; ... use regex to scan $post->$post_content for your shortcode ... and extract $value2 and $value3 wp_enqueue_script (...vars based on $value2...); wp_enqueue_style (...vars based on $value3...); } 

Выше это то, что вам нужно, если короткий код указывает на добавление файла css / js. В вашем примере вы добавляете только фрагмент, который предположительно изменяет поведение основного файла css / js. Это означает, что вы должны использовать wp_add_inline_script и wp_add_inline_style . Последняя часть кода затем становится:

  wp_enqueue_script ('my_script','http:/.../main.js'); wp_enqueue_style ('my_style','http:/.../main.css'); wp_add_inline_script ('my_script', $string_based_on_value2); wp_add_inline_style ('my_style', $string_based_on_value3); 

Если вы думаете об этом, wp_head уже запущен во время анализа вашего wp_head (содержимое сообщения приходит намного позже, чем <head> страницы). Так что это не сработает.

(См. Этот вопрос для процесса загрузки WordPress)

Вы можете напрямую распечатать JS и CSS там (не разрешено по спецификации HTML, но браузер понимает это просто отлично) или переместить все в нижний колонтитул.