Как вставить js в php

Как вставить js в php

Покинул форум
Сообщений всего: 152
Дата рег-ции: Февр. 2011

Помог: 0 раз(а)

Я щас пишу один модуль для DLE. Создал файл на PHP, подключил к ЧПУ и зашёл на страницу. Пока что вставил в php файл html код вкладок, остаётся только подключить js файлы. Но как это сделать? Варианты типа «Прописать в не годятся, нужно что бы файлы грузились непосредственно на этой странице..

Отправлено: 05 Июня, 2011 — 22:08:35

Покинул форум
Сообщений всего: 2952
Дата рег-ции: Окт. 2010

Помог: 53 раз(а)

ну так пропишите при генерации заголовка ( ) условие генерации текста.
Отправлено: 05 Июня, 2011 — 22:10:30

Покинул форум
Сообщений всего: 152
Дата рег-ции: Февр. 2011

Помог: 0 раз(а)

А можешь дать пример полностью
Отправлено: 05 Июня, 2011 — 22:26:27

Покинул форум
Сообщений всего: 285
Дата рег-ции: Май 2010
Откуда: Тверь

Помог: 4 раз(а)

Как добавить JavaScript код на WordPress сайт?

Вы попали на эту страницу, поскольку вы искали Как добавить JavaScript код на WordPress? Ниже вы найдете ответ на данный вопрос:

Как добавить JavaScript код на WordPress сайт?

Если вы хотите добавить пользовательский JavaScript на свой сайт на WordPress, вам не удастся воспользоваться встроенным инструментом Customizer, который доступен для CSS. Вместо этого, вам нужно будет использовать плагин или изменить файл functions.php своей темы.

На WordPress можно добавлять пользовательский JavaScript несколькими способами. Один из таких методов – использование различных плагинов.

Для добавления пользовательского JavaScript на WordPress можно использовать следующие типы плагинов:

• Плагины для редактирования шаблонов header и footer.
• Плагины для добавления пользовательского JS кода на сайт.
• Скрипт-специфические плагины для добавления и настройки сторонних скриптов, таких как Google Analytics или AdSense.

Кроме того, для добавления пользовательского JavaScript на сайт на WordPress можно использовать функции и хуки WordPress в файле functions.php. Для этого можно использовать следующие хуки:

• Хуки действий (action hooks) wp_head и wp_footer .
• Хуки действий admin_enqueue_scripts , login_enqueue_scripts и wp_enqueue_scripts .
• Функцию WordPress wp_enqueue_script ().

Выбор способа добавления JavaScript кода зависит от ваших потребностей и уровня технической подготовки. Рассмотрите все возможности и выберите наиболее подходящий вариант для своего сайта на WordPress.

Не делай этого никогда, при добавлении JavaScript

Хоть добавление скрипта на сайт WordPress может показаться простым – достаточно добавить тег непосредственно в файл шаблона header.php или footer.php, но этого делать не следует. Это связано с тем, что у WordPress есть определенная последовательность загрузки, которую необходимо уважать в любом случае.

Если вы вставляете свой пользовательский JavaScript непосредственно в шаблон header.php или footer.php, это может вызвать конфликты с вашей темой, плагинами, работающими на вашем сайте, или ядром WordPress. Вместо этого вы должны использовать одну из техник, подробно описанных в этой статье.

Так что никогда не добавляйте строку, подобную следующей, в файлы header.php или footer.php (даже если это технически возможно):

Плагин для добавления JavaScript на WordPress

Использование плагина – это рекомендуемый способ, если вы:

• не хотите напрямую редактировать исходные файлы;
• хотите добавить JavaScript, который не зависит от темы и будет доступен даже после смены темы.

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

Плагины для редактирования header.php и footer.php

Первый вариант – использовать плагин, который позволяет редактировать файлы шаблонов header.php и footer.php вашей темы WordPress. Если вы хотите добавить скрипты, которые загружаются до содержимого страницы, такие как аналитические и отслеживающие скрипты, вам нужно отредактировать шаблон Шапки, в то время как сценарии, которые загружаются после содержимого, идут в шаблон Подвала. Обычно, когда ваш скрипт изменяет элемент, отображаемый на странице, такой как сценарий галереи изображений, его следует поместить в подвал.

Insert Headers and Footers – хороший пример плагина, который позволяет редактировать шаблоны заголовка и подвала. У него простой пользовательский интерфейс с двумя текстовыми областями – одна для заголовка и одна для сценариев подвала. Он добавляет ваши сценарии в хуки действий wp_head или wp_footer .

Вы можете вставлять любой вид сценария в два поля ввода. Вы должны заключить свои сценарии в тег . Кроме того, вы также можете использовать этот плагин для добавления пользовательского CSS в ваш шаблон заголовка – вам нужно только заключить его в тег (обратите внимание, что CSS всегда должен добавляться в шапку).

Плагины для добавления JavaScript кода

Еще один вариант – это использовать плагин, который позволяет добавлять пользовательский JavaScript на ваш сайт WordPress. Эти плагины очень похожи на плагины для редактирования шапки и подвала, и большинство из них также используют хуки действий wp_head и wp_footer . Однако они обычно предоставляют вам больше опций настройки.

Например, плагин Simple Custom CSS and JS позволяет вам определить постоянную ссылку на пользовательские файлы JavaScript, сохранить их в папке wp-content/, управлять вашими скриптами как пользовательским типом записи и многое другое. Если вы хотите добавить несколько файлов JavaScript на ваш сайт WordPress и сохранить их организованными, вы найдете этот тип плагина очень полезным.

Плагины для определенных скриптов

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

Например, популярный плагин GA Google Analytics позволяет добавить Google Analytics на ваш сайт прямо из административной области WordPress. Он содержит встроенные функции, специфические для скрипта Google Analytics, такие как расширенная атрибуция ссылок, анонимизация IP, настраиваемые объекты трекера и другие.

Редактирование файла functions.php вашей дочерней темы

Помимо использования плагинов, вы также можете использовать встроенные функции и action-хуки WordPress, чтобы добавлять JavaScript на ваш сайт. В этом случае вам нужно отредактировать файл functions.php и вручную загрузить скрипты на сервер. Также рекомендуется создать дочернюю тему для ваших настроек, чтобы вы могли безопасно обновлять родительскую тему, не теряя настраиваемый код. Вы можете загрузить свои пользовательские скрипты в корневую папку дочерней темы или, если у вас есть более одного скрипта, вы можете создать для них папку scripts.

Вам нужно добавить PHP-код, который добавляет или выводит ваш JavaScript, в файл functions.php вашей дочерней темы. Вы можете отредактировать этот файл в своем редакторе кода и вручную загрузить обновленную версию на сервер, или отредактировать его через меню Внешний вид – Редактор тем в вашей панели WordPress (см. скриншот ниже).

Подключение через функцию wp_enqueue_script(). Как добавить JavaScript код на WordPress.

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

С помощью wp_enqueue_script() вы можете добавить свой JavaScript код как в шапку, так и подвала. По умолчанию он добавляет скрипты в раздел страницы.

Если вы хотите добавить свой скрипт в шапку, вам нужно определить свой собственный идентификатор (‘custom’ в примере ниже) и путь к скрипту. Как вы можете видеть ниже, я также использовал функцию get_stylesheet_directory_uri() WordPress, чтобы получить URI каталога дочерней темы. А функция add_action() добавляет пользовательскую функцию geniuscourses_enqueue_custom_js() для подключения к действию wp_enqueue_scripts , которое позволяет добавлять скрипты.

/* Custom script with no dependencies, enqueued in the header */ add_action('wp_enqueue_scripts', 'geniuscourses_enqueue_custom_js'); function geniuscourses_enqueue_custom_js() < wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js'); >

Будьте осторожны, хотя встроенная функция WordPress wp_enqueue_script() и action-хук wp_enqueue_scripts имеют почти одинаковое название, они представляют собой разные вещи.

Кроме того, помимо добавления скриптов для шапки, вы также можете использовать функцию wp_enqueue_script() для добавления JavaScript в подвал (footer). Однако в этом случае вам также необходимо определить все необязательные параметры:

1. зависимости: array() так как у нас пока нет зависимостей.
2. версия скрипта: false , так как мы не хотим добавлять номера версий.
3. расположение в шапке или подвале: true , так как мы переключаемся на шаблон подвала, который является нестандартным вариантом. (false – расположение в шапке)

/* Custom script with no dependencies, enqueued in the footer */ add_action('wp_enqueue_scripts', 'geniuscourses_enqueue_custom_js'); function geniuscourses_enqueue_custom_js() < wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', array(), false, true); >

Если ваш скрипт зависит от других скриптов, вам нужно добавить их в параметр array() функции wp_enqueue_script() . Есть несколько популярных скриптов и библиотек, таких как jQuery, которые уже зарегистрированы в ядре WordPress, поэтому вы можете добавить их, используя их зарегистрированный handle (‘jquery‘ в примере ниже).

/* Custom script with jQuery as a dependency, enqueued in the footer */ add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js'); function tutsplus_enqueue_custom_js() < wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', array('jquery'), false, true); >

Если у вас есть зависимость, которая не зарегистрирована в WordPress, вам нужно зарегистрировать и включить ее с помощью другой функции wp_enqueue_script() перед тем, как добавить ее в качестве зависимости, используя ее handle.

Если вы хотите подключить свой скрипт в панели администратора вместо фронтэнда вашего сайта, вам нужно использовать action-хук admin_enqueue_scripts вместо wp_enqueue_scripts в функции add_action() . А для экрана входа в систему вы должны использовать action-хук login_enqueue_scripts , которое добавляет пользовательские скрипты только на страницу входа в систему.

Распечатайте свой встроенный скрипт с помощью хуков действия wp_head или wp_footer.

Хотя документация WordPress рекомендует использовать функцию wp_enqueue_script() для пользовательских скриптов, вы также можете добавлять встроенные скрипты на свой сайт с помощью хуков действия wp_head и wp_footer. Вместо добавления ваших пользовательских скриптов, эти хуки только выводят их в шаблоне шапки или подвала. Поэтому вы должны использовать эту технику только для добавления встроенных скриптов, но не для внешних .js файлов.

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

и пример как вывести скрипт в подвале вашего сайта:

Так как wp_head и wp_footer срабатывают только на фронт-енде вашего сайта, скрипты, добавленные с помощью этих хуков, не загружаются на странице администратора и на странице входа. Чтобы добавить скрипты в область администратора, вы должны вместо этого использовать хуки admin_head и admin_footer в функции add_action(). А если вы хотите вывести скрипты на странице входа, используйте хуки login_head и login_footer.

Обратите внимание, что упомянутые выше плагины (Insert Headers and Footers и Simple Custom CSS and JS) используют wp_head и wp_footer не только для встроенных сценариев, но и для внешних .js-файлов, однако вы все равно не должны делать это, если не знаете, что делаете. Это связано с тем, что плагины выполняют дополнительные проверки, которые гарантируют, что соблюдается последовательность загрузки WordPress. Если вы хотите добавить свои js скрипты вручную, намного безопаснее и проще придерживаться рекомендуемой функции wp_enqueue_script().

Завершение. Как добавить JavaScript код на WordPress.

Вы можете добавлять JavaScript на свой сайт WordPress либо с помощью плагина, либо редактированием файла functions.php вашей темы или дочерней темы.

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

Александр Сокирка

Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами. Мои обучающие программы можно найти на этом сайте или на Udemy.

Как вставить js в php

Перед написанием JS-кода встает резонный вопрос — где его хранить?

Существуют следующие варианты:

• Если вы разрабатываете JS-код для компонента и данный код больше нигде не применяется, разумнее расположить файл script.js в шаблоне самого компонента.
• Если JS-код общий для всей публичной части, разумнее его разместить в шаблоне сайта. Как правило, такие JS-файлы хранятся в подпапке шаблона js/ и подключаются в самом шаблоне методом: Bitrix\Main\Page\Asset::getInstance()->addJs(); Но этот путь не подходит, если шаблонов сайта несколько, или вы разрабатываете код для административной части, или публичный шаблон запрещено менять по причине его обновлений компанией Битрикс (например, коробочный шаблон Битрикс24).
• В случае, описанном выше, применяется метод хранения файлов по пути /local/file.js . Этот же метод размещения стоит избрать в случае создания вами своего модуля.

