Правильное подключение JS и CSS в WordPress
Йоу-йоу! Те, кто уже читали мой блог знаю, что я SEO-оптимизатор, следовательно, я постоянно пользуюсь системами аналитики, например, «Яндекс Метрика». В этих системах хочется видеть действительную картину (точные данные), но этого не всегда получается достичь на начальных этапах т.к. большинство заходов — это как правило владельцы сайта или вэб-мастера. Иногда их «любовь» к своему сайту достигает космических масштабов и в «метрике» куча посещений, которых на самом деле нет.
Чтобы видеть правильную статистику сайта, исключая таких пользователей, нужно правильно подключать скрипты. Правильное подключение скриптов нужно не только для систем статистики, но и для плагинов или просто подключение только нужных css и js файлов на странице.
Начало
Для разработчиков сайтов на wordpress не ни какого секрета, что в это CMS существует событие (речь не про функцию) wp_enqueue_scripts, которое и осуществляет подключение ваших css и js. Правильным решением для подключения стилей и javascript’ов своей темы будет создать функцию и добавить её к событию. Такой подход реализован во множестве тем и (для тех кто шарти) в underscores.me. И так как это выглядит.
Такой код подключит на ваш сайт файл style.css из корня вашей темы. Тут важно упомянуть функции wp_enqueue_style и wp_enqueue_style. С помощью них вы и подключаете свои скрипты. Если вы не знаете как они работают, то настоятельно рекомендую прочитать про них.
Подключение для скриптов аналитики
Таким образом вы исключите из метрики авторизированных пользователей. Если вам нужны авторизированные пользователи, но не нужны администраторы то вы можете is_user_logged_in() заменить на is_admin(). Если вам нужно более точные настройки по типам пользователей то вы, например, можете проверять права на действия.
Подключение скриптов для плагинов
Плагины это очень сложна штука. Нужно понимать что нужно на данной странице пользователю в данный момент, а что нет. На своём сайте в плагине для определения вхождений ключей в текст я подключаю стили и js дважды. В первый раз при загрузке страницы (загружается плагин по шорткоду) и во второй раз в момент отображения ответа по ajax. Как же достичь такого же в своём плагине.
Допустим у нас есть задача по шорткоду вывести текст и подключить текст для него. В нашем фале мы пишем следующие:
Таким образом мы зарегистрировали свой стиль и вызвали его в функции, которая выполняется на странице с шорткодом. Теперь если вызвать шорткод shortcode_name то мы увидим строку ‘some string’ и поключенный наш стиль. То же самое касается и javascript-файлов.
Подключение на определённых страница
На самом деле это очень обширная тема, она явно не для одной статьи. Я вам покажу всего пару приёмов.
Подключение только на главной странице
Так мы подключили разные скрипты для главной страницы в случае если есть на ней вывод новостей и в случае если нет.
Подключение скриптов для страницы по адресу
Я конечно бы мог вам показать как подключать скрипты на страницах с проверками is_page(), is_single, is_singular() и т.д. но это не очень интересно. Я вам покажу как проверить страницу по адресу.
Допустим у нас есть две страницы example.com/contact и example.com/отзывы. В одном случае ссылка на страницу на английском языке, во втором на русском. К каждой странице нужно подключить разные стили. Код:
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.
Источник
Как добавить пользовательский JavaScript на WordPress-сайт
Существует несколько способов добавления пользовательского JavaScript в WordPress. В этом руководстве мы рассмотрим каждый из них.
Добавление пользовательского JavaScript на WordPress
Чтобы добавить собственный JavaScript-код на WordPress- сайт, нужно использовать:
Чего не нужно делать
Самый простой способ добавить пользовательский скрипт в WordPress – это использовать тег
1. Использование плагина для добавления пользовательского JavaScript-кода
Использование плагина рекомендуется, если:
1.1. Плагины для редактирования header.php и footer.php
Первый вариант – использование плагина для редактирования шаблонов header.php и footer.php темы оформления WordPress. Если нужно добавить скрипты, которые загружаются до содержимого страницы, необходимо отредактировать шаблон шапки. Скрипты, которые загружаются после содержимого веб-страницы, добавляются в шаблон футера.
Плагин Insert Headers and Footers позволяет редактировать шаблоны хедера и футера. Он добавляет скрипты к хукам действий wp_head или wp_footer соответственно.
1.2. Плагины для добавления пользовательского JavaScript
1.3. Скрипты, специфичные для плагинов
Создатели популярных JavaScript-библиотек часто публикуют бесплатные плагины в репозитории WordPress.org для добавления своих скриптов. Подобные плагины поставляется со встроенными параметрами конфигурации для конкретной JavaScript-библиотеки.
Например, плагин GA Google Analytics позволяет интегрировать Google Analytics на сайт прямо из панели администрирования WordPress. Он поставляется со встроенными функциями, специфичными для скрипта Google Analytics.
2. Редактирование файла functions.php дочерней темы оформления
Также можно использовать встроенные в WordPress функции и хуки действий. В этом случае необходимо отредактировать файл functions.php и вручную загрузить скрипт на используемый сервер. Также желательно создать дочернюю тему оформления для сохранения ваших настроек.
Затем добавьте PHP-код, который ставит в очередь или выводит пользовательский JavaScript-код, в functions.php дочерней темы оформления. Это можно сделать через меню Внешний вид> Редактор тем в панели администрирования WordPress.
2.1. Добавление собственных скриптов в очередь с помощью функции wp_enqueue_script()
С помощью wp_enqueue_script() можно добавить собственный JavaScript в шаблоны хедера и футера. По умолчанию функция размещает скрипты в раздел страницы.
Чтобы добавить скрипт в хедер, нужно определить собственный дескриптор (‘custom’ в примере, приведенном ниже) и путь к скрипту. А также использовать функцию get_stylesheet_directory_uri() для получения URI каталога дочерней темы оформления.
Функция WordPress wp_enqueue_script() и хук действия wp_enqueue_scripts имеют почти одинаковые имена. Но это разные методы.
Функцию wp_enqueue_script() можно использовать для добавления пользовательского JavaScript-кода в шаблон футера. Для этого потребуется определить дополнительные параметры:
Для добавления зависимости, которая не зарегистрирована в WordPress, нужно использовать собственный дескриптор. Но перед этим необходимо зарегистрировать его и поставить зависимость в очередь с помощью функции wp_enqueue_script().
2.2. Вывод встроенного скрипта с помощью хуков действий wp_head и wp_footer
Пример использования хука wp_head для вывода скрипта в шаблоне хедера:
Пример использования wp_footer для вывода скрипт в шаблоне футера:
Скрипты, добавленные с помощью этих хуков, не будут загружаться в панели администрирования и на странице входа. Чтобы запускать пользовательские скрипты в панели администрирования WordPress, необходимо использовать хуки действия admin_head и admin_footer в функции add_action().
Заключение
Использование плагина для добавления пользовательского JavaScript является рекомендуемым методом. Эти плагины гарантируют, что скрипты будут загружаться в правильном порядке.
Источник
Правильное подключение JavaScript и Style в WordPress
Многие начинающие веб-мастера и блогеры для создания собственного сайта, используют готовый программный «движок». На сегодняшний день существует большой ассортимент CMS – Системы управления содержимым. Все они в той или иной мере функциональны, а различия их скрываются в мелочах, которые можно самостоятельно подкорректировать.
Одним из наиболее удобных, функциональных и бесплатных CMS, является WordPress. Данная программа просто предназначена для создания блогов, однако, может быть использована в иных проектах.
Подключение JavaScript в WordPress
Многие пользователи WordPress, в скором времени начинают задумываться об улучшении системы. Сделать это можно, путем добавления различного рода плагинов (расширений), модулей, JavaScript и т.д.
Итак, для того чтобы подключить JavaScript в WordPress, можно воспользоваться как минимум двумя способами. Первый и наиболее ошибочный— это использование через функцию « wp_head ».
Этот вариант подключения JavaScript в WordPress является неправильным. К примеру, если вы загружаете jQuery вручную, и в то же время один из плагинов также подключает библиотеку jQuery по правильному пути, то в итоги получится что загрузка происходит дважды. А еще возможно, что это могут быть две разные версии, которые будут вызывать конфликт.
Наиболее приемлемый вариант
Благодаря тому, что WordPress является полностью открытым и бесплатным приложением, неудивительно, что оно имеет огромное количество пользователей. Среди которых немало и программистов помогающим главным разработчикам и выпускают различные расширения. Это касается и добавления плагинов, после которого не произойдет каких-либо недоразумение.
Правильное добавление сценария в WordPress
Описанная выше, загрузка сценариев (более правильная), производится с помощью довольно простого способа. Ниже, будет представлен код, который необходимо будет внести в файл functions.php или же в собственный файл плагинов.
Загрузка скрипта из темы оформления.
Загрузка скрипта из плагина.
Примечание: Данная функция утверждает 5 параметров:
В итоге вводится команда « wp_enqueue_script() », которая позволяет запуститься скрипту.
Правильное добавление style.css (стилей) в WordPress
Естественно, что изменение стилей или подключение нового файла стилей, рано или поздно понадобиться каждому пользователю данного движка. Не все знаю, как правильно это делать, поэтому ниже будет доступен код. Пользователю потребуется лишь изменить название стиля на собственное. Принцип запуска сценария такой же, как и для расширений.
Следует обратить внимание на наличие команды « wp_enqueue_scripts » несмотря на то, что применялась она ранее для добавления скрипта. Все дело в том, что данная команда универсальна и подходит как для оформлений, так и для скриптов, а также иных расширений.
А также если вы работаете с дочерней темой, то можно использовать команду « get_stylesheet_directory_uri ». Пример использования:
Больше информации по функциям:
Перечисленные способы на сегодняшний день наиболее удобные как для пользователя, так и для разработчика. Если имеются вопросы, можно оставить комментарий.
Источник