Плагин Header and Footer для легкой и безопасной вставки кода в WordPress

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

У некоторых иногда получалось, а у некоторых порой даже слетал сам блог. Сейчас я вас познакомлю с плагином, который станет для вас незаменимым помощником и поможет вам очень легко и безболезненно вставлять любые HTML коды, полезные скрипты или CSS. Плагин называется Header and Footer. 

Допустим вы хотите установить социальные кнопки без плагина на свой блог. Чтобы это осуществить, вам понадобиться специальные скрипты, которые нужно вставлять в HTML код страницы вашего шаблона. Также нужно не просто вставить, но и найти нужное место для вставки, чтобы в дальнейшем этот скрипт работал правильно. Можно умудриться вставить так, что сам блог вообще не будет работать. Именно для таких, порой непростых задач нужен плагин Header and Footer и сейчас мы его внимательно рассмотрим.

Сама установка плагина производится стандартным способом через форму поиска плагинов в административной панели вашего блога. Находим, устанавливаем и активируем его. Чтобы начать работать с плагином, зайдите в меню «Параметры» > «Header and Footer» в административной панели WordPress. Там вы найдете несколько полезных возможностей, которые предоставляет нам сам плагин.

плагин Header and Footer

Основные возможности плагина

1) Page head and footer. Вкладка предназначена для добавления кода в заголовок (файл header.php) и в подвал (footer.php) главной страницы блога:

  • Code to be added on HEAD section of the home — в этом поле мы можем добавить код, который автоматически будет установлен после закрывающего тега <body> раздела HEAD. Результат вы можете увидеть в самом верху главной страницы, то есть над ее шапкой. Он будет всегда отображаться только на главной странице. Для примера я вставил в это поле скрипт кнопок социальных сетей. Результат на нижней картинке.

вставка скрипта социальных кнопок в Header and Footer

  • Code to be added on HEAD section of every page — сюда можно вставить код, который автоматически будет добавлен в раздел HEAD.   Здесь тоже наш код будет отображаться над шапкой (как на верхнем рисунке), но он уже будет отображаться на всех страницах блога или сайта.
  • Code to be added before the end of the page — автоматически добавляет ваш код в подвал перед закрывающим тегом </body> (файл footer.php). Результат будет отображаться в самом низу каждой страницы.

2) Post content. Эта вкладка предназначена для добавления кода в наши статьи при их полном обзоре. Сюда вы например, можете добавлять различные социальные кнопки, форму подписки или рекламу, которая будет отображаться в начале или в конце каждой статьи :

  • Code to be inserted before each post — автоматическая вставка кода, который будет отображаться в начале каждой статьи.
  • Code to be inserted after each post — вставляем код, который будет отображаться уже в конце каждой статьи.

3) Page content. Данная вкладка предназначена для добавления кода в статические страницы блога или сайта (например, обо мне, контакты, карта сайта и так далее):

  • Code to be inserted before each page — сюда вставляем код, который будет отображаться в самом начале каждой статической страницы.
  • Code to be inserted after each page — вставляем код, который будет отображаться уже в конце страницы, сразу после ее записей.

4) Facebook. Вкладка нужна для интеграции с сервисом Facebook. Тут я не особо подробно изложу предназначение, так как сам очень подробную работу с этой вкладкой пока не разбирал. Рекомендую и вам пока не заморачиваться на этом. Если кратко, то:

  • Enable the OG metatag — включение или отключение метатега Facebook Open Graph.
  • Facebook page type for the generic web page — вводится тип страницы Facebook для исходной страницы блога или сайта.
  • Facebook page type for the home — адрес страницы Facebook для отображения главной страницы блога или сайта.
  • Facebook Open Graph Image — при нажатии кнопки Facebook, должен открыться список изображений. Таким образом на Facebook может добавиться изображение какого-нибудь поста.
  • Facebook Open Graph default image — здесь можно выбрать изображение по умолчанию. Если по какой-то причине изображение какого-нибудь поста не сможет быть использовано, то свое выбранное изображение будет использоваться по умолчанию.

5) SEO. По поводу этой вкладки, сам автор этого плагина говорит следующее: «Я сюда добавил несколько функций, которых по моему мнению не хватает в других SEO-плагинах. Я не эксперт по SEO, так что, если Вы уверены, что эти варианты могут привести к ухудшению SEO продвижению, оставьте их выключенными.» Я присоединяюсь к словам автора и предлагаю вам не обращать внимания на эту вкладку. Если кратко, то там есть следующее:

  • Home — если вы поставите галочку в этом пункте, то поисковик не будет индексировать общие страницы (кроме главной), которые содержат анонсы статей. Например, у меня на блоге в низу вы найдете постраничную навигацию (страница 1, 2, 3…). В таком случае первая страница (главная) будет индексироваться, а вот вторая, третья и так далее уже не будут индексироваться. Такие страницы бывают типа ваш домен.org/page/2  — это вторая страница. Когда вы публикуете новые статьи на свой блог или сайт, то такие страницы меняются, так как смещается анонс статей. Поэтому автор решил предложить исключить их из индексации.
  • Search results — добавлять тег noindex на страницы результатов поиска на блоге. По мнению автора, такие адреса, как ваш блог.com/?s=searchword будут плохо сказываться на продвижении, так как у них могут повторяться содержания страниц. Данная функция добавляет мета теги noindex на страницы, которые являются результатом поиска на блоге.
  • Canonical on home — устанавливает канонические теги на главной странице.

6) Snippets. Здесь можно вставлять общие фрагменты, которые могут использоваться в верхней или нижней части колонтитула. Они передаются как  [snippet_N], где N — это фрагмент число от 1 до 5. По мнению автора, это полезно для социальных кнопок, которые могут быть размещены в начале, в конце или в самой середине поста.

7) BBPress. Здесь можно добавлять скрипты, которые будут интегрированы в BBPress (движок форума для WordPress). Автор включил эту функцию в качестве экспериментальной, поэтому многие моменты остаются неясными. Рекомендую пока к ней не обращаться.

8) Notes and parked codes. Здесь можно хранить различные коды. После всех настроек нажмите кнопку «Save».

Итак, мы рассмотрели основные функции плагина Header and Footer. Первые три вкладки со своими функциями являются востребованными, поэтому рекомендую пока пользоваться ими. Теперь вы без труда, а главное правильно и надежно можете вставлять  различные коды HTML, скрипты или таблицы стилей на свой блог или сайт. Обязательно установите такой плагин на WordPress, ведь он вам в дальнейшем очень пригодиться!

Zavitushka-dlya-sayta

 
rss-1Следить за новыми статьями на этом блоге!

 

