WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

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

CDN (Content Delivery Network или Content Distribution Network - сеть доставки контента) — технология географически точной доставки контента (файлов), так чтобы компьютер пользователя загрузил файл как можно быстрее, за счет максимально близкого расположения сервера к пользователю. Такая сеть доставки файлов есть у Google, Яндекс и других поисковых, и не только, систем. В веб-разработке, такие сети чаще всего используются для подключения часто используемых библиотек, в частности jQuery. Вот ссылка на CDN от Google, где расположены все часто используемые javascript библиотеки.

jquery Google cdn

Правильное подключение jQuery в WordPress

Ошибка

Я не раз видел и даже сам упоминал в статья, не понимая всей важности ошибки. В примерах я говорил и говорил о подключении jQuery в WordPress, путем добавления в <head> часть документа такой строки:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Ошибка не в том, что не будет работать,а в том, что в WordPress существует специальный программный метод добавления скриптов на страницу - это функции:

Такой метод необходим для предотвращения конфликтов при подключении одного и того же скрипта разными плагинами. И может упростить работу при оптимизации загрузки js файлов для ускорения загрузки сайта. Так например, если все скрипты подключены «правильно», то их можно программно объединить в один файл и отдавать браузеру в сжатом виде. Ну и в конце концов - это правильно, когда есть порядок и общая логика (стандарт), ведь если все сделано по стандарту, то при обновлении и изменении функций именно единый стандарт поможет быстро и незаметно перейти к обновлениям.

меню

Правильный вариант подключения jQuery скрипта

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

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

Вставлять этот код нужно в файл темы functions.php. После того, как скрипт сработает, в <head> части документа появится следующая строка:

<script type='text/javascript' src='http://wptest.ru/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
меню

CDN при подключении jQuery в WordPress

Пример выше показывает, как подключить jQuery из файлов самого WordPress, тогда как я бы рекомендовал подключать jQuery с CDN Google. Такое подключение имеет ряд преимуществ:

  1. Файл отдается в сжатом виде и весит меньше.
  2. Если посетитель уже заходил на сайт где jQuery подключался также, то в его кэше уже есть этот скрипт и он вообще не будет загружаться, при посещении вашего сайта. Читал в сети аналитическо-статистическую статью на эту тему - порядка 15-20% сайтов используют подключение CDN Google для jQuery и этот показатель растет.
  3. Файл подгружается в отдельный поток.
меню

jQuery с Google CDN

Чтобы подключить jQuery с CDN Google, нужно сначала отметить уже зарегистрированный в WordPress скрипт jQuery и зарегистрировать его еще раз с новым адресом. Делается это путем добавления в functions.php такого кода:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
	// отменяем зарегистрированный jQuery
	// вместо "jquery-core", можно вписать "jquery", тогда будет отменен еще и jquery-migrate
	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
	wp_enqueue_script( 'jquery' );
}

В результате мы получим такие строки в head части документа:

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

Здесь jquery-core означает, что заменяется ссылка на сам скрипт jQuery и не затрагивается дополнительный скрипт jqury-migrate.js, который нужен для перехода к версии jQuery 1.9.x, с ранних версий.

Подключение jquery-migrate плагина означает, что если у вас есть ошибки несовместимости с версией 1.9.x (т.е. ваш код был написан под более ранние версии), jQuery продолжит работать, а ошибки можно будет исправить по мере выявления.

Посмотреть актуальные на сегодня ссылки на jQuery в каталоге Google можно здесь.

меню

Отключаем jquery-migrate.js

Если jquery-migrate.js не нужен, а нужен только jQuery, то используйте такой код для подключения jQuery:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
	// отменяем зарегистрированный jQuery
	wp_deregister_script('jquery-core');
	wp_deregister_script('jquery');

	// регистрируем
	wp_register_script( 'jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, null, true );
	wp_register_script( 'jquery', false, array('jquery-core'), null, true );

	// подключаем
	wp_enqueue_script( 'jquery' );
}    

Тут отменив jquery мы автоматически отменяем привязку mirgate к jQuery. В результате получим только такую строку:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

true в конце значит, что скрипт, по возможности, будет подключен в подвал сайта.

Если есть другие скрипты которые подключаются в head часть и зависят от jQuery, то несмотря на последний аргумент true, jquery все равно будет подключен в head часть документа, что логично...

