Кликабельное фоновое изображение в 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 добавляет ссылку и кастомный бекграунд на отдельные посты, реализация, судя по всему, выполнена через JS скрипт. Из негатива тут обновление более 3х лет назад (хотя 5тыс скачивания это круто) + авторы внедряют скрытые обратные линки в код страницы через display: none (ай, нехорошо;).

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

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

Backdrop

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

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

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

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

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

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 6, средний балл: 5,67 из 7)

Загрузка...

Категории: Возможности; Начинающим;
Теги: wordpress фон, дизайн, изображения, оформление блога, правка шаблона, ссылки.