Для верстки советую использовать программу 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(); ?>
Этот урок подошел к концу. В следующем будем создавать главную и все остальные страницы, где осуществляется цикл вывода записей. На этом все, спасибо за внимание 🙂
