Створюємо клікабельним фон для сайту за допомогою css, js і wp плагінів

Тут у змінній banners потрібно задати посилання, куди користувач буде переходити при кліці на фонове зображення (замість site1, site2 і site3). Кожен раз при генерації сторінки вибирається випадкове число і потім підставляються відповідні значення в код. Увага! З огляду на наявність php функцій, працювати дана конструкція буде тільки для виконуваних файлів з розширенням .php (в html сторінці не запуститься). Також не забувайте включати в CSS стилі елементи #ad_bg. main-content-block, зазначені в першому прикладі.

Для роботи цього методу потрібно було підключити jquery, але все одно ніякого результату це не дало. За логікою, при кліці на фонову картинку, має спрацьовувати відкриття нового вікна, але це не відбувається.

Реалізувати вийшло трохи видозмінивши виклик скрипта.

WordPress плагіни для клікабельно фону

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

Основне завдання плагіна - установка повноекранного клікабельно зображення для фону на сторінках, постах блогу. Є безкоштовна (спрощена) і просунута версія плагіна. Опцій і налаштувань тут досить багато (особливо у платній версії). Якщо судити за описом, то поставити посилання на фонову картинку за допомогою даного плагіна можна.

Сподобався пост? Підпишись на оновлення блогу по RSS. Email або twitter.

Background Manager дозволяє встановити фон для кожної сторінки або записи, можна вибрати 1 з запропонованих варіантів або використовувати картинку. Неможливо вставити посилання за допомогою цього плагіна.

У WP-Backgrounds Lite є поле для посилання, але чомусь не працює.

Остап, з приводу другого плагіна знайшов - some features (i.e. the fullsize background link) will not work with all themes. Залежить від структури шаблону.
За Background Manager, до речі, двояке відчуття. Раз я робив повноцінний огляд модуля, то напевно тоді лінк з фону працював. Оскільки я шукав відповідне рішення для однієї задачі. Можливо, для нових версій ВП або деяких шаблонів, він глючить. У будь-якому випадку, тепер це вже не особливо актуально, тому що Background Manager у мене не виходить знайти на офіційному сайті.

Може я щось не так роблю, але у мене виходить весь сайт клікабельним. Як виправити. Пробую зробити за першим варіантом?

Андрій, складно давати поради на відстані. Тут 2 варіанти: 1) зробити ще раз всі налаштування з самого початку уважно. 2) Якщо впроваджуєте на готовому сайті, додавати код поступово і по ходу правок дивитися що працює, що немає - так зможете знайти проблему. У коді опція z-index = 1000 має в своєму розпорядженні основний блок контенту main-content-block поверх основних, в тому числі і фону. Якщо контент клікабельним, то можна пошукати помилку в цьому напрямку.

Спасибі, за статтю. а при першому варіанті брендування цей код в стайл.цсс треба пхати?

miraza, в першому прикладі в коді використовується тег style, що дозволяє додати стилі CSS прямо в HTML файл. Але правильно буде розмістити всі стилі в стайл.ксс - ви правильно помітили. Просто так було наочніше їх продемонструвати і простіше перевірити працездатність коду.

Adept, якщо сайт на вордпресс, то можна пошукати плагіни (в тому числі спробувати 2 останніх). Якщо на інший CMS або просто без неї, тоді буде потрібно скрип виведення випадкових кодів. Колись давно в іншому блозі я публікував статтю з прикладом реалізації рандомних контенту - там робиться через файли, хоча, напевно, це не найефективніший метод.

На вордпресс сайт, плагіни ці не виконують свої функції. Принаймні з моєю темою точно.

Adept, тоді доведеться шукати PHP код для створення випадкової вибірки з декількох текстових фрагментів і впровадити його в код першого варіанту, поставляючи різні результати замість параметра href посилання і фонової картинки.

Блог відмінний, а блогер відповідальний! Вищих позицій Вам!)

Adept, оновив статтю і додав код для рандомних фону. Тільки його потрібно вставляти в PHP файл, наприклад в шаблон якийсь тощо Можна, в принципі, просто перейменувати html файл в php, якщо вже сильно потрібно.

ПАМАГИТЕ! Все робив за інструкцією, тільки картинки рандомний криво відображаються, а посилання все норм. Я новачок і десь з body у мене затримка напевно.

Олександр, потрібно уважно все ще раз повторити, на жаль. я не можу підказати де саме у вас помилка. Там після рандомних коду є кілька нюансів, наприклад, потрібно в CSS включати стилі #ad_bg. main-content-block, зазначені в попередньому прикладі.

Вітаю!
Дякую за статтю! Чи змінилася ситуація з двома останніми плагінами? Може з'явилося щось нове, щоб більш-менш безболісно провести брендування сайту на wordpress?
заздалегідь дякую!

Олександр, найефективніше вирішувати завдання через CSS стилі. З плагінів робочим залишився тільки WP-Backgrounds Lite, альтернативних модулів, на жаль, не особливо багато.

Щоб вирішити проблему з клікабельністю фону в плагіні Background Manager потрібно тут /wp-content/plugins/background-manager/resources/css/pub.css

Замінити на це: #myatu_bgm_img_group

Працює відмінно, обійшовся без a. Поки скрипт для ІЕ6 задіяти не став, вирішив залишити ефект наведення для нормальних браузерів. Спасибі за допомогу!

Якщо виникнуть питання, пишіть на [email protected]