Как получить код зарегистрированного JS скрипта WordPress


Содержание материала:

javascript — В wordpress, почему я должен регистрировать и запускать js-скрипты с помощью wp_register_script() и wp_enqueue_script()?

Почему бы не добавить скрипт, который мне нужен просто в HTML-контенте?

    2 2
  • 6 июн 2020 2020-06-06 21:36:29
  • marco

2 ответа

Потому что плагинам нужен способ добавления скриптов.

  • 6 июн 2020 2020-06-06 21:36:30
  • Gant

Вот несколько причин для ПОЧЕМУ!

  • Прежде всего, это делает вас УДИВИТЕЛЬНЫМИ среди ваших друзей
  • Он помогает определить зависимости используемого скрипта, например, не нужно будет вставлять другие скрипты, такие как jquery, jquery-ui, thickbox или любые другие скрипты, если вы уже зарегистрировали их.
  • Это делает ваш код более смысловым, и ваш код будет иметь больше смысла.
  • Ваша тема или плагин будет иметь меньше шансов столкнуться с другими (например, файлы загрузки jQuery с двойной загрузкой, файлы fancybox и т.д.),
  • У вас будет больше возможностей управления, где вы хотите, чтобы js вставлялся на страницы с помощью простых условных тегов, таких как

Как правильно подключать CSS стили и JS скрипты в тему WordPress

Эта короткая заметка, которая будет полезна тем кто начинает создавать темы на WordPress. Или возможно вы занимаетесь этим уже некоторое время, и делаете это не на 100% эффективно. Сегодня мы рассмотрим как правильно и корректно подключить CSS стили и JS скрипты к своей теме.

Самый простой способ подключения, это открыть файл header.php и с помощью обычной директивы
подключить свои CSS стили. Примерно также можно поступить и с JS скриптами, подключив их тегом

Такой способ хоть и является рабочим, но не есть правильным. Как минимум могут возникнуть проблемы с плагинами кэширования — они не будут корректно видеть css и js файлы темы, которые необходимо минифицировать, объединить в один и закэшировать.

Правильный способ подключения css стилей и js скриптов в тему WordPress

Корректнее делать подключение специальными PHP функциями, внутр файла functions.php вашей темы. Рассмотрим в качестве примера, то как это организовано в официальной теме twentytwelve для WordPress.

Финальный код подключения стилей и скриптов будет в конце статьи. А пока разберем все по частям.

Выглядит это следующим образом, есть функция twentytwelve_scripts_styles , ее название может быть любой. Внутри которой мы будем подключать CSS стили и JS скрипты. После ого как эта функция объявлена, мы вызываем ее через add_action

Аналогичная конструкция скорее всего уже присутствует в вашем шаблоне, если вы взяли за основу готовую WordPress тему.

Теперь нам остается только подключить наши CSS и JS, в данном случае внутри функции twentytwelve_scripts_styles()

Рассмотрим пример подключения стилей.

Подключаем CSS стили в теме WordPress

Сначала необходимый CSS файл регистрируем, и затем подключаем его. Выглядит это вот так:

Регистрация происходит функцией wp_register_style(); в которую передаются 4-ре параметра:

  1. Имя стиля, которое в дальнейшем будем использовать при подключении данного стиля. Имя придумываем самостоятельно.
  2. Путь к CSS файлу. В примере выше он содержит переменную для определения пути каталога с темой.
  3. Массив с перечислением зависимостей. Например мы подключаем reset.css для сброса стилей, и все остальные CSS файлы должны быть подключены после него. Соответственно при подключения файла style.css мы поставим ему зависимость от файла у него будет зависимость от файла reset.min.css которому мы дали имя my_reset и поэтому параметр с зависимостями будет выглядеть вот так array(‘my_reset’)
  4. Четвертый параметр — версия файла. Параметр необязательный.
  5. Пятый — тип устройства для которого должен быть применен данный стиль. В нашем случае это ‘screen’

После регистрации подключаем зарегистрированные файлы стилей функцией wp_enqueue_style( ‘style_name’); в которую передаем один параметр — имя зарегистрированного стиля.

Можно делать подключение файла сразу через функцию wp_enqueue_style(); передав в нее те же параметры которые мы передаем в функцию wp_register_style(); при регистрации стилей.

Подключаем JS скрипты в теме WordPress

Аналогично стилям, JS скрипты сначала регистрируются, и затем подключаются.

Либо их можно сразу подключить, записав все необходимые параметры в wp_enqueue_script(); функцию.

Готовый пример подключения CSS и JS файлов в файле function.php в теме WordPress

Привожу итоговый рабочий пример подключения CSS и JS файлов в шаблоне WordPress в файле functions.php

Как я уже писал выше, плюс такого подключения в том, что теперь CSS и JS файлы будут корректно определятся и обрабатываться плагинами в WordPress. Например плагином для кэширования и минификации стилей и скриптов.

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

зарегистрировать js для определенной страницы в script-calls.php

У меня есть код js

js относится к следующему css

Проблема в том, что я использую этот код для определенной страницы , а не для всего сайта, и он отлично работает, за исключением того факта, что на любой другой странице ( Home и т. Д.) Я получаю сообщение об ошибке, .parent на .parent элемента .parent . Ничего необычного, пока я не нуждаюсь в нем на этой странице.

Если это помогает, в этот момент код js определенный как shomz.js , регистрируется следующим образом:

На этом этапе, чтобы избежать определения .parent/.child для каждой отдельной страницы, мне было интересно, есть ли возможность зарегистрировать js в файле script-calls.php , будучи активным только для определенной страницы (s ) по id, например?

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

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

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

А в нужном месте идет вызов функции из этого файла:

Т. е. в браузере в нужном месте показана дата, а в исходном коде страницы на том месте — функция.

Топ-пост этого месяца:  Скобки в регулярных выражениях

Вот в этом и возникает проблема! Мне нужна дата, а не функция с параметром! И я не совсем могу понять как это можно сделать.

Как я понимаю данную ситуацию: файл printdate.js находится на сервере. При отрисовке страницы, по всей видимости, содержимое этого файла куда-то (куда?) загружается. И далее, при продолжении отрисовки, натыкаясь на код printShortDate(1333447200000) запускается функция printShortDate, которая возвращает нужный код.

Вот здесь у меня позникает несколько вопросов:
1)Правильно ли я понимаю то, о чем написал выше и если нет, то в каких местах ошибаюсь?

2)Каким образом можно получить код файла printdate.js (попытка прописать путь в строке браузера завершилась неудачей)?
Если честно, сам код меня особо не интересует, меня больше интересует то, что возвращает функция printShortDate, находящаяся в этом файле. Поэтому, этот вопрос можно наверное и переформулировать: как выполнить функцию, находящуюся в файле на сервере?

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

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта

Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все было хорошо, скрипты нужно подключать используя функцию wp_enqueue_script(). Это в дальнейшем позволит без лишних проблем объединять несколько JS файлов в один. А также обезопасит вас от конфликтов скриптов, когда зависимый скрипт подключается после того от которого он зависит.

Устаревший вариант подключения JavaScript файлов в WordPress

Раньше в WordPress файлы скриптов подключались классических методом путем размещения кода в теге HEAD или перед закрывающим тегом /BODY. Например так:

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

Добавляем скрипт с помощью wp_enqueue_script()

Сейчас в WordPress, чтобы зарегистрировать и подключить скрипт JavaScript достаточно воспользоваться всего одной функцией — wp_enqueue_script(). Для подключения JavaScript в файл functions.php вашей темы добавьте следующий код:

Здесь script-name — рабочее название скрипта.

Предполагается, что файл скрипта JavaScript расположен в одной директории (папке) с вашей темой.

Благодарности

При написании статьи были использованы следующие источники:

