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

Итак, чтобы осуществить задумку, мне понадобилось порыться в коде (предварительно порывшись в Яндексе и Гугле).

Изменения вносятся в файл header.php (он же «Шапка», он же «Заголовок», он же что-то похожее по смыслу в зависимости от шаблона):

Находим строку, где начинается собственно «тело» шапки (тег <body>):

<?php wp_head(); ?>
</head>
<body>
<div id="title"><?php echo get_settings('home'); ?>/"><h1><?php bloginfo('name'); ?></h1></a>
<?php bloginfo('description'); ?></div>
</div>
<div id="pages">
<ul><?php wp_list_pages('title_li=&nbsp;' ); ?></ul>
</div>

и перед div’ом, отвечающим за картинку вставляем строку:

<div id="header" onclick="javascript: window.location.href='http://host.domen/'"  title="your_alternative_text&alt">

Получаем:

<?php wp_head(); ?>
</head>
<body>
<div id="header" onclick="javascript: window.location.href='http://host.domen/'"  title="your_alternative_text&alt">
<div id="title"><?php echo get_settings('home'); ?>/"><h1><?php bloginfo('name'); ?></h1></a>
<?php bloginfo('description'); ?></div>
</div>
<div id="pages">
<ul><?php wp_list_pages('title_li=&nbsp;' ); ?></ul>
</div>

Где «host.domen» — адрес сайта, «your_alternative_text&alt» — описание, которое будет всплывать при наведении курсора на шапку.

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

Для этого в файле CSS в блоке, отвечающем за тот самый id=»header» меняем значение параметра cursor. Это выглядит примерно так:

 
#header {
    height: 260px;
    width: 780px;
    background-image: url(images/header.jpg);// здесь путь к фоновому изображению
    background-repeat: no-repeat;
    margin: 0 auto;
    clear: both;
    background-position: left;
    cursor: hand;

Однако!

Это пример одного шаблона, благодаря которому я, собственно, подправила свой.
В моем случае все выглядит немного по-другому:

<body>
<div id="art-page-background-simple-gradient">
</div>
<div id="art-main">
<div class="art-Sheet">
    <div class="art-Sheet-tl"></div>
    <div class="art-Sheet-tr"></div>
    <div class="art-Sheet-bl"></div>
    <div class="art-Sheet-br"></div>
    <div class="art-Sheet-tc"></div>
    <div class="art-Sheet-bc"></div>
    <div class="art-Sheet-cl"></div>
    <div class="art-Sheet-cr"></div>
    <div class="art-Sheet-cc"></div>
    <div class="art-Sheet-body">
<div class="art-Header" onclick="javascript: window.location.href='http://janies-gotagun.ru/'"  title="На главную">
    <div class="art-Header-jpeg"></div>
 
</div>

И еще пара слов про курсоры. В моем шаблоне есть два их вида: default и pointer (у себя вы можете определить их поиском в файле стиля по слову cursor). Нетрудно догадаться, какой каким образом выглядит. Поэтому вот тут я его и поменяла:

div.art-Header
{
	margin: 0 auto;
	position: relative;
	z-index:0;
	width: 100%;
	height: 225px;
	cursor: pointer;
}

Приятного вам блоговедения! 😉

Как сделать переход на главную при клике на шапку сайта?
Метки:            

Как сделать переход на главную при клике на шапку сайта?: 1 комментарий

  • 20.09.2012 в 15:56
    Постоянная ссылка

    иногда требуется открывать ссылку в отдельном окне.
    Для этого меняем onclick=»javascript: window.location.href=’http://host.domen/'»
    на onclick=»javascript: window.open (‘http://host.domen/’)»

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *