Вчера пришел вопрос – как сделать шапку, он же header, кликабельным. Не добавить какую-то еще картинку, как здесь, а сделать кликабельной уже существующую фоновую картинку, ссылка на которую подгружается, например, из БД, а не прописана напрямую. Чтобы при клике на нее пользователь попадал на главную страницу. Я, откровенно говоря, даже удивился – поскольку не подозревал, что существуют темы, которые нарисованы как-то по другому, и что клик по шапке никак не адресуется. В принципе, известно, что в шапке можно выводить название сайта, которое по сути, представляет собою линк на home page – но вот если его нет, и при отсутствии кликабельности header – а – это проблема. Но к счастью, она достаточно легко решается, правкой всего одной строчки.
Сначала необходимо отдельно отметить, что “кликабельность” — это функционал. Поэтому все мечты сделать это через правку style.css – стоит сразу оставить. CSS у нас отвечает исключительно за “внешний вид”. Поэтому, с помощью CSS сделать ничего кликабельным никак нельзя, а вот с помощью HTML, или javascript, вписав одну маленькую строчечку в header.php — пожалуйста.
Сначала надо определить, какой div у нас отвечает за шапку. Проще всего сделать это в Опере, щелкнув правой кнопкой мышки на шапке, и выбрав в выпавшем меню строчку “Проинспектировать элемент”.
Видим, что за вывод header-а у нас отвечает div с классом container_12.
У вас может быть и другой, а может и вообще не быть – тогда правки надо будет вносить в строчку с div id=”header”. В принципе, не суть важно.
Итак – нам надо решить три задачи – во-первых, чтобы при наведении на шапку курсор принимал вид руки, во-вторых – чтобы осуществлялся переход на главную страницу, а в третьих – чтобы при наведении на хидер отражалось название сайта, или то, что щелчок ведет на главную страницу. Как я уже говорил, решаются они элементарно редактированием header.php. Открываем его в Notepad++ (а можно – прямо в админке – во внешний вид-редактор, там выбираете Заголовок(header.php)), ближе к низу ищем строку
|
1 |
<div class="container_12"> |
и меняем ее на
|
1 |
<div class="container_12" style="cursor: pointer; cursor: hand;" onclick="self.location = 'http://site.ru'" title="site.ru"> |
Где site.ru – используем URL домашней страницы вашего сайта.
Соответственно, style=”cursor: pointer; cursor: hand;” делает курсор в виде руки в кросс-браузерно, а onclick=”self.location = ‘http://site.ru'” – выводит главную страницу при клике на этот блок, title=”site.ru” – отвечает за вывод надписи при наведении курсора, можно написать Home Page, можно – название сайта. Если пишем название на русском – не забываем перед тем, как писать по-русски – в нотепеде в меню “Кодировки” поставить галочку в “Кодировать в UTF-8 (без BOM)”, иначе выводится будет абракадабра и крякозябры.
Соответственно, если за хидер отвечает только
|
1 |
<div id="header"> |
то меняем уже его на
|
1 |
<div id="header" style="cursor: pointer; cursor: hand;" onclick="self.location = 'http://site.ru'" title="site.ru"> |
Также здесь необходимо очень внимательно отнестись к тому, какие кавычки, и открывающие-закрывающие скобки-уголки используются. Вордпресс их переделывает по-своему – и поэтому необходимо брать строчки именно из выделенных блоков с прокруткой, а не просто из текста.
Понятно, что вариантов переадресации может быть еще более 100500 – и ссылку делать типа простого слэша, или index.php?id=home (в случае, если чпу не используется, и .htaccess не переписывается), и self.location делать с href, и т.д.
Но приведенный вариант, как мне кажется – самый надежный.
Вообще, в некоторых случаях правильнее делать кликабельной не всю шапку, а дополнительно в шапку вывешивать логотип, делая кликабельным только его – вот тогда надо вносить изменения и в css, и править header.php. Сделать это тоже несложно – хорошо описано здесь. Только отмечу, что если шапка уже является кликабельной – то тут, действительно, уже можно просто обойтись правкой css – добавляем туда наш логотип, внося в style.css в блоке #header .home строчки типа
|
1 2 |
background: url('http://site.ru/wp-content/themes/ink-stain/images/logo_hc.png') no-repeat scroll 0 0 transparent; background-position: 25% 80px; |
И вуаля.
Спасибо огромное! Весь день рыл носом поисковики запросом как сделать кликибельной шапку, но все описывают как сделать ссылкой картинку-логотип, а у меня весь дизайн, это одна картинка… Оказалось всё так просто. Всё описано так доходчиво, как нигде больше!
Спасибо. Перерыл кучу статей по этой теме. Предлагают такие костыли что ужас. Ваш же способ элегантный и простой. А главное с практическим примером кода и картинками.
спасибо! очень полезная статья!!!!
Спасибо конечно! но как сделать чтобы открывалась в новом окне, использую:
location – это функция текущего окна. Если надо в новом – то необходимо воспользоваться функцией window.open, строка будет выглядеть примерно так:
<div id=”header” style=”cursor: pointer; cursor: hand;” onclick=”window.open (‘http://chewriter.ru’)” title=”На главную страницу”>
Заметьте, что в конструкции знак равно после функции изменился на скобки вокруг URL, стоящего в одинарных кавычках. А вся конструкция – уже в двойных.
спасибо, так и сделал!
Единственный человек, который объяснил как в Аристере 4 сделать кликабельную шапку!!!!
Спасибо большое! перерыла кучу мути, прежде чем Вас нашла.
У меня еще небольшой вопрос, помогите пожалуйста.
Вот мой код хедера, там явно лишнее что-то, я просто наковыряла((
Что удалить из этого:
<body>
<div id=”header”>
</div>
<div id=”container” style=”cursor: pointer; cursor: hand;” onclick=”self.location = ‘http://vikakram.ru'” title=”Блог Виктории Крам”>
<img src=”<?php bloginfo(‘template_url’); ?>/images/photo3.jpg” width=”960″ height=”197″ border=”0″ alt=”<?php bloginfo(‘name’); ?>” />
Буду очень благодарна!
только сейчас заметила, тайтл теперь отображается при наведении на Рубрики, Метки.. и ведет на главную.
Как это исправить?
Большое спасибо за информацию! Все действительно оказалось очень просто и быстро. Зашел на данный сайт через поиск, но сейчас занес в закладки, так как реально много полезной практической информации, без лишней “воды”.
Спасибо
Проделала эти манипуляции – все заработало, но в мобильной версии перестала работать навигация…
Спасибо Вам, все просто и доходчиво!
От всей души )) целый день не мог ничего толкового найти, просто класс, спасибо!
Здравствуйте.
Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Вот нашел одну доску объявлений http://moskva.biglus.com/ с регионами, подскажите какой шаблон или плагин тут используется, нужно именно, чтобы поддомены работали как в указанном сайте. Я находил плагин для создания поддоменов, но там только для категорий, тоесть из категорий создаются поддомены, а мне так не нужно.
Блин так долго искал как сделать ссылку в лого, наконец то нашел! Спасибо огромное!
Добрый день!
Подскажите, пожалуйста, как сделать фон как у Вас на сайте?
Заранее огромное спасибо!
Скачать и установить вот эту тему.
А есть макет стрелки как внизу справа !
Красивая , понравилась.
Она предустановленная плагином, вот здесь я подробно писал об этом.