Шаг №7 Знакомство с разметкой шаблона WordPress

Приветствую Вас,на моем сайте, и сегодня мы вместе с Вами продолжим изучение 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.До скорых встреч.Увидимся в следующем уроке.

  • Владимир

    Здравствуйте, хорошо пишите) довольно интересный блог для новичка) только вот шаблон на 7 уроке битый.и загрузить его не получается.
    Заранее благодарен

    • http://wpcreate.ru Артем Петрусенко

      Проверил,вроде загружается.

  • http://uslugi-v-kieve.com.ua Орест

    Спасибо большое Владимир за отлично предоставленный материал. Благодаря вашему прекрасному подходу, даже новичку легко ковырять шаблон!

    Так держать! Благодарю!

  • http://uslugi-v-kieve.com.ua Орест

    Простите, Артем — это Вам большое спасибо! Я нечаянно перепутал 😳

    • http://wpcreate.ru Артем Петрусенко

      Ничего страшного, Орест 😉 !

  • lazy_fool

    LOL, так всё разжевал даже полный дурак наверно поймёт, правда непонятно зачем это?
    У меня вот например другой шаблон и там всё по-другому и структура «дива» другая и «хедер»…

  • http://idesign.kharkov.ua Yevgeniy Korobka

    С тех пор как я в поисках истины кликнул на левую клавишу мыши без без преувеличения миллионы раз я нашёл наконец-то то, что искал. А именно trading и code, который poetry.
    Ваши уроки очень грамотно систематизированы и не нагружают большим количеством информации.
    Спасибо.

  • Kagerou

    Здравствуйте, шаблон скачивается, но при установке выдает ошибку..» Архив не удалось установить. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature» . Быть может несовместимость темы и версии WP? 😕

    • Yo-c

      Доброго времени суток, у меня аналогичная проблема с шаблоном после скачивания не загружается в wp, дает ошибку ::
      Архив не удалось установить. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

      • Наталия

        У меня тоже при загрузке темы такую же ошибку выдавало. Я просто ее из инета скачала и загрузила.
        Артем, тебе великая благодарность за этот труд! ❗ Ведение сайта небыло моей целью неделю назад, но материал настолько хорошо дан и интересен, что я с удовольствием по нему занимаюсь!!! 🙂

  • http://pronowosti.ru/ Wils

    Спасибо все доходчиво и понятно.

  • http://ohtech.ru Хитрый Пёс

    Статьи слишком короткие, нечего растягивать какую то мелочь на 10 статей

  • 123
     
     
     
    phpinfo();
  • Амина

    Здравствуйте! А как можно открыть инструменты разработчика на маке? на сафари, имею ввиду?
    Буду благодарна, если ответите

  • http://crazytrips.ru Ирина

    Артем, благодарю за этот блог! Только начала изучать его, но то, что прочла написано очень доступно и понятно. Я хотела бы уточнить по поводу браузера. В чем принципиальное отличие Google Chrome к примеру от Mozila, ведь там также есть функция «Исследовать элемент»? Спасибо 🙂

  • http://e-shop.cavaleramax.ru/ Kelter

    Люди, помогите кто-нибудь решить трабл! Все делаю, как надо, вроде. Сделал файлы хедера, футера, индексный. Делаю вызовы get_header(), get_footer(), хуки, все как положено. Все сайты перерыл уже, не пойму в чем дело может быть. Загружаю тему — пусто, устанавливаю — белый экран и все. Есть у кого какие мысли? Пожалуйста! 😐

  • Илья Киреев

    шаблон не качается ERR_INVALID_RESPONSE

  • Илья Киреев

    дайте плиз тему. начал изучать а тут такой затык.