Комментарии 36

  • Спасибо огромное! Мне как новичку подобный инструктаж особенно ценен. Я с этими скриптами мучаюсь. Буду изучать плагин.

  • Плагин здорово облегчит работу новичкам, которые на первых порах не разбираются что и куда вставлять. Придется опробовать его в работе.

    • Плагин хороший. Можно вставлять код не только в конце статей. Также встречаются шаблоны с нестандартным кодом. В нем бывает очень трудно сделать какие-то правильные изменения. Для этих целей плагин Header and Footer очень хорошо может помочь.

  • пыталась вставить однукнопку после статей. Вообще нет ее.

    • Посмотрите, все ли правильно настроили в сервисе «Одна кнопка», чтобы нужный скрипт правильно интегрировался в WordPress. Также данный код внимательно копируйте. Возможно, вы скопировали его не полностью (пропустили какой-то символ). Настройте и скопируйте нужный скрипт еще раз. Ну а куда вставлять, я об этом писал в статье.

  • Я установил этот плагин уже давно и по началу он мне очень помогал.Сейчас уже обхожусь без него,так как во всем разобрался и редактирую сами файлы!

    • Да, я тоже его раньше использовал, когда были трудности с кодом. Теперь тоже без плагина вывожу.
      В общем, для начинающих самое то!

      • … добавить код перед закрывающим тегом . Помогите, пожалуйста дилетанту: вот как выглядит файл header.php:
        код вырезан

        Куда вставлять код?
        Заранее спасибо и еще раз — извините

        • Какой-то непонятный код у вас. Посмотрите у себя, обычно код вставляют перед закрывающим тегом head.
          Если вам нужно что-то вывести перед шапкой блога, то код можно вставит в опции плагина. В статье об этом написано.
          Елена, при вставке кода в комментарий на этом блоге, не забывайте выделять тегами сам код (кнопка Код) Иначе в комментариях структура кода изменится.

  • Спасибо Вам большое! А то я так один раз вставила код куда не надо, сайт слетел. Теперь я больше не рискую.)))

    • Надежда, если боитесь, то подобные манипуляции с блогом лучше проводить на локальном сервере. Например, на Денвере или еще каком-нибудь. Конечно, не забываем и о бэкапе.

  • А куда можно вставить код, чтобы поменять шапку сайта?

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

  • Сергей, спасибо! Вот это плагин, так плагин, мне так он вообще, похоже, жизненно необходим. :)
    Сергей, я на форуме оставила вопрос для вас в темке по поводу пинг плагина, уж не буду здесь повторяться.

  • Здравствуйте, спасибо за плагин Header and Footer У меня не получалось вставлять код, не знал куда вставлять. Один раз вставил код от Яндекс метрики, но никакой статистики так и не появилось, надо полагать не туда вставил, а сейчас и найти не могу куда его вставлял.
    Сейчас вот установил плагин и туда вставил код на подписку по почте на обновление контента по ленте RSS, и о чудо, в коне каждой записи появилась ссылка на подписку, правда на английском.
    Завтра установлю код от счётчика UpToLike который мне рекомендует установить SeoPult для продвижения блога, ну и конечно Яндекс метрику.
    Удачи.

    • Спасибо Андрей! Смотрю, у вас на блоге много косяков. Если интересует, то обращайся за помощью, помогу наладить блог!

  • Спасибо за статью ! Подскажите как вставить форму поиска в header. Расположение как то регулируется. Или смогу найти в CSS и подправить. И где взять код для формы поиска? Заранее спасибо!

    • К сожалению, в этом плагине сам скрипт в header (шапку) нельзя вставить. Только если перед самой шапкой сайта (в самом верху) можно вывести.
      А так придется вручную добавлять код в файл header.php вашей темы и смотреть в каких конкретно местах будет выводиться. Код для формы поиска можно взять на других сайтах. Там предоставляют свои оформленные формы поиска. Также сами формы можно взять у Гугла и Яндекса. Например Яндекс предоставляет отдельно подходящий сервис. Зайдите во «Все сервисы». В разделе «Вебмастеру» выберите «Поиск для сайта». Там будет все, что вам нужно. Можно настроить поиск и скачать скрипт. Там под эти нужды можно даже скачать отдельные плагины для определенной CMS. В общем, так точно все не опишешь, вам нужно будет почитать похожую информацию на других сайтах и блогах.

  • А как потом найти вставленный код? Например, чтобы отредактировать или удалить.

    • Если код вставляли в опции плагина, то он там так и останется. Даже если вы решили вдруг поменять тему, код не слетит, так как он выводится плагином.

  • Здравствуйте, установила плагин /как мне кажется/ поставила код перед тэгом /body, как писали -в плагине.
    Изменений в fotterе не нашла. Этот закрывающийся тэг есть только там.
    Где проблема?
    Спасибо

    • Плагин удалила так и не разобравшись, мне плагин не принес результата :-(

      • Вы наверное, в опциях плагина вставили код не в то окошко.
        Можно попробовать также и без плагина обойтись. Для этого зайдите в настройки своей темы. Посмотрите, есть ли там специальные окошки, которые выводят код в подвале. Обычно это информация о защите прав, какие-то ссылки на разработчиков и так далее. Также может быть и пустое окошко. В моей теме есть окно для вывода информации в футере. У вас в принципе тоже может быть оно. Посмотрите внимательно, что в настройка вашей темы имеется.

        Также код можно вывести через файл footer.php. Код вставлять перед закрывающим тегом body.

        Ну и последний вариант — код можно вывести с помощью виджетов. Почти каждая тема позволяет вывести код в подвале в виде виджетов. Попробуйте и этот вариант.

  • Не встречалось ли у вас любезный такая фишка? Вставил коды в Header and Footer, всё работает. Прошло года полтора, пытаюсь удалить код из плагина, 403 ошибка и коды не удаляются из плагина. Не понятно где и чего запрещено.

    • Здравствуйте! Нет, с такой проблемой у себя я не сталкивался. А какую функцию выполняют ваши скрипты? Попробуйте на всякий случай полностью переустановить плагин.

      • Там стоит скрипт социальных кнопок от Яндекс. Но плагину без разницы чего хотят удалить. Не положено и всё. Я ещё грешу на установленный Better WP Security. Он может блокировать изменения на сайте. Хотя и не должен когда работает admin. И в то же время, не рискую отключить Better WP Security, он столько изменений в сайте делает, что если чего пойдет не так, сайт умрет на долго. А по поводу переустановить Header я подумаю. Попробую на каком-нибудь сайте, который не очень жалко, а уж потом на своем кормильце.

  • Вот плагин iThemes Security (бывший Better WP Security) полностью запрещает редактирование файлов. Вам нужно зайти в «Security» —> «Settings». Там почти в самом низу есть функция File Editor. Просто снимите галочку возле Disable File Editor и сохраните настройки. После того, когда перезагрузите страницу, можно будет редактировать файлы. Тогда попробуйте удалить код в плагине. Может потом нормально будет.

1 2

А что вы думаете по этому поводу?

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