Если в создаваемом плагине или теме WordPress есть код на JavaScript, важно правильно этот код подключить. Как избежать проблем? Возможно подключение JavaScript не на все страницы сайта, а только на нужные?
Например, плагин добавляет шорткод (shortcode) и использует jQuery.
Как нельзя поключать JavaScript
Начинающий разработчик WordPress, возможно, просто добавит свой скрипт (add_my_script) в <head> с помощью хука wp_head:
add_action('wp_head', 'add_my_script'); function add_my_script() { ?> <script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/my-plugin/jquery.js"></script> <script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/my-plugin/my-script.js"></script> <?php }
Что не есть хорошо:
!!! Во-первых, путь к файлам так указывать нельзя, т.к. в WordPress (начиная с версии 2.6) папку wp-content
можно поместить в другое место!
!!! Во-вторых, jQuery следует подключать, только убедившись, что это еще не сделал, например, другой плагин.
В WordPress эти проблемы решаются так:
Подключение JavaScript без проблем: wp_enqueue_script
add_action('template_redirect', 'add_my_script'); function add_my_script() { wp_enqueue_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true); }
Этот скрипт делает то же, что и первый, но также:
- получает URL файла
- проверяет, вдруг jQuery уже подключен (wp_enqueue_script)
template_redirect вызывается перед определением файла шаблона для отображения запрашиваемой страницы
Если вместо template_redirect использовать хук wp_footer, скрипт будет записан в footer (внизу страницы), и, следовательно, основное содержимое страницы будет загружаться быстрее.
wp_enqueue_scripts (admin_enqueue_scripts в админке) подключает JavaScript-файл, только если он еще не подключен.
И все же одна проблема пока остается, если JavaScript используется не на всех страницах сайта. Зачем загружать ненужный код на другие страницы?
Как добавить JavaScript и CSS только на нужные страницы
wp_enqueue_script() следует вызывать до wp_head(), получается, что принять решение о добавлении JavaScript нужно до обработки страницы.
Но есть способ добавления JavaScript после отображения страницы!
Условие для wp_print_scripts и wp_print_styles
add_action('init', 'register_my_script'); add_action('wp_footer', 'print_my_script'); function register_my_script() { wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true); } function print_my_script() { global $add_my_script; if ( ! $add_my_script ) return; wp_print_scripts('my-script'); }
Здесь JavaScript добавляется, только если определена глобальная переменная $add_my_script. Вывод скрипта выполняет wp_print_scripts().
Флаг $add_my_script можно установить в любой функции, в том числе и в обработчике шорткода:
add_shortcode('myshortcode', 'my_shortcode_handler'); function my_shortcode_handler($atts) { global $add_my_script; $add_my_script = true; // код вывода шорткода }
Так скрипт должен добавляться, только когда на странице есть шорткод [myshortcode ...].
Еще вариант: поиск шорткода в тексте страницы:
add_action( 'wp_print_styles', 'yourplugin_include_css' ); function yourplugin_include_css() { // Проверка наличия шорткода (shortcode) global $post; if ( strstr( $post->post_content, '[yourshortcode]' ) ) { echo $csslink; } }
Загрузка JS-скриптов и CSS-стилей только на странице с шорткодом в WordPress 3.3
(Дополнение, 14.01.2012)
Самое приятное в этой истории то, что в WordPress 3.3 задача упрощается, т.к. wp_enqueue_script(), а также wp_enqueue_style() - подключение стилей можно просто вызвать внутри обработчика шорткода:
add_shortcode('myshortcode', 'my_shortcode_handler'); function my_shortcode_handler($atts) { wp_enqueue_script('my-script', plugins_url('my.js', __FILE__), array('jquery'), '1.0', true); wp_enqueue_style('my-styles', plugins_url('my.css', __FILE__)); // код вывода шорткода }
( использованы материалы статьи scribu.net "How to load JavaScript like a WordPress Master", 16.01.2010)
Параметры wp_enqueue_script: в Кодексе WordPress
Спасибо. А вы случайно не знаете, как сделать, чтобы NgGallery подключал Javascript в футере страницы, а не в хеадере?
Можно матом, можно молча. Используйте принцип аналогии и подбора, наконец манипуляции с кодом. Здесь классические примеры(выше).
===
Если методы различны, значит и шифрование скрипта явы может быть уместным. Так, например, западные умники шифруют коды защиты контента, который заносят в отдельный файл, к которому дописывают код подключения(по типу подключения CSS), который прописывают в соответствующие страницы index, header, fotter, archive и прочие, главная цель отрубить возможность использования ctrl+u, shift+ctrl+i, ну и соответственно вызов контекстного меню обозревателя пользуясь оптической мышью.
В сети не мало сервисов для зашифровки, правда не все браузеры могут положительно отвечать, а некоторые и не замечают, однако в примере есть вэб-ресурс который хорошо определён такой защитой.
Админ, Спасибо!
Спасибо.
Долго не мог подключить css к плагину. Оказалось, оф.документация на "родном" сайте устарела, и обработку можно задавать через шоткат. Впервые прочитал об этом у вас, когда уже отчаялся - вроде все делаю по докуметации, а css не подгружается.
Куда вносить все эти функции? Нужно подключить стили к конкретной странице на сайте от другой похожей темы. Обьясните пошагово действия, пожалуйста.
А как вывести скрипты в таком формате: var = {}; $(document).ready(function(){?