возможно заказать разработку или сопровождение, услуги вашего сайта/блога


обновлено: 2024-02-07 в теме: Сниппеты, хаки, функции
Запросто с WordPress создание и продвижение сайтов ATs media

Как организовать подключения js скриптов в файлах шаблона – событие wp_footer – без перегрузок!..

Подключение js скриптов к своему сайту, дело было и есть важное! Без js-плюшек в современном сайтостроении не обойтись… …и многим админам, при новейшем подходе к веб делу, очень часто требуются какие-то правки кода, для того, чтобы сайт соответствовал ожиданиям посетителей. Маркетинг, знаете ли.

Однако!..

…как только владелец сайта, подумывает поправить или обогатить своё детище всякими js пользилками, возникают трудности! Рождается много вопросов о том, как легко и, главное, правильно подключить js к своему сайту в wp_footer – ведь ни для кого не секрет – стоит только напутать в файлах шаблона – сайт станет тормозить…

Как подключить js скрипты правильно? вот об этом статья:

 


 

 

 

Пример использования: кнопка скопировать текст, ссылку – на чистом JS

 

 

для чего на сайте используют js скрипты

 

 

 

 

Статья рассчитана преимущественно на тех пользователей, которые стараются не использовать плагины, включающие в свой функционал js отработку – это нецелесообразно в плане серьёзного подхода к делу!

Если в вашем шаблоне уже был подключен js функционал примитивным способом: т.е js строки подключения js файлов помещены перед тегом боди  – самое время это исправить!..

 

 

 

 

Вероятно, даже новичкам известно, что более правильный подход к делу, это организовать подключение js скриптов в подвальной части сайта: т.е в разделе функции wp_footer где-то перед закрывающим тегом </body> – всё это богатство находится в файле шаблона под именем footer.php

 

 

Например: кнопка наверх, фиксированный сайдбар или прилепленное меню… либо скрытие внешних ссылок посредством AJAX и многое-многое другое подобное по функционалу требует подключения этих самых js файлов.

 

 

Но как это сделать правильно, чтобы не притормозить свой ресурс (в плане загрузки по времени)??

 

 

В общем-то, не очень сложно.

 

Для начала нужно припомнить

 

 

 

 

как подключены js скрипты у меня в шаблоне?

 

 

 

 

Об этом можно справиться в исходном коде шаблона Ctrl+U

 

…или более наглядно: открываем файл footer.php и смотрим записи в самом низу документа…

 

 

 

<?php wp_footer(); ?>
<script src="/wp-content/themes/шаблон/js/jquery-1.12...min.js"></script>
<script src="/wp-content/themes/шаблон/js/файл.min.js"></script>
</body>
</html>

 

 

 

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

 

 

 

К слову:

и сей вариант в некоторых случаях будет замечательно работать, однако, этот способ внедрения js не совсем верен!

 

 

 

Поэтому предлагаю несколько иной – и более верный – способ, который также подключает все необходимые скрипты в футер, но на несколько ином уровне: посмотрите после правок в исходнике страницы.

 

 

Реализуем всё это чудо посредством нашего легендарного файла функций через echo <<<EOT

 

 

 

 

Redirect 301 — на все случаи жизни сайта

 

 

 

 

подключение js скриптов через файл functions php

 

 

 

Откроем файл functions.php и создадим произвольную функцию…

 

 

Активируем созданный функционал – для этого используем фильтр add_action… т.е подключим все наши js скрипты в футерную часть сайта… не используя сам файл footer.php.

 

 

Вот строки функции, которые следует скопировать и прописать к себе в файл функций (ну или куда-то в специально созданный для этих целей файл)

 

 

/** Подключение в wp_footer JS скриптов **/
add_action('wp_footer', 'functionss_my_js');
function functionss_my_js(){
echo <<<EOT
<script src="/wp-content/themes/шаблон/js/jquery-1.12.4.min.js"></script>
<script src="/wp-content/themes/шаблон/js/файл.min.js"></script>
...и здесь какой-то код...
EOT;
}
/** Подключение в wp_footer JS скриптов **/

 

 

 

Как понимаете, между EOT нужно поместить все строки js кода из своего файла footer.php

 

 

 

 

В качестве постскриптум:

 

Если у кого-то из админов после организации описанного варианта перестанет работать какой-то функционал – т.е файлы js не хотят подгружаться (отрабатываться во фронтенде ) не переживайте! и не спешите относить “поломку” к несовместимости используемых на сайте скриптов – как это ещё называют к конфликту скриптов

 

 

Советую ещё разок прогуляться в футерный файл и изучить его на предмет подключенных вариантов хуков.

Дело в том, что большинство шаблонов обогащены настройками через админпанель: например, есть такая плюшка как “добавление произвольного текста в подвал сайта”… Вот как раз эти настройки (или что-то подобное) организованы всякими хуками…

 

Сегодня подробно об этом не буду – есть иные статьи…

 

Словом, посмотрите наличие рядышком с пресловутым </body> строк типа такой:

 

 

 

<?php $theme->hook('html_after'); ?>

 

 

Закомментируйте эту функцию темы или совсем удалите: рассмотрите что для вас важнее – настройки темы или скоростя загрузки сайта.

 

 

Вот так можно закомментить функцию:

 

 

<?php /** $theme->hook('html_after'); это или удалить или закомментить */?>

 

 

После этих манипуляций все скрипты js безошибочно подключатся…

 

 

 

 

 

 

 

 

На этом у меня всё!

 

…возможно, что-то не ясно пояснил в тексте (настрой не писательский ноне)) – спрашивайте в комментах… помогу.

 

 

 


...город веб мастеров Михалика.ru © - запросто с WordPress - ATs media squad

 


mihalica.ru

 

 



...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !



Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





Нажатия на кнопочки определяют Ваше высокое гражданское сознание

Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©