Дизайн та розробка сайту

Урок №3. Создаем шапку – header будущей темы WordPress и добавляем первые стили

Шапка темы

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

 

Шапка темы

 

Для верстки советую использовать программу Notepad++. С ее помощью хорошо смотреть за правильностью написания кода и довольно удобно просматривать код. В этой программе еще много возможностей, которые Вам могут пригодится во время работы с разными языками программирования.
Очень важный момент! Все файлы перед версткой должны быть сохранены с кодировкой UTF-8(без ВОМ)

Самой первой строкой пропишем тег определяющий тип документа.

<!DOCTYPE html> 

Далее уже начинаем верстку. И как любая html верстка начинаем с тега html но к этому тегу стразу припишем определение языка основного контента. Это можно сделать двумя способами.

  • 1. Первый способ - это прописать функцию, которая автоматически определяет какой язык выбран администратором WordPress в общих настройках. Это будет выглядеть следующим образом:
    <html <?php language_attributes(); ?>>
    
  • 2. Второй способ - сразу в ручную прописать язык.Данным способом пользуюсь и я. первый способ использует функцию, а это лишнее обращение к базе данных. Поэтому если вы делаете сайт на русском языке, рекомендую просто прописать язык - русский. Аналогично для других языков
    Выглядеть это будет так:
    <html lang="ru-RU">
    

    Если это допустим англоязычный сайт, то lang будет en. Думаю с этим понятно.

После открываем тег head и далее прописываем title

<title>Название сайта</title>

Есть еще вариант динамического title. Он будет меняться в зависимости от того, на какой странице Вы находитесь. То есть он будет выводить название страницы, а после название сайта.

<title><?php
global $page, $paged;
wp_title( '|', true, 'right' );
bloginfo( 'name' );
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'striped' ), max( $paged, $page ) );
?>
</title>

После названия сайта начинаем вставлять МЕТА - теги. Их несколько и тут я покажу не все существующие - только основные.

  • Для начала определяем кодировку документа, в нашем случаи это UTF-8
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    

    Можно также подключить функцию, которая автоматически установит кодировку.

    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    
  • Задаем ключевые слова будущего сайта(можно не задавать, если указать ключевые слова в админ части в общих настройках)
    <meta name="keywords" content="слово, слово2, метка "/>
    
  • Задаем описание сайта (можно не задавать, если указать описание в админ части в общих настройках)
    <meta name="description" content="Наш сайт самый лучший сайт в мире и у нас есть то, чего ни у кого нет" />
    

Теперь Нужно подключить файл стилей, чтобы все работало правильно. Главное правильно укажите путь к файлу!

<link rel="stylesheet" type="text/css" media="all" href="/wp-content/themes/myfirsttheme/style.css" />

И на конец, перед закрывающим тегом head, нужно добавить функцию wp_head. Эта функция загружает стандартные скрипты, стили, мета-теги и другую важную информацию:

<?php wp_head(); ?>

Теперь можно закрыть head и открыть body. После, Вы можете приступить к верстке уже видимой части будущей темы.Сверстаем все с помощью простого div без тегов html5. Если же Вы на отлично владеете html5 и знаете все правила кроссбраузерной верстки и как задать костыли для IE, то думаю вы без проблем замените все что надо.
Ну что же, начнем. По макету мы определились с шириной всего контента и расположением блоков. Теперь Мы создадим основной блок-контейнер в который поместим все остальные элементы, в том числе и блок с шапкой.
Зададим контейнеру id, например main.

<div id="main">

Не спешите писать закрывающий тег, его мы будем ставить в файле footer.php. Открываем footer.php и просто вставляем в него закрывающие теги всех тех что мы открыли, а также обязательную функцию wp_footer(); и можно сразу закрыть.

</div>
<?php wp_footer(); ?>
</body>
</html>

Далее открываем Файл style.css и вносим в него первые строки и задаем стили для нашего контейнера.
Для начала внесите информацию о теме и о себе.

/* 
Theme Name: myfirsttheme
Theme URL: https://gnatkovsky.com.ua/
Author: Gnatkovsky Vitaliy
*/

Далее предлагаю сбросить стандартные стили браузера и прописать свои. Также в этих стилях задаем стили для всех элементов редактирования текста, которые доступны в админ панеле. Можете использовать их всегда для всех тем.

