Как сделать кликабельную шапку wordpress

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

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

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

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

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

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

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

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

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

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

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

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

Важно(!) посмотрите нюансы после предыдущего кода — они аналогичные. Из изменений появились значения 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. Пишем ниже, не стесняемся.

Источник

Как вывести контактные данные в шапке сайта?

Приветствую вас, дорогой читатель!

По многочисленным просьбам трудящихся сегодня покажу как вывести блок с контактной информацией в шапке сайта WordPress.
Такой блок пригодится практически на каждом сайте, в него можно вывести телефон, адрес, время работы, e-mail, кнопки соцсетей или какой-то произвольный текст.

Для вывода контактной информации в шапке сайта в WordPress есть несколько способов.
Рассмотрим 2 наиболее простых и гибких.

Добавление области виджетов для вывода контактных данных в шапке сайта

Способ заключается в том, что вы объявляете свою собственную область виджетов, в которую можно будет добавлять любые виджеты, в том числе и виджет «Текст» и «HTML-код», в которых вы и будете писать данные для вывода в шапке сайта.

Далее вам нужно будет при помощи специального кода вывести эту область виджетов в файлах соответствующего шаблона темы WordPress. Обычно это шаблон header.php, masthead.php или что-то аналогичное, в зависимости от темы.

Вывод контактных данных через настойки темы

Наверняка вы видели, что в админке WordPress есть такой раздел: «Внешний вид» — «Настроить»

В нем можно задать настройки темы, свойства сайта и некоторые другие параметры, которые зависят от установленной темы и плагинов. Так вот мы тоже можем привязаться к этому разделу и вывести в нём дополнительный пункт для задания контактной информации.
Для этого нам нужно проделать несколько шагов:

Или вы можете открыть этот файл при помощи Notepad++ или другого редактора кода.
Данный файл будет находиться по адресу:

В самом конце этого файла нам нужно вставить следующий код:

Кликнув по нему вы можете задать нужные данные и нажать на кнопку «Опубликовать»

Для вывода контактных данных нам нужно будет в нужном месте шаблона вывести специальных код:

Так как у нас два поля, то выводятся они по очереди, причём с проверкой на заполненность. То есть если значение поля «Телефон» заполнено, то в коде выведется блок с классом phone-number, иконкой телефонной трубки номером телефона:

А если поле пустое, то в коде не выведется ничего.
Если вам не нужны иконки в полях то код

можно удалить или заменить на другую иконку или картинку.

Как определить куда вставлять код для вывода контактных данных?

Для того чтобы вставить второй фрагмент кода в нужном месте шаблона вам придётся немного поэкспериментировать. Обычно за вывод шапки сайта отвечает файл header.php, который находится в папке с активной темой, однако в более сложных темах нужный фрагмент кода может находиться и в других файлах шаблона.

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

Если вы знаете ещё какие-то более простые или гибкие способы добавления контактных данных в шапку сайта WordPress – делитесь ими в комментариях! Так же не забывайте подписаться на мою рассылку чтобы получать новые статьи себе на почту.

Источник

Как изменить шапку сайта на WordPress или добавляем произвольные объекты

На этом блоге, да и на многих других я сталкивался с проблемой, что в шапке то нет категорий, то они там есть. Буквально за месяц до написания этой статьи в одном магазине на openCart пришлось убирать вывод категорий и размещать в шапке статьи. Причем без разницы скачали ли вы бесплатный шаблон для сайта или вам его сделала веб студия, к примеру веб-студія SEOOWL. Поэтому, наконец пришла пора рассказать как убрать рубрики из шапки и разместить там произвольные объекты в WordPress.

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

После недолгий раздумий, я пришел к выводу что категории надо выводить в панели виджетов — слева, а на верх, вместо рубрик надо вставлять произвольные элементы. К примеру контакты, и HTML карту сайта. Почему именно эти страницы? Об этом подробнее

В результате должно получиться что-то типа как на картинке ниже:

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

Как вывести рубрки в боковое меню в WordPress

