Создание блога        14 января 2014        315         45

Структура шаблона wordpress!

Всем доброго времени суток!

В сегодняшней статье будет рассмотрена очень интересная и полезная тема для новичков, а именно структура шаблона wordpress. 99% новоиспеченных веб мастеров на начальном этапе своего пути выбирают для своих сайтов (блогов) бесплатные шаблоны (темы оформления).

структура темы wordpress

И это нормальное явление! Прежде чем приобрести, какую-то вещь за деньги, всегда хочется опробовать ее бесплатно! Но, подобрать полностью удовлетворяющий всем вашим потребностям шаблон, практически невозможно!

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

И вот здесь-то вам обязательно пригодятся знания в области редактирования шаблонов, вы должны будете понимать, из чего состоит шаблон wordpress. И так как участи редактирования шаблона вам не избежать, я подготовил для вас эту статью. Хорошо бы еще знать основы HTML и CSS, но об этом не в этом посте.

Изначально, тема сегодняшнего поста для вас может показаться сложной, но немного разобравшись, вы поймете, что все на так уж и плохо, как кажется на первый взгляд. Зная, как устроен любой шаблон, вам будет намного проще в нем ориентироваться и вносить необходимые изменения и дополнения.

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

И если установка шаблонов в большинстве случаев сложностей не вызывает, то с редактированием дела обстоят немного иначе. Правка темы оформления многих новичков вводит в ступор. Итак, чтобы избежать подобных ситуаций, давайте разбираться со структурой шаблона wordpress.

Структура шаблона wordpress. Как устроен и из чего состоит?

Шаблоны для wordpress включают в себя определенный набор файлов, каждый из которых отвечает за какие-то функции или элементы блога. Одни файлы используются на каждой странице ресурса, другие только в определенных случаях. Любую страницу блога можно собрать подобно конструктору, только в качестве деталей будут выступать отдельные файлы.

Приблизительную схему структуры шаблона wordpress можно изобразить так:

из чего состоит шаблон wordpress

Давайте разбираться, за что конкретно отвечает каждый из файлов:

1. header.php — данный файл отвечает за отображение верхней части блога, ее еще называют «шапкой» и используется на всех страницах. Т.е. независимо, какую страницу блога вы откроете, «шапка» будет отображаться на любой из них.

2. footer.php — файл, отвечающий за отображение нижней части блога, которую называют «подвал». Так же, как и в первом случае, «подвал» отображается на каждой странице ресурса.

3. sidebar.php — аналогично первым двум пунктам, отображается на любой странице и отвечает за вывод так называемого сайдбара. Сайдбар — это боковая колонка блога. В ней в основном размещают различные полезные виджеты, например блок с лучшими комментаторами, форму подписки, поиск по блогу и т.д.

В зависимости от структуры шаблона wordpress сайдбаров может быть несколько. Наиболее распространенные шаблоны имеют один или два сайдбара. Но, встречаются шаблоны и с тремя колонками (верхняя и две боковые). Их расположение зависит от разработчика шаблона, и выглядят они примерно так:

сайдбар шаблона

4. index.php — этот файл отвечает за вывод и отображение всего содержимого главной страницы блога.

5. page.php — отвечает за статичные страницы блога. Статичные, значит неизменные (постоянные). Вы должны знать, что в движке wordpress нужно разграничивать такие понятия, как записи и страницы. К записям относятся статьи вашего блога, а страницы зачастую отображаются в основном меню:

страницы меню

6. single.php — данный файл напротив предыдущего отвечает за вывод записей вашего блога, т.е. в его власти находятся все написанные вами статьи.

7. archive.php — отвечает за архив всех записей. Иногда вместо этого файла можно встретить category.php (отвечает за вывод определенных категорий) или tag.php (отвечает за вывод архивов записей по тегам).

8. search.php — этот файл выводит форму поиска на вашем ресурсе и соответственно отвечает за сам поиск.

9. 404.php — файл, отвечающий за вывод страницы ошибок. Как сделать страницу ошибок более интересной для посетителей, я писал в этой статье и даже устраивал мини конкурс на лучшую страницу.

10. comments.php — отвечает за комментарии.

11. functions.php — в этом файле размещены все функции, отвечающие за отображение сайта.

12. style.css — этот файл называют таблица каскадных стилей. Он отвечает за корректное отображение и стили всего содержимого вашего сайта (отображение картинок, цвет ссылок и т.д.).

Мы с вами рассмотрели наиболее распространенные файлы, из которых состоит структура шаблона. Их вы можете найти практически в любой теме оформления wordpress. И теперь, зная какой из файлов за что отвечает, вам будет намного легче изменить внешний вид и функциональность вашего сайта.

