Intereting Posts
Как заставить WordPress использовать протокол для самостоятельной загрузки файлов? WooCommerce – Заказать по SKU с буквами и цифрами? Когда следует использовать add_action при регистрации / вставка сценариев woocommerce: при добавлении или удалении элементов в корзину требуется несколько секунд для чтения изменений? Добавьте расширение .html только на одну страницу на моем сайте WordPress Короткие коды не разрешены в ответе вызова AJAX Запрос нескольких пользовательских полей WordPress с помощью идентификатора AND Синхронизация только определенных пользователей и ролей между многосайтовой / многосетевой сетью Как сообщить об ошибках JavaScript в панели администратора База данных TV Show – лучший способ ее структурирования? Как получить постоянную ссылку rss-канал? Родительские и детские категории Различные заголовки для каждой страницы в дочерней теме двадцать тринадцать фильтровать только одну категорию, ее подкатегории и сообщения Локализация, escape html элементы среднего предложения

Как добавить таблицы стилей только на страницы со специальным коротким кодом?

Я выполняю функцию на страницах, где используется shortcode [make-me-a-map] . Он помещает javascript на страницу и создает карту. Эта часть работает отлично (woot!), Но у меня возникают проблемы с добавлением таблиц стилей только к тем страницам.

functions.php (текущий)

 add_shortcode("make-me-a-map", "create_new_map"); add_action("wp_head", "style_my_new_map"); function create_new_map () { global $new_map_called_for; $map_called_for = true; wp_register_script('make-a-new-map', get_template_directory_uri() . '/js/new-map.js', array('jquery'), '0.1', true); wp_enqueue_script('make-a-new-map'); } function style_my_new_map() { global $new_map_called_for; if ($new_map_called_for == true) { $tDir = get_template_directory_uri(); // Echo stylesheets because wp_register_style & wp_enqueue_style don't work atm // And add_action('wp_enqueue_script', 'style_my_new_maps') with those functions would add style to all pages // Not just the ones with [make-me-a-map] shortcode echo "<link rel='stylesheet' href='", $tDir, "/css/new-map.css' />", PHP_EOL; // Echo Javascript straight to page (couldn't do it with wp_enqueue_script) to let js code know the template directory echo '<script type="text/javascript">var templateDir = "', get_template_directory_uri(), '";</script>', PHP_EOL; $map_called_for = false; } } 

К сожалению, это, похоже, не работает. Стили добавляются ко всем страницам.

Я не использовал wp_register_style & wp_enqueue_style, потому что эта ошибка все еще добавляет теги <Link /> к нижнему колонтитулу из этих функций.

Я мог бы использовать add_action("wp_enqueue_scripts", "style_my_new_map") вместо add_action('wp-head', "style_my_new_map") но насколько я могу видеть и проверить, нет никакой разницы? Все еще добавляет таблицы стилей ко всем страницам.

Поэтому мой вопрос на самом деле состоит из двух частей: 🙂

  1. Почему текущие функции.php не работают и добавляют стили ко всем страницам? Я не уверен, что это global вызов или оператор if
  2. Каков наилучший способ добавить таблицы стилей в заголовок только страниц, на которых используется указанный выше код, предполагая, что я не буду знать идентификаторы страниц и т. Д.?

Заранее спасибо! п

Solutions Collecting From Web of "Как добавить таблицы стилей только на страницы со специальным коротким кодом?"

2 вопроса так 2 ответа 🙂

Почему текущие функции.php не работают и добавляют стили ко всем страницам? Я не уверен, что это глобальный вызов или оператор if …

Это не работает из-за порядка, в котором эти функции вызываются. Вызов обратного вызова the_content вызывается во время содержимого сообщения рендеринга (скорее всего, the_content вызов the_content ).

Оба wp_enqueue_scripts и wp_head вызывают гораздо раньше: wp_head где-то в ваших файлах header.php тем и wp_enqueue_scripts во wp_head вызова wp_head .

Каков наилучший способ добавить таблицы стилей в заголовок только страниц, на которых используется указанный выше код, предполагая, что я не буду знать идентификаторы страниц и т. Д.?

Я не думаю, что есть такой «лучший» способ. Это не очень хорошая идея. Браузеры кэшируют файлы CSS. Поэтому, если у вас одинаковый CSS на всех страницах, браузер получит его только один раз. Если для разных страниц есть много файлов CSS, браузеру придется получить все из них. Поэтому я бы вообще этого не делал и включил эти стили CSS в глобальный файл css.

Хотя, если вы должны включить его только на страницы, использующие этот короткий код, тогда (2 решения, выбор лучше для вас, я думаю, что 2-й лучше) …

  1. Вы можете добавить эти стили в виде встроенных стилей. Просто будьте осторожны, чтобы не включать их много раз. Поэтому выведите их с помощью своего короткого кода и убедитесь, что они будут напечатаны только один раз.
  2. Поскольку сообщения уже выбраны, когда wp_head / wp_enqueue_scripts , вы можете добавить некоторую функцию в этот крючок, пропустить выбранные сообщения, проверить, содержат ли они ваш короткий код и вставлять в очередь ваш CSS, если это необходимо. (Конечно, это будет не очень эффективно).

Загрузка сценариев и стилей динамически с использованием короткого кода

преимущества

  • Не выполняет поиск по всем сообщениям каждый раз при вызове короткого кода.
  • Возможность добавлять стили, а также скрипты динамически только при наличии короткого кода на странице.
  • Не использует регулярные выражения, поскольку они имеют тенденцию быть медленнее, чем strstr() или strpos() . Вы можете переключиться на регулярное выражение, если вам нужно принять аргументы.
  • Уменьшает количество звонков

Объяснение кода

  1. Находит короткие коды на странице, используя save_post только если сообщение не является ревизией и соответствует указанному post_type .

  2. Сохраняет найденные идентификаторы сообщений в виде массива с помощью add_option() с автозагрузкой, установленной в yes, если запись уже не существует. Затем он будет использовать update_option() .

  3. Использует hook wp_enqueue_scripts для вызова нашей функции add_scripts_and_styles() .

  4. Затем эта функция вызывает get_option() для извлечения нашего массива идентификаторов страниц. Если текущий $page_id находится в $option_id_array он добавляет скрипты и стили.

Обратите внимание: я преобразовал код из классов OOP Namespaced, поэтому я, возможно, что-то пропустил. Дайте мне знать в комментариях, если я это сделал.

Пример кода: поиск коротких кодов

 function find_shortcode_occurences($shortcode, $post_type = 'page') { $found_ids = array(); $args = array( 'post_type' => $post_type, 'post_status' => 'publish', 'posts_per_page' => -1, ); $query_result = new \WP_Query($args); foreach ($query_result->posts as $post) { if (false !== strpos($post->post_content, $shortcode)) { $found_ids[] = $post->ID; } } return $found_ids; } function save_option_shortcode_post_id_array( $post_id ) { if ( wp_is_post_revision( $post_id ) OR 'page' != get_post_type( $post_id )) { return; } $option_name = 'yourprefix-yourshortcode'; $id_array = find_shortcode_occurences($option_name); $autoload = 'yes'; if (false == add_option($option_name, $id_array, '', 'yes')) update_option($option_name, $id_array); } add_action('save_post', 'save_option_shortcode_id_array' ); 

Пример кода: Shortcode динамически включает скрипты и стили

 function yourshortcode_add_scripts_and_styles() { $page_id = get_the_ID(); $option_id_array = get_option('yourprefix-yourshortcode'); if (in_array($page_id, $option_id_array)) { wp_enqueue_script( $handle, $src, $deps, $ver, $footer = true ); wp_enqueue_style( $handle, $src , $deps); } } add_action('wp_enqueue_scripts', 'yourshortcode_add_scripts_and_styles'); 

Это работает для меня:

 function register_my_css () { wp_register_style('my-style', plugins_url('styles.css', __FILE__)); } function register_my_scripts () { wp_register_script('my-script', plugins_url('scripts.js', __FILE__)); } // only enqueue the scripts / styles when the short code is called function do_my_shortcode () { wp_enqueue_style('my-style'); wp_enqueue_script('my-script'); // do short code stuff... } // register css add_action('wp_enqueue_scripts', 'register_my_css'); // register javascript add_action('wp_enqueue_scripts', 'register_my_scripts'); // register shortcode add_shortcode('my-shortcode', 'do_my_shortcode'); 

Подробнее здесь: http://mikejolley.com/2013/12/sensible-script-enqueuing-shortcodes/

Вы можете подключиться к действию после запуска основного запроса и определить, нужно ли загружать стили и скрипты.

 add_action('template_include', 'custom_template_include'); function custom_template_include($template) { if (is_single() || is_page()) { global $post; if (has_shortcode($post->post_content, 'your_short_code')) { add_action('wp_enqueue_scripts, 'custom_enqueue_scripts'); } } } function custom_enqueue_scripts() { //Enqueue your stuff here. } 

Более простое решение, которое сработало для меня, заключалось в регистрации скрипта вне функции shortcode, а затем вставка в сценарий внутри функции. Затем он загружает только скрипт на страницах с помощью вашего короткого кода.

 wp_register_script('make-a-new-map', get_template_directory_uri() . '/js/new-map.js', array('jquery'), '0.1', true); wp_register_style('make-a-new-map-style', get_template_directory_uri() . '/css/new-map.css'); add_shortcode("make-me-a-map", "create_new_map"); add_action("wp_head", "style_my_new_map"); function create_new_map () { wp_enqueue_script('make-a-new-map'); wp_enqueue_style('make-a-new-map-style'); global $new_map_called_for; $map_called_for = true; } в wp_register_script('make-a-new-map', get_template_directory_uri() . '/js/new-map.js', array('jquery'), '0.1', true); wp_register_style('make-a-new-map-style', get_template_directory_uri() . '/css/new-map.css'); add_shortcode("make-me-a-map", "create_new_map"); add_action("wp_head", "style_my_new_map"); function create_new_map () { wp_enqueue_script('make-a-new-map'); wp_enqueue_style('make-a-new-map-style'); global $new_map_called_for; $map_called_for = true; } 

Описание этого метода можно найти здесь: http://mikejolley.com/2013/12/sensible-script-enqueuing-shortcodes/

Обратите внимание, что это загружает CSS в нижнем колонтитуле, что может быть нежелательно или W3C действителен. В моем случае это не проблема.

Вы можете просто сделать это так:

 // shortcode hook add_shortcode("make-me-a-map", "create_new_map"); // shortcode callback function style_my_new_map() { global $new_map_called_for; if ($new_map_called_for == true) { wp_register_script('make-a-new-map', get_template_directory_uri() . '/js/new-map.js', array('jquery'), '0.1', true); wp_enqueue_script('make-a-new-map'); // the rest of your codes } } 

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

add_shortcode("make-me-a-map", "create_new_map", 9999);

Я тестировал его, и он работает.

Загрузка сценариев и стилей динамически с использованием короткого кода

Это расширенный код для решения, предоставленного Commandz выше.

Я нашел его метод лучшим и более выполнимым, поскольку опция базы данных доступна почти на всех крючках.

Он изменяется, чтобы найти вхождения коротких кодов только для текущего содержимого сообщения, вместо того, чтобы проходить через все сообщения, что может быть медленнее, когда количество сообщений велико.

Он изменяется здесь в двух строках после передачи другой переменной $ post_id из действия save_post в функцию find_shortcode_occurences ()

 if( !empty($post_id) ) { $args['posts__in'] = $post_id; } 

Измененный код для обеих функций

 function find_shortcode_occurences($shortcode, $post_id='', $post_type = 'page') { $found_ids = array(); $args = array( 'post_type' => $post_type, 'post_status' => 'publish', 'posts_per_page' => -1, ); if( !empty($post_id) ) { $args['posts__in'] = $post_id; } $query_result = new WP_Query($args); foreach ($query_result->posts as $post) { if (false !== strpos($post->post_content, $shortcode)) { $found_ids[] = $post->ID; } } return $found_ids; } add_action('save_post', 'save_option_for_sppro_pages' ); function save_option_for_sppro_pages( $post_id ) { if ( wp_is_post_revision( $post_id ) ) { return; } $option_name = 'database-option'; $shortcode = 'shortcode-name'; $id_array = find_shortcode_occurences($shortcode, $post_id); $autoload = 'yes'; if (false == add_option($option_name, $id_array, '', 'yes')) { $current_value = get_option($option_name); $new_value = array_merge($current_value, $id_array); update_option($option_name, $id_array); } } 

Кроме того, добавлена ​​другая переменная, поэтому у вас могут быть разные имена для параметра базы данных и имени короткого кода.

 add_action( 'wp_enqueue_scripts', 'enqueue_shortcode_styles', 1 ); function enqueue_shortcode_styles() { global $post; if ( isset($post->post_content) && is_singular(array( 'post','page' ) ) && ! has_shortcode( $post->post_content, '$tag' ) ) { wp_enqueue_style( 'shortcode-styles', get_stylesheet_directory_uri() . '/style.css' ); } } 

Я бы использовал has_shortcode для проверки содержимого $ post и загрузки скриптов с помощью wp_enqueue_scripts, но это зависит от того, где ваши короткие коды встроены.

Поменяйте тэг $ тегом вашего короткого кода в приведенном выше коде.

Добавьте в свой детский файл функции функции и при необходимости измените условные обозначения.