После того как вы сохраните изменения, можете зайти на главную страницу и посмотреть что получилось. Если вы хотите какие-то блоки поменять местами это можно сделать просто перемещая блоки драг & дропом.

Как вынести ссылки в шапку WordPress

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

wp-content/themes/ Ваша тема

Далее, нам надо убрать вывод рубрик, и вместо него подложить код произвольных страниц. В 99% случаев вывод рубрик осуществляется кодом:

Советую вам искать этот участок по строчке

Подчеркнутый код вы естественно меняете на свой. В паре идут URL адрес и название. (Рекомендую прочитать какие правильно делать ссылки в OpenCart). Если вам надо не две ссылки, как у меня, а скажем три или дестяка, то ничего страшного. Вы можете дублировать строчку:

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

Если у вас остались вопросы — пишите в комментариях, попробую на на них ответить.

Источник

Как сделать шапку сайта: простой способ

Привет, друзья! Сегодня я хочу рассказать о том, как сделать шапку сайта. Она являет собой визуальный элемент, придающий проекту индивидуальность, уникальность. Придает ресурс узнаваемость и свой стиль. Чтобы сделать ее, не требуются какие-то особые, специализированные знания, навыки и умения программирования. Существует два способа, позволяющих достичь цели. И каждый из них простой.

Как сделать шапку сайта: вводная информация

Начнем с общей информации о данном графическом и визуальном элементе. Он обладает несколькими неоспоримыми преимуществами:

Кстати! У сайта еще нет собственного логотипа? Его также можно сделать самостоятельно всего за 5 минут. В этом вам поможет наш проект.

Что должен/может включать в себя верхний блок любой площадки:

Конечно, в нем не обязательно должны присутствовать все указанные выше элементы. Главная задача – формировать узнаваемость и привлекательность проекта. Шапка должна максимально гармонично сочетаться с основным оформлением сайта.

Как сделать шапку сайта: два способа достижения цели

Я пока не буду углубляться в вопросы «как сделать шапку сайта html» или «как сделать шапку сайта css». Сначала о том, как подготовить для нее «рисунок».

1. Сделать шапку для сайта онлайн

Наиболее простой метод. Не требующий каких-либо навыков, профессиональных умений. Есть целый ряд площадок, на которых создаются шапки для сайтов. В них – наборы шаблонов. Некоторые сервисы позволяют вносить изменения в шаблоны. Другие – нет. Среди подобных проектов есть, как бесплатные, так и платные.

Сделать шапку для сайта онлайн очень просто. Только достичь оригинальности удается не всегда. Ведь работа предполагает использование шаблонов.

2. Adobe Photoshop

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

Photoshop являет собой действительно идеальный инструмент для создания шапок и прочих визуальных элементов.

Промежуточный итог

Сделать графический элемент – половина дела. Необходимо еще правильно разместить его на страницах сайта. Сначала нужно поместить готовую картинку в папку IMAGES. Она находится в каталоге административной панели. После чего можно приступать к размещению изображения на страницах.

Как сделать шапку сайта CSS: помещаем изображение на сайт

Рассказываю, как сделать шапку сайта CSS. Переходим в #header и там вместо установленных параметров высоты прописываются габариты созданной картинки – высота и ширина изображения.

width: 1420px; — ширина

height: 300px; — высота

background-color: #25B33f; — фон

margin-bottom: 30px; — отступ снизу

Обратите внимание! Здесь и далее слова «Ширина», «Высота», «Фон» и прочие к коду не имеют отношения. Они лишь указывают, что значит та или иная строка.

После этого остается вставить только саму шапку:

background-image: url(images/i8.png) — картинка

Как сделать шапку сайта html

Начинаю рассказывать, как сделать описание сайта и заголовок. Для этого нужно использовать тег body блок div с идентификатором и в нём два заголовка h1 и h3. В них и будет указано название проекта и его подробное описание.

Мой сайт

Теперь я знаю, как сделать шапку сайта

Если нужно изменить внешний вид самого заголовка и текста описания, оформить их, потребуется использование вот такого кода:

color: #2980b9; — цвет заголовка

font: 50px Times New Roman; — шрифт

margin-left: 500px; — отступ слева

width: 400px; — ширина

color: #9b59b6; — цвет

font-style: italic; — курсив

margin: 90px 0 0 40px; — расположение

И еще один вариант

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

Обратите внимание! Вот как может выглядеть адрес картинки: .

При таком «развитии событий» нужно в #header удалить строку background-image: и указать position: relative. А разделах h1 и h3 указать position: absolute;. Однако нужно будет поменять отступы заголовков. Что поможет в позиционировании.

font: 50px Times New Roman;

Обратите внимание! Размеры в px приведены в качестве примера. Не нужно принимать их за истину! Размеры на своем сайте устанавливайте самостоятельно!

Шапка сайта для WordPress

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

Для этого необходимо пройти по следующему пути:

Обратите внимание! Нужно немного изменить положение шапки на странице? Для этого возвратитесь в редактор, перейдите в код и в тег img, внесите атрибут style со свойством margin. Вот как это будет выглядеть: style=»margin:0 0 0 0;»

Как сделать шапку сайта: личный совет

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

Если вас интересуют прочие секреты, как работать с платформой WordPress, читайте мой блог. В нем много полезного по этой теме.

Источник

LiveInternetLiveInternet

—Метки

—Рубрики

—Цитатник

ПУЛОВЕР РАЗНЫМИ КОСАМИ БЕСШОВНЫЙ ПУЛОВЕР РАЗНЫМИ КОСАМИ К новому году связала внучке пуловер.

HTML шпаргалка В ы не знаете кодов HTML? А дневник красиво и, самое главное, правильно офо.

Пасхальные цыплята http://zagorodnayazhizn.ru/?p=696 Симпатичные чехлы на пасхальные яйца.

Салат новогодний «Шишки» Салат «Шишки» пригодится любой хозяйке, которая бере.

Рубрики моего дневника Новости (6366) Стихи (5566) Картинки (405.

—Ссылки

—Приложения

—Новости

—Музыка

—Фотоальбом

—Всегда под рукой

—

—Поиск по дневнику

—Подписка по e-mail

—Интересы

—Трансляции

—Статистика

Как создать кликабельную картинку или кнопку-переход в редакторе

Для этого нужно загрузить картинку на любой фотохостинг и и взять ссылку №1, т.е адрес картинки. В последнее время я предпочитаю http://fotki.yandex.ru/ но по привычке загрузила на радикал-фото. Адрес ссылки это страница, которая будет открываться при нажатии на картинку или баннер.

Скопируйте код в блокнот на ПК и внимательно вставьте адреса ссылки и картинки(не перепутайте)

Вставьте в сообщение в расширенном редакторе при нажатии на ИСТОЧНИК

Отправьте сообщение в ПРЕДПРОСМОТР или ЧЕРНОВИК и проверьте результат на кликабельность. Я. например, провожу все манипуляции с картинкой в ЧЕРНОВИКЕ,а затем каждый раз беру готовый код картинки из черновика и вставляю в сообщение.

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

В окошке со ссылкой удаляем ссылку на фотохостинг и прописываем свою ссылку на страницу перехода. Во второй графе щелкаем по ПЕРЕХОД НА URL ( при этом в ссылках должно произойти изменение т.е замена на вашу ссылку) В результате получаем готовый код №2 или №6.

Они выполняют одинаковую функцию, но имеют разный вид в редакторе.

Как видно из скринов и как говорят опытные пользователи «на фотохостинг надейся,а сам не плошай!»

Загрузив картинку из ПК в редактор, с помощью простых манипуляций можно сделать любую картинку не только кликабельной, но и со всплывающим текстом при наведении на картинку. Для этого жмем на иконку ИЗОБРАЖЕНИЕ и загружаем картинку из ПК. Когда картинка загрузится переходим на вкладку ССЫЛКА

В выпавшем окне в графе URL вписываем ссылку на страницу перехода

Далее переходим на вкладку РАСШИРЕННЫЙ и в графе ЗАГОЛОВОК пишем всплывающий текст.

Все самые популярные коды здесь: Коды для оформления блога

Источник