Сегодня мы продолжим создавать тему для веб-сайта своими руками на платформе WordPress. Задачей очередного урока будет формирование файлов index.php и таблицы style.css. Это два основных элемента, которые необходимы для получения хоть какого-то результата. В ходе статьи мы разберемся, как правильно придать шапке привлекательный внешний вид, а также для чего необходим файл index.php.
Полезно: шаблон WordPress своими руками. Урок 5. Работа с кодом
Общая информация
Тема WordPress содержит в себе сразу несколько файлов. Для исправной работы шаблона нужно как минимум наличие двух документов index.php и style.css. Однако, в идеальном случае внутри index.php должно быть дополнительно разделение на основной файл и набор подключаемых документов, среди которых заголовок, подвал и слайдбар. Такие файлы носят называние «включаемые», и мы поговорим о них позднее.
Можно выделить всего несколько основных PHP документов, без которых ничего не будет работать:
- index.php внутри которого содержится главная часть и код для включения других файлов;
- sidebar.php с боковой панелью и всеми виджетами;
- header.php, включающий в себя тег <head>, то есть шапку ресурса;
- footer.php с подвалом шаблона и закрытием тега <body>.
В сегодняшнем уроке мы подробнее рассмотрим первый из файлов – index.php. Все созданные и распределенные по документам элементы должны обладать стилями, которые и определяю их внешний вид и стиль всего сайта.
До того, как появились все остальные файлы, index.php будет формировать вывод каждой из страниц нашего ресурса, а style.css – содержать стили, а также общие данные о теме.
Полезно: настройка FTP-доступа на сайте WordPress
Файл index.php
Заполнение файла index.php предполагает подключение всех остальных документов, которые и содержат в себе элементы шаблона. В пустой файл необходимо добавить:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Между включением header и sidebar должно оставаться пространство. Именно в него будет записывать основная часть файла – его содержимое.
Полезно: шаблон WordPress своими руками. Урок 1. Основы
Наполнение таблицы стилей
Все элементы, которые будут задействованы на сайте должны иметь свои стили. Дать правильный вариант оформления сайта через стили достаточно сложно. В одном случае любые изменения могут испортить структуру, в другом же потребуется очень много времени для получения нужного результата. Предложенный нами вариант может показаться сложным для новичков, а профессионалы напротив раскритикуют его. В ходе урока мы создадим не сильно гибкий, но валидный и качественный файл стилей, хоть и не совсем оптимальный для работы.
Для примера, разберем стили для файла header.php. Структура, которую мы должны получить в конце, будет обладать следующими составляющими:
- изображение лого;
- основное название;
- меню навигации по страницам;
- краткое описание.
Для каждого из упомянутых элементов были заданы классы, теперь можно прописать правила для них. По классике сначала приведем полный фрагмент кода, который будет храниться в нашем файле:
/* Theme Name: MyFirstTheme
Theme URI: http://yrokiwp
Description: Описание темы
Version: 1.0
Author: Alex Spivak / / CSS Document */ * { margin:0;
/Обнуляем все отступы, в нужных местах добавим их
/ padding:0; } body { font-family: Arial, Helvetica, sans-serif;
/задаем основной шрифт текста/
display:block;
/Заставляем все элементы вести себя как блочные/
background: #f8f8f8; }
.header { width: 100%; min-width:1000px; height: 120px; padding-top:10px; margin-bottom: 5px; text-align: center; background: url(images/head-image.png) repeat-x; }
.header-present { height: 90px; }
.logo { margin-left: 20px; width: 430px; float: left; }
.site-title { font-family: Arial, Helvetica, sans-serif; float:right; text-align: justify; margin-right: 20px; } .site-title h1 { font-size: 40px; }
.site-title p { font-size: 20px; }
.menu { margin:5px 20px 0 20px; }
.menu li { list-style-type: none; font-size: 20px; display: inline; margin-left: 25px; }
.menu li a { color:#165F12; text-decoration:none; }
.menu li a:hover{ color:#fff; text-decoration:none; }
Давайте разберемся в том сложном коде, который вы видите выше. В начале файла привычно устанавливаются метаданные, такие как название темы, версия, описание, автор и другие подобные параметры. Но сейчас речь пойдет немного о другом.
В первую очередь рассмотрим фрагмент с классом «header». Его ширина составляет 100%, что дает нам возможность растянуть будущий заголовок на весь экран. Также минимальное значение для нее составляет 1000 px в ширину – эта цифра учитывает, что логотип составит размером 400 пикселей, а остальная информация займет около 500 px. Так мы получим, что шапка сайта будет растягиваться максимально в ширь, но не позволит блокам сместиться ниже.
Подобный дизайн не является адаптивным. Но мы будем придерживаться идеи, что для мобильных устройств следует создавать отдельны шаблон.
Высота блока составит 120 px, при это в нашем примере нет возможности сделать больше или меньше это значение для логотипа и фона шапки. Отступы с обеих сторон в 10 и 5 пикселей помогут придать элементам более практичный вид.
Полезно: шаблон WordPress своими руками. Урок 4. Информация до разработки
Переходим к фону шапки. В примере использована картинка размером 200 на 140 пикселей, для которой задано повторение в горизонтальной плоскости. Чем изображение будет меньше, тем быстрее ваш сайт будет загружаться.
Следующим шагом перемещаемся к логотипу, который задан в блоке header-present. Для него мы задали высоту 90 пикселей, остальная площадь останется для вертикального меню.
В классе «logo» устанавливаем ширину 430 пикселей, под выбранную нами картинку. Отступ слева ставим 20 пикселей, а затем выбираем обтекание в режиме справа, чтобы название не смещалось вниз. Сами изображение с логотипом мы включили в шаблон в файле html.
Теперь разберем блок с названием и описанием .site-title. Стиль шрифта и какое-либо выделение можно устанавливать по своему усмотрению, написать курсивом или жирным, например. Привяжем текст к правой стороне, но оставим расстояние в 20 пикселей. Выравнивание уже задано по ширине, а значит корректировать его не нужно.
Главный заголовок прописан в H1, его размер 40, а для текста описания 20 пикселей. Однако, этот параметр можно изменять под свой вкус.
Переходим к последнему этапу – меню навигации сайта. Класс menu добавляется системой автоматически, нужно только добавить в него несколько правил. Мы задали отступы, но делать это было не обязательно.
Полезно: как добавить функции WordPress в пользовательский файл
Меню выводится списком, в котором мы:
- избавились от маркеров;
- задали высоту букв;
- расположили элементы в линию;
- определили расстрояния между словами.
Генерируется и редактируется меню в административной панели сайта. Очередным шагом будет редактирование ссылок в меню. Для них мы задаем стандартный цвет, которым будет выделяться после наведения, а также удаляем нижнее подчеркивание.
Таким образом, мы прописали стили элементов, которые в следующем уроке будут добавлены в шапку сайта. Позднее, запустив наш шаблон в действие, мы сможем получить приятный на вид заголовок, который будет привычен для пользователей.
Заключение
В нашем уроке мы разобрались с созданием основных файлов сайта, которые необходимы для формирования его шаблона. В процессе были разобраны основные моменты генерации index.php и style.css, а также возможное их содержимое. Мы прописали стили оформления для будущих составляющих шапки сайта, таких как логотип, меню и описание. Благодаря этому наш будущий сайт приобретет более привычный вид и привлекательность.