В WordPress, почему я должен зарегистрировать и Епдиеие JS скрипты с wp_register_script () и wp_enqueue_script ()?

Почему бы не добавить сценарий, который мне нужно просто в содержании HTML?

Вот несколько причин , почему!

  • Прежде всего, это делает вас УДИВИТЕЛЬНЫМИ среди ваших друзей
  • Это помогает определить зависимости от сценария, который вы используете, как не нужно будет ставить в очередь другие сценарии, как JQuery, JQuery-UI, Thickbox или любые другие сценарии, если вы уже зарегистрированы один.
  • Это делает ваш код более семантическим, и ваш код будет иметь больше смысла.
  • Ваша тема или плагин будет иметь меньше шансов конфликтует с друга (например, двойной загрузки файлов Jquery, FancyBox файлов и так далее)
  • Вы будете иметь больше контроля, где вы хотите JS вставлять на страницы с простыми условными тегами, как

Лучшие способы для загрузки скриптов в WordPress

Существует несколько способов загрузить скрипты для WordPress. Выбор в пользу одного из них надо делать, ориентируясь на свои задачи: нужно ли вам, чтобы скрипт выполнялся для всей темы, только для отдельных постов или только для конкретных страниц. В этой статье речь пойдет о том, как использовать и загружать скрипты JavaScript либо jQuery в темах WordPress путем простой вставки в настраиваемые мета-боксы.

В целом, можно использовать 2 сценария загрузки скриптов:

  • Загружать скрипты для всего сайта или темы
  • Загружать скрипты с определенным условием для конкретных постов или страниц

Загрузка скриптов для использования на всём сайте

Есть по меньшей мере 2 способа для добавления файлов JavaScript или других скриптов, чтобы в последствии использовать их на сайте. Вот как добавляются скрипты для «шапки» или «подвала» сайта в панели администратора практически в любой современной теме:

Эти боксы в основном используются для добавления скриптов вроде Google Analytics или скриптов онлайн-чата . Если в вашей теме таких боксов нет, можно внести правки в код файла functions.php:

Примечание: После однократной регистрации скрипта нет необходимости регистрировать его повторно; его можно вызывать в зависимости от указанных условий в функции wp_register_script :

Загрузка скриптов только для определенных страниц или постов

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

Если в вашей теме таких боксов нет, кликните по вкладке «Настройки экрана» справа вверху и активируйте отображение боксов для скриптов на экране в режиме редактирования:

Если в вашей теме вообще не предусмотрены отдельные боксы для добавления скриптов, добавьте следующий код в конце файла functions.php. При этом не забудьте заменить значение ‘007’ на нужный вам page_id и указать верный путь расположения .js-файла для приведения скрипта в рабочее состояние:

Загрузка скриптов для дочерней темы

Единственная разница между загрузкой скриптов для родительской и дочерней темы заключается в следующем:

  • get_template_directory_uri() — используйте эту функцию для родительской темы.
  • get_stylesheet_directory_uri() — используйте эту функцию для дочерней темы.

Приведенный ниже код следует применять для загрузки скриптов в зависимости от указанных условий в родительской теме:

Загрузка скриптов при помощи кода

Просто создаем новую папку «js» в дочерней теме в корневой папке и туда помещаем наши файлы с расширением .js. По приведенному коду подразумевается, что ваш файл скрипта носит название your-script. Если вы назвали файл иначе, то и пути к файлу, а также имена файлов в коде тоже надо изменить.

Загрузка скриптов для настраиваемого фона

А вот код для популярной темы Metro , созданной StudioPress. Этот код также можно применять для дочерних тем на основе Genesis, чтобы добавить адаптивное фоновое изображение на сайте:

Загрузка скриптов для плагинов вручную

Большинство плагинов, включающих в себя скрипты, также содержат и код для загрузки скриптов, так что от вас никаких дополнительных действий не потребуется. Но если вам попался плагин, который содержит только сам код или только PHP-скрипт, то вам пригодится вот этот метод для загрузки jQuery-скриптов в плагинах:

Для загрузки скриптов применяется метод, аналогичный загрузке таблиц стилей CSS, включая функции wp_register и wp_enqueue для корректной обработки и взаимодействия с файлом style.css.

Плагин Simple Scripts

Если в вашей теме нет отдельных полей для добавления скриптов, можно просто установить вот этот плагин под названием Simple Scripts.

Источник: WPSites.net

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: 5 / 5. Количество голосов: 2

My WordPress Note

Рабочие заметки веб-мастера по wordpress и даже больше

WordPress: Вставка javascript в запись или страницу

Добавление записей и страниц в вордпресе не вызывает особого труда и не требует специфических знаний. В этом заслуга достаточно простых и в то же время удобных текстовых редакторов. Однако есть в них одна крайне неприятная особенность: в целях безопасности они перекодируют кавычки «» и другие используемые в скриптах знаки в специальные html-символы, что приводит к неработоспособности вставляемых java-скриптов. Да и в случаях, когда эти символы остаются на месте, скрипты все равно удивительным образом отказываются работать. От этого не спасает и переключение редактора в режим текста (HTML). В общем, внедрение javascript к себе на страницу/запись та ещё морока. Но что же делать, когда тот или иной скрипт крайне необходим на данной странице, а добиться его корректной вставки на страницу не получается? Придется придумывать обходные пути и немного изменять код используемой вами темы оформления.

Топ-пост этого месяца:  Кастомный вход на сайт. Как обработать условие «is_wp_error»

Самый простой и, наверное, очевидный способ добавления javascript на сайт — добавить его в хэдер (header.php) или футер (footer.php) нашей темы оформления через редактор тем. Но как правило специфические скрипты нам нужны на определенной странице или в определенном месте в тексте записи. Поэтому данный вариант подходит только для скриптов, которые работают на всем сайте. В нашем же случае идеальным был бы вариант добавления необходимого кода в какую-то определенную область в редакторе страницы/записи, и чтобы затем этот код выводился в определенном месте на странице.

Здесь мы сталкиваемся с двумя вариантами развития событий, которые определяются условиями работы скрипта. Для примера возьму любой таймер (пусть будет один из измененных мной от timergenerator), а второй, скажем, скрипт опроса от сервиса UpToLike.ru.

Оговорюсь заранее, что в обоих случаях будут использоваться стандартные вордпресовские произвольные поля. Если у вас они не отображаются при редактировании страницы/записи, то их необходимо включить. Нажимаете «Настройки экрана» в правом верхнем углу страницы и в выехавшем окошке ставите галочку возле «Произвольные поля».

Вставка javascript-кода в

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

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

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

Допустим, что вы уже вставили необходимый код в произвольное поле и опубликовали страницу/запись. Однако Ваш код еще нигде не выводится. Чтобы это исправить необходимо зайти в редактор тем и вставить перед закрывающим тегом следующий php-код, который отвечает за вывод содержимого произвольного поля:

При этом вместо моего postcode вы должны ввести название вашего произвольного кода.

После этого можете вернуться на страницу, куда вы вставляли ваш яваскрипт-код, и просмотреть исходный код страницы (сочетание клавиш в браузере как правило ctrl+u). Если вы все сделали правильно, то перед закрывающим хэад должен стоять ваш добавленный на страницу яваскрипт-код.

При это отмечу, что таким образом можно добавлять в «голову» сайта не только яваскрипт-код, но и css-код.

Вставка javascript-кода в текст записи/страницы

Необходимость вывода определенного кода в тексте страницы у меня возникла при вставке скрипта опроса от uptolike.ru в предыдущей статье. Простой яваскрипт, который вставляется ссылкой на сайт, не требует особого шаманства. Он работает и так. А вот когда мы пытаемся вставить код, состоящий из нескольких строк, то вордпрес навязчиво пытается добавить туда свои теги перевода строк или теги абзацев, что полностью выводит вставляемый яваскрипт-код из строя. Чтобы обойти это можно использовать произвольные поля, где такого явления не наблюдается и код публикуется в его исходном виде.

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