За вариант с перерегистрацией 'jquery-core' и 'jquery' спасибо Paul, его статьи об этом.

меню

WordPress Версия jQuery с CDN

Пример ниже показывает, как подключить jQuery той версии, которая используется в WordPress, но с сервиса CDN:

add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );
function my_scripts_method() {
	// получаем версию jQuery
	wp_enqueue_script( 'jquery' );
	// для версий WP меньше 3.6 'jquery' нужно поменять на 'jquery-core'
	$wp_jquery_ver = $GLOBALS['wp_scripts']->registered['jquery']->ver;
	$jquery_ver = $wp_jquery_ver == '' ? '1.11.0' : $wp_jquery_ver;

	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js' );
	wp_enqueue_script( 'jquery' );
}
53 коммента
Полезные 10 Вопросы 2 Все
  • Dimox dimox.name

    Тимур, поясни, пожалуйста, эту строку:

    $jquery_ver = $wp_jquery_ver == '' ? '1.11.0' : $wp_jquery_ver;

    Почему здесь указать именно версия 1.11.0?

    1
    Ответить09.Май.2014 в 10:06 #
    • Kama7641

      Поясняю: если нет $wp_jquery_ver, то $jquery_ver = '1.11.0'

      Это по умолчанию, если вдруг не получится получить версию из WP, то будет использована 1.11.0. Можно указать другую, на усмотрение (сейчас уже 1.11.1 вышла, только в гугле нет пока). На сегодня WP использует эту версию и это последняя версия 1.x доступная в Гугл.

      А какую версию туда правильнее вписать?

      Ответить09.Май.2014 в 23:44 #
      • Dimox dimox.name

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

        Ответить10.Май.2014 в 10:34 #
  • макс158 wp-panda.com

    правильнее будет вот так

    wp_deregister_script( 'jquery-core' );
    	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js', false, null);
    	wp_enqueue_script( 'jquery' );

    потому как: jquery-core - возвращает собственно саму библиотеку jquery, a jquery - связку jquery + jquery-migrate, что достаточно часто бывает надо, ибо сильно не все плагины переехали на последнии версии jquery,
    кроме того и jquery таки лучше подключать в хэдер, основная причина в том, что опять же большое количество разработчиков не удосуживаются написать array('jquery') при подключении своих поделок.

    Ответить19.Май.2014 в 23:39 #
    • макс158 wp-panda.com

      отредактировать не могу поэтому дополню

      еще правильнее подключать отсюда

      http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

      тогда верхняя часть совсем не нужна, там всегда лежит последняя версия

      Ответить19.Май.2014 в 23:46 #
      • Kama7641

        Спасибо за комменатрий, про эту ссылочку не знал. thank_you

        Ответить19.Май.2014 в 23:59 #
      • Dimox dimox.name

        Я знал про этот вариант, но есть у него какой-то минус (уже забыл :)), поэтому и не использую.

        Ответить20.Май.2014 в 10:32 #
        • WP_Panda158 wp-panda.com

          Минус ровно один, если отключать не jquery-core а jquery, больше нет и быть не может.

          А самый кошерный способ подключения выглядит так

          add_action( 'wp_enqueue_scripts', 'my_load_scripts' );
          	/**
          		* Подключаем jQuery из гугла
          	*/
          	function my_load_scripts() {
          
          		if( !is_admin() ) {
          			wp_deregister_script( 'jquery-core' ); // отключаем только jquery без jquery-migrate
          			wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', array(), null, true ); // регистрируем крайнюю версию из гугла
          			add_filter( 'script_loader_src', 'jquery_local_loader', 10, 2 );  // вешаем на загрузку скрипта альтернативный jquery
          			wp_enqueue_script( 'jquery' );
          		}
          
          	}
          
           /*
           *проверяем загрузилась библиотека и если нет грузим локальную из вордпресс
           */
          	add_action( 'wp_head', 'jquery_local_loader' );
          
          	function jquery_local_loader( $src, $handle = null ) {
          
          		static $add_jquery_fallback = false;
          
          		if( $add_jquery_fallback ) {
          			echo '<script>window.jQuery || document.write(\'<script src="' . includes_url() . 'js/jquery/jquery.js"><\/script>\')</script>' . "\n";
          			$add_jquery_fallback = false;
          		}
          
          		if( $handle === 'jquery-core' ) {
          			$add_jquery_fallback = true;
          		}
          
          		return $src;
          
          	}
          
          	// для маньяков безопасности отключаем версии скриптов
          
          	function port_remove_cssjs_ver( $src ) {
          		if( strpos( $src, '?ver=' ) )
          		$src = remove_query_arg( 'ver', $src );
          		return $src;
          	}
          
          	add_filter( 'script_loader_src', 'port_remove_cssjs_ver', 10, 2 );
          Ответить20.Май.2014 в 14:56 #
          • Dimox dimox.name

            Минус ровно один, если отключать не jquery-core а jquery, больше нет и быть не может.

            Я про другое говорил. Запрос такого вида:

            http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

            имеет какой-то минус перед запросом такого вида:

            http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

            Где-то раньше читал об этом, но забыл, в чем конкретно недостаток.

            Ответить21.Май.2014 в 10:50 #
            • @ Макс

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

              /1.4.4/ – public, max-age=31536000 (один год)

              /1.4/ – public, must-revalidate, proxy-revalidate, max-age=3600 (один час с перепроверкой)

              /1/ – public, must-revalidate, proxy-revalidate, max-age=3600 (один час с перепроверкой)

              Очевидно, кешировать на один час совершенно бесполезно.

              Источник - http://habrahabr.ru/post/109309/

              Ответить06.Окт.2014 в 23:34 #
  • Сергей optimakomp.ru

    Установил Вашу функцию без jquery-migrate, но в head ничего не появилось (старую строку удалил, теперь вообще никакой нет search ). Сайт летает, скорость загрузки улучшилась (замерял до и после по 20 раз laugh ). Всё правильно? Где строка живёт теперь?

    Ответить09.Июл.2014 в 12:32 #
    • Kama7641

      Строка может в подвале появится и так куда лучше... По идее она там и появится, если установить код из этой статьи и если плагины не мешают появлению в подвале... Плагин может подключить скрипт в head часть и сделать его зависимым от jQuery. В этом случае, jQuery подключится перед скриптом плагина - в head.

      -1
      Ответить10.Июл.2014 в 17:48 #
  • Привет! Извините, я плохо знаю wordpress, что-то не пойму, если вставить:

    function my_scripts_method() {
    	// отменяем зарегистрированный jQuery
    	// вместо "jquery-core" просто "jquery", чтобы отключить jquery-migrate
    	wp_deregister_script( 'jquery-core' );
    	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
    	wp_enqueue_script( 'jquery' );
    }    
    add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

    в function.php - то скрипты все ровно не запускаются, или их необходимо еще как-то подгружать (просто я предполагал что они будут работать на автомате как если при загрузке jquery через

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    ). К примеру есть скрипт галереи - по идее все хорошо работает - но через загрузку jquery - стандартным методом, сделал как написано у вас, нет не работает. Кстати я пока на локальном сервере через endels (проект от создателя denwer) делаю - может что-то там не будет запускаться. И еще не понятно когда должна появлятся строка

    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script type='text/javascript' src='http://site.ru/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

    в header.php или проще их самому прописать? Подскажите пожалуйста как активировать скрипты.

    Ответить16.Авг.2014 в 19:52 #
    • Kama7641

      В Коде есть строка вызывающая скрипт? На локалке может не работать без http. Попробуйте изменить ссылку:
      '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
      на
      'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'

      Ответить16.Авг.2014 в 21:39 #
      • Изменил, но все равно не работает. Может все и правильно, может я чего-то не понимаю. Еще уточнить хотел, после метода подключения jquery через файл function.php - метод:

        <script type='text/javascript' src='.../script.js'> </script>

        уже не работает? Если нет, то тогда какая ей альтернатива (которая вызывает скрипт) в wordpress? И как это правильно прописывается. Спасибо за ответ.

        Ответить16.Авг.2014 в 22:44 #
        • Kama7641

          Проверьте еще раз, откройте код страницы ctrl+u, посмотрите последовательность подключения скриптов и подключаются ли они вообще. Сначала должен подключаться jQuery затем все остальные.

          Альтернатива: просто прописать в functions.php

          function my_scripts_method() {
          	wp_enqueue_script( 'jquery' );
          
          	// ваш скрипт шаблона
          	wp_enqueue_script( 'custom-script', get_template_directory_uri() . /js/custom_script.js', array('jquery') );
          }    
          
          add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
          Ответить17.Авг.2014 в 01:24 #
          • Хм, интересно, еще сегодня "поэкспериментировал", посмотрел код с подключением через function.php, и просто удалив этот код - получился вот-такой результат:
            (без кода подключения) - вот:

            <script type='text/javascript' src='http://www.сайт.ru/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
            <script type='text/javascript' src='http://www.сайт.ru/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

            (с кодом подключения) - вот:

            <script type='text/javascript' src=''></script>
            <script type='text/javascript' src='http://www.сайт.ru/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

            Первая строка вообще без какого либо jquery - это нормально ли? И вот еще интересно что пока страница загружается - в первой строке (где сейчас нет скрипта) видно что загружается скрипт через google, (при загрузке) - такая строка:

            <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.9.2'></script>
            • и потом эта строка исчезает превращаясь в (как уже писал выше):
              <script type='text/javascript' src=''></script>

              . Почему-так, может это норма или ошибка? Спасибо.

            Ответить17.Авг.2014 в 23:48 #
            • Kama7641

              Что-то не то... Может у вас какой-то плагин подключает его и подключает неправильно. Хотя это тоже странно. Посмотрите где еще может подключатся этот скрипт, может есть еще где-то код, который конфликтует...

              Как вы увидели, что сначала появляется подключение, а потом исчезает?

              Ответить18.Авг.2014 в 00:28 #
              • OK! Всё заработало спасибо за помощь, разобрался - это оказывается maxthon-браузер такую чушь со строками показывает, остальные все - всё хорошо грузят и появляются теперь 2 строки:

                <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.9.2'></script>
                <script type='text/javascript' src='http://www.сайт.ru/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
                • вроде как правильно, по крайней мере теперь все подключенные скрипты работают. smile Подключил почти все скрипты из папки js (по методу)
                  function имя_скрипта() {
                  wp_enqueue_script( 'jquery' );
                  // ваш скрипт шаблона
                  wp_enqueue_script( 'имя_скрипта',   get_template_directory_uri() . /js/имя_скрипта.js', array('jquery') );
                  }    
                  add_action( 'wp_enqueue_scripts', 'имя_скрипта' );

                Но вот не могу подключить скрипт стрелок вверх и вниз, там код такого типа:

                <script type='text/javascript' src="http://www.сайт.ru/wp-content/themes/theme/js/script.arrow.js"></script>
                <a style='position: fixed; bottom: 60px; right: 1px; cursor:pointer; display:none;'href='#' id='Go_Top'>
                <img src="wp-content/themes/theme/images/arrow-up.png" alt="Наверх" title="Наверх"></a>
                <a style='position: fixed; bottom: 20px; right: 1px; cursor:pointer; display:none;'href='#' id='Go_Bottom'>
                <img src="wp-content/themes/theme/images/arrow-down.png" alt="Вниз" title="Вниз"></a>

                вставляется перед тегом:

                </body>

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

                (а просматривал я подгружение jquery и его исчезновение - просто обновляя страницу с кодом - она грузилась и в конце строка становилась пустой unknw laugh (к maxthon'у сильно привык))

                Ответить18.Авг.2014 в 11:38 #
                • Kama7641

                  Насчет стрелок неясно. Видимо скрипт не так как-то работает. Могу предложить свой вариант, правда там только стрелка вниз: http://wp-kama.ru/id_372/strelka-naverh-s-plavnyim-vertikalnyim-prokruchivaniem.html

                  Ответить19.Авг.2014 в 01:35 #
                  • Спасибо! Ваша стрелка сразу заработала. Попробовал еще варианты остальные в интернете, и не-один не работает, это если подключать их без подключения jquery через прописывание:

                    <script> </script>

                    в body - но мне он не подходит. Ваша стрелка - без проблем установилась правильным способом. ok

                    Ответить19.Авг.2014 в 21:01 #
  • @ Alex

    Подскажите пожалуйста как подключить jQuery код в WordPress, где его нужно прописать и там вроде как $ нужно на что-то менять для безопасного подключения... Искал, читал, но не до конца понял... Заранее благодарен! Вот ссылка на сам код и функцию для его вызова: http://vyachet.ru/hyphen-russian-html-text/

    Ответить05.Ноя.2014 в 11:17 #
    • Создаем в папке с актуальной темой каталог 'js', если такого нет.
      В папке 'js' создаем файл 'custom_hyphenate.js'

      Содержимое файла 'custom_hyphenate.js'

      jQuery(document).ready(function($) {
      
      	$.fn.hyphenate = function() {
      		var all = "[абвгдеёжзийклмнопрстуфхцчшщъыьэюя]",
      			glas = "[аеёиоуыэю\я]",
      			sogl = "[бвгджзклмнпрстфхцчшщ]",
      			zn = "[йъь]",
      			shy = "\xAD",
      			re = [];
      
      		re[1] = new RegExp("("+zn+")("+all+all+")","ig");
      		re[2] = new RegExp("("+glas+")("+glas+all+")","ig");
      		re[3] = new RegExp("("+glas+sogl+")("+sogl+glas+")","ig");
      		re[4] = new RegExp("("+sogl+glas+")("+sogl+glas+")","ig");
      		re[5] = new RegExp("("+glas+sogl+")("+sogl+sogl+glas+")","ig");
      		re[6] = new RegExp("("+glas+sogl+sogl+")("+sogl+sogl+glas+")","ig");
      		return this.each(function() {
      			var text = $(this).html();
      			for (var i = 1; i < 7; ++i) {
      				text = text.replace(re[i], "$1"+shy+"$2");
      			}
      			$(this).html(text);
      		});
      	};
      
      	$(function(){
      		$('.article-text').hyphenate();
      		$('p').hyphenate();
      	});
      }

      Сохраняем файл и закрываем.
      PS: Для проверки я добавил еще и для 'p'. В последующем его можно будет удалить.

      Возвращаемся в папку с актуальной темой и ищем файл 'functions.php'
      Открываем его на редактирование.

      === Обычно в темах уже существует добавление каких либо js файлов через 'wp_enqueue_scripts':
      Ищем в тексте что-либо связанное с 'wp_enqueue_scripts'.

      Рассмотрим пример на теме 'twentytwelve' - в файле 'functions.php' у меня 156 строкой прописанно:

      add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );

      Ищем функцию 'twentytwelve_scripts_styles', которая находится выше:

      function twentytwelve_scripts_styles() {
      	global $wp_styles;
      
      	/*
      	 * Adds JavaScript to pages with the comment form to support

      После 'global $wp_styles;' прописываем подключение нашего файла:

      wp_enqueue_script( 'hyphenate-script',  get_template_directory_uri() . /js/custom_hyphenate.js', array('jquery') );

      Должно получиться что-то следующее:

      function twentytwelve_scripts_styles() {
      	global $wp_styles;
      
      	wp_enqueue_script( 'hyphenate-script',  get_template_directory_uri() . /js/custom_hyphenate.js', array('jquery') );
      
      	/*
      	 * Adds JavaScript to pages with the comment form to support

      === Если в теме нет ничего похожего создаем свое подключение скриптов js:

      function my_hyphenate_script() {
      	wp_enqueue_script( 'hyphenate-script',  get_template_directory_uri() . /js/custom_hyphenate.js', array('jquery') );
      }    
      add_action( 'wp_enqueue_scripts', 'my_hyphenate_script' );

      Сохраняем файл 'functions.php'

      *** ПРОВЕРКА:
      Обычно вывод контент постов выводится в 'p', который мы для проверки подключили - смотрим на "расстановку переносов".
      Если переносов нет - создаем новый пост/запись/страницу в админке WP с текстом без пробелов. Сохраняем запись и переходим на ее просмотр.
      PS: у меня переносы сработали...

      =============================================
      Для "безопасного метода" проделываем все тоже самое, но изменяем содержимое файла 'custom_hyphenate.js' на следующее:

      var $ = jQuery.noConflict();
      	$(document).ready(function() {
      		$.fn.hyphenate = function() {
      			var all = "[абвгдеёжзийклмнопрстуфхцчшщъыьэюя]",
      				glas = "[аеёиоуыэю\я]",
      				sogl = "[бвгджзклмнпрстфхцчшщ]",
      				zn = "[йъь]",
      				shy = "\xAD",
      				re = [];
      
      			re[1] = new RegExp("("+zn+")("+all+all+")","ig");
      			re[2] = new RegExp("("+glas+")("+glas+all+")","ig");
      			re[3] = new RegExp("("+glas+sogl+")("+sogl+glas+")","ig");
      			re[4] = new RegExp("("+sogl+glas+")("+sogl+glas+")","ig");
      			re[5] = new RegExp("("+glas+sogl+")("+sogl+sogl+glas+")","ig");
      			re[6] = new RegExp("("+glas+sogl+sogl+")("+sogl+sogl+glas+")","ig");
      			return this.each(function() {
      				var text = $(this).html();
      				for (var i = 1; i < 7; ++i) {
      					text = text.replace(re[i], "$1"+shy+"$2");
      				}
      				$(this).html(text);
      			});
      		};
      
      		$(function(){
      			$('.article-text').hyphenate();
      			$('p').hyphenate();
      		});
      	});
      2
      Ответить07.Ноя.2014 в 11:27 #
      • @ Alex

        Большое спасибо за такой полный и проработанный ответ! Попробую всё реализовать. А для чего используется "безопасный метод" и нужно ли применять именно его?

        И еще вопрос, я хочу, что бы переносы работали только на главной странице блога, так как у меня там большие картинки и текст рядом с ними выглядит плохо. Анонсы постов выводятся с помощью loop.php моей темы. Пока для выхода из положения присвоил этим -блокам id и прописал в стилях меньший шрифт.

        Ответить08.Ноя.2014 в 20:05 #
        • @ Alex

          Еще раз спасибо за помощь, вопрос с переносами на главной странице решен путем добавления в вызывающую функцию id блока div, к которым нужно применять переносы.

          Ответить08.Ноя.2014 в 22:12 #
        • О "безопасном режиме" лучше всего почитать в докуметации - допустим здесь

          1
          Ответить10.Ноя.2014 в 11:00 #
      • @ Alex

        А можно добавить в скрипт управление стилями? Например, увеличенный шрифт в случае если скрипт используется...

        Ответить09.Ноя.2014 в 07:00 #
        • Наверное будет правильнее: добавить очередной стиль в свой css-файл и при необходимости использовать его.

          Допустим добавим новый стиль 'big-font', в котором укажем необходимые параметры: размер шрифта, цвет и т.п.

          Далее изменим js скрипт:

          $(function(){
          			$('p').hyphenate();
          			$('p').addClass('big-font');
          		});

          В данном случае ко всем 'p' будут применяться переносы, а так же будет добавлен класс 'big-font'. Если Вы используете id блока div, то укажите, чтобы класс добавлялся именно к данному id.

          $(function(){
          			$('#myid').hyphenate();
          			$('#myid').addClass('big-font');
          		});

          === Есть еще и другой вариант - добавить именно стиль.
          Например: добавим к id (myid) цвет фона с параметром '#000000'...

          $(function(){
          			$('#myid').hyphenate();
          			$('#myid').css('background-color','#000000');
          		});
          1
          Ответить10.Ноя.2014 в 11:10 #
          • @ Alex

            Большое спасибо! Я использовал второй Ваш вариант, всё получилось!

            Ответить10.Ноя.2014 в 12:11 #
  • елена

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

    -1
    Ответить03.Дек.2014 в 22:47 #
    • Kama7641

      Добавьте в файл темы functions.php такой код:

      function my_scripts_method() {
      	wp_deregister_script( 'jquery' );
      	wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, null, true );
      	wp_enqueue_script( 'jquery' );
      }    
      
      add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
      Ответить04.Дек.2014 в 14:26 #
  • Geleosan life-trip.ru

    Странно, но ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js не ведет на последнюю библиотеку. Открывается 1.11.1, а уже есть 1.11.2, и в последнем WP 4.3 именно 1.11.2 используется.

    Ответить25.Апр.2015 в 12:47 #
  • @ Егор1 filwebs.ru

    Используется уже 1.11.3, а ссылка ведет тупо на 1.11.1 надо все-же указывать на версию явно.
    //ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

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

    Ответить05.Окт.2015 в 08:11 #
    • @ Егор1 filwebs.ru

      То же касательно шрифтов с Google. Сайт от них иногда сильно тормозит. Скачал шрифты, установил локально, все отлично работает.
      У меня на сервере кешируются скрипты и стили, поэтому мне локально лучше подгружать.

      Ответить05.Окт.2015 в 08:14 #
  • Вячесав

    Здравствуйте снова! Я подключил все скрипты в functions.php и сделал так, чтобы они загружались в футере; кроме двух, которые даются автоматически для сайтов на WordPress и которые расположены по этим ссылкам:
    http://example.ru/wp-includes/js/jquery/jquery.js?ver=1.11.3
    http://example.ru/wp-includes/js/jquery/jquery-migrate$suffix.js?ver=1.2.1
    Вы, как я догадываюсь, уже наверняка сталкивались с этим. Скажите, пожалуйста, как подключить эти скрипты в functions.php, и чтобы они загружались в футере.

    Ответить09.Дек.2015 в 03:42 #
    • @ Егор filwebs.ru

      Скачайте библиотеку jQuery и подключите локально. Вот код:

      function my_scripts_method() {
      	wp_deregister_script( 'jquery' );
      	wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery-1.11.3.min.js',  array(), null, true );
      	wp_enqueue_script( 'jquery');
      }
      add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

      jquery-migrate не нужно подключать

      Только следите потом, если WP заменит версию библиотеки, вручную заменяйте на аналогичную

      1
      Ответить09.Дек.2015 в 11:04 #
  • Alex34 otcam.ru

    А как быть с тем, что подключенные в head скрипты негативно сказываются на скорости отображения контента? Об этом говорит инструмент гугл. Можно ли как то включать скрипты по окончании прорисовки страницы, без конфликтно?

    Ответить02.Май.2016 в 01:47 #
    • Kama7641

      Тут надо все скрипты совать в подвал, но это может вызвать кучу проблем... Там разбираться надо, для каждого сайта индивидуально я бы сказал. Попробуйте поместить в подвал, если все работает - то это отлично! Если нет, то надо смотреть что да как. Единого рецепта нет, пожалуй...

      Ответить02.Май.2016 в 05:29 #
      • lincaseidhe81 lincaseidhe.ru

        да в основном ругается на jquery:

        "Удалите код JavaScript, препятствующий отображению:
        /wp-includes/js/jquery/jquery.js"

        пробовал плагин Autooptimize (он jquery прямо в html сует), с ним ругаться перестает, но значительно увеличивается время ответа сервера (на 0.4 секунды, видимо плагин сильно перенавороченый)...

        вот хотелось бы его вручную засунуть html, чтобы не создавать дополнительный http запрос... Кама, если знаешь способ - помоги help.

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

        Если кто-то уже сталкивался, напишите решение плиз... help ... ну как правильно сделать)

        Ответить02.Авг.2016 в 13:10 #
        • Kama7641

          Не надо jQuery в HTML совать, что за дичь? Чтобы избавиться от заметки: "Удалите код JavaScript, препятствующий отображению:" jquery нужно переместить в подвал и все зависимые от него скрипты тоже... Но сделать это не всегда просто. В общем-то autoptimize обычно позволяет это сделать наиболее просто, только не надо там настройку ставить, чтобы он все скрипты прямо в код HTML размещал, нужно чтобы в подвал все...

          Ответить02.Авг.2016 в 20:16 #
          • lincaseidhe81 lincaseidhe.ru

            да это уже пробовал, ладно, если с темой - то все гуд, а бывает еще и плагины недобросовестные скрипты в head ставят... а autoptimize - не панацея, я ж говорю, со включенным время ответа сервера оч сильно увеличивается. если на одиночной странице менее 0.2 сек, то с включенным 0.6 - че-то не оч гуд... хотя я пробовал с минификацией включать, щас попробую только jquery и остальное в подвал запихнуть...

            Ответить03.Авг.2016 в 00:18 #
          • lincaseidhe81 lincaseidhe.ru

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

            вот нарыл:

            function remove_head_scripts() { 
            	remove_action('wp_head', 'wp_print_scripts');
            	remove_action('wp_head', 'wp_print_head_scripts', 9);
            	remove_action('wp_head', 'wp_enqueue_scripts', 1);
            
            	add_action('wp_footer', 'wp_print_scripts', 5);
            	add_action('wp_footer', 'wp_enqueue_scripts', 5);
            	add_action('wp_footer', 'wp_print_head_scripts', 5);
            }
            add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );

            это работает как нужно, и проблем нету даже с js разных плагинов...

            А автоптимизе оставил только для минификации css. И то потом лучше сам сожму, и вообще удалю его...

            1
            Ответить12.Авг.2016 в 03:23 #