Ноя
9
12

Кликабельное фоновое изображение в WordPress сайте (2 варианта)

Кликабельный фон в ВордпрессСегодня рассмотрим одну из задач с wordpress фоном, которая иногда возникает при проведении рекламных кампаний в интернете. Бывает, заказчикам нужно реализовать в веб-проекте «брендированную подложку» — это некая графика на заднем плане веб-страницы по бокам от основного блока контента (см. превьюшку данного поста). Причем важно, чтобы картинка при клике отправляла посетителей на внешний URL-адрес. Собственно, решил собрать в посте всю инфу про то как сделать кликабельное фоновое изображение для сайта WordPress. 

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

Кликабельный фон через HTML + CSS

Это единственный полноценный и работающий метод, который, в принципе подойдет не только для WP, но и в любых других CMS и даже онлайн ресурсах на чистом HTML.

Алгоритм приблизительно следующий:

1. Первым делом вам надо после открывающегося тега body добавить код:

<a id="adv_fon" href="http://design-mania.ru" target="_blank">&nbsp;</a>

Сделать это можно отредактировав файл шаблона header.php (или какой-то другой для хедера). В итоге должно получится что-то вроде:

Кликабельный фон

2. Дальше переходим к стилям в styles.css, и тут есть 2 принципиально разные ситуации:

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

Варианты кликабельного фона

2.1. Первый метод чаще применяется в рекламных кампаниях, т.к. на графику больше внимания уделяется именно в шапке сайта. В данном случае в CSS стилях надо прописать:

body {
    background-image: url(http://www.ВАШСАЙТ.com/wp-content/uploads/fon.jpg);
    background-position:top center;
    background-repeat:no-repeat;
    background-attachment:scroll;
}
 
#adv_fon {
    top: 0;
    left:0;
    position: absolute;
    display: inline;
    width: 100%;
    height: 1200px;
    cursor: pointer;
    text-decoration: none;
}
 
.page-content {
    z-index: 999; 
    position: relative; 
}

Важные нюансы:

  • в свойстве background-image подставьте свой адрес фоновой подложки;
  • высота height: 1200px для #adv_fon задает высоту кликабельного блока, ниже ссылка срабатывать не будет — поменяйте на высоту своей картинки;
  • имя класса page-content — это основной блок-контейнер для содержимого страницы, можно/нужно изменить на используемое значение в вашем шаблоне!

2.2. Во втором случае, когда бекграунд фиксированный, стили styles.css отличаются несколькими параметрами:

body {
    background-image: url(http://www.ВАШСАЙТ.com/wp-content/uploads/fon.jpg);
    background-position:top center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
 
#adv_fon {
    top: 0;
    left:0;
    display: inline;
    width: 100%;
    height: 100%;
    position: fixed;
    cursor: pointer;
    text-decoration: none;
}
 
.page-content {
    z-index: 999; 
    position: relative; 
}

Важно(!) посмотрите нюансы после предыдущего кода — они аналогичные. Из изменений появились значения fixed для свойств background-attachment и position + высота height: 100%. При желании можно растянуть фоновую картинку на весь экран (используется background-size: cover в элементе body). Скролинг фона, если что, здесь также допускается.

Идея модификации. Если вы умеете добавлять новые опции в Customizer или ориентируетесь во WordPress фрейморках настроек то, теоретически, можете сделать так, чтобы пользователь/клиент в админке лишь загружал фотку/изображение и вводил адрес URL для перехода.

Плагины кликабельного фона сайта на Вордпресс

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

WP-Backgrounds Lite

Плагин WP-Backgrounds Lite

WP-Backgrounds Lite добавляет ссылку и кастомный бекграунд на отдельные посты, реализация, судя по всему, выполнена через JS скрипт. Из негатива тут обновление более 3х лет назад (хотя 5тыс скачивания это круто) + авторы внедряют скрытые обратные линки в код страницы через display: none (ай, нехорошо;).

Секрет плагина WP-Backgrounds Lite

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

Если менять их придется не часто, можно «втупую» прописать все в коде WP-Backgrounds Lite, заодно избавившись от лишних внешних линков. Если захотите все сделать красиво, дополнительно внедрите для пользователей ввод соответствующих параметров в Настройщике темы.

Backdrop

Плагин Backdrop

В Backdrop основная и единственная функция — добавление в WordPress фонового изображения причем делается это через Customizer темы дабы даже новички смогли установить желаемые настройки. Из минусов — всего лишь 200 скачиваний, хотя решение одно из самых свежих. В админке оно выглядит действительно максимально просто и удобно.

Настройка модуля Backdrop

Здесь, как видите, всяческие опции считываются через настройщик темы, поэтому появилась идея добавить поле, куда бы люди вписывали внешний URL ссылки. Затем редактируете исходник плагина, заменяя выводимый в шаблоне контейнер DIV на A — он идет как раз после body, как в самом первом примере + оттуда же копируете нужные CSS стили. По идее, должно сработать.

Итого. На самом деле мне очень странно, что нет толкового модуля, решающего нашу проблему, кликабельное фоновое изображение в WordPress сайте — вполне нормальная задача. Хотя, уверен, платные наработки все это умеют.

Как бы делал я? Если пользователю (или вам лично) не понадобится менять URL/подложку достаточно часто, то реализация через чистый HTML+CSS — вполне норм. В противном случае, когда проект делается под клиента, я бы дополнительно немного «заморочился с допиливанием» плагина Backdrop и внедрением нового параметра в Customizer. Визуально там настройки в теме меняются очень быстро и легко.

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 5, средний балл: 5,60 из 7)
Загрузка...

категория Категории: Возможности; Начинающим;
теги Теги: , , , , , .

комментариев 12 к статье “Кликабельное фоновое изображение в WordPress сайте (2 варианта)”

  • Антон   13.11.2018

    Вот это мануал! даже новичкам вроде меня все предельно понятно)

  • Tod   13.11.2018

    Антон, рад, что вам пригодилось, старался)

  • Профитроль   14.11.2018

    Не просто, но я почти справилась. Пришлось мужа подключать))

  • Николай   22.11.2018

    Огромное спасибо за интересный материал. Идея просто супер.

  • Sergey   15.03.2019

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

  • Triste   29.04.2019

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

  • Tod   30.04.2019

    Triste, тут помогут только эксперименты с кодом, что-то конкретное сложно подсказать. Взять страницу с HTML-кодом попроще и потестировать/реализовать сначала там, а потом уже добавлять остальные элементы шаблона. Возможно, где-то использовали не тот стиль, если подключали уже к готовому макету.

  • Triste   02.05.2019

    Спасибо. Такой вопрос. Как сделать, что бы задний фон адаптировался под другие устройства. Смартфоны и планшеты?

  • Сергей Нестеровский   03.04.2020

    А почему на элементы в сайдбаре накладывается кликабельность по фоновой ссылке? Как это убрать?

  • Tod   04.04.2020

    Сергей, сложно сказать почему конкретно в вашем случае это происходит. Я могу только поручаться за те версии модулей, когда я их тестировал. Можно посмореть через код страницы через Ctrl+Shift+I и навести на нужный элемент дабы понять почему к нему применяется (или нет) определенный стиль. Обратите внимание на z-index который позволяет указывать какой слой будет сверху/снизу.

  • WEB банкир   18.04.2020

    Я бі хоте добавить adsense на задний фон :(
    Буду искать…

  • Tod   19.04.2020

    WEB банкир, не уверен, что это допускается правилами системы.

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


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости