WordPress — структура шаблона. Структура шаблона wordpress
Структура шаблона WordPress | Создание блога с нуля, раскрутка и монетизация
Здравствуйте мои уважаемые читатели!
В предыдущей статье я описывал процесс установки шаблона (тымы) WordPress.
Для того, чтобы в дальнейшем Вы могли редактировать установленный шаблон под свои задачи, в этой статье я расскажу вкратце, из чего он состоит.
Вы сейчас скажите – Вот блин, началось, чем дальше, тем сложнее!
Не переживайте, всё не так страшно как кажется. Со временем всё поймёте.
Начнём с того, что все шаблоны содержат основные файлы. Каждый файл отвечает за свой участок на странице и выполняет определённые действия.
Чем сложнее тема, тем больше в ней содержится своих индивидуальных файлов.
На следующей картинке я приведу пример структуры сайта с размеченной областью. За каждую область отвечает свой файл или их группа.
Шапка сайта
Самая верхняя часть сайта называется Шапкой или хедером, за которую отвечает файл с названием header.php
В шапке обычно отображается название блога, логотип, рекламные блоки и так далее. Её можно назвать мини визиткой.
Содержание сайта (контент)
В этой части выводится текст записей и страниц, картинки и видео.
За этой областью закреплено множество файлов, каждый из которых выполняет свою роль. Опишу самые важные.
index.php — выводит главную страницу блога.
single.php — отвечает за вывод записей (постов).
search.php — отвечает за поиск, выводит на экран страницу результатов поиска.
archive.php — отвечает за архивные записи блога.
comments.php — из названия можно понять, что файл отвечает за комментарии.
404.php — если страница или заметка не найдены, выдаётся ошибка 404.
Сайдбар (sidebar.php - боковая панель)
Как вы видели на многих сайтах, в боковой панели располагают меню, рубрики, счетчики, подписку, похожие и последние записи, календарь и всякого рода рекламу. В принципе, в сайдбар можно засунуть что угодно, но сами понимаете, это должно нормально смотреться.
Бывают шаблоны с несколькими сайдбарами. Например, шаблон с левой и правой боковой панелью. Между ними расположена область контента.
Подвал (footer.php – футер)
Подвал представляет собой самую нижнюю часть сайта.
У одних он узкий и содержит надпись о защите прав, дату.
У других он просто огромен, в котором выводится масса различной информации такой как:
- информация об авторе;
- счетчики посещаемости;
- самые читаемые и популярные записи;
- информация о защите прав и ещё много полезной информации.
Теперь Вы имеете некоторое представление о строении шаблона.
В следующем уроке Вы будете создавать свой первый пост (запись).
До новых встреч!
Похожие статьи
♦ Рубрика: Блог с нуля.elitsovet.ru
Wordpress - структура шаблона
Структура шаблона
Шаблон состоит из нескольких файлов, каждый из них отвечает за вывод каких то функций или элементов сайта. Некоторые выводятся постоянно, некоторые при определённых условиях или запросах. То есть грубо говоря отзывчивый конструктор, что вы спрашиваете , то он и строит, по определённым правилам. Естественно что функции ограничены условиями типа Если… , То … Как в принципе и все языки программирования. Не буду грузить вас специальными знаниями, а перейдём к более простым вещам.
Теперь распишем функции файлов
- Header.php — этот файл выводит в браузере блок верхней части сайта, часто называемой «Шапка сайта» или блога, отображается на всех страницах сайта.
- Footer.php — файл выводящий в браузере нижнюю часть сайта , так же статичен и отображается на всех страницах блога, сайта. Называется в обиходе «Подвал»
- Sidebar.php- боковая колонка, отвечает за отображение бокового бара с виджетами. Виджеты могут быть как специальными , так и содержащие HTML текст и отображающие в браузере команды кода. Сайдбары могут быть как левыми так и правыми, по одному в сайте и по два сразу.
- Index.php — этот документ выводит в браузере содержимое главной страницы сайта, блога
- Page.php — выводит страницы сайта, блога. Страницы, но не записи. В wordpress страницы имеют статический вид, а записи обновляются на главной , то есть добавляются.
- Single.php — этот файл выводит записи (посты) блога, на той странице которую вы укажете в меню, обычно это главная
- Archive.php — отображает архив всех записей блога.
- Search.php — по английски это поиск. Файл выводит форму поиска и выполняет поиск по сайту, блогу слов и словосочетаний.
- 404.php — этот файл выводит страницу ошибок. Как сделать свою индивидуальную страницу 404 смотрите здесь
- Сomments.php — файл выводит коментарии
- Functions.php — файл функционирования всего сайта
- Style.css — этот файл есть таблицы каскадных стилей, отвечает за расположение всех объектов и контента на сайте. С этим файлом и в большинстве случаев мы и будем работать по внесению изменений на сайте.
Теперь зная за что отвечает каждый файл можно заниматься редактированием сайта, ибо не зная структуры шаблона наломать дров проще простого. И чтобы не стать дровосеком помните золотое правило, прежде чем изменять файл сохраните оригинал, чтоб потом можно было вернуться в исходное состояние
Предыдущая статьяПолезная программа Notepad++Следующая статьяТекстовый редактор wordpress — TinyMCE Advanced
www.blogedward.ru
Создание шаблона Wordpress - написание ТЗ
Здравствуйте, уважаемые посетители. Сегодня мы поговорим о шаблонах WordPress. Фактически, эта статья продолжает тему, начатую в статье «Как поставить задачу верстальщику?» и содержит рекомендации, которые помогут Вам при постановке задачи исполнителям.
Небольшое вступление по теме
При создании шаблона важно четко представлять а) какие цели преследует наш сайт; б) что должен будет делать наш пользователь на сайте; в) иметь понимание структуры и функционала сайта, желательно оформленное в виде прототипа. Многие веб-студии, фрилансеры используют для создания сайтов (в т.ч. и сайтов-магазинов) платформу WordPress. Преимущества использования очевидны: бесплатность, универсальность (благодаря множеству расширений), отсутствие потребности в найме высококвалифицированных специалистов — с работой Wordpress под силу разобраться даже Junior программисту. По сути, для создания сайта на Wordpress обычно требуется создание темы (шаблона) и доработка функционала в виде изменения существующих или создания новых плагинов (дополнений).
Шаблон Wordpress от шаблонов других CMS, по сути, отличается только структурой и использованием собственных функций. Над созданием шаблона могут трудиться четыре человека (менеджер, дизайнер, верстальщик, программист), либо же два или вовсе один. Сложного в создании самого шаблона из готового макета ничего нет, необходимо всего лишь обладать знаниями HTML / CSS / Javascript / PHP. Для тех, кого связка HTML / CSS / Javascript / PHP звучит, как непонятный набор слов, сразу скажу — существует масса шаблонов как платных, так и бесплатных, на любой вкус. Также существует масса людей, которые делают такие шаблоны под заказ.
Именно потому, что даже если Вы никогда не будете вовлечены в процесс создания шаблона, но будете вынуждены объяснять, что Вам нужно, другим людям, я и написал данную заметку. Она не претендует на универсальность, и «заточена» под WordPress только потому, что это одна из наиболее распостраненных платформ для создания сайта.
Начинаем писать ТЗ для темы WordPress
Конечно, после того, как мы определились, что и как будет размещено и работать в шаблоне, важно всю эту информацию правильно передать исполнителю/исполнителям. Начало работы над шаблоном может быть:
- На этапе получения готового дизайна.
- На этапе получения готовой верстки.
- На этапе, когда нет ни дизайна, ни верстки и мы ставим задачу на создание темы с ноля.
Отдельно каждый этап, полагаю, расписывать не требуется. Поэтому по созданию темы WordPress мы будем говорить в обобщенном ключе.
И не важно, Вы project manager и передадите эту задачу подчиненным или заказываете сайт найденному в интернете или еще где-нибудь фрилансеру. Вам нужно ответить сначала для самого (самой) себя на ряд важных вопросов:
- Что готово по самому сайту? (т.е. определяем, на каком этапе мы находимся)
- Есть ли сформированные требования к дизайну сайта (шрифты, логотипы, цвета, наличие бренд-бука)?
- На каких устройствах и в каких браузерах будет работать сайт?
- Верстка будет резиновойРезиновая верстка - это отображение сайта на всю ширину экрана и изменение ширины сайта при изменении ширины экрана, соответственно. или фиксированнойФиксированная верстка — это верстка шаблона определенного размера, как правило, 960px. Такая верстка смотрится одинаково на всех разрешениях экрана.?
- Есть ли представление того, какие будут страницы на сайте, их количество и отличия?
- Есть ли на примете готовые решения, которые можно использовать под WordPress (например, слайдеры, плагины форм и т.п. Возможно, ваш сотрудник/подрядчик уже с ними работал и не составит труда их внедрить в новый шаблон)?
- Есть ли прототип сайта, либо описание функционала страниц?
- Требуются ли настройки шаблона (изменение цвета, шрифта и т.п. из админпанели)?
- Будет ли структура шаблона отличаться от стандартной структуры шаблона WordPress? (этот момент полезно вспомнить, если Вы действительно знакомы со структурой шаблона WordPress)?
Исходя из озвученных выше вопросов прописываем небольшой документ, фактически, с развернутыми ответами на них. Содержание получится приблизительно такого толка:
1) Основные требования (ширина, цвет, если есть бренд-бук — краткое описание со ссылкой на бренд-бук, ссылки на макеты дизайна, где будет располагаться результат верстки, ориентировочные сроки выполнения задачи)
Например:
- цвета и шрифты, а также их использование описаны в бренд-буке, который прилагается к данному документу
- основная логика работы темы — в приложенном прототипе (для того, чтобы открыть прототип, прочтите инструкцию)
- ширина страниц сайта – фиксированная;
- шаблон должен корректно отображаться в распостраненных браузерах (IE7+, Firefox 3+,
- Google Chrome, Safari). Для старых браузеров должна быть предусмотрена страница-заглушка с рекомендациями обновить браузер.
- шрифты должны корректно отображаться на ЖК-мониторах во основных ОС (MS Windows, GNU/Linux, Apple OS)
- визуальные эффекты должны быть выполнены, по возможности, с использованием CSS
- шаблон должен называться «company», основные свойства задаются из админпанели сайта
2) Разметка шаблона (ну тут все понятно)
Например:
- для основных элементов сайта используется блочная (div) верстка;
- страницы должны располагаться в центре экрана;
- верхний колонтитул (header) должен был прижат к верхнему краю окна и иметь высоту 150 px;
- в верхнем колонтитуле должен располагаться логотип компании с ссылкой на «Главную» и строка поиска по сайту;
- на всех страницах должно отображаться основное меню навигации;
- на второстепенных страницах (кроме главной) должны выводиться «хлебные крошки»
- в основной части всех страниц должен располагаться баннер «карусель» с информацией о значимых проектах, значимость определяется установкой галочки «отображать в карусели» в настройке публикации;
- нижний колонтитул (footer) должен быть прижат к нижней части окна и иметь высоту 90 px;
3) Описание страниц (каждая по отдельности, как главная, так и вспомогательные — описание для сингла, для страниц, для главной, для категорий)
Например:
- В шаблоне используется три типа страниц, которые отдельно описаны в пункте 5. В таблице ниже представлен пример сравнительной таблицы.
| Название страницы | Файл шаблона | Файл верстки, если есть | Страница прототипа, если есть | Файл с дизайном | Краткое описание |
| Главная страница | front-page.php | home.html | Home | main_05.psd | Главная страница сайта |
| Основной шаблон страницы | page.php | article.html | Article | article_05.psd | Основной шаблон страниц сайта по умолчанию |
| Шаблон страницы контактов | contacts.php | contacts.html | Contacts | contact_05.psd | Шаблон страницы контактов и формы заявки |
| Шаблон страницы клиентов | clients.php | clients.html | Clients | client_05.psd | Шаблон страницы отображения клиента компании |
| Шаблон вывода записей | single.php | single.html | Zapis | zapis_05.psd | Шаблон записи |
| Шаблон вывода категорий | category.php | category.html | Category | category_05.psd | Шаблон вывода записей категории |
| Шаблон настроек темы | theme-options.php | options.html | Opts-backend | options_05.psd | Шаблон страницы настроек темы |
| Шаблон отображения страницы 404 ошибки | 404.php | 404.html | 404 | 404_05.psd | Шаблон 404 страницы (Страница не найдена) |
| Шаблон вывода результатов поиска | search.php | search.html | search | search_05.psd | Шаблон страницы результатов поиска |
4) Настройки шаблона (при необходимости)
Например:
В шаблоне должна быть предусмотрена возможность смены фонового цвета / изображения сайта, а также логотипа прямо из административной панели. За вывод настроек отвечает файл theme-options.php. Доступ к настройкам темы: Консоль —> Внешний вид —> Настройки темы «company»5) Структура шаблона и размещение стилей шаблона (обычно просто древовидная структура с названиями файлов шаблона)
Например:
Для текстового редактора CMS должны быть разработаны три основных шаблона для публикаций:
- Базовый шаблон – page.php. Весь текст содержимого должен быть оформлен в соответствии с бренд-буком. Тег заголовка h2 должен иметь размер 1em от общего размера шрифта. Теги h3, h4, strong должны иметь размер 0,5em общего размера шрифта.
- На основе базового шаблона создаются шаблоны для страниц «Контакты» и «Клиенты» должны отображаться изображения анонса, анонсы публикаций и ссылки «узнать больше» на полную версию статьи если таковая имеется. Полная версия статьи должна выводиться во всплывающем окне с использованием JavaScript, после перехода по ссылке «узнать больше»
- Для вывода записей категорий создается отдельный шаблон category.php. Записи для этих страниц должны быть сложены прямоугольными плитками одинакового размера по 3 в ряд с одинаковым отступом между плиток. Каждая плитка должна быть обрамлена пунктирной линией. В плитке должно отображаться изображение анонса, анонс публикации и ссылка «узнать больше» на полную версию статьи если таковая имеется.
- Полная версия статьи должна выводиться во всплывающем окне с использованием JavaScript, после перехода по ссылке «узнать больше»
- Основные стили шаблона размещаются в файле style.css. Вспомогательные — в папке css в корневом каталоге шаблона company
Ниже представлена структура оговариваемого шаблона с объяснениями:
company — основная папка шаблона
-css — папка со стилями
—custom.css — папка дополнительных стилей (редактора итп)
—index.php — файл защиты от прямого доступа
-js — папка с файлами javascript
—custom.js — основной файл javascript
—index.php — файл защиты от прямого доступа
-img — папка картинок шаблона
—back.jpg
—divider.jpg
—index.php — файл защиты от прямого доступа
-archive.php — шаблон вывода архивов записей
-404.php — шаблон вывода ошибки «страница не найдена»
-category.php — шаблон категории
-comments.php — шаблон комментариев
-contacts.php — шаблон вывода страницы «Контакты»
-clients.php — шаблон вывода страницы «Клиенты»
-header.php — шаблон вывода заголовка (шапки сайта)
-footer.php — шаблон вывода подвала сайта
-front-page.php — шаблон главной страницы
-functions.php — файл расширений, настроек, модификаций темы
-index.php — файл защиты от прямого доступа
-page.php — базовый шаблон страницы
-sidebar.php — служебный шаблон вывода левой/правой колонки
-single.php — базовый шаблон записей
-search.php — шаблон отображения поисковой выдачи
-searchform.php — шаблон отображения поисковой формы
-theme-options.php — файл настроек темы
Итоги
Естественно, представленная структура — не истина в первой инстанции. Структура может упрощаться / усложняться. Подведем краткие итоги:
1) Мы обсудили некоторые ньюансы создания тем WordPress.
2) На примерах постарались создать ориентировочное ТЗ для исполнителя.
При необходимости что-то разобрать более подробно — спрашивайте в комментах.
Полезные ссылки:
Кодекс Вордпресс — http://codex.wordpress.org
Иерархия шаблонов в том же кодексе — http://codex.wordpress.org/Иерархия шаблонов
Похожие статьи:
kak-eto-sdelat.com
Строение страниц шаблона Wordpress | MY HTML
Ранее мы уже описывали, с чего состоит шаблона WordPress. Теперь предлагаем ознакомиться более детальней c основами построения шаблонов.
По сути, базовое строение шаблона WordPress подобно строению файла html. Потому знаний html для начала вполне хватит и не нужно пугаться, что все сохраняется в php.
Суть шаблона WordPress – это совмещение визуализации html + стандартных функций php (неких шорткодов).
Основы строение страниц шаблона WordPress
Для примера мы берем главную станицу wordpress – ленту новостей и страницу новости.
- Шаблон header.php – это единичный шаблон для всех страниц. В данном шаблоне размещены данные данные тегов:
- Открытие тега <html>
- <head>…</head>
- Открытие тега <body> + установка меню сайта.Именно в данной части можно установить ссылки на стили, метаданные и т.д. Так же сюда размещается меню сайта. Другими словами – это часть шаблона для всех страниц.
- Шаблон index.php – это шаблон ленты новостей. Храниться вся структура, начиная от меню и до <footer>. Это все блоки, картинки и т.д
- Шаблон single.php – это страница записей (новости). Храниться вся структура, начиная от меню и до <footer>. Это все блоки, картинки и т.д. В отличии от index.php, тут размещаются тексты целиком, а не анонсы.
- Шаблон footer.php. Так же как и header.php – это единичный шаблон для всех страниц сайта. В нем, размещены все файлы от тега <footer>, а так же закрываются все теги header.php — <body>, <html>.
Так же в файле footer.php желательно хранить ссылки скриптов, что бы они загружались в последнюю очередь и не «тормозили» загрузку сайта.
В итоге, для начала работы нужен готовый HTML шаблон с:
- Шаблоном ленты новостей
- Шаблоном единичной записи (страница сайта или страница новости).
- Шаблон главной страницы, если нужно не ленту новостей, а страницу приветствия (по желанию).
Далее каждый шаблон html разбиваем на 3 части под шаблоны header, footer, index ( page, single и т.д.).
Так же важно не забывать указывать правильные пути к файлам стилей, скриптов и картинок. Подробнее в данной статье.
В следующих статьях мы рассмотрим более детально, как «оживить» шаблон и делать вывод всем материалов и данных.
Поделиться ссылкой:
Рубрики: WordPress шаблоны | Разработка
Тэги: html | wordpress | разработка | шаблоны
myhtml.pro
