УРОК 7 - Знакомство с разметкой шаблона WordPress

06.03.2014 16:57

Приветствую Вас, на моем сайте, и сегодня мы вместе с Вами продолжим изучение WordPress. В прошлом уроке мы ознакомились с прекрасным инструментом для веб-разработчиков, который находится в браузере Google Chrome. Напомню что с его помощью мы можем увидеть внутреннюю разметку и структуру HTML документа.

В этом уроке мы посмотрим как Инструменты разработчика помогут нам в изменении шаблона WordPress.

 

Для практики мы отредактируем тему Zeedisplay.

 

1)Скачиваем и устанавливаем шаблон wordpress.

Первоначально наш шаблон имеет вид:

«Как я могу изменить шаблон?»-спросите Вы.Да все что угодно.

 

 

Давайте вместе откроем инструменты разработчика и посмотрим как устроен шаблон изнутри.

Как мы видим есть общая область

c названием «wrapper»

 

И две области которые находятся внутри:

  • c названием «header»;
  • c названием «wrap»;

 

 
Более подробно давайте рассмотрим это на рисунке.

 

Более подробно рассмотрим структуру

c названием «header»;

 

Header у нас состоит из вложенного дива «head» в который в свою очередь вложено еще 2 дива:

  • LOGO
  • TOPNAVI

Более общая структура для наглядности представлена на данном рисунке:

В следующем уроке Вы узнаете более подробно о CSS, а также мы произведем изменения в шаблоне WordPress.

 

 

Назад