Как вставить код в разделы верхнего и нижнего колонтитула в WordPress?

WordPress собирает несколько файлов шаблонов PHP, чтобы предоставить читаемый контент пользователям в браузере. Тема WordPress содержит файлы header.php, footer.php, single.php (для сообщений), page.php (для страниц) и sidebar.php, а в последних темах используются дополнительные части шаблона для создания основного контента. Когда вы просматриваете страницу WordPress в браузере, все эти шаблоны аккуратно собраны и отображаются. В общем, вам не нужно изменять эти файлы, и есть плагины для вставки пользовательских функций. Однако в определенных ситуациях вам нужно вставить код в разделы верхнего и нижнего колонтитула WordPress. В этой статье мы объясним, как это сделать без плагина и с помощью плагина.

Зачем вставлять код в верхний или нижний колонтитул?

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

  • Вставьте код автоматической рекламы из Google AdSense или код объявления ставок заголовка из любой другой рекламной программы.
  • Установите коды отслеживания Google Analytics и Facebook Pixel.
  • Вставьте коды подтверждения из Bing Webmaster Tools, Google Search Console, Baidu, Yandex и любых других платформ, таких как Pinterest.
  • Добавьте собственный CSS в заголовок, например таблицы стилей Google Fonts и JavaScript в нижний колонтитул.
  • Вставляйте пользовательские компоненты, такие как панировочные сухари, в заголовок при использовании таких плагинов, как Yoast SEO.

Как видите, список будет увеличиваться в зависимости от ваших потребностей.

Добавить код в разделы верхнего и нижнего колонтитула в WordPress

По умолчанию WordPress не предлагает никаких вариантов для вставки кода в раздел верхнего и нижнего колонтитула. Самый простой вариант — напрямую отредактировать файлы и вставить свой код. Однако для этой цели также доступны плагины. В этой статье мы объясним оба способа добавления кодов в разделы верхнего и нижнего колонтитула любого сайта WordPress.

  • Редактирование файлов header.php и footer.php темы WordPress вручную.
  • Используйте плагин Insert Headers and Footers для добавления кодов без редактирования файла.

Кроме того, мы также объясним использование некоторых тем для вставки кода в верхний и нижний колонтитулы с помощью хуков wp_head и wp_footer.

Вставьте коды верхнего и нижнего колонтитула WordPress вручную

Эта опция требует редактирования файлов header.php или footer.php в темах вашего сайта WordPress и, вероятно, не подходит для новичков.

  • Во-первых, начните с подготовки фрагментов кода или скопируйте их со стороннего сайта. Когда ваш код верхнего и нижнего колонтитула будет готов, наведите указатель мыши на меню «Внешний вид» на панели инструментов своего сайта и щелкните вкладку «Редактор тем».
  • Игнорируйте все получаемые вами предупреждающие сообщения и выберите свою активную тему в раскрывающемся списке «Выберите тему для редактирования:».
  • Выберите файл «header.php» или «footer.php» в правой части текущего представления.
  • Для заголовка убедитесь, что вы вставили коды под закрывающим тегом «», а затем код нижнего колонтитула должен быть перед концом тега «

    ». Иногда может потребоваться также вставить код перед закрывающим тегом .

  • Наконец, нажмите кнопку «Обновить файл», чтобы сохранить изменения на вашем сайте с добавленными фрагментами кода.
Вставить код в файл нижнего колонтитула
Вставить код в файл нижнего колонтитула
Вставить код в файл заголовка.PNG
Вставить код в файл заголовка.PNG

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

Вставьте коды верхнего и нижнего колонтитула WordPress с помощью плагина

WordPress по умолчанию позволяет добавлять собственный CSS на ваш сайт в разделе «Внешний вид> Настройка> Дополнительные CSS». Однако вы не можете вставить JavaScript в этот раздел. Существует множество бесплатных плагинов и плагинов для вставки кода, и здесь мы объясним, как «Вставить верхние и нижние колонтитулы от WPBeginner». Плагин имеет супер простой интерфейс, которым новички могут без проблем пользоваться.

  • Во-первых, установите и активируйте плагин «Вставить верхние и нижние колонтитулы». На панели инструментов вашего сайта WordPress наведите указатель мыши на меню «Плагины» и нажмите «Добавить».
  • Используйте функцию плагинов поиска, чтобы найти «Вставить верхние и нижние колонтитулы» и нажмите кнопку «Установить сейчас». По завершении процесса установки «Активируйте» плагин.
