Подключение «всегда свежей» версии JQuery в WordPress. Wordpress jquery

Подключение свежей версии JQuery в WordPress

Блог / jQuery / Подключение «всегда свежей» версии JQuery в WordPress

Наверное вы знаете, что на некоторых сайтах можно встретить JQuery версии 1.4.2, на некоторых 1.4.4, а иногда даже 1.6.4 (это самая последняя версия на момент написания поста).

Понятно, что часть владельцев сайтов не имеют представления о JQuery и им плевать, что там у них подключено — главное, чтобы работало, другим же просто лень следить за выходом нового JQuery и постоянно обновлять код.

Как же сделать так, чтобы на сайте автоматически подключалась всегда только самая новая версия?

Проще простого, самая последняя версия JQuery всегда находится по адресу:

Если валидация будет ругаться на эту строчку кода, знайте, она написана в HTML5 🙂

А вот пример подключения JQuery к WordPress. Учтите, это будет работать только в том случае, если в вашей теме присутствуют wp_head() и wp_footer().

add_action( 'init', 'true_jquery_register' ); function true_jquery_register() { if ( !is_admin() ) { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' ), false, null, true ); wp_enqueue_script( 'jquery' ); } }

Вставьте этот код в файл functions.php. Он находится в папке с вашей текущей темой.

Смотрите также

Что делать, если в конце URL записи добавляется -2, хотя другой записи с таким URL (ярлыком) нету?Что делать, если в конце URL записи добавляется -2, хотя другой записи с таким URL (ярлыком) нету?
esc_html_e() — переводит, экранирует HTML, выводит результатФункция сначала переводит строку, затем экранирует в ней теги HTML, а потом выводит всё, что получилось.
wp_set_post_tags() — добавляет метки к постуФункция позволяет добавить метки (теги) к посту, либо заменить текущие метки на новые, не заходя при этом в админку.

misha.blog

wp_register_script() — Регистрирует файл скрипта, чтобы в дальнейшем подключать его используя функцию wp_enqueue_script(), которая сохраняет последовательность загрузки скриптов. Функция WordPress.

utils	/wp-includes/js/utils.js
common	/wp-admin/js/common.js
sack	/wp-includes/js/tw-sack.js
quicktags	/wp-includes/js/quicktags.js
colorpicker	/wp-includes/js/colorpicker.js
editor	/wp-admin/js/editor.js
wp-fullscreen	/wp-admin/js/wp-fullscreen.js
wp-ajax-response	/wp-includes/js/wp-ajax-response.js
wp-pointer	/wp-includes/js/wp-pointer.js
autosave	/wp-includes/js/autosave.js
heartbeat	/wp-includes/js/heartbeat.js
wp-auth-check	/wp-includes/js/wp-auth-check.js
wp-lists	/wp-includes/js/wp-lists.js

prototype	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js
scriptaculous-root	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js
scriptaculous-builder	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/builder.js
scriptaculous-dragdrop	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/dragdrop.js
scriptaculous-effects	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/effects.js
scriptaculous-slider	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/slider.js
scriptaculous-sound	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/sound.js
scriptaculous-controls	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/controls.js
scriptaculous	scriptaculous-dragdrop, scriptaculous-slider, scriptaculous-controls
cropper	/wp-includes/js/crop/cropper.js

jquery (v1.10.2 as of WP 3.8)	jquery-core, jquery-migrate
jquery-core	/wp-includes/js/jquery/jquery.js
jquery-migrate	/wp-includes/js/jquery/jquery-migrate.js (v1.10.2 as of WP 3.8)
jquery-ui-core	/wp-includes/js/jquery/ui/jquery.ui.core.min.js
jquery-effects-core	/wp-includes/js/jquery/ui/jquery.ui.effect.min.js
jquery-effects-blind	/wp-includes/js/jquery/ui/jquery.ui.effect-blind.min.js
jquery-effects-bounce	/wp-includes/js/jquery/ui/jquery.ui.effect-bounce.min.js
jquery-effects-clip	/wp-includes/js/jquery/ui/jquery.ui.effect-clip.min.js
jquery-effects-drop	/wp-includes/js/jquery/ui/jquery.ui.effect-drop.min.js
jquery-effects-explode	/wp-includes/js/jquery/ui/jquery.ui.effect-explode.min.js
jquery-effects-fade	/wp-includes/js/jquery/ui/jquery.ui.effect-fade.min.js
jquery-effects-fold	/wp-includes/js/jquery/ui/jquery.ui.effect-fold.min.js
jquery-effects-highlight	/wp-includes/js/jquery/ui/jquery.ui.effect-highlight.min.js
jquery-effects-pulsate	/wp-includes/js/jquery/ui/jquery.ui.effect-pulsate.min.js
jquery-effects-scale	/wp-includes/js/jquery/ui/jquery.ui.effect-scale.min.js
jquery-effects-shake	/wp-includes/js/jquery/ui/jquery.ui.effect-shake.min.js
jquery-effects-slide	/wp-includes/js/jquery/ui/jquery.ui.effect-slide.min.js
jquery-effects-transfer	/wp-includes/js/jquery/ui/jquery.ui.effect-transfer.min.js
jquery-ui-accordion	/wp-includes/js/jquery/ui/jquery.ui.accordion.min.js
jquery-ui-autocomplete	/wp-includes/js/jquery/ui/jquery.ui.autocomplete.min.js
jquery-ui-button	/wp-includes/js/jquery/ui/jquery.ui.button.min.js
jquery-ui-datepicker	/wp-includes/js/jquery/ui/jquery.ui.datepicker.min.js
jquery-ui-dialog	/wp-includes/js/jquery/ui/jquery.ui.dialog.min.js
jquery-ui-draggable	/wp-includes/js/jquery/ui/jquery.ui.draggable.min.js
jquery-ui-droppable	/wp-includes/js/jquery/ui/jquery.ui.droppable.min.js
jquery-ui-menu	/wp-includes/js/jquery/ui/jquery.ui.menu.min.js
jquery-ui-mouse	/wp-includes/js/jquery/ui/jquery.ui.mouse.min.js
jquery-ui-position	/wp-includes/js/jquery/ui/jquery.ui.position.min.js
jquery-ui-progressbar	/wp-includes/js/jquery/ui/jquery.ui.progressbar.min.js
jquery-ui-resizable	/wp-includes/js/jquery/ui/jquery.ui.resizable.min.js
jquery-ui-selectable	/wp-includes/js/jquery/ui/jquery.ui.selectable.min.js
jquery-ui-slider	/wp-includes/js/jquery/ui/jquery.ui.slider.min.js
jquery-ui-sortable	/wp-includes/js/jquery/ui/jquery.ui.sortable.min.js
jquery-ui-spinner	/wp-includes/js/jquery/ui/jquery.ui.spinner.min.js
jquery-ui-tabs	/wp-includes/js/jquery/ui/jquery.ui.tabs.min.js
jquery-ui-tooltip	/wp-includes/js/jquery/ui/jquery.ui.tooltip.min.js
jquery-ui-widget	/wp-includes/js/jquery/ui/jquery.ui.widget.min.js
jquery-form	/wp-includes/js/jquery/jquery.form.js
jquery-color	/wp-includes/js/jquery/jquery.color.min.js
suggest	/wp-includes/js/jquery/suggest.js
schedule	/wp-includes/js/jquery/jquery.schedule.js
jquery-query	/wp-includes/js/jquery/jquery.query.js
jquery-serialize-object	/wp-includes/js/jquery/jquery.serialize-object.js
jquery-hotkeys	/wp-includes/js/jquery/jquery.hotkeys.js
jquery-table-hotkeys	/wp-includes/js/jquery/jquery.table-hotkeys.js
jquery-touch-punch	/wp-includes/js/jquery/jquery.ui.touch-punch.js
jquery-masonry	/wp-includes/js/jquery/jquery.masonry.min.js

thickbox	/wp-includes/js/thickbox/thickbox.js
jcrop	/wp-includes/js/jcrop/jquery.Jcrop.js
swfobject	/wp-includes/js/swfobject.js
plupload	/wp-includes/js/plupload/plupload.js
plupload-html5	wp-includes/js/plupload/plupload.html5.js
plupload-flash	/wp-includes/js/plupload/plupload.flash.js
plupload-silverlight	/wp-includes/js/plupload/plupload.silverlight.js
plupload-html4	/wp-includes/js/plupload/plupload.html4.js
plupload-all	plupload, plupload-html5, plupload-flash, plupload-silverlight, plupload-html4
plupload-handlers	/wp-includes/js/plupload/handlers.js
wp-plupload	/wp-includes/js/plupload/wp-plupload.js
swfupload	/wp-includes/js/swfupload/swfupload.js
swfupload-swfobject	/wp-includes/js/swfupload/plugins/swfupload.swfobject.js
swfupload-queue	/wp-includes/js/swfupload/plugins/swfupload.queue.js
swfupload-speed	/wp-includes/js/swfupload/plugins/swfupload.speed.js
swfupload-all	/wp-includes/js/swfupload/swfupload-all.js
swfupload-handlers	/wp-includes/js/swfupload/handlers.js
comment-reply	/wp-includes/js/comment-reply.js
json2	/wp-includes/js/json2.js
underscore	/wp-includes/js/underscore.min.js
backbone	/wp-includes/js/backbone.min.js
wp-util	/wp-includes/js/wp-util.js
wp-backbone	/wp-includes/js/wp-backbone.js
revisions	/wp-admin/js/revisions.js
imgareaselect	/wp-includes/js/imgareaselect/jquery.imgareaselect.js
mediaelement	/wp-includes/js/mediaelement/mediaelement-and-player.min.js
wp-mediaelement	/wp-includes/js/mediaelement/wp-mediaelement.js
zxcvbn-async	/wp-includes/js/zxcvbn-async.js
password-strength-meter	/wp-admin/js/password-strength-meter.js
user-profile	/wp-admin/js/user-profile.js
user-suggest	/wp-admin/js/user-suggest.js
admin-bar	/wp-includes/js/admin-bar.js
wplink	/wp-includes/js/wplink.js
wpdialogs	/wp-includes/js/tinymce/plugins/wpdialogs/js/wpdialog.js
wpdialogs-popup	/wp-includes/js/tinymce/plugins/wpdialogs/js/popup.js
word-count	/wp-admin/js/word-count.js
media-upload	/wp-admin/js/media-upload.js
hoverIntent	/wp-includes/js/hoverIntent.js
customize-base	/wp-includes/js/customize-base.js
customize-loader
customize-preview
customize-controls
accordion
shortcode
media-models
media-views
media-editor
mce-view
admin-tags
admin-comments
xfn
postbox
post
link
comment
admin-gallery
admin-widgets
theme
theme-install
inline-edit-post
inline-edit-tax
plugin-install
farbtastic
iris
wp-color-picker
dashboard
list-revisions
media
image-edit
set-post-thumbnail
nav-menu
custom-header
custom-background
media-gallery
svg-painter

wp-kama.ru

wp_head() - функция WordPress

Блог / Кодекс WordPress / wp_head() — хук для подключения CSS, JS, jQuery и добавления мета-тегов

Функция, а точнее хук WordPress do_action('wp_head'), используется для заполнения тега <head>, а в него, как вы знаете, можно затолкать вот что:

CSS,
JavaScript (в том числе jQuery),
какой-нибудь HTML-код, например мета-теги;

Возникает следующий вопрос — для чего собственно нужна эта функция, если я допустим могу открыть файл темы и вставить туда всё, что захочу вручную? Да, возможно у вас и получится это сделать, а вот плагины не могут редактировать файлы темы и движка — как раз для них и нужны все эти хуки.

Функцию wp_head() вы скорее всего найдёте в файле темы header.php, и она будет выглядеть следующим образом:

Сама по себе функция не имеет никаких параметров и ничего не возвращает.

Подключение CSS-стилей через wp_head()

Сразу хочу уточнить некоторые моменты относительно CSS — вы ведь знаете, что чем меньше общее количество подключенных на странице файлов стилей, тем меньше количество HTTP-запросов, а от них напрямую зависит скорость загрузки сайта. Так вот, перечисленные ниже способы подходят исключительно для написания плагинов, в остальных же случаях я рекомендую просто добавить ваши стили к основному файлу style.css, который находится в папке с текущей темой.

Способ 1. wp_enqueue_style()

Рассмотрим несложный пример. В нём мы подключим какой-нибудь произвольный файл стилей, находящийся в папке с темой, в поддиректории /css, где wp_head_style — что-то типо названия-идентификатора данного файла, можете назвать его как-нибудь по-своему.

И кстати, если вы не знаете, куда вставлять код из данного поста, то вставляйте в functions.php вашей текущей темы WordPress.

function css_to_wp_head() { wp_enqueue_style( 'wp_head_style', get_stylesheet_directory_uri() . '/css/style-2.css', array(), null ); } add_action( 'wp_enqueue_scripts', 'css_to_wp_head' );

Способ 2. Выводим стили непосредственно через HTML-тег <style>

По возможности советую использовать первый способ. Размещать стили непосредственно в HTML документе — не самая лучшая идея.

<?php add_action("wp_head", "wp_head_css"); function wp_head_css() { ?> <style> #widget_1{display:none;} </style> <?php }

Аналогичным образом можно добавить и мета-теги, читайте подробнее чуть ниже.

Отключаем ненужные CSS из wp_head()

Некоторые плагины WordPress требуют для себя дополнительных стилей и поэтому подключают их к сайту указанным выше способом (как правило, это первый способ, т.е. через функцию wp_enqueue_style()).

Так вот, допустим какой-то вредный плагин наподключал вам на сайт всяких CSS, которые вам не нужны. Или допустим они вам всё-таки нужны, но вы хотите объединить их содержимое в один файл style.css (ну как вариант). Как следует поступать в таких случаях?

На самом деле делается это легко и просто: во-первых, нужно определить название-идентификатор подключаемого файла, как правило, это первый параметр функции wp_enqueue_style(). То есть мы обшариваем файлы плагина в поисках участков кода, где задействована эта функция и смотрим на её первый параметр.

Почему нельзя удалить найденный кусок кода прямо из плагина? Да потому что нам нельзя изменять содержимое файлов плагинов и движка — это не профессионально. К тому же такие тёмные дела обычно чреваты последствиями.

Итак, с идентификатором файла разобрались, что дальше? А дальше в ход идёт функция wp_dequeue_style(). В итоге в файл functions.php у нас идёт примерно следующий код:

function remove_css_from_wp_head() { wp_dequeue_style( 'тут_идентификатор_отключаемого_файла' ); } add_action( 'wp_enqueue_scripts', 'remove_css_from_wp_head', 9999 ); // параметр 9999 можно опустить, это чтобы наверняка

Подключение JavaScript через wp_head()

Способ 1. wp_enqueue_script()

Всё примерно так же, как и со стилями. С одним единственным «НО», о котором следует помнить — скрипты лучше помещать в самый конец сайта, перед закрывающим тегом </body>. О том, как это сделать, вы можете почитать в документации к функции wp_enqueue_script().

function js_to_wp_head() { wp_enqueue_script( 'wp_head_js', get_stylesheet_directory_uri() . '/js/script.js', array(), null ); } add_action( 'wp_enqueue_scripts', 'js_to_wp_head' );

Способ 2. Выводим скрипты непосредственно через HTML-тег <script>

<?php add_action("wp_head", "wp_head_js"); function wp_head_js() { ?> <script> var totalWidth = 500; </script> <?php }

jQuery в wp_head(). Конфликты.

Прежде чем читать этот пункт, хочу обратить ваше внимание, что очень часто то, из-за чего отказываются работать некоторые jQuery-эффекты — это несовместимость версий.

Если раньше ваш jQuery-скрипт работал, а теперь отказывается это делать, то сначала убедитесь, что у вас не изменилась подключаемая к сайту версия jQuery, а если изменилась, то протестируйте свой код на ранее установленной версии.

Подключение jQuery-версии по умолчанию

В WordPress уже зарегистрирован файл jQuery, он идёт вместе с движком (его версия меняется по ходу появления новых версий самого WordPress). Чтобы подключить стандартную версию файла, используем этот код:

function jquery_to_wp_head() { wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'jquery_to_wp_head' );

Изменение подключаемой версии jQuery

Так вот, предположим, что с появлением новой версии данной библиотеки, ваши скрипты перестали работать. Как же нам восстановить старую версию на сайте? Ну, как вариант, для начала вы можете скачать её и загрузить в папку с темой (можно подключать напрямую через googleapis, это не вопрос).

После этого нам помогут функции wp_deregister_script() и wp_register_script():

function jquery_another_version() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', get_stylesheet_directory_uri() . '/jquery-1.3.2.js', array(), '1.3.2' ); } add_action( 'wp_enqueue_scripts', 'jquery_another_version' );

Переносим jQuery из wp_head() в wp_footer()

Вообще я сторонник того, чтобы все скрипты находились не в шапке сайта, а в футере, где-нибудь перед закрывающим тегом </body>. Конечно, если без JavaScript ваш сайт отображается ужасно или не отображается вообще, тогда целесообразнее задействовать скрипты прямо перед загрузкой страницы, во всех остальных случаях — пусть находятся в футере.

Итак, переносим jQuery и все зависимые от него скрипты в футер:

function jquery_in_footer() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', includes_url('/js/jquery/jquery.js'), array(), null, true ); } add_action( 'wp_enqueue_scripts', 'jquery_in_footer' );

Приоритет подключения js-файлов

Функции wp_enqueue_style(), wp_enqueue_script(), wp_register_style() и wp_register_script() также позволяют установить порядок подключения стилей и скриптов. В плане стилей это обычно не так важно, но в плане скриптов всё очень серьёзно. Например у нас есть файл jquery.js и какой-то плагин jquery.fancybox.js (к примеру). Ну так вот, jquery.fancybox.js должен обязательно подключаться после jquery.js, иначе ничерта работать не будет.

Как же установить приоритет? Легко — для этого нам понадобится третий параметр указанных выше функций. В данном параметре нам в виде массива нужно передать все названия-идентификаторы файлов, от которых зависит подключаемый файл. Рассмотрим на примере того же самого jquery.fancybox.js. Итак:

function jquery_fancybox() { wp_enqueue_script( 'fancybox', get_stylesheet_directory_uri() . '/jquery.fancybox.js', array('jquery') ); } add_action( 'wp_enqueue_scripts', 'jquery_fancybox' );

Более подробно — в документации вышеуказанных функций (всё это есть на моём блоге — просто перейдите по соответствующим ссылкам).

Мета-теги в wp_head()

Вы можете использовать wp_head() для добавления собственных мета-тегов. В примере я вывел тег description, значение которого я взял из произвольного поля поста (а вы например можете взять в качестве его значения первое предложения поста или содержимое поля «Цитата»).

<?php add_action("wp_head", "wp_head_meta_description", 1); function wp_head_meta_description() { global $post; if( is_single() ) { echo "<meta name=\"description\" value=\"" . esc_attr( get_post_meta( $post->ID, 'seo_description', true ) ) ."\" />\n\r"; } }

Удаление некоторых стандартных тегов из wp_head()

RSD

Этот тег выглядит следующим образом <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://ваш-сайт.ru/xmlrpc.php?rsd" /> Если вы публикуете\редактируете свои посты только через админку и не используете для этих целей какие-либо сервисы или клиенты (например приложения для iPhone или iPad), то можете удалить этот тег:

remove_action( 'wp_head', 'rsd_link' );

wlwmanifest

Вот такой тег: <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://ваш-сайт.ru/wp-includes/wlwmanifest.xml" /> . Используется клиентом Windows Live Writer. Если не юзаете — удаляйте:

remove_action( 'wp_head', 'wlwmanifest_link' );

generator

Содержит текущую используемую версию WordPress: <meta name="generator" content="WordPress 3.5.1" />. Рекомендую к удалению.

remove_action( 'wp_head', 'wp_generator' );

Это не единственное место, где отображается версия движка. Если хотите полностью скрыть её, читайте этот пост.

misha.blog