Каков наилучший способ добавить пользовательские внешние JS в WordPress

Как утверждает ведущее сообщество CMS, 25% Интернета используют WordPress. Видя тенденции, у нас нет другого выбора, кроме как верить им, что почти каждый 2- ^й блог и каждый 4- ^й сайт, похоже, используют наиболее мощную и удобную CMS. В ожидании этого люди и разработчики начали переводить свои сайты на платформу WordPress.

В этом стремлении превратить ваш приятный и простой веб-сайт в сложный, высокопроизводительный CMS-сайт, люди застревают на очень простом шаге и задают вопрос: для любви, как мне получить этот внешний файл JavaScript (.js) работа в этой теме WordPress? Вы тоже задаете тот же вопрос? Что ж, amigos, вы, наконец, оказались в нужном месте: я здесь, чтобы шаг за шагом провести вас по простейшему пути, который поможет вам выполнить эту задачу!

Теперь, если у вас установлен и запущен WordPress с готовым внешним JS, давайте приступим к включению файла!

Примечание: я использую следующий файл (testrun.js) для этого урока, и темой, над которой я работаю, является Twenty Sixteen в WordPress .

предупреждение ( 'Hello');

Давайте начнем!

Все скрипты и таблицы стилей загружаются из файла functions.php . Это правильный способ загрузки их в WordPress, чтобы избежать конфликта с другими скриптами, которые загружаются либо самим WordPress, либо используемыми плагинами. Если вы разрешите WordPress управлять всеми включенными файлами, вам нужно сообщить ему, что вы хотите, чтобы этот файл был включен в верхнюю (нижнюю) или нижнюю (конечную) части файла. Каждый шаблон / тема имеет свой собственный файл functions.php, поэтому будет сложно обобщить точное имя функций, которое включает в себя все включаемые файлы. Поскольку в качестве темы я использую двадцать шестнадцать, ниже приведен снимок того, как мой файл functions.php (используется для включения файлов). Ваш должен в некоторой степени напоминать это:

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

Wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer) принимает следующие параметры:

$ ручка

(строка) (обязательно) Имя скрипта.

$ ЦСИ

(string | bool) (Необязательно) Путь к скрипту из корневого каталога WordPress. Пример: '/js/myscript.js'.

Значение по умолчанию: false

$ Deps

(массив) (Необязательно) Массив зарегистрированных дескрипторов, от которых зависит этот скрипт.

Значение по умолчанию: array ()

$ вер

(string | bool) (Необязательно) Строка, указывающая номер версии скрипта, если он есть. Этот параметр используется для гарантии того, что правильная версия отправляется клиенту независимо от кэширования, поэтому его следует включить, если номер версии доступен и имеет смысл для сценария.

Значение по умолчанию: false

$ in_footer

(bool) (Необязательно) Ставить ли скрипт в очередь перед или раньше , По умолчанию «ложь». Принимает «ложь» или «правда».

Значение по умолчанию: false

Вы можете игнорировать функцию wp_register_script () для этого урока. Наша цель - включить только внешний JS. Это должно работать без проблем!

Поэтому, если я хочу назвать свой скрипт как «test», помните, что этот параметр ($ handle) не обязательно должен быть именем фактического файла, и мой файл имеет внешнюю зависимость от jquery, а версия 1.0 и загружается до загрузки страницы. тогда моя функция будет выглядеть так:

wp_enqueue_script ('tutorial', get_template_directory_uri (). '/js/testrun.js', array ('jquery'), '1.0', false);

Если вы заметили, я использовал get_template_directory_uri (), поэтому строка, конкатенированная после функции, то есть « /js/testrun.js », на самом деле является путем к файлу по отношению к индексному файлу шаблона .

Таким образом, ваш атрибут $ src, который является источником вашего js-файла, становится: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.

Таким образом, финальный файл functions.php выглядит так:

Держись, мы почти закончили! Просто сохраните это сейчас и нажмите «Обновить» на своем сайте… вы должны увидеть, как работает JS! Вот мой:

Поскольку мы установили для параметра $ in_footer значение false, скрипт загружается до загрузки страницы, но после загрузки JQuery, поскольку он был добавлен как зависимость!

И .. Вуаля! Вот, пожалуйста. Вы успешно включили внешний пользовательский файл JS в свою тему WP!

Удачного кодирования!

Ссылка: постановка в очередь Функция: WordPress Codex