Life-crazy.ru | Опыт и знания
путешествуют сквозь время!

Обзор темы (шаблона) на WordPress, ее состав

Здравствуйте, уважаемые читатели блога life-crazy.ru!
Данный пост посвящен совсем новичкам, которые только-только начинают познавать блогосферу и хотят сами вникнуть в технические части, не поручая их другим людям. Сегодня я расскажу, из чего состоят шаблоны блогов, точнее, из каких файлов, и какой файл за что отвечает.

Состав темы wp

Чтобы в дальнейшем, у Вас не возникло вопросов, где искать тот или иной код, чтобы отредактировать определенный элемент на своем блоге.

В предыдущих уроках Вы ознакомились с понятием тема, и знаете, где их найти и как установить. Установить то установили, но в 98 случаях, бесплатная тема, скачанная с интернета, не совсем подходит для Ваших целей, поэтому ее приходится редактировать.

Но чтобы приступить к редактированию, нужно знать, что и где править. Я приведу пример своей темы, она называется Sensition,  скачал я ее в интернете и благополучно использую.

Располагается она по адресу: C:\WebServers\home\localhost\www\global\wp-content\themes\Sensition

У Вас адрес может отличаться, в зависимости от того, куда Вы устанавливали локальный сервер и как называли папку с блогом, моя папки имеет название «global». Как установить локальный сервер и как установить новый шаблон, вы можете найти у меня на блоге воспользовавшись поиском.

Состав темы WordPress

Тема состоит из таких файлов:

Состав темы

Если распределить эти все файлы визуально, то вот, что мы получим:

Картинка состав темы

Как видите, шаблон имеет пять основных блоков. Давайте разберем их немного подробней.

1.    Header.php – этот файл выводит шапку сайта и верхнее навигационное меню,  смотрите скриншот. Также, в этом файле записывается системная информация: кодировка сайта, заголовок страницы и т.д., о этих и других функциях мы поговорим чуть позже.

шапка

Шапка – это первый экран любого сайта и блога. В ней должен находиться логотип Вашего ресурса и краткое описание, чем занимается Ваш блог, чем может быть полезен или какую пользу он принесет читателю. Не стоит забывать, что шапка должна быть максимально привлекательной, так как это самая первая картинка, которую видит пользователь, после того, как попадет на сайт.  Я уверен, Вы не раз слышали такую фразу «встречают по одежке», так вот шапка – это одежка.

2.    Центральная часть, здесь находится король контент и формируется эта часть из нескольких файлов, таких как: single.php – отвечает за отдельный пост, index.php – главная страница блога, page.php – отвечает за страницы блога, archive.php – отвечает за посты, которые распределены по времени, то есть, когда в меню сайдбара Вы выбираете нужную рубрику, подключается archive.php.

Контент

И последний файл в центральной части – это search.php, он показывает результаты поиска.

3.    Comments.php – отвечает за вывод комментариев, сейчас мы его затрагивать не будем, разберем в последующих статьях.

Комментарии темы

4.    Sidebar.php – отвечает за боковую часть. Существует несколько вариантов сайдбаров. Это может быть как одна колонка, пример у меня на блоге, так и 2 колонки, располагаться они могут как справа, так и слева.

сайдбар на блоге

В боковой части, то есть в сайдбаре, могут содержать различные элементы, в основном это формы подписок, рубрики, поиск, социальные кнопки и т.д. Что должно быть в сайдбаре, мы с Вами еще будем обсуждать.

5.    И последняя составляющая шаблона – это footer.php. Она находится в самом низу, зачастую содержит копирайты и дубликат верхнего меню, различные счетчики.

Футер

Ну, вот и все. Если Вы четко научитесь определять, какой элемент находится в каком файле, то в дальнейшем Вам будет намного проще.

Если у Вас остались вопросы, задавайте их в комментариях.

С уважением, Михед Александр.

Вы можете почитать лучшие посты моего блога в содержании. Чтобы получать анонсы к себе на почту, воспользуйтесь формой подписки ниже (достаточно ввести свой e-mail адрес и имя. Если письмо не пришло в течении 2-х минут, проверьте папку "СПАМ" в почтовом ящике). Если Вам понравилась статья, поделитесь нею с друзьями! Социальные кнопки ниже.
Да, Я Хочу Всегда Быть
В Курсе Новых Событий На Сайте!
Подпишитесь прямо сейчас, и получайте свежую информацию на свой E-Mail:
Ваш E-Mail в безопасности*
Комментарии
  1. Александр Викторович  |  13.08.2013 в 14:16  |  Цитировать

    Интересно. Нужно. Полезно. Но непонятно как разобраться с этими файлами и папками, что сними и как делать, как их разложить по полочкам? Как выбрать шаблон, на что обращать внимание? Блог у меня есть, статьи размещаю, вот только не могу навести порядок. Если что подскажете, буду благодарен.

    Ответить
    • Михед Александр  |  13.08.2013 в 17:24  |  Цитировать

      Привет, Александр. Эти папочки и файлы уже разложены по полочкам. Шаблон выбирать нужно под свои нужды, есть шаблоны, которые предназначены для фотоблогов, для новостных порталов, так вот, такие шаблоны не подойдут для классического блога, допустим, как у меня. Я же выбирал шаблон по кол-ву колонок, расположению меню, ширине сайдбара, на папочки внимания не обращал, т.к. практически во всех шаблонах они одинаковые.

      Чтобы что-то подсказывать, нужно видеть сам блог :)

      Ответить
  2. Василий  |  13.08.2013 в 14:26  |  Цитировать

    Спасибо большое за подробное разьяснение! Я как раз занимаюсь изучением этой темы, вот пару уроков по верстке смотрю. Сейчас начну тему верстать. Спасибо вам еще раз!

    Ответить
    • Михед Александр  |  13.08.2013 в 17:25  |  Цитировать

      Приветствую, Василий. Пожалуйса.

      Ответить
  3. Сергей Гвоздев Дед  |  13.08.2013 в 14:48  |  Цитировать

    Меня мучает то, что я не вижу, например, в файле header.php слово «Поиск», который виден в заголовке и относится к неработающему поиску от WordPress.

    Когда я записываю в этот файл коды, например, google.analitics, то я их вижу в редакторе. И они работают. Но в файлах ...php я не мог редактором найти ни одного русского слова. В исходном коде всё видно. В редакторе — не всё.

    Ответить
    • Михед Александр  |  13.08.2013 в 17:30  |  Цитировать

      Приветствую, Сергей. Поиск нужно искать в отдельном файле — searchform. А в хэдере тоже нужно искать нечто подобное с searchform, нужно просматривать код, который находится возле меню.

      Разное название связано с подключением функций, допустим в одном php файле идет функция, которая подключает другой php файл, уже в этом php файле могут находится русские слова.

      А вообще, сложновато сказать, когда исходного кода не видно.

      Ответить
      • Сергей Гвоздев Дед  |  14.10.2013 в 10:11  |  Цитировать

        В исходном коде я вижу все слова и русское слово Поиск. Но пока ещё не удалось найти именно его ни в одном php-файле.

        Ответить
        • Михед Александр  |  15.10.2013 в 15:18  |  Цитировать

          <form method="get" id="searchform" action="http://nature-pict-and-sound.com/"> <label for="s" class="assistive-text">Поиск</label> <input type="text" class="field" name="s" id="s" placeholder="Поиск" /> <input type="submit" class="submit" name="submit" id="searchsubmit" value="Поиск" /> </form>

          Вот ваш код, который выводится в строке с менюшкой и отвечает за форму поиска, скорее всего находится он в файле header.php

          Ответить
  4. Николай  |  13.08.2013 в 15:58  |  Цитировать

    Ох, уж мне эти шаблоны. Сидишь порою и что то тебе не нравится в собственном блоге. Ковырнешь в одном месте, затем в другом, вроде лучше становится, перестаешь сохранять шаблон, как он был до корректирровки.

    А затем зайдешь в другую рубрику и страницу, а там какой то бок вылез или кракозябра вылазит. Начинаешь тут латать, в итоге потеряешь пару часов времени, злишся сам на себя — какого я туда полез.

    После этого начинаешь думать, как бы все вернуть обратно к первоначальному виду до корректировок. И когда все вернешь на круги своя, таким счастливым, ну просто летаешь.

    С другой стороны думаешь, ну какого я туда полез. 😀

    Бывало у вас такое, а?

    К чему я это пишу?

    Обязательно сохраните на компе для себя шаблон в том виде, котором он был изначально, копия должна быть всегда. =-O

    Ответить
    • Михед Александр  |  13.08.2013 в 17:33  |  Цитировать

      Очень хороший и полезный совет для новичков, про сохранение копий перед редактированием! У меня такое раньше было, а сейчас тему свою практически наизусть знаю :Ъ, да и с css и php дружу.

      Ответить
      • Николай  |  25.08.2013 в 20:16  |  Цитировать

        Я когда впервые блог создал по курсу Евгения Попова, то начал пробовать шаблон менять. Когда на локальном сервере установил тему, то все как то получалось менять. При установке уже на хостинг, первое время бил мандраж меня, жутко боялся в кодах ковыряться.

        Не вздумайте файлы править в обычном редакторе «Блокнот» :-! , только «Notepad++» или что то типа того, иначе лишних точек или пробелов он самопроизвольно наставит при сохранении и абракадабра вылазит. Может кому пригодится данный совет. :(

        Удачи!

        Ответить
        • Михед Александр  |  26.08.2013 в 17:56  |  Цитировать

          Николай, а сколько Вы уже крутитесь в блогосфере?

          Совет очень полезный, обычный блокнот меняет кодировку, от этого и вылазят кракозяблы. На данный момент, лучший редактор Notepad++. Я иногда пользуюсь ДримВивером, но все же предпочтение отдаю Notepad++

          Ответить
          • Светлана  |  08.10.2013 в 14:02  |  Цитировать

            А где этот Notepad++ взять?

          • Михед Александр  |  08.10.2013 в 18:42  |  Цитировать
          • Сергей  |  24.10.2013 в 04:43  |  Цитировать

            Я раньше AkelPad использовал, но сейчас тоже на Notepad++ перешел. Хорошая программа! =)

  5. Наталья Самолюк  |  14.08.2013 в 11:11  |  Цитировать

    Саша, стало лучше, на много. =) Уже стиль вырисовывается, аккуратность появилась. Молодец, что решил отказаться от этих рамок на рисунках.

    Кстати идет голосование по номинациям, ты уже проголосовал?

    Сегодня опубликую интервью с тобой =)

    Ответить
    • Наталья Самолюк  |  14.08.2013 в 11:14  |  Цитировать

      Забыла добавить. Фон, лампочка и ракета теперь в одном стиле и не диссонируют. Говорят о молодости, энергичности и современности =)

      Ответить
      • Михед Александр  |  15.08.2013 в 21:11  |  Цитировать

        Благодаря Вам))). Наталья, Вы выиграли 100 рублей, результаты в следующей статье, готовьте счет на карибах)).

        Ответить
        • Наталья Самолюк  |  17.08.2013 в 11:34  |  Цитировать

          Неожиданно, а за что? =)

          Ответить
          • Михед Александр  |  18.08.2013 в 18:57  |  Цитировать

            Наталья, ты оставила 1000-й комментарий на блоге. Мои поздравления :)

          • Наталья Самолюк  |  20.08.2013 в 10:07  |  Цитировать

            Спасибо =)

    • Михед Александр  |  15.08.2013 в 21:10  |  Цитировать

      Спасибо, Наталья. Конечно проголосовал)) еще вот комментарий готовлю))). Еще раз спасибо за интервью. И спасибо за Ваши советы. :)

      Ответить
      • Наталья Самолюк  |  17.08.2013 в 11:32  |  Цитировать

        Саша, я 15 числа отправляла тебе письмо на почту по поводу голосования за номинацию «Самый зубастый тролль», но к сожалению ответа не получила. Остался только твой голос. Ответь пожалуйста. Если что отправлю копию. =)

        Ответить
  6. Светлана  |  16.08.2013 в 05:00  |  Цитировать

    Очень интересно, но хотелось бы поподробнее как допустим изменить шапку, например другой рисунок. А так более подробно все описали, спасибо!

    Ответить
    • Михед Александр  |  17.08.2013 в 10:54  |  Цитировать

      К сожалению, Светлана, шаблоны у всех разные, поэтому расписать подробно не получится, а будет наоборот только путать. У кого-то картинки расположены в одной папке, у кого-то в другой, у кого код другой и т.д.

      Ответить
  7. Сергей  |  24.10.2013 в 04:42  |  Цитировать

    Да уж, выбор темы, особенно для новичка, еще та проблема! Наверное, больше всего времени на это уходит. А когда редактирование начинается... Но, не боги горшки обжигают! 😀

    Ответить
Добавить комментарий

up