Содержание
- Какой код добавлять на сайт. Где искать подходящие сниппеты
- Как добавить код на сайт с WordPress
- WordPress.com – путь начинающего веб-мастера
- Код JavaScript на сайтах без панели администратора
- Как вставить код в header.php
- Как добавить информацию на сайты конструктора Squarespace
- Сниппеты JavaScript в панели администратора Shopify
- Как вставить сниппет в конструкторе WIX
- Вердикт
Опубликовать материалы на сайте через панель администратора вроде WordPress способен даже новичок, ранее не сталкивавшийся с похожими инструментами и сервисами. Достаточно загрузить текстовый материал, прикрепить парочку изображений, отформатировать заголовки и списки, выбрать раздел, а после – нажать на «Сохранить».
Но как быть, если необходимо отойти от шаблонов, заданных WordPress? Как добавить собственный фрагмент кода HTML, CSS или JavaScript? Неужели пора обращаться за помощью к веб-мастерам? Ни в коем случае: необходимо лишь разобраться в деталях!
Какой код добавлять на сайт. Где искать подходящие сниппеты
Начинать поиски зарубежные веб-мастера предлагают с сервиса Crazy Egg, где после регистрации появится возможность перейти в раздел My Code. Там представлена впечатляющая коллекция шаблонов, наборов, настроек, фрагментов кода JavaScript. Весь контент адаптирован под использование на различных сайтах, с администраторской панелью и без.
Найденный код необходимо копировать, начиная и заканчивая парным тегом <script></script>. А вот куда выгружать содержимое – подскажут главы, представленные ниже/
Как добавить код на сайт с WordPress
Администраторская панель WordPress не разрешает добавлять код напрямую, но предлагает использовать сторонние инструменты, вроде Tracking Code Manager.
Добавляется плагин через одноименный раздел – Plugins. Далее необходимо нажать на кнопку Add New, а после – перейти к поисковой строке и ввести Tracking Code Manager (при желании расширение легко загрузить с жесткого диска в виде архива или с сервера по ссылке).
Когда плагин загрузится, обновится до последней версии и станет доступен для использования, останется лишь нажать на Add New Tracking Code. Следующие шаги связаны с заполнением обширной текстовой формы, поделенной на части.
Сверху – Name: название текущего фрагмента кода. Чуть ниже – место для сниппета (Paste Your Code Here), далее – выбор места для кода (желательно выбрать вариант Before </head>). В конце необходимо нажать на Save. Если загрузить или использовать плагин невозможно из-за проблем с безопасностью или прочими ограничениями, придется использовать сторонний вариант установки, описанный ниже – через header.php.
WordPress.com – путь начинающего веб-мастера
WordPress – панель администратора (CMS), часто встречающаяся на сайтах информационных, развлекательных, новостных тематик. CMS заметно облегчает работу с контентом – помогает публиковать материалы в три действия, добавлять рубрики, менять оформление страниц.
WordPress.com – специальный конструктор, разрешающий в полуавтоматическом режиме зарегистрировать новое доменное имя (формата myname.wordpress.com), а после – воссоздать новые веб-страницы с текстом, изображениями, ссылками. Разница между CMS и конструктором значительная: на WordPress.com из-за параметров безопасности добавлять JavaScript-код на страницы нельзя.
Довольствоваться разработчики предлагают лишь сторонними преимуществами, вроде заранее организованной интеграции с Google Analytics, кнопок социальных сетей, впечатляющей коллекции шаблонов, разрешающих организовать интернет-магазин, форум или одностраничный сайт.
Код JavaScript на сайтах без панели администратора
Часто веб-мастера при разработке информационных порталов или «продающих» интернет-ресурсов подготавливают контент и верстку вручную, без использования CMS, шаблонов, сторонних инструментов. В таком случае добавлять код предстоит через FTP – File Transfer Protocol: специальные сервисы, необходимые для выгрузки файлов, сохраненных на компьютере, на хостинг.
При возникновении вопросов необязательно сразу обращаться к Google: сначала желательно попытать счастья в службе поддержки: специалисты часто помогают пользователям разобраться в основах, а порой даже выдают текстовые инструкции на любой случай жизни.
Если вопросы по-прежнему остались, значит, пора переходить к плану «Б» — YouTube. Видеохостинг хранит истории веб-мастеров, уже сталкивавшихся с FileZilla, сайтами без панели администратора, JavaScript, HTML, CSS.
Как вставить код в header.php
Сайты с панелью управления WordPress полны ограничений: ни HTML-код вручную не добавить, ни сниппеты JavaScript. Частично обойти ограничения помогают сторонние плагины или расширения, но чаще вебмастерам приходится добавлять код напрямую в файлы, хранящаяся на страницах хостинга. Речь преимущественно о header.php, взаимодействовать с которым предстоит по следующему алгоритму:
- Сначала файл необходимо сохранить на жесткий диск компьютера (выгрузить с хостинга) и открыть текстовым редактором, вроде Sublime Text.
- Система сразу отобразит весь код, включая заголовки и служебную информацию (The Head) и содержимое веб-страницы (The Body).
- Редактировать доступный код и обращаться к справочникам за дополнительной информацией не придется. Достаточно лишь найти парный тег <link></link>, который располагается или в <head></head> (в нижней части кода) или в <body></body> (в самом низу).
- Добавленную информацию необходимо сохранить (поможет комбинация клавиш Ctrl + S), а после – уже отредактированный файл – выгрузить обратно на страницы хостинга с заменой. Процедура вполне стандартная, но, на всякий случай, желательно сохранить резервную копию header.php.
Если вместо стандартной панели администратора сайт состоит из разрозненных HTML-страниц с кодом, действовать придется иначе: вместо разового добавления сниппета JavaScript между парным тегом <link></link> в Header.php, предстоит скопировать и вставить код на каждую страницу. Index.html, contact.html, services.html – вне зависимости от типа страницы, раздела или отображаемой информации процедуру предстоит повторять для всех файлов сразу, иначе будет нарушена структура сайта.
Как и в случае с WordPress все HTML-документы предстоит обновить на хостинге, иначе система продолжит использовать старую информацию.
Как добавить информацию на сайты конструктора Squarespace
Взаимодействовать с панелью администратора и вставлять сниппеты JavaScript предстоит через вкладку Settings, пункт Advanced, где скрывается кнопка Code Injection или Tracking.
Сразу после перехода к новому меню в браузере появится специальное текстовое поле, разрешающее прикреплять новую информацию, в том числе HTML, CSS-правила, ссылки на сторонние файлы.
Сниппеты JavaScript в панели администратора Shopify
Добавлять фрагменты через конструктор интернет-магазинов разработчики предлагают через раздел Themes, разрешающий настроить оформление или функционал уже опубликованного дизайна сайта.
Далее необходимо вызвать меню Actions (рядом с кнопкой Customize Theme) и в появившемся списке выбрать Edit HTML/CSS.
Последний шаг – выбрать каталог Snippets, добавить новый файл (Create Snippet), придумать название, а после – ввести необходимый код в появившемся поле.
Как вставить сниппет в конструкторе WIX
Официальной поддержки сниппетов JavaScript не предусмотрено: добавить информацию вручную нельзя. Обойти ограничения поможет официальный магазин с плагинами – Wix App Market. Кроме инструментов для работы с кодом, там же предусмотрены виджеты для социальных сетей, маркетинга или анализа материалов конкурентов.
Вердикт
Добавить сниппет JavaScript на сайт разрешает почти каждая панель администратора. Исключения встречаются, но редко. Да и там ситуацию спасут тематические плагины, расширений или сторонние инструменты, загружаемые пусть и неофициально, но все же разрешающие закрепить нужный фрагмент.
