Продолжим оформлять шапку нашего шаблона для Вордпресс (см. ранее части 1, 2, 3).
В этой части будет много кода, так что будьте внимательнее.
Откроем файл header.php. Сразу за тегом <body> начинается основной блок по имени content. Если посмотреть внимательно, то внизу этого файла мы не найдем закрывающего тэга </div> для него (кому интересно, можете пересчитать последовательно открывающие и закрывающие «дивы»). Он появится много позднее, в файле footer.php. Таким образом, весь шаблон состоит из отдельных деталей-файлов. Это очень удобно, однако можно потеряться в «дивах». Так что бдите!
Следом за открытым тэгом блока content идет блок header вот с такой прилепленной конструкцией:
<div id="header" onclick="location.href='<?php echo get_settings('home'); ?>';" style="cursor: pointer;">
(напомню, что мы разбираем готовый шаблон pool и пытаемся переделать его под наш макет)
Данная конструкция делает всю шапку одной большой ссылкой на домен блога. Нам это совершенно ненужно, а потому удаляем все лишнее и оставляем только:
<div id="header">
Далее, при помощи тэгов <h1></h1> у нас выводится заголовок блога, который одновременно является ссылкой на домен. Но нам нужно перед заголовком поставить наш нарисованный логотип и так же сделать его ссылкой. Если мы просто впишем перед тэгами h1 кусок кода для вставки картинки, то наш заголовок сместится под картинку и в Опере затеряется в дебрях горизонтального меню, а в ИЕ просто сдвинет меню еще ниже.
Поэтому мы откроем лист стилей CSS и после правил для шапки добавим еще вот такой кусок:
.logo {
float: left;
}
.rss {
float: right;
color: #FD9C04;
}
В файле header.php перепишем вот это место:
<div id="header">
<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
</div>
следующим образом:
<div id="header">
<a href="<?php echo get_settings('home'); ?>"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.gif" alt="Блог Кисы В." /></a>
<div class="logo"><h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?></div>
<div class="rss"><a href="<?php bloginfo('rss2_url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/rss-feed.gif" alt="rss" /></a><br />
Подпишись на RSS!</div>
</div>
Теперь разберем, кто есть ху. В изначальном варианте у нас есть только заголовок первого уровня, оформленный как ссылка. В измененном варианте мы добавили описание блога (дескрипшн) и, кроме того, кнопку RSS так же со ссылкой. Код выглядит несколько устрашающим, но на самом деле там нет ничего сложного.
<?php echo get_settings('home'); ?> — означает вызов адреса домена. Этот кусок можно вполне заменить на http:// www.vorobyaninov.com/ и это будет то же самое.
<?php bloginfo('template_directory'); ?>/images/logo.gif — так же не что иное как ссылка на картинку, лежащую в папке шаблона. Это действительно проще, чем например писать вот такой длинный адрес: http:// www.vorobyaninov.com/wp-content/themes/pool/ images/logo.gif.
Картинке логотипа мы приписали класс “logo”, которому в листе стилей CSS задали правило float: left;
Перед тэгом заголовка (h1) мы тиснули «див» так же с классом “logo”.
Сразу за ним мы вписали вызов описания блога:
<?php bloginfo('description'); ?>
И поставили закрывающий тэг </div>.
Что получилось? Образно говоря, мы заголовок и описание заключили в отдельный блок. У нас вначале шапки (слева) лежит картинка с обтеканием left, следом лежит блок с заголовком и описанием, тоже с обтеканием left.
Теперь нам осталось разместить картинку RSS-фида и призыв подписаться, но уже с обтеканием right. Что мы и сделали, задав им общий «див» с классом “rss”.
Сделаем сразу еще одно добавление. Следом за кодом RSS пропишем вот такую строку:
<div class="clearfloat"></div>
Если кто не помнит, то это так называемая «очистка» для плавающих блоков. Она позволяет прекратить всякие обтекания после последнего элемента. Иначе, если останется свободное место, браузер будет стремиться еще чего-нить впихнуть туда.
Соответственно в листе стилей нужно также прописать правила для этого полезного класса:
.clearfloat {
clear: both;
}
В результате у нас в шапке получилось уже что-то более менее похожее на наш макет.
Далее в коде файла header.php идет блок с именем pages. По логике вещей это должна быть уже часть с контентом, но авторы оригинального шаблона решили так обозвать горизонтальное меню. Дабы не путаться, оставим имена как есть. В оригинале менюшка лежит под шапкой. В нашем же макете она находится на территории самой шапки. Что мы сделаем? Для начала вытащим из этого файла кусок кода, выводящий форму поиска:
<div id="search">
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" name="s" id="s" size="20" value="search in blog..." />
</form>
</div>
и сохраним его где-нить в укромном месте в виде текстового файла. Он нам еще пригодится. Затем берем оставшийся кусок:
<div id="pages">
<div class="alignleft">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">Blog</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
</div>
и переносим его в блок header сразу после куска кода с очисткой, но перед закрывающим «дивом». Должно получиться следующее:
<div id="header">
<a href="<?php echo get_settings('home'); ?>"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.gif" alt="Блог Кисы В." /></a>
<div class="logo"><h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?></div>
<div class="rss"><a href="<?php bloginfo('rss2_url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/rss-feed.gif" alt="rss" /></a><br />
Подпишись на RSS!</div>
<div class="clearfloat"></div>
<div id="pages">
<div class="alignleft">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">Blog</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
</div>
</div>
Менюшка встала на свое место, а окно поиска исчезло.
Теперь путем нехитрых махинаций с размерами и цветом шрифтов, подгонкой отступов и полей можно привести шапку в соответствии с нарисованным макетом. Если вы осилили все предыдущее, то с этим справитесь легко сами. Ну, а кто не справится — в конце цикла постов по данной теме будет лежать готовый переделанный шаблон, который можно будет скачать и внимательно изучить на досуге. :)
Пару слов о коде горизонтального меню. Вордпресс выводит сюда страницы, которые вы создаете «на лету» в админской блога. По-умолчанию, вначале всегда идет ссылка на главную страницу:
<a href="<?php echo get_settings('home'); ?>">Blog</a>. Вместо слова Blog впишем слово Главная.
Следующая строчка:
<?php wp_list_pages('title_li='); ?>
выведет все остальные страницы. Чтобы сохранялся определенный порядок при выводе страниц, нужно при создании каждой найти в админской справа блок «Порядковый номер» и вписать туда необходимый. Понятное дело, что нумерация идет как обычно — слева направо.
Так же вы можете ниже этой строки вписать обычные ссылки, например на форум, если он у вас есть:
<li><a href="http://www.vorobyaninov.com/forum/">Форум</a></li>
Продолжение следует.
Ура! :) Спасибо огромнейшее! Почти доделал шапку для будущего сайта на wordpress, благодаря вашим урокам!
Ответить
Отлично! :) Возникнут сложности - спрашивайте.
Ответить
Сергей 11.07.2011
@Игорь Квентор, Игорь, у меня небольшая проблема )
на сайте который я указал, вылезают титлы, как их убрать, я все перекапал и не нашел.
icq 156378826
skype frizPS
Ответить
Игорь Квентор 11.07.2011
@Сергей, у вас не тайтл вылезает, а заголовок первого уровня h1, который содержит тот же текст, что и в тайтле. Если вам нужно спрятать этот заголовок, задайте ему в файле css правило text-indent: -1000em;
Ответить
Сергей 11.07.2011
@Игорь Квентор,
я наверное что то не понимаю
было
#header h1, h1 a {font-family: Times, Helvetica, Sans-Serif;font-size: 30px;color: #000;
text-decoration: none;padding: 0;margin:0 auto 0;font-variant: small-caps;}
.description {display:none;}
стало
#header h1, h1 a {font-family: Times, Helvetica, Sans-Serif;font-size: 30px;color: #000;
text-decoration: none;padding: 0;margin:0 auto 0;font-variant: small-caps; text-indent: -1000em}
.description {display:none;}
изменений никаких(((
Ответить
Игорь Квентор 11.07.2011
@Сергей, в вашем случае нужно еще в наборе правил для #header удалить строку text-align: right;
Ответить
Сергей 11.07.2011
@Игорь Квентор,
стало
#header {background: #fff url(images/header.jpg) top left no-repeat;width: 100%;height:240px;
margin: 30px auto 0px;padding: 0;}
#header h1, h1 a {font-family: Times, Helvetica, Sans-Serif;font-size: 30px;color: #000;
text-decoration: none;padding: 0;margin:0 auto 0;font-variant: small-caps; text-indent: -1000em}
.description {display:none;}
но ничего не изменилось
Ответить
Игорь Квентор 12.07.2011
@Сергей, не изменилось потому, что в наборе правил для #header h1, h1 a также присутствует эта строка text-align: right; Ее нужно удалить.
Ответить
Сергей 12.07.2011
@Игорь Квентор, я не понимаю( я не вижу этих строк
Ответить
перерыв кучу сайтов о создании своего шаблона остановилась на вашем. очень доступно и понятно все написано. отличная помощь для новичка. спасибо
Ответить
Елена, вэлкам! :) Спасибо на добром слове!
Ответить
Спасибо за подробное описание. Нашел ответы на будущие вопросы :) Ждем-с книгу.
Ответить
апдейт - сорри не заметил что книга уже лежит готовая. В любом случаю, спасибо.
Ответить
Константин, рад что смог чем-то помочь! :)
Ответить
“<a href=”">Blog
. Вместо слова Blog впишем слово Главная.”
Сделал так. Но вместо главной намписаны просто символы. Какие-то проблемы с кодировкой, как это можно исправить?
Ответить
anton, а каким редактором пользуетесь? Если Блокнотом, то будут ошибки, потому что он по-умолчанию сохраняет в кодировке вашей машины, т.е. windows-1251. А для Вордпресс нужна UTF-8.
Ответить
Купил сайт, но управлять им совершенно не возможно.Решил сделять сам с нуля.Ваша статья очень хорошая (еще не все прочитал)но понял что это то, что мне нужно.У меня хостинг с вордпрессом.Вопрос а можно на вордпрессе сделать сайт платных объявлений о продаже? Спасибо с уважением Олег.
Ответить
Здравствуйте, Олег! Да, можно сделать такой сайт. Попробуйте задать в поиске Гугля такой запрос. Недавно проскакивала подробная статья на эту тему, но где конкретно - не помню.
Ответить
Все хорошо и работает, но картинка на которую нажимаю для перехода на главную страницу почему то обведена белой окантовкой как убрать?
<a href=”"><img src=”/images/header.jpg” />
Ответить
Rustam, приведенный кусок кода ни о чем не говорит. Ищите в файле css слово border и смотрите к чему оно применено.
Ответить
Игорь , доброй ночи! Давно не возникало вопросов, но вот появился. Согласно книге шаблон 960px, а побокам остается у нас 2 поля.
А как сделать шапку во весь экран, чтобы сверху, где расположенна шапка полей не было???? А была бы длинная картинка.
Спасибо!
Ответить
Игорь Квентор 01.06.2011
@дрон, для этого блок шапки нужно поместить в другой блок, которому задать ширину в 100%. Посмотрите код моего блога. Шапка как раз сделана таким образом.
Ответить
как код то вставить показать? :(
Ответить
Игорь Квентор 02.06.2011
@дрон,
<div id="top"><div id="header">
........
</div>
</div>
Для #top в css соответственно указать ширину в 100%. У блока #header - нужную вам ширину и margin: 0 auto;
Сохраните страницу моего блога с картинками и посмотрите. Там все есть.
ПС: для вставки кода в коммент нужно использовать тэги <code></code>
Ответить