Вчера пришел вопрос – как сделать шапку, он же 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)), ближе к низу ищем строку

и меняем ее на

Где site.ru – используем URL домашней страницы вашего сайта.

Соответственно, style=”cursor: pointer; cursor: hand;” делает курсор в виде руки в кросс-браузерно, а onclick=”self.location = ‘http://site.ru'” – выводит главную страницу при клике на этот блок, title=”site.ru” – отвечает за вывод надписи при наведении курсора, можно написать Home Page, можно – название сайта. Если пишем название на русском – не забываем перед тем, как писать по-русски – в нотепеде в меню “Кодировки” поставить галочку в “Кодировать в UTF-8 (без BOM)”, иначе выводится будет абракадабра и крякозябры.

Соответственно, если за хидер отвечает только

то меняем уже его на

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

Понятно, что вариантов переадресации может быть еще более 100500 – и ссылку делать типа простого слэша, или index.php?id=home (в случае, если чпу не используется, и .htaccess не переписывается), и self.location делать с href, и т.д.

Но приведенный вариант, как мне кажется – самый надежный.

Вообще, в некоторых случаях правильнее делать кликабельной не всю шапку, а дополнительно в шапку вывешивать логотип, делая кликабельным только его – вот тогда надо вносить изменения и в css, и править header.php. Сделать это тоже несложно – хорошо описано здесь. Только отмечу, что если шапка уже является кликабельной – то тут, действительно, уже можно просто обойтись правкой css – добавляем туда наш логотип, внося в style.css в блоке #header .home строчки типа

И вуаля.