Как добавить баннер в WordPress

Хочу с вами поделиться простым и удобным способом, как добавить баннер в WordPress. Этот способ подойдёт для новичков, так как тут не потребуется каких-либо специальных навыков и знаний. Итак сразу к делу без прелюдий, что нам понадобится:

Базовые заготовки

  1. Изображение 
  2. Партнёрская или собственная ссылка на страницу перехода.

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

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

Если у вас нет установленного приложения для сжатия картинок, просто в поисковик вбиваем “программа для сжатия картинок онлайн. Кликаем на первую попавшуюся и сжимаем наше изображение.  p.s. Я обычно использую вот этот сервис

 

Следующим шагом, чтобы добавить баннер в WordPress, будет соединение нашей картинки с ссылкой

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

Я например хочу вставить свой баннер в сайдбар, размер моего сайдбара 300. Посмотреть размер можете в Внешний вид- редактор тем справа найдите sidebar.php. В коде цифры, которые увидите, это и будет ширина. У меня размер получился 350 пикселей, надо уменьшить до 300, что я делаю. Нажимаю на картинку, сверху появится меню, жму на карандаш(изменить),далее в графе размер выбираю произвольный и ставлю 300.

Баннер

 

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

Всё, нажимаем сохранить и далее нам надо скопировать наш html код. Чтобы добавить баннер в WordPress, в текстовом редакторе находим колонку Инструменты – исходный код и копируем всё содержимое. Или в правом верхнем углу(в конце редактора) находим вкладки Визуально и Текст. Таким же образом нажимаем на Текст и копируем код.

 

И последним шагом будет размещение нашего баннера.

Опять переходим в консоль, кликаем Внешний вид – виджеты, ищем виджет  HTML-код, переносим его в наш сайдбар. Пишем заголовок(по желанию) и вставляем наш код в содержимое.

 

 

Сохраняем и проверяем наш баннер, всё должно работать как часы.

 

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

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

Постараюсь понятным языком объяснить, как это делается. Предварительно делаем резервную копию сайта, введите это за правило перед работой с кодом темы. Можно для этого воспользоваться плагином UpdraftPlus.

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

 

Поехали

В консоле блога ищем Внешний вид и заходим в Редактор тем. Если его нет без паники, кликаем сюда – Как добавить редактор тем в WordPress?  В правом меню Файлы темы выбираем Заголовок (header.php). В коде ищем где заканчивается заголовок, у меня это выглядит так, у вас может подзаголовок заканчиваться тегами h2. 

После </div> нам надо прописать вот такой код <div class=»qwerty»> код баннера </div> где словом »qwerty» мы прописали класс баннера, с помощью которого будем регулировать его расположение под заголовком. Жмём обновить файл и сохраняем всё это дело.

Далее нам надо указать положение баннера, для этого используем Таблицу стилей (style.css). Находится в той же колонке, где и Заголовок (header.php), только в самом верху. В ней прописываем следующий код, место роли не играет, можно вставить куда душа пожелает.

.qwerty {
padding: 30px 0 0 450px;
}

  • qwerty – наш класс баннера, по которому css понимает, что надо двигать;
  • padding – задаёт величину полей (определяет координаты баннера проще говоря);
  • 30px – отступ от верхнего края шапки;
  •   отступ от нижнего края шапки; 
  • 0 – отступа от правого края шапки;  
  • 450px – отступа от левого края шапки.

Ну и как вы наверное уже догадались, эти цифры регулируются методом научного тыка. Меняете, обновляете код и двигаете баннер, пока не установится в нужное место. 

На этом всё, надеюсь был полезен.

Всего доброго

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

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