Web5X Блог

Блог о создании сайта, конструкторе сайтов

Web5X Блог

Блог о создании сайта, конструкторе сайтов

Поиск по блогу

Свой код в шапке или подвале. Как добавить?

Обновлено: 23.02.2022
0 комментариев

При создании сайта или его развитии, мы часто сталкиваемся с разными мелочами, а точнее рутиной, такими как вставка различного JS и HTML кода в структуру вебсайта, например счетчика метрики, аналитики, подтверждения и прочее (Google Analytics, Google Tag Manager, Google Ads Conversion, Facebook Pixel, Google site verification, Yandex site verification, Yandex Metrika).

Обычно многие даже не задумываются о совместимости, проблемах, правильности решения, а сразу (начитавшись интернета) идут в шаблон и редактируют его. В каких то особенных случаях такие решения возможно оправданы, но ситуации бывают совсем различны. Например, вы обновили шаблон и все изменения ваши пропали. Теперь необходимо опять вспоминать где вы взяли код счетчика для сайта, код js консультанта, и прочее.

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

Плагин Head & Footer Code

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

Скачать плагин тут https://wordpress.org/plugins/head-footer-code/

Универсальный плагин сниппетов Code Snippets

Это отличный плагин для вставки php кода в структуру сайта на wordpress, а точнее выполнение php кода. С помощью данного плагина можно запустить любой PHP код на вашем сайте, в том числе и для встраивания JS и HTML кода или создания шоткода для вашего сайта. В плагине нет ничего лишнего, а управления созданными сниппетами, доставляет только удовольствие.

Плагин подойдет тем, кто хоть раз создавал самостоятельно шоткод в стиле
add_action( 'wp_head', function ()

Плагин можно скачать по ссылке https://wordpress.org/plugins/code-snippets/

Встроенные средства Elementor PRO

В функционале Elementor Pro есть возможность вставки своего кода на сайт. Мало того, можно добавить в тело страницы свой js или html код, так и с помощью отдельной настройки можно управлять вставками в шапке или подвале.

Данный функционал называется Пользвательский код или Custom Code. Функция пользовательского кода позволяет добавлять CSS и фрагменты кода, такие как код Google Analytics или пиксельный код Facebook, и назначать их для загрузки в выбранном вами месте с установленным приоритетом. Нет необходимости редактировать файлы вашей темы.

Чтобы добавить код, просто нажмите добавить Пользовательский код, Element or > Custom Code > New code.

Здесь вы сможете добавить свой пользовательский фрагмент кода в интеллектуальный редактор кода, выбрать местоположение со структурой страницы для его включения (например, либо в элементе заголовка страницы, либо в начале или конце тега body), и установить его приоритет выполнения. Если вы зарегистрируете два скрипта в одном и том же расположении, установленный вами приоритет определит, какой из них загрузится первым (от 1 до 10 - самый важный, от 10 - наименее важный). Наконец, вы можете назначить условия отображения точно так же, как для любого элемента или части сайта (Шапка, подвал и т.д.). Как только вы закончите, опубликуйте свой код, и он будет доступен на вашем сайте.

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

Заключение

Как видите, не так страшно делать сайт удобным и безопасным. Используйте описанные выше решения и они вас не подведут! Главное помнить, ели вы редактируете код шаблона на фтп или в редакторе темы, вы должны знать и понимать опасность своих действий на сайте, а так же обязаны знать как можно вернуть все обратно, если сайт сломался.

Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

0 комментариев

Оставьте первый комментарий