Как создать тему для WordPress самому: уроки с видео. Установка необходимых плагинов для важных функциональных возможностей. Использование WordPress Customizer
Это главная страница руководства по созданию тем (шаблонов) для WordPress. Основная информация взята из официального руководства и из личного опыта.
Что такое тема?
Тема WordPress - это набор css, js, php файлов, которые в связке с WordPress и плагинами выводят информацию из базы данных на экран в красивом и удобном виде (дизайне). Ну или в некрасивом и неудобном, тут смотря какую тему выбрать... В других движка тему еще называют "шаблоном", но в WordPress принято говорить именно тема - theme, а не шаблон - template. Хотя и то и другое по сути одно и тоже...
Таким образом, если вы меняете тему, то сайт меняет свой вид, выглядит иначе. На WordPress.org есть тысячи бесплатных тем . Несмотря на широкой выбор тем, многие предпочитают создавать свои темы. Связанно это в первую очередь с тем, что создать простую тему не сложно.
Необходимые файлы
Чтобы создать тему необходимы лишь два файла:
index.php - главный файл темы, отвечает за вывод содержимого
style.css - главный файл стилей, отвечает за css стили
Но ни одна тема по факту не состоит всего из двух файлов. Их больше: PHP, языковые файлы, файл CSS и JS, текстовые файлы. Тему начинают с двух файлов, а затем, чтобы было удобнее, её расширяют, добавляя такие файлы как:
header.php - отвечает за вывод шапки
footer.php - отвечает за вывод подвала
sidebar.php - отвечает за вывод боковой панели
page.php - отвечает за вывод отдельной страницы (записи)
и т.д. смотрите полный список .
Возможности темы
Возможности темы по сути безграничны, ведь там можно полностью использовать PHP. НО! Тема, как призвана отображать содержимое сайта определенным образом, а не добавлять функционала сайту. Поэтому возможности темы принято ограничивать до тех, которые отвечают за внешний вид, а все остальные возможности: голосование, рейтинги, редиректы, СЕО и т.п. принято выносить в плагины...
Таким образом, тема может:
Отвечать за вывод содержимого сайта под разные типы устройств: мониторы и смартфоны. Такие темы называются адаптивные. Также темы могут быть фиксированные, одноколоночные, двухколоночные и т.п.;
Тема может выводить любое содержимое;
Может указать, какой контент будет отображаться для разных пользователей;
Может использовать любые элементы дизайна (картинки, видео).
Как и на любом сайте, тема - это не только цветовое решение, макет и красивая картинка. По-настоящему качественные темы еще и очень функциональны. Функциональность темы, заключается в её гибкой настройке. Т.е. она не добавляет ничего нового на сайт, но отлично настраивается по вкусу владельца. Например: устанавливается фоновая картинка, меняется цвета элементов, настраивается меню и блоки с контентом (виджеты).
Чем тема отличается от плагина?
С точки зрения кода, можно сказать, ничем - в теме можно создать полноценный плагин. А вот с точки зрения логики - всем! Задача плагина, добавить что-то новое на сайт, например добавить опрос. Задача темы - вывод содержимого, в том числе, этого опроса...
Таким образом, тема отвечает за показ контента на странице, а плагин нужен для реализации функционала сайта.
Никогда не добавляйте функциональность в саму тему, если только на это нет веских причин. Если это сделать, то при смене темы функциональность потеряется в месте с ней. Например, в вашей теме есть крутая фотогалерея. И если поменять тему, то эта крутая фотогалерея потеряется...
Если вы пользуетесь скачанными темами, то наверное встречались с такой страницей, которая доступна в админке и с ее помощью можно настроить тему, не правя код самой темы.
Такие страницы часто создаются для того, чтобы облегчить жизнь пользователям той или иной темы. Благодаря странице настроек темы, пользователь может показывать скрывать определенные блоки, менять расположение сайдбара, цветовые схемы, добавлять свои стили, указывать путь к новым изображениям и тд. Все ограничивается лишь фантазией того, кто создавал такую страницу для темы.
Если Вы создаете тему на продажу или просто, хотите облегчить себе жизнь, то Вам может пригодится данный метод. В одном из уроков я писал, что можно выводить метрику(счетчики посетителей), рекламу и тд, через виджеты, создавая специальные места под них. С помощью страницы настроек темы, вы можете создать такие же поля, в которые можно вставлять любой текст, код или ссылки.
В общем у вас будут дополнительные опции темы, которые вы сделаете своими руками без плагина. Выглядит она примерно так:
Я напишу про несколько элементов такой страницы и объясню как ними пользоваться. Страницу я создал из кучи других. Я находил много разных, но в каждой был что-то, что меня не устраивало или не работало. В одной не было чекбоксов, флажков(checkbox), во второй не было сообщения о том, что настройки сохранены, куча лишнего текста и тд. Посидев немного и разобравшись, что по чем, у меня получилась своя страница, на которой можно без проблем добавлять и убирать элементы.
Давайте же приступим к тому, чтобы сделать нашу страницу настроек.
Для начала Вы должны определится как именно вы подключите код страницы. Есть два варианта.
Первый простой, все добавляем в самый конец вашего functions.php
после ?>
и все.
Второй способ - нужно создать файл settings.php
и в него добавить весь код, после подключить его в functions.php
следующим образом.
Include("/settings.php");
Когда создадите settings.php
, перед тем как добавлять в него код убедитесь, что он сохранен в правильной кодировке - UTF-8 без BOM
. Редактировать файлы, лучше всего в программе Notepadd++.
Теперь начинаем добавлять сам код. Сначала зарегистрируем нашу функцию.
Теперь добавим нашу страницу в админку в меню слева.
// Добавление Страницы настроек в меню
function add_settings_page() {
add_menu_page(__("Опции темы"), __("Опции темы"), "manage_options", "settings", "theme_settings_page");
}
//Добавление действий
add_action("admin_init", "theme_settings_init");
add_action("admin_menu", "add_settings_page");
Теперь, когда вы будете заходить в админ часть, то в меню администратора увидете вот такой вот пункт. Это и будет наша страница настроек.
Добавим действия и функцию сохранения опций нашей страницы
//Сохранение настроек
function theme_settings_page() {
global $select_options; if (! isset($_REQUEST["settings-updated"])) $_REQUEST["settings-updated"] = false;
?>
Теперь уже начнем добавлять код, который будет выводить элементы нашей страницы. Создаем div и внутрь него добавляем блоки.
Первым элементом будет название страницы, которое будет выводится в самом начале, потом блок, внутри которого будет появляться сообщение о том, что настройки сохранены.
Настройка темы
Настройки сохранены
Теперь весь код целиком
Настройка темы
Настройки сохранены
Страница настроек готова. Можете посмотреть на готовый результат. Далее нам нужно в теме в нужных местах вывести результаты, то что мы будем выбирать или вводить в опциях.
Для этого сначала нужно включить нашу функцию
Эту строку нужно прописывать каждый раз перед выводом опции
Сразу после запуска добавляем вывод самой опции. Он выглядит для текстовых полей и полей типа input практически одинаково, главное указать правильно имена, о которых я уже много написал выше.
Для лого например это так:
Готовый результат будет вот таким
Думаю с этим понятно. Если хотим вывести значение из страницы настроек, в нужном месте вставляем код, что выше, лишь правильно указав имена. Так выводим для метрики и баннера меняя лишь имена на tracking и banner
, ну или те, что Вы придумаете, главное чтобы они совпадали с теми что на странице настроек.
Можно еще провернуть еще один фокус. На примере опции - Текст в подвале, предлагаю добавить условие - если
. Суть такова - изначально текст в подвале прописан по умолчанию, но если пользователь на странице настроек что-то введет, то вместо текста по умолчанию появится то что задал пользователь.
Чтобы это сделать нам понадобится прописать такой вот код:
/" title="" rel="homepage">. Все права защищены.
Любое использование материалов допускается только с указанием активной ссылки на источник
Для того, чтобы вывести содержание если установлен флажок в чекбоксе, нужно прописать следующий код. Похоже как с текстом в подвале, но только первая половина кода
Содержание если флажок установлен.
Можно добавлять любое содержание. Хоть пол сайта скрыть, если нужно.
Теперь осталось вывести только содержание того, что пользователь выберет в списке. У нас это было размещение блока слева или справа
Тут как и с текстом в подвале будем использовать условие - если
. В моем списке - только два элемента, поэтому условие такое - если выбран пункт номер один(слева) показываем блок у которого в стилях свойство - float:left;
, иначе показываем блок у которого свойство - float:right;
.
Блок слева
Блок справа
В принципе все, основы я показал. Вы можете добавлять и удалять элементы, менять все под себя и создавать что-то. Урок не из легких и тут главное не запутаться, но хорошо разобравшись и изучив, Вы с легкостью сможете создавать такие страницы для всех тем.
На этом все, спасибо за внимание. 🙂
Только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы aligncenter, alignleft и alignright
служат для выравнивания изображений и блочных элементов, и их нужно включить в свою таблицу стилей (можно скопировать из таблицы стилей дефолтной темы):
Следующие классы используются для выравнивания изображений, которые имеют подписи (можно скопировать из дефолтной темы, в дальнейшем при необходимости поправить):
Кроме того, существует еще несколько классов WordPress, которые необязательно описывать в таблице стилей, но, т.к. WordPress генерирует страницы с их использованием, можно и им задать стиль:
.categories {...} .cat-item /* Этот класс присваивается всем категориям */} .current-cat {/* стиль текущей категории */} .current-cat-parent {/* стиль для предка(ов) текущей категории */} .children {/* класс для потомка */} .pagenav {/* постраничная навигация */} .page_item {/* любой элемент списка */} .current_page_item {/* этот класс присваивается в списке страниц к текущей активной странице */} .current_page_parent {/*класс для родительской страницы по отношению к текущей */} .current_page_ancestor {/* любая страница верхних уровней по отношению к данной */} .widget {/* все виджеты обворачиваются в этот класс */}
В процессе верстки используйте блоки и стили к ним, как это определено в скринах в начале статьи. Это не обязательно, но очень даже желательно.
К примеру в дальнейшем мы подключим поисковую форму на сайт через спец. тег wordpress , в результате чего wordpress выведет такую форму:
Поэтому учитываем это при верстки темы.
И последнее, что нужно добавить в style.css это информацию о себе любимом и о созданной теме. Информация размещается в начале файла в коментах:
/* Theme Name: Придумайте уникальное имя темы Theme URI: http://ссылка-на-домашнюю-страницу-темы Description: Описание темы Author: Автор темы Author URI: http://ссылка-на-страницу-автора Template: название-темы-предка Tags: теги темы - только из списка предлагаемого wordpress.org Version: версия Ну и здесь текст лицензии */
Также не забудьте сделать screenshot.png
и положить его в папку с шаблоном (в корень). Информация, размещенная таким образом в таблице стилей, будет отображаться в админке в разделе Управление «темами»
. Сверстанный шаблон тестируем в браузерах, если все норм, можно идти далее.
Код страниц сверстанного шаблона приводить не буду, т.к. он достаточно большой, вы его просто скачайте , далее будем работать с ним.
Принцип работы wp-темы
:
Если вы откроете папку темы по умолчанию (wp-content/themes/default), вы увидите множество файлов PHP (файлы темы) и одного файла style.css. Когда мы просматриваем блог, WP подключает файлы темы (index.php <
На этом предварительная подготовка закончена и мы можем перейти к созданию темы из имеющегося исходного материала.
Шаг 1:
Для начала в директории тем вордпресса (wp-content/themes) создайте папку с именем нашей темы. Пусть это будет ruseller_lessons
. Затем из папки темы по умолчанию (wp-content/themes/default) скопируйте файлы comments.php, search.php
и 404.php
в папку нашей темы. Эти файлы отвечают за комментарии и поиск на блоге. Затем в ruseller_lessons
скопируйте таблицу стилей style.css
нашего шаблона, screenshot.png (300x225)
и папку images
.
Теперь файлы нашего шаблона нужно "распилить", т.е. вытащить в отдельные файлы footer, sidebar и header. Схема показывает упрощенный вид файла index.php
с метками, согласно которым будем его пилить:
Шаг 2
- Header.php
Открываем index.html
и вырезаем все, что находится до коментария , создаем новый файл header.php
и вставляем в него вырезанный код, сохраняем в директории нашей темы ruseller_lessons
:
index.html
My Blog
Blog Description
Home
About
Portfolio
Links
Contact
Теперь идем в папку с дефолтной темой, открываем header.php
и копируем оттуда теги , ,
, and
и ими заменям соответствующие строки в нашем header.php
.
Затем все теги
, находящиеся id="nav"
(список страниц в верхней части блога) заменям на функцию вордпресса
В итоге получаем:
" type="text/css" media="screen" /> " />
/">
Шаг 3 - Sidebar.php
Возращаемся к файлу index.htm. Первым делом удаляем всю форму поиска, затем вырезаем из него все от
до sidebar.php
и сохраняем его в директории нашей темы. Теперь в полученном коде заменяем все, что между тегами
вызовом сайдбаров, получаем следующий код:
Таким образом мы вызываем 2 сайдбара. Если вы смотрели Sidebar.php
дефолтной темы, то заметили, что кода там гораздо больше. Дело в том, что там просто прописано дополнительное условие, которое по умолчанию выводит архив и категории, в случае, если админ не подключил ни одного виджета к сайдбару. Мы это условие прописывать не будем.
Чтобы наши сайдбары заработали, их необходимо зарегистрировать. Для этого в директории темы создаем файл functions.php
и в нем пишем:
Осталось подключить форму поиска. Сделать это можно либо из админки путем добаления виджета в один из сайдбаров, а можно вызвать ее в sidebar.php
, что мы и сделаем. В самом начале добавляем:
...............................................
Шаг 4 - Footer.php
Возращаемся к файлу index.html и вырезаем из него все от
По нашему шаблону здесь же мы должны вывести последние записи блога (Recent Posts) и последние коментарии (Recent Comments). Последние записи будем выводить в количестве 5 штук - showposts=5
. Заменям все внутри
:
" rel="bookmark" title=" ">
Вывод последних коментариев сделаем с помощью плагина simple_recent_comments.php , скачайте его и положите в папку нашей темы. Теперь в нужном месте его нам нужно вызвать (заменям содержимое блока
):
Recent Comments", ""); } ?>
Шаг 5 - Index.php
Все что осталось в index.html
сохраняем как index.php
в папку с нашей темой, затем подключаем вызов header
, sidebar и footer
:
Oct13
Sample Blog Entry
News3 comments
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more...
Previous EntriesNext Entries
Шаг 6 - Вывод записей блога на странице index.php
Следующий рисунок демонстрирует принцип вывода записей блога. Сначала идет проверка, есть ли сообщения в базе, если нет выводит "Not Found". Если есть, выводит в цикле while
.
Открываем наш index.php и заменям статичный текст между
..
функциями (тегами) wordpresspost date, title, category, comments, next и previous
. Ориентируясь на рисунок выше получаем:
">
Ничего не найдено
Теперь тема должна уже быть доступна из админки в списке тем, ее можно активировать и посмотреть, что вышло.
Мы использовали теги Wordpress:
the_time("M"), the_time("j") -
вывод месяца и дня соответственно the_permalink()
- отображает постоянную ссылку записи the_title_attribute()
- заголовок текущей записи. the_title()
- заголовок записи или страницы the_category(", ")
- ссылку на категорию или категории, к которым принадлежит запись comments_popup_link -
выведет ссылку для комментариев во всплывающем окне если comments_ popup_script() используется, иначе выводит обычную ссылку на комментарии. the_content
- выводит содержание текущей записи. Если используется тег то сообщение показывается только до (только на главной странице, на странице записи будет показываться полностью). next_posts_link
- ссылка на предыдущие сообщения. previous_posts_link -
ссылка на следующие сообщения.
Шаг 7- Single.php Этот файл мы создадим из только что законченного index.php
, немного изменив его:
"
Pages: ", "after" => "
", "next_or_number" => "number")); ?>
Ничего не найдено
wp_link_pages
- Выводит ссылки на странице в многостраничном сообщении (при использовании ). comments_template()
- Подключает файл шаблона comments.php
из текущей папки темы previous_post_link(" %link"), next_post_link("%link")
- выведет заголовки предыдущей и следующей записи
Шаг 8 - page.php
Этот шаг проще предыдущего. Файл single.php
сохраняем как page.php
. Удаляем из page.php
вывод даты, комменты, next/previous:
"
Pages: ", "after" => "
", "next_or_number" => "number")); ?>
Ничего не найдено
На этом можно и закончить. Основные файлы темы мы собрали. Вероятно вы заметили, что в дефолтной теме больше файлов. Например archive.php
, он не является обязательным. Однако если мы подключим виджет "Архивы" или "Календарь" в сайдбаре и перейдем в какой - нибудь архив по дате, записи по выбранной дате выведутся на индексной странице
, поэтому вполне можно обойтись без archive.php
:)
Финал
. Иногда нужно/полезно вывести на странице заголовки всех записей. Для этой цели воспользуемся тегом wordpress query_post
:
/* Template Name: Archives */ ?>
" title="">
|
query_posts("showposts=-1");
- выведет все записи. Сохраним это в файл archives.php
. Обратите внимание на комментарии в начале кода Template Name: Archives
, он здесь обязателен (далее вы поймете почему)
Идем в админку и создаем новую страницу. Указываем только заголовок и указываем в "Атрибутах" шаблон Archives
, сохраняем страницу. И теперь на этой странице у нас будут выводиться все записи по шаблону archives.php
, который мы описали чуть выше:
На сегодня это все. Спасибо за внимание.
P.S собранная тема тестировалась на WordPress 2.8.5. Конечный результат скачать можно . Аналогично попробуйте создать свою тему, уверен, у вас получиться!
Статья сборная, источники: http://www.webdesignerwall.com, http://themetation.com, http://codex.wordpress.org
Если вы хотите, чтобы ваш сайт wordpress стал перспективным, то для начала вам стоит задуматься о создании уникальной темы для него. Данный процесс является достаточно трудоемким, потому как напрямую связан с различными кодировками и скриптами. Разберем его с нуля.
Почти каждая тема на wordpress устанавливается в директорию wp-content/themes и состоит из 3 категорий файлов:
файлы таблицы стилей;
файлы дополнительного функционала;
файлы шаблона.
Файлами таблицы стилей являются style.css. Они отвечают за цвет, размеры, шрифт и другие параметры элементов сайта. У каждого сайта есть только 1 файл style.css. Если открыть данный файл, то в самом верху можно увидеть информацию о названии, авторе и кратком описании темы. При создании собственной темы можете вписать в style.css информацию о себе.
Следующей категорией являются файлы дополнительного функционала. К таким относится functions.php, принцип работы которого делает его похожим на плагин. Благодаря этому файлу вы можете осуществить визуальную настройку темы прямо в панели администратора. Обычно перечень настроек не очень широкий (название сайта, цвет навигации и боковых панелей сайта и так далее). Если же тема является многофункциональной, то перечень настроек будет значительно шире.
Теперь перейдем к файлам шаблона. Их основной функцией является генерация страниц, которые запрашиваются посетителями сайта. Файлы шаблона имеют расширение «.php». Наиболее простые темы могут содержать только один файл шаблона под названием index.php. В таком случае все страницы сайта будут идентичны. Такой дизайн чаще всего используется для создания интернет-ресурсов с базами данных, когда дизайн не играет ключевую роль.
Если вы никогда не занимались созданием дизайна, то для начала вам стоит попробовать создать простую тему. Для ее нормальной работы понадобится хотя бы 2 следующих файла: style.css и index.php.
Файлы дополнительного функционала в данном случае можно не использовать, как вы поняли. Среди файлов шаблона index.php является одним из наиболее гибких. Он может самостоятельно генерировать заголовки, различные блоки, нижнюю часть (футер), контент и другие элементы сайта.
Стоит отметить, что те параметры, которые не генерируются файлом index.php, будут генерироваться стандартными файлами. Например, если ваша тема состоит только из 2 вышеперечисленных файлов, но у пользователя возникает потребность в генерации формы добавления комментариев, то в таком случае эту функцию будет выполнять стандартный comments.php. Поэтому, если хотите, чтобы ваша тема была более уникальной, то стоит сделать дополнительные файлы шаблона. Рассмотрим основные.
Для добавления комментариев, как вы уже догадались, используется шаблон comments.php.
Если же вы хотите сделать всплывающее окно с комментариями, то для таких целей вам понадобится comments-popup.php.
Чтобы генерировать главную страницу, используется home.php.
Файл single.php отвечает за отображение статей сайта. Если у вас отсутствует такой файл, то его функцию будет выполнять index.php.
Файл page.php же осуществляет генерацию отдельных страниц сайта.
Для вывода информации об авторе вам понадобится author.php.
За категории отвечает category.php.
Отображение архивов, даты и поиска осуществляется файлами archive.php, date.php и search.php соответственно.
Чтобы ваш сайт выводил уникальную страницы ошибки номер 404, вам понадобится добавить свой 404.php.
Верхняя и нижняя часть сайта генерируется файлами header.php и footer.php соответственно.
Создание уникальной темы вручную с нуля
Для начала нужно установить подходящий шаблон. Его можно найти как на официальном сайте wordpress.org, так и на каком-либо другом. Рекомендуется использовать официальный сайт, потому как любой сторонний может содержать вредоносные файлы и битые ссылки.
После того как определитесь с выбором, можно начать скачивание архива. По окончанию процесса вам нужно будет его распаковать и загрузить файлы в определенные папки сайта (в архиве обычно содержится небольшая инструкция). Загрузку можно осуществить с помощью программы FileZilla или же прямо с хостинга, если он поддерживает такую опцию. Теперь вам останется лишь перейти в раздел «Темы», выбрать ту, которую загрузили, и кликнуть по кнопке «Активировать».
Также ее можно выбрать прямо в панели администратора wordpress. При этом вам не потребуется ее скачивать. Вам нужно будет лишь кликнуть по клавише «Установить», а затем «Активировать». Перед установкой предлагается осуществить предварительный просмотр.
Теперь, когда тема активирована, можно перейти к ее уникализации. Первым делом стоит задуматься о верхней части сайта (шапке). Это первое, что бросится в глаза вашим посетителям, поэтому стоит отнестись ответственно. Обычно шапка состоит из названия сайта, логотипа и краткой информации о контенте. Шапку можно создать в любом графическом редакторе. Даже в стандартном Paint. Более продвинутые дизайнеры используют Adobe Photoshop.
Название сайта должно быть небольшим и легким для запоминания. В Adobe Photoshop можно подобрать множество различных стилей для него. При создании логотипа вам могут потребоваться различные фигуры. Их можно скачать на официальном сайте Adobe Photoshop.
После того как сделаете рисунок шапки в графическом редакторе, вам нужно будет загрузить его к себе на сайт. По окончанию загрузки справа от рисунка появится URL-адрес, которую нужно будет скопировать. Затем вам понадобится перейти в раздел «Редактор» и выбрать файл, который отвечает за генерирование шапки (header.php). В нем нужно будет найти URL-адрес текущего рисунка и заменить его на тот, который вы получили при загрузке рисунка шапки. После этого вам нужно будет обновить файл. Теперь можно перейти к проверке отображения шапки.
Если ваша шапка имеет не такие параметры, как стандартная, то их можно подогнать в header.php. Ширина регулируется атрибутом width, а высота - height. Настройка может производится в пикселях и процентах. Так что, если хотите просто растянуть шапку, то выставляйте 100%.
При желании в шапку можно добавить активные ссылки на страницы сайта wordpress. Это можно сделать с помощью различных сервисов. Их в интернете достаточно много. Большинство из них работает по одному и тому же принципу. Вы обводите желаемую область шапки, которая будет отводится под ссылку, а сервис выдаст вам нужный код. Затем этот код вам нужно будет добавить в файл header.php. Будьте внимательны при его добавлении. Каждая точка имеет значение. Если добавите код не в то место, в шапке не появятся активные ссылки.
После замены стандартной шапки можно заняться заменой стандартного фона сайта wordpress, виджетов, навигации, нижней части (футера) и других компонентов сайта wordpress. Их тоже можно нарисовать в каком-либо графическом редакторе и загрузить на сайт в виде рисунка.
При вам стоит учесть, что он не должен быть ярким. Большинство вебмастеров предпочитает использовать именно белый фон. Он не режет глаз и не отвлекает от основного контента.
Чтобы создать качественную навигацию с нуля, вам понадобятся небольшие знания о таких тегах, как