Чтобы использовать шорткод для вставки javascript-кода на страницу необходимо добавить в конец файла темы functions.php следующий php-код:

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

[customscript]Имя вашего произвольного поля[/customscript]

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

Как добавить Google Analytics на сайт WordPress

Доброго времени суток, товарищи! Сегодня, друзья, мы с вами создадим аккаунт Google Analytics, добавим сайт, получим код отслеживания Analytics и установим счётчик гугл аналитикс на свой любимый сайт. Установка будет Google Analytics на WordPress с плагином и без. Yandex.Metrika и Google Analytics, пожалуй, самые популярные инструменты веб-аналитики на сегодняшний день.

Счётчики для сайта нужны для того, чтобы вы видели, сколько посетителей приходят на ваш сайт, сколько времени тратят на нём, какие страницы посещают и куда с него переходят (и переходят ли) и т. д.. Для установки счётчика Яндекс.Метрика на сайт у меня есть инструкция, а о Google речь пойдёт ниже.

Подключение Google Analytics (аналитика) к сайту WordPress

Google Analytics — бесплатный сервис от гугле для сбора статистики посещений ваших веб-ресурсов. Статистика собирается на сервере Google, вам только нужно разместить JS-код отслеживания на страницах сайта вордпресс. Как добавить/установить код отслеживания Google Analytics на сайт WordPress? Очень легко и просто.

Подключить Google Analytics (сокращенно GA) к своему сайту вордпресс можно напрямую (вставка кода вручную в шаблон) или с помощью специальных плагинов.

Если готовы действовать, друзья, тогда вперёд. Я использую на всех своих сайтах аналитику от Гугле и от Яндекс. По моему все вебмастера так делают и вам настоятельно советую.

Регистрация аккаунта Google Аналитика. Добавляем сайт

Для чего собирать статистику, наверное, объяснять нет смысла: без хорошей аналитики оценить эффективность сайта практически невозможно. Google Analytics не только позволяет анализировать продажи и конверсии, но и предоставляет актуальные данные о действиях пользователей на сайте. Как они перешли на него, а также помогает понять, как привлечь их снова.

Также Google Analytics позволяет просматривать карту кликов по ссылкам на сайте, тем самым даёт понять, в какой раздел сайта больше всего приходит посетителей.

Чтобы начать сбор статистики по сайту и получить код отслеживания вам необходимо зарегистрироваться в Google Аналитик используя свой аккаунт Google. Перейдите по адресу https://analytics.google.com/analytics/web/provision/?authuser=0#/provision и нажмите кнопку Зарегистрироваться:

Создание и настройка аккаунта Google Analytics

Войдите в Google Analytics c использованием данных от вашего аккаунта в Google. Заполните форму регистрации. Нужно заполнить обязательные поля: Название аккаунта; Название сайта; URL сайта; выбрать Отрасль (тематика вашего сайта) и указать из списков Часовой пояс отчетов:

Регистрации нового аккаунта в Google Analytics

Как получить код счётчика гугл аналитикс GA?

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

Получить идентификатор отслеживания и принять пользовательское соглашение

Через пару секунд откроется новая страница. После добавления нового сайта в Google Analytics ему автоматически присваивается идентификатор отслеживания, вида » UA-XXXXXX-X » и код отслеживания Global Site Tag (gtag.js), необходимый для вставки на страницы сайта:

Идентификатор отслеживания и код счетчика Аналитики Google

Если у вас уже есть зарегистрированный аккаунт в Google Аналитик, перейдите во вкладку «Администратор» (внизу слева страницы) и в колонке «Ресурс» нажмите на меню с добавленным сайтом. Выберите — «Создать ресурс»:

Создать ресурс в гугл аналитик

