WordPress. Как создать шаблон страницы. Как работают шаблоны
Благодаря тщательно проработанной платформе тем и интуитивно понятному дизайну, вы можете менять оформление и содержимое сайта перетаскивая необходимые элементы с места на место, добавлять новый контент, при этом сразу видя все правки. Это не занимает много времени и действительно просто.
Теперь к каждому зарегистрированному домену доступен бесплатный WordPress хостинг, а вместе с ним простой и удобный редактор шаблонов Upfront.
Мы подготовили инструкции из 5 частей с конкретными примерами, о том, как создать WordРress сайт с помощью конструктора Upfront:
Мы возьмем тему Spirit и полностью переделаем ее области, контент, шрифты и другие элементы, превращая это:
В эту тему с собственным стилем, цветами, шрифтами, кнопками, картинками, контактными формами и другими элементами:
Давайте начнем.
Вход в WordPress панель и выбор темы
После того, как вы зашли в свой личный WordPress кабинет вам нужно выбрать тему с которой вы будете работать. По умолчанию у вас уже выбрана тема. Как мы говорили ранее, для примера, мы взяли тему Spirit. Для этого наводим на тему и жмем кнопку Активировать . Тема выбрана.
Если хотите выбрать другой шаблон, можете на каждой из тем нажать Предварительный просмотр , что бы определиться с подходящей.
Удаляем, меняем размер, перемещаем элементы
Давайте начнем с удаления.
Все что вам нужно сделать это навести курсив на лишний элемент и нажать крестик в верхнем углу. Если вы сделали это случайно, что бы вернуть все назад пользуйтесь комбинацией клавиш Ctrl+Z.
Менять размер блока аналогично просто. Давайте поменяем размер этого же элемента. Наводим курсор, кликаем на угол и тянем в нужную сторону.
Примечание: Если вы пытаетесь поменять размер логотипа в теме и у вас не выходит, это из-за заданного по умолчанию размера картинки. Замените на собственный логотип или просто удалите этот.
Меняем цвет темы
Бывало такое что вы находите хорошую тему и вам все в ней нравится кроме цветового решения?
Upfront позволяет вам полностью управлять цветами темы из одной панели. Если вы передумаете, вы можете заменить цвета в любой момент. Это значит, что вы можете сменить цвет текста, рамок, фона и прочее. Шаблоны Upfront, как огромная разукрашка с широкой цветовой палитрой для вашего сайта:-)
После перехода в конструктор слева у вас будет панель настроек. Нажимаем на выпадающие меню Настройки темы/Theme Settings и выбираем пункт Цвета/Colors. Перед вами 6 цветов темы заданных по умолчанию.
Допустим у вас есть брендовые цвета и вы знаете их номера, в таком случае вам нужно только кликнуть на цвет и сменить номер, а если нет, то просто подберите в палитре те, которые вам по душе. По завершению кликаем ОК
.
Добавляем текст
Тут все просто: кликаем дважды на область с текстом что бы сделать активной ее редактирование, еще двойной клик, чтобы выделить слово и трижды если нужно выделить параграф. Над текстом появится панель инструментов для работы с ним. Вот полный список опций по редактированию:
- Тип элемента/Type Element – Включает в себя заголовки H1, H2, H3, H4, H5, H6, обычный абзац и формат кода
- Bold – Делает шрифт жирным
- Italics – Курсив
- Alignment – Выравнивание текста по краям
- Список/List – Маркированый или нумерованый список
- Blockquote – Оформление текстового блока как цитату или обычный блок
- Ссылка/Link – Возможность вставить в текст якорь,ссылку на конкретный URL , блок, страницу или публикацию, с открытием в этом же или в новом окне.
- Иконки/Inline Icons – Набор иконок
Панель инструментов позволяет указывать размер выбранной иконки, делая ее больше или меньше. Как только вы закончите работу с этим инструментом, просто кликните в любой другой области страницы и панель исчезнет.
Типографика
Размеры шрифтов, их стили и цвет редактируются в боковом меню: Настройки темы — Типографика .
Для каждого типа элемента, вы можете указать его вид шрифта, стиль, цвет, размер и высоту строки.
Вы также можете добавить пользовательские правила CSS, но мы рассмотрим это позже, как часть другого поста в этой серии.
Менеджер шрифтов/Theme Fonts Manager позволяет добавить любой шрифт Google к вашей теме. Кликни на Theme Fonts Manager и выбери из выпадающего списка подходящий шрифт, кликни на него и жми Добавить/Add, чтобы он появился в списке. Этот шрифт станет доступен тебе в выпадающем списке при редактировании текста, как на примере:
Примечание: многие Google шрифты не поддерживают кириллические символы.
Одновременное редактирование текста
Лучший способ стилизовать текст, включая заголовки и параграфы, это сделать все одним махом.
Самый простой способ сделать это — добавить образцы текста на сайт, стилизировать в Настройках темы/Theme Settings , а затем удалить.
Вот как это сделать:
- Скопируйте образец текста, который закачан на CodePen и убедитесь, что форматирование остается неизменным
- Вставить текст в любой текстовый элемент Upfront
- Перейдите к Настройкам темы/Theme Settings и выберите Типографию/Typography , если он еще не открыт
- Для каждого типа элемента выберите вид, стиль, цвет, размер и высоту строки
Образец текста обновится автоматически после того как вы настроите все желаемое. Это позволит вам увидеть все изменения текста в общем. С точки зрения дизайна, это позволит вам легко оценить или вписываются цвета и стиль вашего шрифта в общий дизайн.
Файлы шаблонов представляют собой смесь из HTML и PHP, которая может содержать как ваш собственный код, так и вызывать базовую функциональность WordPress. При разработке темы одна из основных задач заключается в том, чтобы исследовать шаблоны родительской темы и отыскать те места, в которых сгенерирована необходимая вам разметка. Для того чтобы быстро и эффективно выполнить данную задачу, нужно обладать некоторыми знаниями относительно того, как работают шаблоны WordPress. Изучением их работы мы и займемся в этом разделе.
В процессе представления страницы, WordPress проверяет наличие соответствующего шаблона в каталоге с активной темой. Каким образом WordPress выбирает необходимый шаблон? Это зависит от типа страницы, а также от количества доступных шаблонов для ее представления. Сначала WordPress выполняет проверку присутствия определенных шаблонов с определенными именами, и если таких не было найдено, то откатывается к файлу index.php, который является своего рода универсальным шаблоном для отображения любой страницы.
Краткая иерархия шаблонов
Главная страница
В WordPress 3.0 администратор блога может определить, что показывать на главной странице: динамический список записей или статическую страницу. Шаблоны WordPress для главной страницы имеют следующую иерархию:
1. front-page.php
2. page.php или home.php (зависит от того, что вы выбрали в настройках блога)
3. index.php
В WordPress 2.x иерархия была следующей:
1. home.php
2. index.php
Отдельные записи
1. single-posttype.php, где posttype задает определенный тип записи. К примеру, если ваша запись имеет название Recipes, то шаблон получил бы название single-recipes.php.
2. single.php
3. index.php
Отдельные страницы
1. WordPress сначала ищет шаблон, определенный в настройках шаблонов страниц.
2. page-slug.php, где slug — это определяющая строка для данной страницы. К примеру, если у вас есть страница, названная About, то WordPress будет искать для нее шаблон page-about.php.
3. page-id.php, где ID — идентификатор данной страницы. Если страница About имеет ID = 2, то WordPress будет искать для нее шаблон page-2.php.
4. page.php
5. index.php
Вложения
1. MIMEtype.php, где MIMEtype определяет тип вложения - к примеру, audio.php, image.php, text.php или video.php.
2. attachment.php
3. index.php
1. category-slug.php, где slug — определяющая строка рубрики.
2. category-id.php, где id — цифровой ID рубрики.
3. category.php
4. archive.php
5. index.php
Архивы меток
1. tag-slug.php.
2. tag-id.php.
3. tag.php
4. archive.php
5. index.php
Архивы таксономий
Произвольные таксономии появились в WordPress 3.
1. taxonomy-taxonomyname-term.php, где taxonomyname является определяющей строкой для произвольной таксономии, а term является термом для данной таксономии. Если ваша таксономия была названа Cheeses и ваш терм был Brie, то WordPress при выводе пунктов для данного терма будет искать шаблон taxonomy-cheese-brie.php.
2. taxonomy-taxonomyname.php, аналогично первому пункту, только без терма.
3. taxonomy.php
4. archive.php
5. index.php
1. author-nicename.php, где nicename — это имя автора, преобразованное в нижний регистр с удаленными пробелами (вместо них ставятся тире).
2. author-id.php, где id — это идентификатор автора.
3. author.php
4. archive.php
5. index.php
Архивы по дате
1. date.php
2. archive.php
3. index.php
Страницы поиска
1. search.php
2. index.php
Страницы 404
1. 404.php
2. index.php
Иерархия шаблонов и дочерние темы
Когда вы используете дочернюю тему, иерархия шаблонов несколько усложняется. WordPress будет искать наиболее подходящий шаблон сначала в дочерней теме, а затем уже в родительской, в строгом соответствии с иерархией. То есть, к примеру, для архивов по дате, сначала WordPress будет искать шаблон date.php в дочерней теме, а затем, в случае его отсутствия, перейдет к поиску данного шаблона в родительской теме. Если же указанный шаблон не был найден, то WordPress перейдет к поиску следующего пункта в иерархии, archive.php. Поиск начнется снова от дочерней темы, и в случае отсутствия шаблона перейдет к родительской. И так далее, до файла index.php.
Шаблоны Thematic
Как мы узнали в предыдущей главе, Thematic является превосходным фреймворком благодаря наличию в нем интересной, мощной функциональности. Для того чтобы лучше понять, как использовать шаблоны данного фреймворка, необходимо потратить некоторое время на изучение их взаимосвязи.
Углубимся снова в папку Thematic. Вы увидите множество различных файлов шаблона, которые, если вы прочли предыдущий раздел, не станут для вас откровенностью:
404.php
archive.php
archives.php
attachment.php
author.php
category.php
comments.php
footer.php
functions.php
header.php
index.php
links.php
page.php
search.php
searchform.php
sidebar-index-bottom.php
sidebar-index-insert.php
sidebar-index-top.php
sidebar-page-bottom.php
sidebar-page-top.php
sidebar-single-bottom.php
sidebar-single-insert.php
sidebar-single-top.php
sidebar-subsidiary.php
sidebar.php
single.php
tag.php
Помимо этого, в папке с Thematic находится интригующий каталог library, в котором содержатся различные стили, языковые файлы, скрипты и т.д. Наиболее интересным подкаталогом данного каталога является extensions — в нем содержатся различные расширения для Thematic. Вот список файлов, расположенных в папке extensions:
comments-extensions.php
content-extensions.php
discussion.php
dynamic-classes.php
footer-extensions.php
header-extensions.php
helpers.php
shortcodes.php
sidebar-extensions.php
theme-options.php
widgets-extensions.php
widgets.php
Название каждого из этих файлов содержит в себе ключ к разгадке того, что они выполняют. Sidebar-extensions.php, очевидно, совершает какие-то действия с сайдбаром, widgets-extensions.php — с виджетами и т.д.
Сейчас объясню, как сделать из простого HTML-шаблона тему WordPress на примере дизайна из той статьи.
Адаптировать дизайн под WordPress может понадобиться по многим причинам, например, вы переносите на CMS свой некогда статичный сайт, или вам понравился дизайн, которого в коллекции WordPress ещё нет, или вы просто хотите разобраться, как устроены темы этой CMS изнутри.
Итак, приступим.
Распределяем код по файлам
1. Скачайте шаблон и распакуйте его в папку с темами WordPress (адрес вида адрес_блога_wordpress/wp-content/themes/ ). Если хотите, переименуйте папку с темой на свой вкус. Например, у меня шаблон располагается по адресу адрес_блога_wordpress/wp-content/themes/MyTheme/ .
2. Переименуйте файл styles.css в style.css .
3. Откройте style.css в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:
/* Theme Name: MyTheme Theme URI: http://test1.ru Author: NoName Author URI: http://test1.ru Description: Example of test Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
Как вы могли догадаться, это служебная информация о теме оформления: название, автор, описание, лицензия, версия и т. д. Правые части строк вы можете заменить на собственные, то есть задать свои авторство, версию, описание и прочие данные.
4. Создайте файлы header.php , index.php , sidebar.php , footer.php и распределите по ним код из index.html .
4.1. В header.php скопируйте код по строчку , так как этот файл отвечает за верх сайта. styles.css замените в коде на style.css - новое корректное имя файла.
4.2. В index.php вставьте код основного блока (со строки по строку ).
4.3. В sidebar.php скопируйте код бокового меню (с по ).
4.4. В footer.php вставьте оставшиеся строки (с до конца документа index.html ).
5. Удалите index.html .
6. Перейдите в админ-панель и убедитесь, что шаблон MyTheme появился в разделе Внешний вид -> Темы . Вы даже можете попробовать его просмотреть или активировать, но ничего хорошего из этого пока не получится, ведь шаблон с WordPress мы ещё никак не интегрировали.
Адаптируем header
Теперь мы начнём из статичного шаблона делать динамическую тему, в которую будут подгружаться данные и настройки WordPress.
В шаблоне будут встречаться PHP-вставки. Начинается такой код с . Между ними расположен PHP-код, чаще всего вызывающий функции CMS
1. Откройте файл header.php и замените содержащийся в нём код до блока
на следующий:
>
"> "> " type="text/css" media="screen" />Мы сделали динамическим блок
Код вызывает функцию, возвращающую языковые атрибуты в контейнер.
">
Вместо того, чтобы прописывать кодировку константой, мы вызвали функцию, которая берёт значение из настроек CMS и автоматически подставляет его в код, то есть для смены кодировки уже не придётся править файл темы.
Важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.
2. Перейдите к редактированию файла index.php. В самом его начале пропишите
,
Строчки вызывают файлы шапки, боковой панели и низа сайта.
Теперь вы можете просмотреть или даже активировать MyTheme. В результате браузер отобразит уже знакомый шаблон со статическим меню и одной-единственной страницей. Чтобы меню стало динамическим и настраиваемым, а вместо одной страницы отображались все помещённые на сайт материалы, нужно преобразовывать шаблон дальше.
Делаем динамическим верхнее меню
Пока мы имеем полностью статическую тему оформления, в том числе и с неизменным горизонтальным верхним меню. Пока его нельзя настроить из админ-панели, и если оставить код в нынешнем виде, то для вставки/удаления/переноса пунктов придётся каждый раз редактировать файл header.php , что крайне неудобно.
Чтобы не мудрствовать лукаво и не погружаться в пучину увлекательного мира программирования, зададим динамическому меню статичное название. Вместо таблицы горизонтального меню вставьте код
так, чтобы получилось следующее:
Для того, чтобы меню стало отображаться, в панели управления сайтом откройте Внешний вид -> Настроить -> Меню и либо переименуйте уже созданное меню в menu, либо создайте меню и настройте его на своё усмотрение, но обязательно присвойте ему имя menu.
Суть действий в том, что файл header.php функцией wp_nav_menu("menu=menu"); открывает меню под названием menu, которое, чтобы отобразиться, должно быть правильно названо и настроено в панели администрирования WordPress. Название menu вы можете поменять на любое другое, главное, чтобы имя совпадало и в настройках сайта, и в коде header.php .
Навигация явно куда-то съезжает, хоть и делает это красивой лесенкой. Так происходит потому, что меню нашего шаблона было неосмотрительно реализовано внутри таблицы, а надо было оформлять его списком. Частично исправить ситуацию можно, добавив в файл style.css следующий код:
#menu ul { margin: 0; /* Обнуляем значение отступов */ padding: 4px; /* Значение полей */ font-size: 18px; } #menu ul li { display: inline; /* Отображать как строчный элемент */ margin-right: 5px; /* Отступ слева */ padding: 3px; /* Поля вокруг текста */ }
Так как он прокомментирован, дополнительные объяснения вряд ли нужны. Остаётся обновить страницу и посмотреть, что список наконец-то стал горизонтальным.
Меню, конечно, можно сделать ровней и красивее, но к адаптации шаблона отношения это действо не имеет, зато крепко связано с CSS, который вы можете подробно изучить.
Завершаем «шапку»
Единственные элементы файла header.php , оставшиеся статическими - имя и описание сайта. Чтобы они брались из настроек, задаваемых в админ-панели, замените отвечающий за вывод текста в шапке код на следующие строки:
Обновите страницу - результат не заставил себя долго ждать.
Работа с файлом header.php на этом завершена, в итоге он имеет следующий код:
>
"> "> " type="text/css" media="screen" />Выводим посты
Переходим к части, содержащей основной контент страницы - редактироваться будет файл index.php .
Удалите содержимое блока right и вместо него вставьте код динамического отображения постов. Либо же удалите из файла весь код и вместо него вставьте следующее:
">
/ /А здесь нет ничего:(404
Начало цикла, благодаря которому страница будет выводить посты, пока они не закончатся.
">
Отображает заголовок поста.
/ /
Дата в формате день, месяц (сокращённо), год. Теги, комментарии.
Вывод поста.
Конец цикла при условии, что записи были.
Если же материалов нет, вывести об этом соответствующую надпись и покинуть цикл.
Вывод постраничной навигации при условии, что на одной они не помещаются.
Простой с виду код глобально изменил страницу - блог стал по-настоящему динамическим. Каждый пост можно посмотреть, ссылки работают.
Дальнейшее оформление и размещение элементов зависит только от вашей фантазии и навыков вёрстки - с отображением данных можно делать всё, что угодно, но работа над шаблоном ещё не завершена.
Добавляем виджеты
Слева от основного контента в шаблоне есть панель, на ней - блок Информация (своего рода виджет) и боковое меню. Информационный блок не должен быть статичен, а так как он очень напоминает виджет, предлагаю виджетом его и сделать. Для этого необходимо:
- зарегистрировать блок виджетов;
- вывести его в нужном месте.
Теперь подробнее.
1. В каталоге темы создайте файл functions.php. В нём хранятся функции, обеспечивающие работу шаблона. Также он может содержать и другие пользовательские процедуры.
2. Внесите в следующий код:
"MySidebar", "before_widget" => "", "after_widget" => "", "before_title" => "
", "after_title" => "
",)); ?>Этот код регистрирует блок виджетов. Вместо MySidebar вы можете вписать любое другое название. Примерно такой же функцией в этом файле можно регистрировать и меню, но я решил обойтись малой кровью и этого не делать, чтобы соприкосновение с PHP сделать минимальным, а заодно и показать два разных подхода к решению одной задачи.
3. В файле sidebar.php сотрите строки:
Информация
Далее...
и вместо них запишите:
Блок Информация ожидаемо исчез, сбоку осталось только пока ещё статическое меню.
4. Зато перемены к лучшему произошли в админ-панели - раздел Внешний вид обзавёлся подпунктами Виджеты и Меню . Перейдите в первый. Откройте его и посмотрите: внутри появился зарегистрированный в файле functions.php блок (у меня это MySidebar).
5. Чтобы воссоздать информационный блок, перетащите на сайдбар виджет Текст , в поле Заголовок введите Информация , в поле Текст - код
Мы предлагаем Вам праздничные скидки. Далее...
6. Обновите страницу блога - блок удалось воссоздать практически один в один (мелкие нюансы меняются в файле style.css и заострять на них внимание я не буду).
Адаптируем меню
Вторая часть боковой панели - вертикальное меню. Его тоже нужно переделать из статического в динамическое, чтобы редактировать затем прямо из админки.
1. Удалите огромный вложенный список меню в файле sidebar.php и вместо него введите код:
2. В панели управления WordPress откройте Внешний вид -> Настроить -> Меню , нажмите кнопку Добавить меню, назовите его так, чтобы имя в админ-панели совпадало с именем в коде страницы sidebar.php (у меня это left_menu ) и добавьте все необходимые пункты.
3. Сохраните изменения, обновите страницу и убедитесь, что динамическое меню левой части сайта работает и отображается правильно.
Код страницы sidebar.php по сравнению с исходным сильно уменьшился и в итоге стал таким:
Меню
Фактически статичной осталась только надпись Меню . И то потому, что меняться вряд ли будет, хотя и её легко можно «оживить», например, реализовав этот блок в виде ещё одной области виджетов и добавив на него блок Произвольное меню, но это, если внимательно читали статью, вы можете теперь легко сделать самостоятельно.
Работаем с файлом footer.php
Здравствуйте, уважаемые читатели! Сегодня я решил затронуть очень важный вопрос алгоритма действий WP при взаимодействии с шаблонами. Это актуально, поскольку понимание нюансов работы движка с файлами, отвечающими за составные части , позволит быстро и корректно производить необходимые изменения.
В будущем неоднократно придется редактировать уже имеющуюся или создавать новую страницу на своем блоге либо веб-сайте, я вас уверяю. Даже если вы успешно установите ту или иную тему, абсолютно нельзя гарантировать, что вас все устроит. И если вдруг сразу будете всем довольны, с течением времени все равно захочется что-то подправить или кардинально изменить.
В конце концов, знания никогда не бывают лишними, они позволят сэкономить не только драгоценное время, но и ваши деньги, поскольку самое необходимое, экстренное и требующее оперативного вмешательства вы сможете делать сами, а не обращаться за каждой мелочью к специалистам.
Как установить тему и редактировать шаблоны WordPress
Если вы перейдете по ссылке, данной в самом начале настоящей публикации, то узнаете, как активировать имеющиеся по умолчанию темы в , а также каким образом их загружать со сторонних ресурсов и устанавливать через ту же административную панель.
Однако, если вы желаете постигнуть всю суть работы с сайтом и получить дополнительные знания, то стоит попробовать загрузить и установить для начала тему с помощью какого-нибудь ФТП клиента (я, например, использую ).
Это программа позволяет производить любые действия с файлами, расположенными как на локальном компьютере, так и на удаленном сервере хостинга ( и читайте о том, что это такое и как приобрести место для своего проекта), где "живет" ваш сайт.
Я давал уже свои рекомендации, откуда лучше выбирать бесплатные и платные темы (в том же материале, ссылка на который представлена в начале статьи). Вкратце отмечу, что скачивать желательно с официальных сайтов, например, отсюда или отсюда . Сначала скачайте тему на компьютер, а затем проделайте следующие действия:
- Распакуйте архив, кликнув по нему правой кнопкой мыши и выбрав соответствующую операцию;
- Получив доступ по FTP к файлам вашего сайта, загрузите папку, полученную после разархивирования, на хостинг в директорию (папку) themes
В принципе, после этого тема WordPress установлена. Для того, чтобы подключить оформление к своему сайту, требуется лишь активировать ее в панели управления. В дальнейшем редактировать файлы шаблонов страниц можно будет через ту же админ панель, пройдя в раздел «Внешний вид» - «Редактор» :
Там с правой стороны дан список всех шаблонов, входящих в состав данной темы. В дальнейшем при необходимости вы можете пользоваться этим редактором для изменения вида страниц вашего сайта. Но! Я изначально не советую применять этот инструмент, особенно новичкам, потому что в случае какой-нибудь ошибки вы с легкостью "положите" свой сайт, после чего на поиски причины можете потратить кучу времени и нервов.
Гораздо удобнее с этой точки зрения , которая также устанавливает соединение по FTP, имеет подсветку синтаксиса, а в случае сделанной вами ошибки позволяет возвращать исходное содержание файлов на несколько шагов. Впрочем, оцените сами. Вот вид вебстраницы в разделе редактора шаблонов админки Вордпресс:
А вот какой интерфейс для редактирования предлагает Нотпад плюс плюс:
Как видите, разница очевидна и даже при беглом сравнении сторонний редактор выигрывает с подавляющим преимуществом. Ну а когда вы попробуете весь функционал Notepad++, все оставшиеся сомнения развеются окончательно.
И еще. Редактирование шаблонов WordPress я советую осуществлять на локальном сервере, то бишь на своем компьютере (здесь Денвер, а еще лучше, Open Server вам в помощь). Сделали все нужные изменения, протестировали, а затем уже заливаете файлы на хостинг. Эксперименты с "живым" сайтом могут дорого стоить.
Файловая структура шаблонов страниц
Теперь разберем, какие файлы и шаблоны могут входить в состав загруженной темы, задача которых определять лицо вашего проекта, то есть вид всех его страниц, отображаемых в браузере. После установки темы вы получите путь до ее директории:
Ваш_сайт/wp-content/themes/название_вашей_темы
Для моего блога в папку с одной из установленных тем этот путь выглядит так:
Сайт/wp-content/themes/country
При просмотре в окне редактора Нотпад++ папка со всеми файлами вашей темы WordPress будет выглядеть следующим образом:
В структуру входят файлы с расширением.php, среди которых можно выделить именно шаблоны, призванные отображать целые страницы , которые являются основными, то есть присутствуют практически в любой теме, такие как главная (index.php), страница записей (single.php), статические страницы (page.php).
Однако существуют шаблоны, которые отвечают за вывод специально созданной вебстраницы. Например, на моем блоге одно время существовала на странице , с целью ее установки был создан файл mail.php.
Кроме того, есть шаблоны, которые нужны для конструирования отдельных частей, отображаемых на всех страницах сайта. Это шапка, или хидер (header.php), левая и/или правая колонка, иначе сайдбар (sidebar.php), подвал, или футер (footer.php). Схематически такую конструкцию с областями страницы можно представить так:
Как видно из скриншота, если шапка, сайдбар, подвал на любой странице будут выглядеть одинаково, то будет зависеть от типа вебстраницы, который и будет определяться соответствующим файлом с расширением.php.
На современном этапе движок WordPress позволяет добиться отображения разного содержания футера, хидера и сайдбара на главной, статической и страницах записей, а некоторые современные темы позволяют настроить это через админку.
Иерархия шаблонов WordPress и последовательность вывода страниц
Я же попробую кратко пробежаться по пунктам и объяснить, в какой последовательности выводит ту или иную вебстраницу WordPress, учитывая ее место в иерархической шкале приоритетов.
Дело в том, что в каждой теме изначально существует свой набор файлов, некоторые из распространенных могут отсутствовать . Например, может не быть шаблона category.php, который отвечает за вывод рубрик (категорий). В этом случае WordPress взаимодействует с файлом index.php и оформление страницы с категориями будет абсолютно тождественным с главной.
Начнем с домашней вебстраницы. Приоритет здесь отдан Home . То есть последовательность, с которой Вордпресс будет взаимодействовать с шаблоном, следующая: сначала происходит запрос Home, если его нет, то WordPress обращается к основному шаблону Index :
- Home (главный приоритет);
- Index.
Если конструируется отдельная статья блога, шаблоном которой по умолчанию является Single , то последовательность обращения будет такой:
- Single-{post_type}. Скажем, если в конкретном случае тип записи product, то WP будет обращаться к шаблону single-product.php;
- Single;
- Index.
Для статической страницы Page иерархия следующая:
- Custom template (пользовательский шаблон, который создан специально для конкретной вебстраницы);
- Page-{slug}. Здесь slug - короткое название (псевдоним) страницы. Например, если в составе темы присутствует файл с названием page-recent-news, то WP обратиться к нему;
- Page-{id}. Если вебстраница отождествляется по конкретному идентификатору (id) 12, то именно она будет следующей по иерархии, ежели отсутствуют указанные выше;
- Page;
- Index.
Чтобы вывести страницу рубрик, Вордпресс предпримет поиск специального файла, затем будет искать по id. Если таких шаблонов не существует, то преимущество получит общий шаблон Category , далее по убывающей Archive и Index:
- Category-{slug};
- Category-{id};
- Category;
- Archive (архив);
- Index.
Аналогичная картина вырисовывается и для тега (метки). В первую очередь специальный шаблон, далее на основе id, после чего Tag , Archive и Index:
- Tag-{slug};
- Tag-{id};
- Archive;
- Index.
- Author;
- Archive;
- Index.
Продолжаем, осталось немного. Существует возможность наличия страницы временного архива Date . В этом случае WP после неудачи будет искать Archive, после него Index:
- Date;
- Archive;
- Index.
На подавляющем большинстве ресурсов используется страница поиска, которая определяется шаблоном Search . В случае его отсутствия - файл основного шаблона Index:
- Search;
- Index.
- Index.
Наконец, вполне может оказаться, что в установленной вами теме предусмотрена отдельная вебстраница для отображения продуктов различных приложений (видео, аудио, изображения). В этом случае иерархия шаблонов следующая:
- Image, video, audio;
- Application;
- Attachment;
- Index.
На сегодня это все. Данный пост может стать отправной точкой для понимания принципа работы Вордпресс и основой для последующих статей на эту тему. Поэтому милости прошу подписываться на свежие публикации , которые обещают быть весьма интересными и познавательными. Ну и в заключение, как водится, видео:
14.08.2012
admin
Мне нравится ковыряться в различных wordpress premium темах вордпресса. Какое-то время назад я рассказывал о , с которой фактически и началось мое углубленное изучение шаблонов wordpress премиум класса.
На самом деле мое первое знакомство с premium темами началось еще с Duotive Three шаблона, у автора которого были ролики по работе с данным шаблоном. Так как я взялся за непростую задачу сделать красивый интернет-магазин на вордпрессе с возможностью переключения на 2 языках, мне было сложно с этим всем возиться. Пришлось потратить кучу нервов. В итоге я сделал что-то типа недоделанного магазина часов, который у меня вышел не так как я хотел. К сожалению сайт не сохранился. Хотя другие говорили, что им понравилось.
Что такое вордпресс премиум тема
Если кто не знает, что такое wordpress premium theme, то в двух словах можно сказать так. Это многофункциональный красивый шаблон для CMS wordpress, позволяющий настраивать многоразличный вид главной и других страниц сайта. Большая особенность данных шаблонов это наличие очень красивых слайдов на главной странице. Огромный недостаток данных тем это отсутствие русской технической техподдержки. Поэтому, все технические моменты работы с шаблонами приходится выяснять на английском языке у разработчиков тем. Конечно в Рунете можно найти какие-то мануалы, описание различных настроек. Но для более глубоких настроек требуется знания более продвинутого уровня. Поэтому приходится многие вещи узнавать экспериментальным путем, либо на специальных англоязычных форумах типа themeforest.net.
В этой статье я б хотел дать пару советов по поводу создания сайтов на шаблонах класса премиум. Какой бы вы сайт не делали, для заработка на трафике или продажи ссылок, вам стоит знать про некоторые особенности premium тем. По поводу заработка на ссылках, есть специальные сервисы типа как Тиц поднять. Сервис, которые могут прогнать ваш сайт по различным жирным сайтам, повысив при этом ТИЦ. Но я б советовал вам быть осторожным к подобным предложениям, так как большинство из них не могут дать нужного эффекта в сегодняшних реалиях.
Как установить premium шаблон для wordpress видео
Что вы должны знать про wordpress premium шаблоны
- Кодировка UTF-8 Unicode. Если вы видите у себя в админке или на сайте проблемы с кириллицей, а именно у вас отображаются такие????????? символы. Тогда вам нужно сохранить базу, которая в phpAdmin в кодировку UTF-9 Unicode.
- Шорткоды (shortcodes). Научитесь работать с шорткодами, иначе не имеет смысла ставить премиум шаблон. Эти специальные коды, которые можно найти в инструкциях каждого шаблона. С помощью них можно размещать в разных местах различные элементы сайта. В некоторых темах можно увидеть реальные примеры работы шорткодов в Live preview шаблона.
- Читайте руководство к theme. Прежде чем ставить премиум тему внимательно посмотрите инструкцию которая находится в таких папках как Documents. Как правило, беглого знания английского языка будет достаточно, так как в основном все эти руководства содержат понятливые рисунки или видео. Обратите внимания, что в инструкциях могут быть данные такие указания как поставить определенные права на папку, загрузить дополнительные плагины и т. п.
- Проблемы с картинками. Пожалуй самая глобальная проблема, которая возникает у вебмастеров, это настройка слайдов на главной странице, а также некоторые глюки с картинками. Если какая-то картинка у вас не загружается, убедитесь, что на папке, в которую вы загружаете, выставлены верные атрибуты. Типа 777 и т. п. Выставите атрибуты (права) 777 папке cache, которая находится в includes в папке шаблона. Также важно, чтобы у вас были фото правильного размера.
- Виджеты. Многие не знают, что в виджеты темы можно размещать не только html обычный код, но и нужные вам шорткоды.
- Шрифты. Первое, что шокирует людей, когда они ставят premium шаблон, это отсутствие русских надписей на сайте. Все дело в , который не очень дружит с кириллицей, поэтому необходимо отключить отображение cufon шрифта в админке темы. Или загрузить новый. А для этого вам придется или где-то скачать или сделать самому шрифт cufon, который был бы совместим с русскими символами. Загружаются шрифты в папку fonts. Но этого недостаточно, так как нужно еще прописать путь к загруженному шрифту в определенных файлах темы. Также не забывайте менять размер шрифта, именно из-за этого у многих получается кривое меню и другие надписи.
- Sidebar. Очень часто в опциях премиум темы можно встретить пункт «sidebar», который для многих не ясен. Сайдбар это правая или левая боковая колонка. С помощью собственного сайдбара вы можете сделать так, что на одних страницах по боках будет одно, на других — другое. Когда вы создадите собственный sidebar, он появится у вас виде дополнительного виджета, в который вы сможете перенести: последние записи, список ссылок, html код и т. п.
По поводу того, где можно достать premium шаблоны. Конечно все они платные, при чем в плату входит тех обслуживание. К примеру, тех поддержка от разработчика шаблона Duotive включает в себя не только ответы на вопросы, но и сама работа от автора. То есть вам буквально настроят шаблон. Также вы будете иметь доступ к обновлениям шаблона, что немаловажно.
Некоторые wordpress premium шаблоны все-таки можно скачать в интернете, которые выкладывают добрые люди. Ведь не у всех есть деньги на покупку таких дорогих тем. Поэтому желательно найти наиболее свежую версию шаблона.
Пожалуй это все, что я хотел сказать относительно работы с вордпресс темами премиум класса. Надеюсь данные небольшие советы помогут вам создать симпатичный сайт.