/* =Reset default browser CSS. */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{
border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;}
h1{font-size:32px;}
h2{font-size:24px;}
h3{font-size:19px;}
h4{font-size:16px;}
h5{font-size:13px;}
h6{font-size:11px;}
table{border-collapse:separate;border-spacing:0;}
caption, th, td{font-weight:normal;text-align:left;}
blockquote{min-height:30px;color:#777;padding:15px 15px 15px 35px;margin:15px 0;background:#f8f8f8;font-size:13px;} 
a img{border:0;}
ul, ol {list-style:none;}
cite, em, i{font-style: italic;}
p {
	margin-bottom: 1.625em;
}
ol ol {
	list-style: upper-alpha;
}
ol ol ol {
	list-style: lower-roman;
}
ol ol ol ol {
	list-style: lower-alpha;
}
ul ul, ol ol, ul ol, ol ul {
	margin-bottom: 0;
}
dl {
	margin: 0 1.625em;
}
dt {
	font-weight: bold;
}
dd {
	margin-bottom: 1.625em;
}
strong {
	font-weight: bold;
}
cite, em, i {
	font-style: italic;
}
blockquote cite {
	color: #666;
	font: 12px Helvetica, Arial, sans-serif;
	font-weight: 300;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
pre {
	background: #f4f4f4;
	font: 13px Courier, monospace;
	line-height: 1.5;
	margin-bottom: 1.625em;
	overflow: auto;
	padding: 0.75em 1.625em;
}
code, kbd, samp, var {
	font: 13px Courier, monospace;
}
abbr, acronym, dfn {
	border-bottom: 1px dotted #666;
	cursor: help;
}
address {
	display: block;
	margin: 0 0 1.625em;
}
ins {
	background: #fff9c0;
	text-decoration: none;
}
sup,
sub {
	font-size: 10px;
	height: 0;
	line-height: 1;
	position: relative;
	vertical-align: baseline;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}
small {
	font-size: smaller;
}

Следующим шагом будет добавление стилей для уже нашей темы.
Зададим стили html, body, ссылкам и главное нашему контейнеру main.

*{margin:0;padding:0;} 
html{height:100%}
body{position:relative;padding:0;min-width:1000px;margin:0;background:#fff;height:100%}
body, input, textarea{color:#222;font-weight:300;line-height:1.625;font-family: Arial, Helvetica, sans-serif;}
a{color:#008fed;text-decoration:none;}
a:focus,a:active,a:hover{color:#f30;text-decoration:underline;}
#main{width:1000px;margin:0 auto;position:relative;}

Пока что закончим работать с стилями и вернемся к шапке. В header.php, после нашего контейнера добавляем блок шапки и все содержимое. В нашем случаи это Лого, слоган, форма поиска и меню.
Присвоим блоку шапки id - header, блоку с лого - logo,блоку с поиском - search, а блоку с меню - menu. Блоку с слоганом присвоим класс - desc.

<div id="header">
<div id="logo"></div>
<div class="desc"><?php bloginfo( 'description' ); ?></div>
<div id="search"><?php get_search_form(); ?></div>
<div id="menu"><?php wp_nav_menu( array( 'theme_location' => 'top-menu' ) ); ?></div>
</div>

Для вывода лого, создаем изображение с логотипом из макета и в стилях присваиваем его блоку logo.
Как вы успели заметить, для вывода поиска, слогана и меню мы используем функции.
Для слогана используем функцию bloginfo. Она выведет описания Вашего сайта, которое вводится в админчасти. Если же описание слишком большое просто замените функцию на нужный текст.
Для того чтобы зарегистрировать функцию меню, нужно открыть наш файл пользовательских функций functions.php и добавить в него следующий код:

<?php
//Меню 
function register_my_menus()
{
register_nav_menus
(
array('top-menu' => 'Меню в шапке')
);
}
if (function_exists('register_nav_menus'))
{
	add_action( 'init', 'register_my_menus' );
}

?>

Теперь в админ части можно будет выбрать область для меню под названием top-menu и создать в нем новое меню.
Что касательно поиска, то тут есть два варианта. Если все оставить как есть, то выведется форма поиска, которая встроена в WordPress по умолчанию. Чтобы создать свою форму и с своими стилями, то нужно создать новый файл для темы. searchform.php и в него поместить следующий код формы поиска:

<?php ?>
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e('Что будем искать?'); ?>" />
<input type="submit" class="sim" name="submit"  value="<?php esc_attr_e('Поиск'); ?>" />
</form>

Чтобы все стало отображаться так как мы задумали в макете, мы должны прописать стили. Для этого нужно вернуться в файл style.css и дописать для каждого элемента свои стили.

/*Шапка*/
#header{
background:#008fed;
color:#fff;
position:relative;
height:100px;
width:970px;
padding:15px 15px 0;
}
/*Лого*/
#logo{width:157px;height:51px;background:url(images/logo.png)no-repeat;}
/*Слоган*/
.desc{margin-top:5px;font-size:12px;}
/*Поиск*/
#searchform{position:absolute;right:15px;top:15px;}
#searchform #s{border:none;color:#777;background:#f4f4f4;padding:3px 5px;margin-right:-4px;}
#searchform .sim{background:#333;border:none;color:#fff;padding:2px 5px;}
#searchform .sim:hover,#searchform .sim:focus{background:#777;cursor:pointer;}
/*Меню*/
#menu{max-width:800px;position:absolute;right:0;bottom:15px;}
#menu ul li{float:left;position:relative;text-align:center;}
#menu li a{color:#fff;padding:0 15px;font-size:13px;}
#menu a:hover,#menu a:focus,#menu a:active,
#menu  .current-menu-item > a,
#menu  .current-menu-ancestor > a,
#menu  .current_page_item > a,
#menu  .current_page_ancestor > a{color:#333;text-decoration:underline}
#menu ul ul{display:none;background:#f4f4f4;}
#menu ul ul a{line-height:35px;text-align:left;font-size:13px;color:#333;}
#menu ul ul a:hover{color:#f30;text-decoration:underline}
#menu li:hover ul{display:block;position:absolute;z-index:2}

Я догадываюсь, что вы уже пробовали испытать тему, но увидели пустую страницу. Для того чтобы увидеть проделанный результат, нам осталось сделать еще одну вещь. Построить главную страницу. Для этого нужно открыть index.php и добавить в него функции подключения шапки и подвала. В следующем уроке мы заполним его остальным кодом, но пока что только две функции.
Вставляем следующий код:

<?php get_header(); ?>
// сюда будем вставлять содержимое главной
<?php get_footer(); ?>

Этот урок подошел к концу. В следующем будем создавать главную и все остальные страницы, где осуществляется цикл вывода записей. На этом все, спасибо за внимание 🙂

Дизайн та розробка сайту

Back to top