При создании ресурса вы получите идентификатор отслеживания и код отслеживания Global Site Tag (gtag.js). Заполните форму регистрации и нажмите «Получить идентификатор отслеживания»:

При создании ресурса вы получите идентификатор отслеживания

Переходим к следующему шагу. Устанавливаем код счётчика Google Analytics на страницы сайта WordPress. Это можно сделать вручную или при помощи плагина.

Добавляем код Google Analytics на сайт вручную

В бесплатных темах можно вставить код GA напрямую, путём редактирования файла — Заголовок ( header.php ). Внешний вид — Редактор. Открываем файл header.php и вставляем код (gtag.js) отслеживания в раздел тэгов . . Данный счетчик аналитики Google рекомендует устанавливать перед закрывающим тегом . В WP это вот так:

Топ-пост этого месяца:  Задать имя в профиле

Установка кода GA на сайт вордпресс

Добавили счётчик и обновили файл. Готово. После установки кода Google Аналитики на веб-сайт всё отразится в отчетах по официальным данным в течение 48 часов. Обратите внимание, что после обновления темы код нужно будет устанавливать заново. Для того, чтобы об этом не беспокоится (переустанавливать счётчик гугла) воспользуйтесь другими способами.

В премиум темах/шаблонах вордпресс есть специальные поля, куда можно добавить Google Analytics или другой код или мета-теги. Например, в настройках платной темы есть раздел Analytics and/or JavaScript Code. Вставляете скрипт и сохраняете. После обновления темы вам не придётся добавлять код опять. Он будет там всегда:

Раздел в платных темах для Google Analytics и других счётчиков

Как убедиться, что код отслеживания работает. Зайдите на сайт и проверьте, было ли это посещение зарегистрировано в отчетах в режиме реального времени. Отчеты раздела «В режиме реального времени» позволяют отслеживать текущие действия на вашем сайте. Если в них есть данные, значит ваш код отслеживания работает нормально и отправляет нужные сведения в Google Analytics:

Главная страница Google Аналитики

Идём дальше. Добавить скрипт Analytics на свой веб-ресурс можно через специальные плагины WordPress.

Установка Google Аналитика с помощью плагина WordPress

Для простоты установки кода в CMS WordPress существует специализированные плагины. Представлю вам парочку, а вы выбирайте подходящий.

Плагин GA Google Analytics

GA Google Analytics для WordPress

Это легкий плагин, который вставляет необходимый код отслеживания GA на ваш сайт. Для установки плагина зайдите в консоль управления WP в раздел «Плагины» и нажмите «Добавить новый». В Поле «Поиск плагинов» введите название модуля GA Google Analytics. Установите активируйте его. Затем зайдите в Настройки — новый пункт Google Analytics. Раскройте Plugin Settings, выберите Global Site Tag / gtag.js и в поле GA Tracking >UA-XXXXXXXX-X :

Настройка плагина GA Google Analytics

Нажмите «Сохранить изменения». Через 24-48 часов вы можете войти в свою учетную запись Google Analytics и просмотреть свою статистику. С данным плагином, при обновление темы, ваш код не потеряется. Статистику вы будете смотреть на сервисе гугла, а если вы не хотите покидать свою админку и просматривать аналитику в консоле вордпресс тогда следующий плагин для вас.

Google Analytics Dashboard for WP by ExactMetrics (formerly GADWP)

Google Analytics Dashboard for WP by ExactMetrics (formerly GADWP)

Этот плагин Google Analytics для WordPress позволяет отслеживать ваш сайт с использованием новейшего кода отслеживания gtag.js и позволяет просматривать ключевые статистические данные прямо в вашей админке WordPress (кстати, и метрику от Яндекс можно в админке смотреть с этим инструментом). Данный plugin самый популярный на данный момент, его установили уже более 20 442 543 раз. Поддерживает русский язык и поэтому с настройкой у вас трудностей не возникнет. Возможности и настройки плагина большие, все и не перечислить в этом посте. Читайте на официальной странице модуля https://ru.wordpress.org/plugins/google-analytics-dashboard-for-wp/ .

