Приветствую Вас,на моем сайте, и сегодня мы вместе с Вами продолжим изучение WordPress.В прошлом уроке мы ознакомились с прекрасным инструментом для веб-разработчиков, который находится в браузере Google Chrome. Напомню что с его помощью мы можем увидеть внутреннюю разметку и структуру HTML документа.
В этом уроке мы посмотрим как Инструменты разработчика помогут нам в изменении шаблона WordPress.
Для практики мы отредактируем тему Zeedisplay.
1)Скачиваем и устанавливаем шаблон wordpress.
Первоначально наш шаблон имеет вид:
«Как я могу изменить шаблон?»-спросите Вы.Да все что угодно.
Давайте вместе откроем инструменты разработчика и посмотрим как устроен шаблон изнутри.
Как мы видим есть общая область <div> c названием «wrapper»
И две области которые находятся внутри:
- <div> c названием «header»;
- <div> c названием «wrap»;
Более подробно давайте рассмотрим это на рисунке.
Более подробно рассмотрим структуру <div> c названием «header»;
Header у нас состоит из вложенного дива «head» в который в свою очередь вложено еще 2 дива:
- LOGO
- TOPNAVI
Более общая структура для наглядности представлена на данном рисунке:
В следующем уроке Вы узнаете более подробно о CSS, а также мы произведем изменения в шаблоне WordPress.До скорых встреч.Увидимся в следующем уроке.