Как добавить CSS и JavaScript в WordPress 6.5.2

Немного сложно понять, как добавить CSS и JavaScript в WordPress, если вы только начинающий пользователь WP. Поэтому, прежде чем давать некоторые инструкции по добавлению сторонних CSS и файлов Javascript на сайт, я хотел бы объяснить две основные области, где может понадобиться использовать:

1. Настройка сайта Использование внешних CSS и Javascript — отличный выбор для настройки сайта, потому что вы можете легко поддерживать код, редактировать и сохранять файлы. Эти настройки имеют два основных типа — мини-настройки и глобальные. Позже я вернусь к этим типам и объясню, какие способы добавления CSS / JS-кодов будут лучше в разных ситуациях.
2. Сторонние сервисные интеграции. Как мы знаем, некоторые сервисы предоставляют файлы CSS и JS, которые необходимо добавить на сайт, такие как сервисы форм, окна чата, добавление пиксельного кода Facebook и даже Google Analytics.

3 способа добавления CSS и JavaScript файлов

1. Использование параметров темы

Если вам нужно в Wordpess добавить Javascript и CSS коды для быстрой настройки сайта, то можно использовать параметры темы. Некоторые темы имеют встроенную функцию, с которой легко получить доступ с панели инструментов WordPress.

Обратите внимание, что при добавлении внешнего CSS или JavaScript в Параметры темы нельзя добавить код, начинающийся с тегов <script> </ script> в разделе Custom JS. Вы должны удалить <script> </ script> в своем коде, потому что код, который вы внесете в разделе пользователький JS, уже публикуется с этим тегом.

ПЛЮСЫ:

• Лучший способ настроить маленькие вещи с помощью CSS и Javascript
• Лучший способ в WordPress добавить Javacscript и CSS малого и среднего размера
• Никакой настройки и установки не требуется — она ​​уже встроена!

МИНУСЫ:

• Сложнее поддерживать и обновлять
• Вы не можете добавлять файлы напрямую (файлы .css или .js извне), если не знаете кодировки html и php.
• Нельзя выбрать, будет ли код помещен в wp_header или wp_footer.

2. Использование плагина

Плагины — наши верные помощники при использовании WordPress. Вы также можете добавить свои коды с помощью плагина, такого как Insert Headers and Footers. Это отличный способ добавить ваши коды на сайт, и он работает так же, как встроенная функция. Преимущество этого плагина в том, что вы можете выбрать, хотите ли вы добавить свой код в нижний колонтитул или область заголовка, что иногда имеет решающее значение для некоторых интеграций.

В отличие от встроенного решения, вы можете добавить теги <script> </ script> в плагин Insert Headers and Footers.

WPCode — менеджер кода WordPress на основе плагина Insert Headers and Footers с добавлением пользовательских сниппетов кода

Author(s): WPCode

Current Version: 2.1.11

Last Updated: 03.04.2024

insert-headers-and-footers.2.1.11.zip

98%Ratings 2 000 000+Installs WP 4.6+Requires

ПЛЮСЫ:

• Можете выбрать код местоположения
• Отличная альтернатива встроенному решению
• Быстрый и простой способ добавить пиксель Facebook или пользовательские коды Google Analytics.
• Отличный способ для сторонних интеграций

МИНУСЫ:

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

3. Использование дочерней темы

Рекомендую использовать «Дочернюю тему», если вы хотите внести изменения в средних и крупных маштабах, потому что это самый безопасный способ настройки вашего веб-сайта. С дочерней темой вы сможете поддерживать свои коды и легко обновлять файлы основной темы.

Можете начать добавлять свои CSS-коды и настраивать свой веб-сайт прямо из раздела «Внешний вид»> «Редактор». Если вы хотите добавить внешние CSS-файлы и файлы Javascripts, то вы должны вызвать их и написать несколько строк кода в файл functions.php. Также и для отключения JavaScript в WordPress необходимо редактировать этот файл.

Вот как это необходимо выполнять:

1. Подготовьте свои CSS или Javascript файлы, если это удаленный источник, подготовьте ссылку.
2. Создайте файл с именем functions.php, если его нет в наличии
3. Добавьте следующий код в functions.php

С помощью этого кода вы создаете новое действие для таблицы стилей и вызываете его из каталога дочерней темы.  Допустим, у вас есть файл «custom.css», который необходимо добавить на сайт.

С начало загрузите файл в директорию wp-content/themes/name-child через FTP, а затем создайте файл functions.php. После добавьте приведенный выше код и замените «/Имя_файла.css» на «custom.css» или любое другое имя нужного вам файла. В завершающем этапе вы должны добавить файл functions.php и в свою дочернюю тему.

Вот еще один пример, если у вас нет файла, но необходимо добавить удаленный источник:

В приведенном выше примере мы не использовали get_stylesheet_directory_uri(), поскольку исходный файл удален. Кроме того, вы можете вызывать различные файлы с вашего сервера, используя ссылки, подобные приведенным выше.

ПЛЮСЫ:

• Лучший для всех видов настроек
• Лучше всего для сторонних и комплексных интеграций
• Легко поддерживать и редактировать
• Вы можете добавлять локальные или удаленные файлы напрямую
• Один из самых безопасных способов обновления

МИНУСЫ:

• Нужно немного настройки
• Требует немного знаний кодирования (или вы должны быть готовы учиться)
• Не самый быстрый способ для небольших настроек

Часто задаваемые вопросы

Как добавить файл Javascript в WordPress?

Самый простой способ добавить файл Javascript в WordPress — использовать плагин «Вставить верхние и нижние колонтитулы».

• Войдите на свой сайт и установите плагин Headers and Footers.
• После того, как он установлен, нажмите Активировать
• Сохраните код JavaScript или файл в новый файл с расширением .js .
• Загрузите его на свой сайт в следующую папку: wp-content/themes/<theme-you-as-using>/js/
• Перейдите в «Настройки» > «Вставить верхние и нижние колонтитулы».
• Добавьте следующее к сценариям в заголовке:  <script src="https://www.mrwp.ru/wp-content/themes/<theme-you-are-using>/js/file.js"><script/>

Могу ли я использовать Javascript в WordPress?

Да, есть много способов использования Javascript в WordPress. Если вы хотите добавить простой скрипт, вы можете использовать плагин «Headers and Footers», чтобы добавить скрипт в заголовок, а затем вызвать скрипт из любой части темы, сообщения или плагина, из которого вы хотите его использовать.

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

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

Как мне отредактировать Javascript в WordPress?

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

Вывод

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

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

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