Установить плагин
Установить плагин
  • Перейдите в меню «Настройки», найдите и щелкните подменю «Вставить верхние и нижние колонтитулы».
  • Плагин предлагает три поля для размещения скриптов в заголовке, теле и нижнем колонтитуле для вставки ваших кодов. До этого сторонние поставщики, такие как Google Analytics, указали вам, в каком поле разместить свои фрагменты кода. В противном случае убедитесь, что вы точно понимаете, в какую позицию вы хотите вставить код.
  • Вставьте эти коды в соответствующий и нажмите «Сохранить», чтобы завершить изменения на сайте.
  • Скрипты кода теперь автоматически загружаются на свои конкретные позиции для работы сайта.

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

Вставить код с плагином
Вставить код с плагином

Обратите внимание, что если плагин «Вставить верхние и нижние колонтитулы» был случайно деактивирован или удален, ваши коды останутся сохраненными в базе данных вашего сайта. Просто переустановите или повторно активируйте плагин, чтобы предыдущие коды начали работать. Кроме того, рекомендуется очищать кеш вашего сайта WordPress каждый раз, когда вы добавляете и сохраняете изменения для фрагментов кода верхнего и нижнего колонтитула в плагине.

Использование тем для редактирования верхних и нижних колонтитулов

Независимо от того, редактируете ли вы файлы темы вручную или используете плагин, вставленные вами коды повлияют на весь сайт. Вам нужно использовать плагины, такие как Insert HTML Snippet, или попробовать блок Custom HTML в редакторе Gutenberg, чтобы вставить собственный код только в конкретный пост или страницу. Однако есть последние темы, такие как GeneratePress Premium и Astra Pro, которые вы можете использовать для вставки кода в верхний и нижний колонтитулы. Эти темы используют стандартные хуки wp_head и wp_footer и позволяют применять собственные ограничения. Например, вы можете вставлять хлебные крошки только в отдельные сообщения, не затрагивая страницы.

Здесь мы расскажем о теме Astra Pro, и вы можете выполнить аналогичные шаги в теме GeneratePress Premium с опцией «Элементы».

  • После установки дополнительного модуля Astra Pro перейдите в «Внешний вид> Параметры Astra».
  • Активируйте параметры «Пользовательский макет» и щелкните ссылку «Настройки» напротив параметра.
  • Нажмите кнопку «Добавить» и вставьте код, который хотите вставить, в поле.
  • В разделе «Пользовательские настройки макета» щелкните раскрывающийся список «Макет» и выберите вариант «Крючки».
Вставить код заголовка в тему Astra
Вставить код заголовка в тему Astra
  • В раскрывающемся списке «Действие» выберите wp_head для заголовка и wp_footer для раздела нижнего колонтитула.
  • Оставьте поле «Приоритет» пустым, если вы используете только один фрагмент кода. Однако, если у вас есть несколько кодов, вставленных в одну и ту же позицию ловушки, обязательно установите приоритет для вставки кода в последовательности. Вы можете использовать 10, 20, 30 и так далее для приоритета, и самый низкий будет предшествовать другим.
  • При необходимости укажите расстояние между верхними и нижними интервалами в пикселях.
  • Выберите, где вы хотите отображать код, в раскрывающемся списке «Отображать на». Вы можете выбрать конкретное сообщение, страницу, таксономию или вставить на весь сайт или вставить в определенные типы сообщений, такие как сообщения, страницы или любые пользовательские типы сообщений, используемые на вашем сайте.
  • Выберите роль пользователя, код которой должен быть активен, в раскрывающемся списке «Роли пользователей».

После выполнения всех настроек нажмите кнопку «Опубликовать», чтобы изменения вступили в силу.

Причины использования плагина Insert Headers & Footers

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

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

Последние мысли

Есть много ситуаций, когда вам нужно изменить внешний вид, изменить способ или добавить дополнительные функции на свой сайт WordPress. В любом случае не забудьте использовать метод плагина для вставки кода верхнего и нижнего колонтитула, когда вы технически не склонны. Хотя такие темы, как Astra и GeneratePress, могут помочь вам в этом, вам необходимо приобрести премиум-версию. Кроме того, это затруднит изменение вашей темы, и вам нужно искать использование плагина на этом этапе.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *