Урок 3. Создаем шапку header будущей темы WordPress и

Урок 3. Создаем шапку header будущей темы WordPress и

Главная Курс. Как создать новую тему Wordpress Урок №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: http://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(); ?>

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


Метки: WordPress верстка код сайт скрипт тема Урок шапка


Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

Проголосовало: 4, в среднем: 5 из 5


Предыдущая запись
Урок №2. Создаем первые файлы будущей темы

Следующая запись
Урок №4. Формируем структуру основной части будущей темы WordPress.

Похожие записи:

Нажмите, чтобы добавить код в комментарий

Урок 3. Создаем шапку header будущей темы WordPress и
Меняем параметры шапки сайта на WordPress через админку
Урок 3. Создаем шапку header будущей темы WordPress и
Изменить или убрать Header в WordPress Записки Фрилансера
Урок 3. Создаем шапку header будущей темы WordPress и
Как сделать шапку сайта - Блог Старого Перца
Урок 3. Создаем шапку header будущей темы WordPress и
Дизайн Заголовка « WordPress Codex
Урок 3. Создаем шапку header будущей темы WordPress и
100 простых идей: мебель из поддонов своими руками на фото
Урок 3. Создаем шапку header будущей темы WordPress и
Блок питания своими руками
Урок 3. Создаем шапку header будущей темы WordPress и
Урок 3. Создаем шапку header будущей темы WordPress и
Урок 3. Создаем шапку header будущей темы WordPress и
Урок 3. Создаем шапку header будущей темы WordPress и
Урок 3. Создаем шапку header будущей темы WordPress и
Урок 3. Создаем шапку header будущей темы WordPress и
Урок 3. Создаем шапку header будущей темы WordPress и
Урок 3. Создаем шапку header будущей темы WordPress и
Урок 3. Создаем шапку header будущей темы WordPress и