И напоследок дам несколько советов:

  • прежде чем что-то редактировать, обязательно делайте резервные копии редактируемых файлов, чтобы в случае неверных действий вы всегда смогли восстановить исходное состояние блога. О том, как делать резервное копирование сайта, я писал здесь.
  • для удобства редактирования шаблона используйте такие полезные инструменты, как Filezilla и редактор Notepad++. Очень помогают сократить время и улучшить качество работы.

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

На этом я буду заканчивать статью, надеюсь, она была для вас полезной и теперь вы знаете, из чего состоит структура шаблона wordpress! Желаю всем отличного настроения! Пока, увидимся в новых постах!

—>Подписаться на обновления блога<—

Как вам статья? Возможно я что-то упустил из виду? Рад буду услышать ваши комментарии!

С уважением, Николай Коротков

Обсуждение: 45 комментариев
  1. Николай, я иногда не понимаю, почему у вас не сидит по 1000 человек в сутки? Ваши статьи всегда такие крепкие, обстоятельные, полезные. Вспоминаю себя новичком: было сложно понять, где что редактировать. Давно хотела у себя на сайте изменить цвет ссылок, теперь вот поняла, где это делать. Знать бы еще точнее, какую строчку там менять :mrgreen:

    [Ответить]

    Николай Коротков

    Татьяна Саксон
    Будет и 1000 человек сидеть… И уже очень скоро 🙂 . А что касается изменения цвета ссылок, то могу вам помочь. Напишите мне на e-mail, что именно вы хотите изменить и скиньте файл своего блога style.css.

    [Ответить]

    Татьяна Саксон

    Спасибо, Николай, за отзывчивость! Уже написала вам.
    Желаю, чтобы это очень скоро было как можно скорее 😉 Вы этого достойны!

    [Ответить]

    Александр Иванович

    Николай!
    Я больше, чем уверен, что с таким интересным и полезным материалом будет и 1000 и более!

    [Ответить]

    Александр

    Было бы все так просто, 1000 человек набрать))))

    Я вон, 100 человек все никак не могу набрать, то 98, то 99…Будто издеваются)))))

    А так, согласен, этот блог достоен своей Тыщи человек…

    [Ответить]

    Татьяна Саксон

    Александр, как я вас понимаю! ❓

    [Ответить]

    Александр Иванович

    Александр!
    Не унывайте. У меня подобная картина — позавчера 99,вчера 127,а сегодня и 90 не наберу. Остаётся только ждать. Будет и на нашей улице праздник. ➡

    [Ответить]

    Ответить
  2. Спасибо за информацию, Николай! У меня к вам просьба. На моем сайте krasa-volos.ru по данным Linkpad (бывший Соломоно) найдено 29 ссылок на сайты, мне неизвестные. Не имею понятия откуда взялись эти кровопийцы и как их уничтожить. Помогите, пожалуйста, разобраться.

    [Ответить]

    Николай Коротков

    Пожалуйста, Николай!
    У меня на блоге есть статьи «Битые ссылки» и «Плагин ТАК». Почитайте их, возможно, вы найдете ответ на свой вопрос.

    [Ответить]

    Ответить
  3. Согласна Николай со всеми. И желаю Вам не 1000 а больше и больше. Статья больше чем полезная. Я вот методом научного тыка меняла коды. В простом блокноте гораздо сложнее чем в Notepad++ Было также и то, о чем ты предупреждаешь в статье. Нарушила код и блог пропал. Вот испугалась, и хорошо, что файл старый додумалась сохранить 😯

    [Ответить]

    Ответить
  4. Впервые встретила статью с таким подробным описанием структуры шаблона. Начинающим блогостроителям нужно в любом случае подробнее разбираться — что из себя представляет структура шаблона, узнать побольше о её составляющих. Спасибо!

    [Ответить]

    Ответить
  5. К стати, Николай, а мне не поможете цвет заголовков в css заменить, недавно заключил заголовки в H1, вместо H2 и заголовки уменьшились. Долго пыжился, кое что получилось сделать, а вот, когда раскрывается статья, заголовок чёрным отображается, хочу цвет поменять на синий, но не пойму как.

    [Ответить]

    Николай Коротков

    Евгений
    Откройте файл вашего шаблона style.css и найдите в нем строку №33. Это контейнер body, в котором присутствует вкладка color: #222222. Так вот, поменяйте все двойки на 0000FF, т.е. у вас должно получится так: color: #0000FF. Замените действующий файл style.css на измененный, перезагрузите страницу и увидите синий заголовок.

    [Ответить]

    Ответить
  6. С поиском файлов, в которых менять тот или иной элемент шаблона у меня всегда была проблема..
    После прочтения статьи немного упорядочилась информация.

    [Ответить]

    Ответить
  7. А и еще, Николай, забыл спросить.
    Из стандартного редактора ВордПресс можно хоть что редактировать в шаблоне или есть какие то ограничения? Вроде слышал, что, что то нельзя.

    [Ответить]

    Николай Коротков

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

    [Ответить]

    Александр

    Т.е., если я захочу изменить ширину сайт бара, то из редактора не получиться?

    [Ответить]

    Николай Коротков

    Александр
    Ширина сайдбара прописана в стилях, за которую отвечает файл style.css, поэтому все получится!

    [Ответить]

    Александр

    Извини, Николай, за … , так, что именно не возможно изменить из редактора? ❓

    [Ответить]

    Николай Коротков

    Александр
    🙂 Я уже написал в комментарии ранее, что изменить с помощью редактора wordpress нельзя дизайн, т.е. отдельные картинки шаблона (для этого потребуется графический редактор), а все файлы из которого состоит шаблон изменить можно.

    Ответить
  8. Здравствуйте, Николай. Подписалась на Ваш блог, спасибо за статью, это то, что нужно. Николай подскажите, пожалуйста как поменять заголовок h2 на h1, я зашла в шаблон страница и поставила там вместо 2 1, но заголовки так и отображаются в h2.Я , что то не так сделала?

    [Ответить]

    Николай Коротков

    Здравствуйте, Надежда!
    Я не совсем понял, куда вы зашли и что поменяли… Чтобы поменять заголовок H2 на H1 вам необходимо открыть для редактирования файл вашего шаблона single.php, найти в нем заголовки H2 и изменить их на H1. Далее пересохраните файл на сервере и все будет ОК! Но, не забывайте делать резервную копию файла (на всякий случай).

    [Ответить]

    Евгений

    В(sindle.php) найдите строчку и поменяйте h2 на h1 обновитесь и любуйтесь.

    [Ответить]

    Ответить
  9. Я заходила и меняла вот здесь Шаблон страницы
    (page.php), сделала теперь правильно, как Вы сказали, но теперь почему то показывает при проверки релевантности больше одного h1 и релевантность падает еще больше.

    [Ответить]

    Николай Коротков

    Надежда
    Посмотрел сейчас ваш сайт и отвечаю на ваш вопрос:
    С точки зрения поисковой оптимизации на странице блога должен присутствовать только один заголовок h1. На главной странице блога у вас все отображается корректно, в h1 заключено только название сайта!
    При переходе на другие страницы вашего ресурса, в h1, кроме названия ресурса, заключен еще и заголовок самого поста. Я так понял, это произошло после внесения изменений в файл single.php. Лучше вернуть все на место, т.е. оставить h2.
    Если же вы хотите повысить релевантность, связанную с заголовком h1, то вам необходимо сделать так, чтобы при переходе на страницы с записями вашего ресурса, h1 с названием сайта преобразовывался бы в заголовок h2, а title (заголовок самой записи), напротив, в h1. Но все эти действия не особо критичны! Поэтому можно оставить все как есть.
    А для того чтобы изменить заголовки нужно разбираться в кодах, в чем я не совсем силен. Поэтому для реализации всего этого, я прибегал к услугам фрилансера. Он мне подправил заголовки за символическую стоимость. Если хотите, то могу вам дать его контакты.

    [Ответить]

    Ответить
  10. Николай, спасибо Вам за разъяснение, пока поставлю всё по старому.

    [Ответить]

    Ответить
  11. Спасибо за информацию!!!

    [Ответить]

    Ответить
  12. Николай!
    Я увидел очень много полезного в статье, а ещё не меньше в задаваемых вопросах в комментариях.
    Спасибо

    [Ответить]

    Ответить
  13. На мой взгляд важно знать каждую мелочь на своем сайте! И в случае неполадок будет легче узнать в чем проблема

    [Ответить]

    Ответить
  14. Евгений!
    Ваш взгляд совпадает с моим.Правда мелочей на сайте не бывает. Нужно ко всему относиться серьёзно.

    [Ответить]

    Ответить
  15. василий:

    Николай благодарю за информацию !У меня есть свой блог, который создал сам.Однако такой подробной информации не знал(шапка,тело и подвал).Теперь понятно какая все таки полная структура.Ориентироваться по такой схеме легче в кодах.

    [Ответить]

    Ответить
  16. Николай,подскажите,что делать в header.php и single.php меняла коды- по видео(чтобы комментарии из Вконтакта появлялись), по видимому,что то сделала не то,в результате Блога нет- просто белый экран, но в админе все есть- все статьи и т.д..Копию кодов не делала- так как не знала об этом. Что теперь делать- можно как то восстановить эти коды? Пожалуйста помогите!!!!

    [Ответить]

    Николай Коротков

    Алла
    Если не были сделаны резервные копии файлов, у вас есть два варианта.
    1. Вспомнить, какие изменения и в каике файлы блога вносились и вернуть все обратно.
    2. Обратиться к своему хостеру с просьбой восстановить последнюю резервную копию сайта. Все нормальные хостинг компании обычно делают их.
    Главное, без паники! Выход всегда есть!

    [Ответить]

    Ответить
  17. Бесплатные шаблоны даже если он и премиум класса,это жесть, вечно что то не работает или приходится дорабатывать. Лучше приобрести платный и не парится. Они как правило оптимизированы и с идеальным кодом, с массой различных примочек и настроек, плюс отличная тех поддержка и гарантия качества. Я как раз делаю новый сайт на платной теме и честно говоря немного в шоке от ее функционала и возможностям.

    [Ответить]

    Ответить
  18. Костя!
    Из Вашего комментария я не понял, делать новый сайт на платной теме – это хорошо или плохо? Судя по тому, что платный шаблон привёл вас немного в шоковое состояние, т.е. в состояние подавленности и растерянности – это плохо. 😐

    ( Шок — это состояние между жизнью и смертью; общее тяжелое расстройство жизненно важных функций организма, вызванный нарушением нервной регуляции жизненно важных процессов, характеризуется расстройствами гемодинамики, дыхания, обмена веществ. В переносном значении словом «Шок» обозначают состояние подавленности, растерянности. При массивных ранениях, ожогах, тяжелых травмах и заболеваниях возникает много факторов, которые негативно влияют на жизнедеятельность всего организма.)

    [Ответить]

    костя

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

    [Ответить]

    Ответить
  19. А прежде чем вставлять цитаты с «вики». стоило бы внимательно читать комментарий,это как совет)))

    [Ответить]

    Ответить
  20. По началу, когда создал блог, тоже схватился за бесплатный шаблон. Убил уйму времени на дотёрки. Может и вправду, сразу голый, но платный взять. Что думаете?

    [Ответить]

    Николай Коротков

    Виталий, я вообще подумываю над тем, чтобы заказать авторский дизайн и верстку, но пока это мне не по карману… А вообще, можно приобрести и платный шаблон и со временем настроить его под себя.

    [Ответить]

    Ответить
  21. Николай, подскажите, пожалуйста!
    Создала недавно блог на бесплатной платформе, нигде не нахожу редактор. Хочу поставить знак копирайта и еще много чего другого. Возможно эта платформа не поддерживает редакцию шаблонов? Являюсь совершенно неопытным пользователем, а обратиться не к кому. Буду очень благодарна, если Вы мне ответите.

    [Ответить]

    Николай Коротков

    Лилия, что именно вы имеете в виду под словом «редактор»? Платформа вряд ли влияет на редактирование файлов шаблона. Чтобы отредактировать шаблон, вам необходимо знать его структуру и хоть немного разбираться в языках программирования HTML и CSS.

    [Ответить]

    Лилия

    «Редактор — позволяет использовать редактор кода тем для внесения изменений в отдельные CSS- и PHP-файлы вашей темы.» Я имею ввиду это, а данного слова в меню в разделе «внешний вид», где оно должно быть, не нахожу. Каким образом я могу что-либо отредактировать? 😐

    [Ответить]

    Николай Коротков

    Лилия, в таком случае вы можете открыть на редактирование файлы темы через панель управления вашего хостинга или воспользоваться ftp — клиентом. Про один из таких клиентов (filezilla) на моем блоге есть подробная статья.

    [Ответить]

    Ответить
  22. Alex:

    Здравствуйте, Николай! У меня довольно давно пропал фон на сайте history-tema.com У вас на блоге я ничего не нашел по данному поводу. Может, плохо искал. Проверил плагины, обновил вордпресс до последней версии, наверное, какая-то ошибка в теме. Что посоветуете?

    [Ответить]

    Николай Коротков

    Здравствуйте, Alex! У меня есть на блоге статья в рубрике полезное «Как сменить фон сайта». А фон у вас не выводится скорее всего из-за неправильно прописанного пути до картинки, отвечающей за фон. Я вам советую найти ее и внимательно проверить, указанный к ней путь.

    [Ответить]

    Ответить

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Поиск по блогу
Подписка на обновления

Введите Ваш e-mail:

rss

twitter

 google

Интересная информация
Хостинг от Макхост

ВОСПОЛЬЗУЙТЕСЬ ПРИ РЕГИСТРАЦИИ КУПОНОМ "blogiseo" И ПОЛУЧИТЕ 3 МЕС. БЕСПЛАТНОГО ИСПОЛЬЗОВАНИЯ ХОСТИНГА ПО ТАРИФУ МАК-10.