Для установки плагина зайдите в консоль управления WordPress в раздел «Плагины» и нажмите «Добавить новый». В Поле «Поиск плагинов» введите Google Analytics Dashboard for WP. Нужный плагин будет первым в списке. Установите и активируйте его. После этого, у вас появится новый раздел Google Аналитика с подразделами. Первым делом вам нужно авторизовать плагин, чтобы получить код доступа — пункт Общие настройки:

Настройки Google Analytics — Авторизация плагина

После ввода кода откроется окно с общими настройками:

Общие настройки GA

После того, как плагин авторизован и выбран домен по умолчанию, код отслеживания Analytics автоматически вставляется во все веб-страницы. Все внесённые изменения нужно сохранить. При необходимости вы можете задать дополнительные настройки плагину в подразделах Бекэнд и Фронтэнд, Код отслеживания. А также интегрировать его с Accelerated Mobile Pages (AMP) и так далее. Как я уже говорил плагинчик на русском, настройте его по своему усмотрению.

Просматривать статистику вы можете Консоль — Главная — новый блок Консоль Google Analytics. Выбирайте нужные показатели из раскрывающего списка. У меня сайт новый и поэтому показатели на нуле:

Новый блок: Консоль GA

Всё просто и удобно. Не надо бегать на сервис гугле смотреть подробную статистику. Смотрите в админ — панели сайта.

В заключение

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

Вот пожалуй и всё на сегодня. До новых встреч, коллеги. Удачи!

ez code

Просто о сложном.

Правильное подключение JS скриптов и CSS файлов в WordPress

Если вы уже разрабатывали плагины или темы для WordPress, то наверняка, знаете, что производительность вашего плагина очень важна, так как на сайте может быть установлено много плагинов. Одна из проблем, которую можно оптимизировать — подключение js и css файлов. В этой статье мы рассмотрим принципы правильного подключения скриптов и стилей к вашему WordPress плагину или теме.

Подключение скриптов и стилей

Если нам нужен CSS или JavaScript код на странице мы, как правило, размещаем его внутри соответствующего тега, либо подключаем его с помощью ссылки на файл, в котором он расположен:

Однако, это не правильный подход для подключения скриптов в WordPress: плагины для кэширования не смогут корректно обрабатывать этот код и производительность сайта не возрастет. Правильно — использовать хук admin_enqueue_scripts.

Первый параметр функции wp_enqueue_script — имя скрипта, оно всегда должно быть уникальным, поэтому мы используем собственный префикс для нашего WordPress плагина.

Данное решение не идеально — наш скрипт будет загружаться для каждой страницы интерфейса администратора. Мы можем использовать переменную $hook и подключать скрипт только на нужных страницах.

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

Удаление ненужного скрипта

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

Шорткоды

Многие плагины и темы имеют набор шорткодов (shortcode) для взаимодействия с сайтом, некоторым из них требуются скрипты или стили. В этом случае у нас нет способа проверить необходимость подключения скрипта, как в предыдущем примере.

Самый простой способ — зарегистрировать фильтр для события the_content и проверить используется ли шорткод, если да, то подключаем скрипт.

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

Если вы еще не используете Composer для загрузки ваших классов, то советую вам начать. Файл composer.json для нашего плагина будет выглядеть так:

Файл src/shortcodes/HelloShortcode.php содержит класс для нашего шорткода.

Метод run() вернет HTML разметку для шорткода и установит свойство loaded равным true, если шорткод был использован.

Метод enqueueScripts() подключит необходимые стили и скрипты, при загрузке плагина. Также в файле плагина надо зарегистрировать нужные шорткоды.

Переменная $shortcodes содержит список шорткодов. Первый цикл зарегистрирует их и установит в качестве обработчика метод run(). Далее мы используем wordpress хук wp_footer для подключения скриптов перед закрытием тега body.

Добавить комментарий