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