Регистрация и подключение библиотек

Остановимся поподробнее на последнем варианте. Естественно, вы можете также разместить код в шаблоне сайта через Bitrix\Main\Page\Asset::getInstance()->addJs(); . Но более правильным решением будет третий подход.

Каждый файл в вашей папке по сути является отдельной мини-библиотекой, которую надо зарегистрировать. Регистрация Регистрация библиотек в include.php модуля или в init.php. осуществляется с помощью следующего кода:

$arJsConfig = array( ‘custom_main’ => array( ‘js’ => ‘/bitrix/js/custom/main.js’, ‘css’ => ‘/bitrix/js/custom/main.css’, ‘rel’ => array(), ) ); foreach ($arJsConfig as $ext => $arExt)

Как видите, код универсален, и можно зарегистрировать несколько файлов. В ключе CSS вы дополнительно можете указать CSS-файл (в случае если CSS-код идет в пару к JS), а ключом rel перечислить коды других BX-библиотек, которые будут автоматически подключены при подключении этой библиотеки.

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

CUtil::InitJSCore(array('custom_main'));

Два указанных выше блока кода иногда идут вместе, иногда — раздельно. Например, в случае разработки собственного модуля регистрацию надо совершать в include.php модуля (к примеру), а инициировать (вызывать InitJSCore) в нужном вам месте (например, в шаблоне компонента).

Ошибка слияния файлов

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

 array( 'js' => '/bitrix/js/custom/main.js', 'css' => '/bitrix/js/custom/main.css', 'rel' => array(), ), 'custom_crm' => array( 'js' => '/bitrix/js/custom/crm.js', 'css' => '/bitrix/js/custom/crm.css', 'rel' => array(), ), ); foreach ($arJsConfig as $ext => $arExt) < \CJSCore::RegisterExt($ext, $arExt); >if (!crm) < CUtil::InitJSCore(array('custom_main')); >else < CUtil::InitJSCore(array('custom_crm')); >>);

Однако, если включена опции Объединять CSS файлы и Объединять JS файлы в настройках главного модуля, то файлы будут объединены.

Чтобы этого не произошло нужно для папок указать префиксы: не /bitrix/js/custom/crm.js , а /bitrix/js/custom_crm/crm.js

Как вставить код PHP и JavaScript на страницу. Джумла режет код

Иногда возникает потребность установить на страницах сайта joomla дополнительные скрипты на php, ил js. Конечно можно пойти в настройки редактора и впрофиле администратора указать в настройках, чтобы редактор не вырезал код скриптов. Но не всегда это помогает.

Есть отличный плагин под названием Sourcerer. Скачать его можно здесь http://extensions.joomla.org/extension/sourcerer. Он отлично выполняет функцию по установке скриптов прямо в тело страницы.

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

Как установить плагин для скриптов

Переходим на страницу разработчика и скачиваем данное расширение. Пользователям joomla предлагается два варианта на выбор – платный и бесплатный. Для наших целей вполне подойдет бесплатный плагин. В платном варианте просто немножко больше функций.

Устанавливаем через менеджер расширений джумла. Заходим в раздел “Менеджер плагинов” и активируем два плагина. Обязательно зайдите в раздел “Плагины” и включите эти два расширения. В некоторых случаях после установки по умолчанию они отключены.

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

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

Для начала советую использовать стандартное приветствие

echo “Привет! Проверка обратки!”;
Для нас сейчас главное понять, что плагин действительно корректно работает.

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

Снова нажимаем кнопку “Вставить” и сохраняем страницу. Код должен появиться на странице.

В сплывающем окне всегда размещается код примера от плагина. Пускай он вас не смущает. Смело заменяем на свой.

Если нет никаких конфликтов результат работы скрипта должен появиться в окне браузера.

Еще небольшое дополнение к пояснениям. Иногда в статье требуется просто разместить пример кода. Допустим мы пишем статью о программировании и нам надо это дело продемонстрировать. Для осуществления такого действия отключаем тегичерез кнопку «Переключение тегов source».

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