Languages: English • Русский • 中文(简体) • (Add your language)
Ниже приводится описание обшей архитектуры сайта для WordPress v1.5. Мы призываем авторов WordPress Тем сохранить большую часть архитектуры ядра сайта XHTML тэгов и CSS селекторов, но это не обязательно. Таким образом, это только в общих чертах, и ваша тема может быть различной.
Прежде чем мы перейдем к структуре ядра Архитектуры страницы wordPress, Вы должны понимать, что WordPress использует файлы шаблонов для создания финальной страницы, которую Вы видите в браузере. Например, когда Вы просматриваете главную страницу вашего WordPress сайта, то Вы на самом деле просматриваете несколько файлов шаблонов:
При просмотре отдельной страницы, Вы можете видеть следующие файлы шаблонов:
На странице со множеством постов, таких как страницы категорий, поиска и архива, Вы можете видеть любую комбинацию из следующих шаблонов:
Структура ядра WordPress сайта представляется основными контейнерами, которые содержат контент страницы. Структура ядра WordPress сайта включает в себя, как минимум следующие шаблоны:
Это основные контейнеры, которые содержат наиболее важные части страницы. Помните, что основная структура, как строительные блоки. Они зависят друг от друга. Если вы измените один, вы должны изменить другие.
Классическая тема
<body> <div id="rap"> <h1 id="header"></h1> <div id="content"></div> <div id="menu"></div> <p class="credit"></p> </div> </body>
Тема по умолчанию
<body> <div id="page"> <div id="header"></div> <div id="content" class="narrowcolumn"></div> <div id="sidebar"></div> <div id="footer"></div> </div><!-- end page --> </body>
В одной теме блок навигационных ссылок называется sidebar а в другой menu, основное различие между структурами двух вариантов тем состоит в использовании верхнего и нижнего колонтитулов.Для классической темы, роль заголовка выполняет тег h1, а роль "подвала" тег p. В теме по умолчанию, роль заголовка выполняет div с идентификатором header а роль "подвала" footer div.
Обе темы содержат контейнер, который оборачивает собой всю страницу. Этот оберточный контейнер позволяет более полно контролировать общую структуру. В разных темах WordPress, такой контейнер может быть с разными именами:
Некоторые темы могут включать в себя две, три и более боковых меню, создавая эффект колонок. Или же они могут включать дополнительные "обертки" страницы или обособленные контейнеры, но выше изложена основная структура.
Исходя из блочной структуры страницы, темы WordPress делятся на файлы шаблонов. Вот эти файлы:
Как вы можете видеть, контейнер контента может в представляться в нескольких файлах шаблонов. Их выбор зависит от запроса пользователя. Если пользователь нажимают на категории, отображается шаблон категории. Если они выбирают страницу , используется шаблон страницы. И так далее.
В сочетании с циклами WordPress и запросами, может быть сгенерировано множество шаблонов, и дизайнер веб-страниц может стилизовать все это по-разному и независимо от остальных частей.
Заголовок представляет собой структуру , которая традиционно находится в верхней части веб - страницы. Он содержит название веб-сайта. Во всех WordPress темах, заголовок находится в файле шаблона header.php.
Классическая тема показывает простейший код заголовка:
<h1 id="header"></h1>
Тема по умолчанию имеет более сложный код заголовка:
<div id="header">
<div id="headerimg">
<h1></h1>
<div class="description"></div>
</div>
</div>
В то время как стили для классической темы находятся в пределах файла таблиц стилей style.css, стили для Темы по умолчанию находятся в файле style.css и в пределах тега <HEAD> в файле шаблона header.php. Работа с этими стилями широко рассматриваются в статье Дизайн заголовка.
Контейнер контента в WordPress играет самую важную роль. Он содержит цикл WordPress, который который выводит на страницу тот или иной контент, в зависимости от запроса пользователем.
Классическая тема имеет самую простую структуру контента:
<div id="content">
<h2>Date</h2>
<div class="post" id="post-1">
<h3 class="storytitle">Post Title</h3>
<div class="meta">Post Meta Data</div>
<div class="storycontent">
<p>Welcome to WordPress.</p>
</div>
<div class="feedback">Comments (2)</div>
</div>
</div>
Классическая тема включает в себя контейнеры для даты, заголовка поста, мета-данных поста, содержания и количества комментариев. А так же демонстрирует мощный инструмент -возможность индувиализировать внешний вид отдельного поста.
<div class="post" id="post-1">
CSS класс применяет соответствующие стили к этому блоку, но блок так же помечен уникальным идентификатором (ID), который автоматически генерируется WordPress. Код выглядит следующим образом:
<div class="post" id="post-<?php the_ID(); ?>">
Использование тега шаблона the_ID() генерирует ID номер поста. Это обеспечивает уникальный идентификатор для внутренних ссылок страниц, а также для стилей. Таким образом Вы можете выделить некоторые посты по вашему желанию, также некоторые плагины могут использовать этот идентификатор , чтобы автоматически изменять внешний вид различных сообщений.
Как вы видели в Теме по умолчанию, боковая панель может быть видимой или нет, в зависимости от структуры файла шаблона. Боковая панель, в общем, может быть простой или сложной. Темы WordPress часто показывают информацию в боковой панели через вложенные списки .
Классический Стиль боковой панели выглядит следующим образом, со ссылками удаленными для упрощения:
<div id="menu">
<ul>
<li class="pagenav">Pages
<ul>
<li class="page_item">Contact</li>
<li class="page_item">About</li>
</ul>
</li>
<li id="linkcat-1"><h2>Blogroll</h2>
<ul>
<li>Blogroll Link 1</li>
<li>Blogroll Link 1</li>
<li>Blogroll Link 1</li>
</ul>
</li>
<li id="categories">Categories:
<ul>
<li>Category Link 1</li>
<li>Category Link 2</li>
</ul>
</li>
<li id="search">
<label for="s">Search:</label>
<form id="searchform" method="get" action="/index.php">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
</li>
<li id="archives">Archives:
<ul>
<li>Archives Month Link 1</li>
<li>Archives Month Link 2</li>
</ul>
</li>
<li id="meta">Meta:
<ul>
<li>RSS Feed Link</li>
<li>RSS Comments Feed Link</li>
<li>XHTML Validator</li>
<li>XFN Link</li>
<li>WordPress Link</li>
</ul>
</li>
</ul>
</div>
Большинство из них очевидны. Каждый набор ссылок имеет свой собственный селектор CSS: : страницы, категории, архив, поиск, и мета.