Структура шаблона WordPress, его настройка и редактирование
20 Авг, 2011 
Комментариев 95
Этой статьей я продолжаю серию уроков о создании сайтов на движке WordPress. После установки новой темы на блог, нам надо будет настроить ее под свои нужды. Это сделать совсем не сложно. А вот для редактирования шаблона WordPress , нужно, как минимум, знать, как он устроен и какие его файлы за что отвечают. Изучив структуру шаблона WordPress и имея базовые знания HTML и CSS, Вы уже сможете редактировать шаблон темы, изменяя ее внешний вид и функциональность. Но обо всем по порядку.
Сразу после установки новой темы, вряд ли Ваш блог будет иметь привлекательный вид. Чтобы это исправить, надо настроить тему WordPress, добавив и упорядочив на страницах блога все необходимые элементы. Итак, приступим к настройке шаблона темы WordPress.
Настройка темы (шаблона) WordPress.
Войдем в Панель инструментов (админку) WordPress и продолжим ее изучение, подробно разобрав все пункты раздела “Дизайн“, который отвечает за внешний вид и редактирование шаблона WordPress:
Вкладка “Темы” отвечает за установку и управление темами (активация, предпросмотр, удаление). Ее мы подробно разобрали в уроке “Как установить тему (шаблон) WordPress“.
Следующая вкладка “Виджеты“. При переходе на нее перед нами откроется такая картина:
В левой части мы видим все “Доступные виджеты“: RSS, Архивы, Календарь, Найти, Облако меток, Последние записи, Рубрики, Текст и т. д. Справа схематически обозначен сайдбар блога. В зависимости от строения структуры шаблона WordPress, сайдбар может быть один или несколько. На блоге он выглядит как боковая колонка, расположенная справа или слева, а, возможно, и с обеих сторон одновременно.
Для того чтобы заполнить сайдбар необходимыми нам виджетами, надо просто выделить требуемый виджет левой кнопкой мыши и, удерживая ее, перетащить виджет на нужный нам сайдбар. Таким же образом можно перемещать виджеты вверх или вниз в самом сайдбаре.
Что обозначает каждый из виджетов, достаточно понятно из их названий. Особого внимания заслуживает виджет “Текст“. Переместив его в сайдбар, откроются поля для ввода данных и заголовка. Сюда Вы можете вставить как обычный текст с картинками, так и различные HTML-коды. Например, счетчики статистики, рекламные блоки и банеры, формы подписки и др. После заполнения или редактирования виджета “Текст“, нажмите кнопку “Сохранить“, чтобы изменения вступили в силу. Не нужные виджеты можно удалить, нажав кнопку “Удалить” или перетащив их обратно в раздел “Доступные виджеты“. Если надо временно отключить виджет, сохранив при этом все его настройки для дальнейшего использования, перетащите этот виджет влево вниз в раздел “Неактивные виджеты“. В любой момент Вы сможете вернуть его обратно.
Далее идет вкладка “Меню“. Открыв ее, мы попадаем на страницу создания собственного меню блога с подробным описанием, как это сделать. В меню можно включить рубрики, страницы и произвольные ссылки расположив их в требуемом порядке простым перетаскиванием. Нажав кнопку “Сохранить меню“, меню блога будет создано.
Чтобы созданное меню появилось в сайдбаре, надо перейти на вкладку “Виджеты” и перетащить виджет “Собственное меню” в сайдбар. Соответственно, если у Вас на блоге были активированы виджеты “Рубрики” и “Страницы“, то их можно будет деактивировать. Надо сказать, что мало кто использует меню на блоге.
Последняя вкладка “Редактор” позволяет редактировать файлы шаблона WordPress. Открыв ее, справа Вы увидите список всех файлов шаблона WordPress, то есть его структуру. При нажатии на любом из этих файлов, его содержимое откроется в окне для редактирования. После внесения необходимых изменений не забудьте подтвердить их, нажав кнопку “Обновить файл“.
Итак, мы изучили раздел “Дизайн” в админке нашего блога и разобрались с настройками темы (шаблона) WordPress.
Стоит отметить, что почти каждая современная тема имеет свои собственные настройки. Обычно они вынесены в админ.панель отдельным разделом с названием темы.
Иногда индивидуальные настройки шаблона темы WordPress находятся в виде отдельных пунктов в разделе “Дизайн“.
Как настроить ту или иную тему должно быть подробно описано на сайте разработчика или локализатора шаблона, с которого Вы ее скачали. Индивидуальные настройки темы WordPress позволяют с легкостью, не вмешиваясь в исходный код шаблона, изменять элементы дизайна сайта (логотип, фон, шрифты, расположение сайдбаров и др.), вставлять банеры, кнопки социальных сетей и RSS, счетчики статистики, рекламные блоки и многое другое. Советую внимательно изучить эти настройки, особенно если Вы плохо знакомы с HTML и CSS.
Внимание! Важно знать, что если Вы делали изменения в индивидуальных настройках шаблона, то при установке новой темы, эти настройки надо вернуть в исходное состояние. Обычно для этих целей существуют кнопки “Сбросить” или “Восстановить по умолчанию“, в зависимости от выбранной Вами темы WordPress.
А теперь давайте посмотрим, из каких файлов состоит шаблон темы, изучим его структуру.
Структура шаблона WordPress.
Каждый из файлов шаблона WordPress отвечает за оформление отдельных блоков на веб-странице сайта. Потом, подобно конструктору, из этих блоков собираются в единое целое страницы блога. Так как темы (шаблоны) WordPress создают разные разработчики, то и структура этих шаблонов может быть различной. Некоторые файлы шаблона темы в обязательном порядке присутствуют на каждой веб-странице, другие выводятся только в определенных случаях.
На рисунке ниже Вы можете видеть примерную структуру шаблона WordPress.
Вот список файлов, которые обычно присутствуют во всех шаблонах и их краткое описание:
- header.php (шапка) – присутствует на всех веб-страницах и отвечает за вывод верхней части сайта.
- index.php – отвечает за вывод содержимого главной страницы.
- single.php – выводит каждую конкретную статью.
- page.php – содержимое статичной страницы сайта.
- category.php – файл вывода записей определенной категории.
- tag.php – выводит архив записей по тегам.
- archive.php – временной архив статей (за месяц или за год). Иногда этот файл заменяет собой category.php и tag.php.
- search.php – вывод записей результатов поиска по сайту.
- comments.php – файл шаблона комментариев.
- sidebar.php – боковая колонка сайта, в которой располагаются виджеты. Сайдбаров, в зависимости от структуры шаблона WordPress, может быть несколько. Этот файл присутствует на всех страницах сайта.
- 404.php – файл ошибки 404, которая появляется, если вводится неправильный адрес веб-страницы или ее не существует.
- functions.php – в этом файле обычно прописаны функции, которые вызываются при отображении сайта или при работе с админ.панелью.
- footer.php (подвал) – нижняя часть сайта, присутствует на всех его страницах. Этот файл шаблона WordPress мы уже рассматривали, когда удаляли в нем нежелательные внешние ссылки.
- style.css – файл таблицы стилей, отвечающий за внешнее оформление сайта.
Теперь, зная структуру шаблона WordPress и за что отвечает каждый из его файлов, можно изменять внешний вид и функциональность определенной части сайта.
Важно понимать, что, не имея хотя бы начальных знаний HTML и CSS, лучше не пытаться редактировать файлы темы (шаблона) WordPress. А в случае, если Вам все-таки необходимо отредактировать какой-нибудь файл шаблона, обязательно предварительно сделайте его резервную копию. Тогда, если что-то пойдет не так, Вы всегда сможете восстановить исходный файл.
От себя замечу, что редактировать шаблон WordPress удобнее не из админки блога, а открыв файл в программе Notepad++, используя для этого соединение с сервером хостинга через FTP-клиент. О том, как это сделать, можно почитать в статье “Как пользоваться программой FileZilla“.
А на сегодня все. Теперь созданный Вами сайт будет выглядеть гораздо привлекательнее. До встречи на страницах блога blogibiznes.ru.
Оставляйте свои комментарии и не забывайте нажимать на кнопки соц.сетей внизу статьи, тем самым Вы поможете развитию этого блога. Заранее спасибо!
Понравилась статья? Нажимай на кнопки:
Настоящий учебник для новичков в блогостроительстве! Всё замечательно подробно!
На моём хостинге я работаю через cPanel, без использования FTP клиента. Можно редактировать файлы и оттуда, а если из Редактора в админ. панели, то приходится менять расширения файла для доступа к редактированию.
Отличная статья. Можно шаг за шагом настроить свой шаблон. Эта информация просто клад для новичков. Только не написано как создавать резервную копию?
Про резервную копию, это уже вопрос из раздела по безопасности блога. Когда нибудь дойдем и до этого.
С большим интересом прочитала статью. Сайт у Вас очень интересный. Спасибо.
Доступно излагаете. Все понятно.
Спасибо большое за статью.
Все очень хорошо пошагово расписано.
Очень хорошо все рассказали, жалко что поздно. Я помню столько повозилась со своей темой пока разобралась.
Все правильно написано. Даже спорить не охота…
Как всегда все просто и понятно.
Очень нужный урок. Спасибо вроде все понятно.
Прочитал с интересом. Все очень доступно. На своем блоге очень многое мне пришлось изучать можно сказать методом тыка. Ваша информация добавила ясности. Спасибо.
Полезная статья, отправил в закладки.
Все очень доступно. На своем блоге очень многое мне пришлось изучать можно сказать методом тыка.
Для новичка супер просто и доступно автору спасибо!
Всё подробно и доступно изложено, жаль, что когда я создавала свой блог, мне не попалась такая полезная информация, было бы проще.
Что-то и знала. А что-то новое узнала. Спасибо. И повторила и даже новое открыла.
Шаблоны в целом похожи, но есть отличия, вот у меня подвала нет, а он бы не помешал))
Почему нет подвала, а Copyright где написан?
А шаблончик симпатичный, мне понравился.
У меня постоянные проблемы с этим WordPress. Добавляю в виджеты что-то и никак не могу увидеть у себя на странице. Потом через некоторое время может появиться, а может и нет.
Тему менять не пробовали, может глючная попалась?
У меня вопрос. На своем сайте я хочу сделать библиотеку. Это важно для тематики моего сайта. Открывать специальную рубрику я не хочу. Хочу сделать страницу Бесплатно (в ней будут библиотека и другие материалы), затем дочернюю страницу Литература, потом дочерняя Литературы страница Шахматы и при нажатии на нее хочу, чтобы открывалась страница с текстом (условными разделами литературы) типа Дебют, Мительшпиль, Эндшпиль, Самоучители и т.д. Это будут ссылки на страницы где книги этих разделов будут размещены. Сложность в том, как страницы с книгами не выводить в меню? Спасибо.
Чтобы исключить страницу из меню, существует плагин Exclude Pages from Navigation. Может быть это решит Вашу проблему.
Подскажите – у меня небольшая проблемка. На главной странице у статьи есть картинки. А когда выбираю рубрику, то статьи идут без картинок. Как можно решить этот вопрос?
Это нормально и зависит от самой темы. Во многих темах так. Посмотрите какого года выпуска тема. У меня на другом блоге тоже так, но тема старенькая. Там и аватары не отображаются и нет древовидных комментов.
Я смотрю у тебя шаблон Гудвина. Задай этот вопрос Алексею, думаю он ответит. Но скорее всего так была задумана тема.
Кстати, та тема у меня тоже от Гудвина.
Отличный сайт, масса полезной информации. Буду изучать. То что нужно для такого непроходимого “чайника”, как я.
Для меня проще через панель Вордпресса редактировать шаблон, по-сути никаких заморочек. А FileZilla для редактирования файлов сайта на Друпал пользуюсь.
Каждый выбирает тот способ, который ему удобнее. И хорошо когда есть выбор.
Актуальная статья! Очень многие теряются, когда дело доходит до дизайна блога. Пожалуй, это одна из самых трудных, и, к тому же важных тем. Каждому хочется, чтобы его блог выглядел красиво и профессионально. Статья прекрасно показывает нюансы этой сложной темы. Спасибо!
А как настроить выпадающее горизонтальное меню, как на Вашем блоге, например? Или это от темы зависит?
Это зависит от темы, но чтобы были выпадающие рубрики, надо сделать их подрубриками к основным рубрикам в админке блога в разделе “Рубрики”. Или при публикации статьи создать подрубрику, сделав какую-то основную рубрику родительской. Иначе выпадать будет нечему.
Вот у меня точно футера нет.
Олег, помогите, пожалуйста! Можно Вам на почту написать?
Напишите конечно. Но футер у Вас есть, вот просто он не выделяется на сайте. В нем у Вас, кстати, открытая ссылка на bagthemes.com.
Как можно удалить встроенный банер из темы.
Заранее спасибо.
Надо знать, что за тема. У меня, например, баннеры вставляются через специальные поля в настройках темы.
В других случаях надо открыть на редактирование тот файл, где стоит баннер. Например, sidebar.php (обычно там ставят баннеры) или index.php, найти там код баннера и удалить. Предварительно делайте копии всех редактируемых файлов, чтобы можно было вернуть все на место.
Спасибо!!! Все-таки я его добил. Только непонятно с файлом, его на хосте не было. Редактировал из админа. У меня в теме много всяких сайдбаров, похоже все динамические.
Эти файлы обычно вшиты в саму тему, для примера.
Да хорошая статья, всё понятно доступно, хотелось бы конечно продолжение… То есть как, детально работать с php, как к примеру, вставить код и кнопки соц. сетей не путем виджета, а именно в то место где я хочу, к примеру в header.php. А в общем статья написано доходчиво и понятно.
Здравствуйте!
У меня две открытые ссылки от разработчиков бесплатной темы в правом сайтбаре. При Ctrl+U я их вижу. Но больше нигде найти не могу. Их можно как-то убрать? Спасибо.
Все можно убрать, даже вместе с темой. Написал Вам на почту.
Олег, здравствуйте! Сейчас прохожу обучение в школе StartUp. Подскажите, пожалуйста, как можно изменить заголовок в комментариях, как в Вашей теме? Ответов “количество” на “Заголовок статьи”. Спасибо.
Эта функция заложена в шаблоне темы и выводит заголовок поста. А зачем его менять или его вообще нет? Но если очень надо, то надо смотреть в файлах темы, ответственных за вывод этой функции. Я в таких тонкостях не очень разбираюсь. В каждой теме свои настройки.
Здравствуйте, подскажите, как управлять рубриками в шапке сайта?Установила новый шаблон и рубрик очень много наверху появилось. В настройках темы ничего не нашла. Помогите, третий день мучаюсь))
Просто у Вас столько рубрик. Лучше сильно много их не плодить. Можно попробовать плагин Advanced Category Excluder.
Олег, здравствуйте, в моей теме изначально была установлена рубрика новости.
Она мне не нужна, так как новости она не показывает, только посетителей путает.
Я хочу ее убрать и у меня ничего не получается. Если Вам знакома эта ситуация, подскажите, пожалуйста, как быть?
Елена, обычно в WordPress эта рубрика идет по умолчанию и ее невозможно удалить. Надо было просто при добавлении новых рубрик использовать и эту, просто переименовав ее в нужную. Можно это сделать на будущее, если будете создавать новую рубрику, ведь их у Вас не так много.
Олег, спасибо, все исправила. Как это я сама не додумалась переименовать ее, даже неловко как-то.
Подскажите пожалуйста, у меня сайдбар находится справа (в нем 2 колонки) либо это два сайдбара, после увеличения ширины страницы они стали друг под другом. Всё выстроилось в одну колонку – помогите пожалуйста, уже 3 дня ничего сделать не могу!
Скорее это два сайдбара. Хотелось бы ссылку на сайт. Вы увеличили ширину записи или всей страницы и каким образом?
Подскажите, в шаблоне многое изменила, сейчас хочу попробовать новый шаблон. Если не понравится, старый вернется исходным или с моими изменениями?
Если просто деактивировать старый, не удаляя его, то должно остаться все как было. Много раз менял шаблоны все было нормально.
Олег, здравствуйте, вчера обновила версию до 3.4.1, а сегодня обнаружила, что пропал визульный редактор, есть только HTML. Зашла в админку с чужого комп., все в порядке, а на моем нет визуального редактора. Почистила кэш, теперь не знаю, что делать. Помогите советом, пожалуйста, кто может.
Я поэтому не спешу с обновлениями. Всегда потом что-то дорабатывают. Хотя в Вашем случае вряд ли причина в Вордпресс, если с другого компа все нормально. Попробуйте с другого браузера зайти.
В любом браузере одинаковая картина. Не знаю, что делать:-( …
Елена, я вообще на Ваш блог не могу войти. Выдает ошибку в файле wp-includes/template.php на 23 линии.
Попробуйте сделать откат на хостинге на старую версию.
Я как раз пыталась это сделать и вот результат.
Олег, как делать откат?
Просто заменить ВСЕ файлы на ВСЕ из прежней версии? Или только те, в которых были обновления?
Нет, файлы менять не надо. Лучше всего обратиться на хостинг и попросить, чтобы сделали откат. Так будет надежнее.
Спасибо, Олег.
Сама все поменяла, редактор вернулся.
А теперь думаю, что новой версии WP не понравилось в моем комп. У меня старая версия Windows – xp, может в этом причина???
У меня тоже XP. Правда я еще не обновлялся. Не думаю, что в этом проблема. Возможно конфликт с темой или каким-то плагином.
Олег, не думаю, ведь на другом компе, более мощном, абсолютно все нормально.
Тогда это загадка. А на другом компе сайт нормально обновился и редактор был?
Да, я специально поехала в город, чтобы на компе дочери обновить WP, так как в прошлый раз намучилась, пока обновляла на своем. Очень долго загружала файлы, все по одному.
Короче, обновила быстро, а когда села за свой комп. написать статью, поняла, что не смогу этого сделать – нет редактора. А на компе дочери и редактор был и вся админка в порядке.
Значит проблема в компьютере или системе, на нем установленной.
Значит, надо срочно разбогатеть и купить новый компьютер.
Люди добрые ПОМОГИТЕ.
1.Есть блог.
2.В блоге сайдбары распологаются только сверху и снизу.
3.Как сделать дополнительные сайдбары, но чтобы они размещались справа и слева?
4. Тема Gridblog.
5. Посмотрите и напишите, что мне делать.
6. Заранее всем спасибо.
7. Бьюсь над этим уже 4 дня, но все новые сайдбары с виджетами появляются только под или над сайдбарами уже установленными в теме.
Это к верстальщику надо. По моему весь смысл этого дизайна в такой необычной форме виджетов. Иначе можно просто другую тему установить.
В том и проблема, что шаблон мне очень по душе. А самое главное быстрый. Хорошо, а если не делать новый сайдбар, то можно каким-нибудь способом вывести текст html слева и справа?
Думаю все возможно, но это вопрос не ко мне. Советую поспрашивать у авторов, делающих свои шаблоны.
Спасибо, спрошу.
Удачи.
И Вам удачи и решения проблемы!
Доброго времени суток! Олег буду вам признателен если уделите мне время! Нужен совет, установил шаблон на блог (WordPress). Теперь справа в сайдбаре рекламные баннеры, вот всю ночь сидел так и не понял в чем дело, не знаю, как вообще по корню удалить баннеры в sidebar.php, не нашел код (или плохо искал). Баннеры находятся в сайдбаре. Надеюсь на вашу помощь!
P.S Заранее благодарю!
Обычно такие баннеры удаляются в настройках темы. Там есть место для вставки кода. Если хотите, скиньте мне ссылку на свою тему через Контакты, я посмотрю.
Отлично. Узнала много нюансов при настройке шаблона. Буду заходить чаще. Спасибо.
Олег,ваши статьи как всегда на вес золота!
Спасибо!
Подскажите, пожалуйста, где я могу отредактировать рубрики. А точнее то, как отображаются статьи в рубриках. Почему-то они выводятся без картинок…
Спасибо!
Тут все зависит от Вашего шаблона. Например, у меня картинки выводятся с помощью Произвольных полей. Но чаще всего просто при вставке картинки надо использовать ее, как миниатюру и тогда она должна отображаться в анонсах.
Олег, здравствуйте!
У меня такая проблема… Когда при комментировании статьи нажимаешь “Отправить”, вместо того, чтоб коммент отправился, открывается окно подписки “Фидбернер”…
Раньше все нормально было..
В коде вроде все нормально… Вот беда какая…
Спасибо заранее!
Раньше все нормально было, а что делали перед тем, как стало не нормально? Вставляли в код что-то? Как Вы устанавливаете блок подписки через feedburner под статьей – в самом редакторе при публикации статьи или в файл шаблона? Есть подозрение, что там у Вас нет закрывающего тега form. Может в этом дело. Хотелось бы глянуть код с блоком feedburner и файл single.php.
Спасибо большое! Форму подписки feedburner я установила через Quick Adsense.
Проверила, и действительно там не было тега .
Проверил, работает. Так бывает, открытый тег действует на весь код, который идет после него, вплоть до первого закрытого. Не знаю, как у Вас, но у меня в браузере Ваши кнопки соц.сетей наползают на сам текст, т.е. отступ от левого края очень большой.
Да, я заметила, что, когда меняешь масштаб, кнопки гуляют куда хотят… наползают на текст, или наоборот далеко вправо уходят..
Может вы знаете, как это исправить?
Думаю, никак. У всех разные мониторы. У меня 4:3 и наползает, надо уменьшать размер, чтобы отползло
. У кого мониторы 16:9, а их сейчас большинство, наверно будет нормально. Просто можно поставить не плавающую панель, а обычные кнопки под каждой статьей.
Я все никак не могу поменять форму комментариев. Борюсь с ними, ищу где взять готовый код, все никак. Все пишут где его поменять, а конкретно, как это сделать никто не пишет. Буду дальше искать.
А чем вам не нравится ваша форма? Можно установить комментарии от Disquis или Сackle. Опять же комменты от ВКонтакте.
Здраствуйте у меня проблема: в теме прописано название и описание сайта, а при проверке сайта пишет, что нет описания. Какой файл заменить? Знаю, что тема глючит (нельзя было оставить коментарий – заменил файл (comments.php) помогло) Подозреваю, что тоже нужно заменить какой-то файл, но какой за это отвечает?
Вы используете плагин Yoast WordPress SEO, вот в нем и пропишите description (описание), а заодно и keywords. Должно все появиться. Title главной страницы очень спамный – три раза повторяется один и тот же ключ, причем два раза в точном вхождении.
Так в этом и проблема шаблона (виды заработка в интернете – это я прописал описание сайта, а оно добавляет его к названию) и получается длинное и спамное название, а описания нету. Я и спрашивал Вас, какой файл за это отвечает (видимо в нем проблема), я его просто заменю на новый без ошибки и тогда все пропишу.
Где в плагине Yoast WordPress SEO можна прописать keywords? Сайт делал не я, только разбираюсь. Подскажите, пожалуйста, только пошагово.
Я пользуюсь другим плагином, но, если не изменяет память, то в настройках плагина “Главное меню” – “Домашняя страница”. И заполняете шаблон названия, описания и ключевых слов. В шаблоне названия там стоит код, попробуйте удалить последнюю часть %%sitedesk%%. Похоже она и выводит описание в Title. Только сохраните этот код перед правкой, может придется вернуть на место.
Как найти и отредактировать в wordpress файл index.html?
Ведь во встроенном редакторе все файлы с расширением php.
Это же CMS, здесь этот файл называется index.php.
Если посмотреть исходный код любого сайта на wordpress, мы увидим как раз index.html
Вот я и спрашиваю, как его можно отредактировать, чтобы убрать ссылки индексации.
Если посмотреть исходный код страницы, то мы увидим код конкретной страницы. Если надо редактировать Главную, то это файл index.php, страница записи – single.php и далее по аналогии.
Хорошая статья, редактировать шаблон легче, чем создавать, но знать много нужно, чтобы добиться успеха в этом.
Добрый ночи, я хотел вам задать вопрос, у меня на сайте, когда выбираю рубрику там 27 статьей,
и на главной странице показывает 10 статьей, а чтобы перейти на другие статьи нету (кнопки) перехода на другую страницу.
Если пагинация на страницах архивов настроена с помощью плагина, то проверьте или Вы установили код вывода кнопок в соответствующем шаблоне. Хотя, если Вы про сайт в подписи, то там все в порядке, кнопки есть.