Как сделать шаблон для wordpress


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

Как создать уникальный шаблон для wordpress-начинаем

Ниже приведу список действий как создать уникальный шаблон для wordpress своими руками и бесплатно.

  1. Сменить картинки.
  2. Изменить название шаблона.
  3. Сделать мелкие правки в стилях.

Начнём разбор каждого пункта по порядку.

Меняем картинки

Самый простой момент, разберу на примере шаблона twenty eleven. Заменяем стоковые изображения на свои переделанные. Надо менять в шапке, подвале, фон и остальные мелкие.

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

  • Первый через саму админку.
  • Второй через код.

Если принцип поймёте, то вам большой респект.

Через саму административную панель

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

настройка темы

Если тема сделана для людей, то глобальные настройки дизайна будут здесь, а с мелочами разберёмся ниже. В разделе покау на примере Twenty eleven.

кастомайзер

  1. Общие цвета темы. Настройки основных элементов (заголовков, надписей и тому подобного).
  2. Изображение заголовка, то есть в шапке.
  3. Фоновое изображение. Присутствует не на всех темах, можно настроить как картинкой, так и просто цветом.

На этом этапе вот что у меня получилось. Едем дальше.отредактированный шаблон 1 этап

Меняем картинки вручную

Предположим картинка какого-то элемента в шаблоне вас не устраивает, и вам хочется её поменять. Что же делать?  Будем разбираться. Для примера я возьму вывод картинки количества комментаторов.


меняем мелкие элементы

Система действует для всех тем.

Нажимаем правой кнопкой мыши на элементе и ищем его вывод в коде, с помощью инструмента «просмотреть код».

узнаем стиль

  1. Сам элемент, нажимаем на нём правой кнопкой мыши.
  2. Выбираем пункт «просмотреть код».
  3. Это сам код вывод HTML, на него внимания не обращаем.
  4. Вот тот заветный адрес, куда надо идти с заменой. Искомый файл bubble.png, находящийся в папке images в самой теме.

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

Сделано, я открыл файлзиллу, и зашёл в активную тему twenty eleven в папку images (которую узнали выше). и простым перетаскиванием нового изображения вставляем в папку, с заменой. Все подробности на скриншоте.


замена изображения через filezilla

Если все сделано хорошо, то новая картинка отобразиться на сайте, вот снимок.измененная иконка

Как понимаете, то таким методом можно сменить любую картинку, если нет настроек в административной панели.

Изменяем название шаблона

Менять можно только на бесплатных темах, это важно.

Есть два пункта и их надо сделать:

  • Переделываем название в файле style.css
  • Меняем название папки с темой.

Переделываем названия в style.css

Для этого заходим в редактор (напоминаю внешний вид-редактор), и находим style.css.


описание темы style.css

На cкрине видим надпись, тут все надо изменить. В начале любого файла style.css в самом начале содержится информация о шаблоне. Её и надо изменить как минимум на эти строки.

  Theme Name: moi-shablon  Description: Standard version 1.0  Author: lifanow Walentin  Author URI: https://wpsovet.ru  Tags: light.  License: GPL  

Должно получиться так, после замены.

Вы прописывайте свои данные, мои не берите, потому что шаблон делаем уникальным. Смените как минимум имя, автора и сайт.

новое описание темы

Разобрались, переходим к следующему пункту.

Меняем название папки с темой

Делаем через файловый менеджер, у меня Filezilla. В предыдущем пункте меняли имя темы в строчке:

Theme Name: moi-shablon

Надо оригинальное имя twentyeleven изменить на новое, в моём случае, moi-shablon. Идём в FileZilla папку themes, и находим исходное название twentyeleven.


переименовываем старое название темы на новое

И меняем его на новое.

новое названиеЕсли всё было сделано правильно, то заработает. Тема для поисковиков будет уже не стандартная, а уникальная.

wpsovet.ru

Распределяем код по файлам

1. Скачайте шаблон и распакуйте его в папку с темами WordPress (адрес вида адрес_блога_wordpress/wp-content/themes/). Если хотите, переименуйте папку с темой на свой вкус. Например, у меня шаблон располагается по адресу адрес_блога_wordpress/wp-content/themes/MyTheme/.

2. Переименуйте файл styles.css в style.css.

3. Откройте style.css в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:

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


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 и замените содержащийся в нём код до блока

на следующий:

Мы сделали динамическим блок

— код вызывает функцию, возвращающую языковые атрибуты в контейнер.

— вместо того, чтобы прописывать кодировку константой, мы вызвали функцию, которая берёт значение из настроек CMS и автоматически подставляет его в код, то есть для смены кодировки уже не придётся править файл темы.

— важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.

2. Перейдите к редактированию файла index.php. В самом его начале пропишите

в конце —

Строчки вызывают файлы шапки, боковой панели и низа сайта.

Теперь вы можете просмотреть или даже активировать MyTheme. В результате браузер отобразит уже знакомый шаблон со статическим меню и одной-единственной страницей. Чтобы меню стало динамическим и настраиваемым, а вместо одной страницы отображались все помещённые на сайт материалы, нужно преобразовывать шаблон дальше.

Делаем динамическим верхнее меню

Пока мы имеем полностью статическую тему оформления, в том числе и с неизменным горизонтальным верхним меню. Пока его нельзя настроить из админ-панели, и если оставить код в нынешнем виде, то для вставки/удаления/переноса пунктов придётся каждый раз редактировать файл header.php, что крайне неудобно.


Чтобы не мудрствовать лукаво и не погружаться в пучину увлекательного мира программирования, зададим динамическому меню статичное название. Вместо таблицы горизонтального меню вставьте код

так, чтобы получилось следующее:

Для того, чтобы меню стало отображаться, в панели управления сайтом откройте Внешний вид -> Настроить -> Меню и либо переименуйте уже созданное меню в menu, либо создайте меню и настройте его на своё усмотрение, но обязательно присвойте ему имя menu.

Суть действий в том, что файл header.php функцией wp_nav_menu(‘menu=menu’); открывает меню под названием menu, которое, чтобы отобразиться, должно быть правильно названо и настроено в панели администрирования WordPress. Название menu вы можете поменять на любое другое, главное, чтобы имя совпадало и в настройках сайта, и в коде header.php.

Теперь обновите страницу и оцените результат.

Навигация явно куда-то съезжает, хоть и делает это красивой лесенкой. Так происходит потому, что меню нашего шаблона было неосмотрительно реализовано внутри таблицы, а надо было оформлять его списком. Частично исправить ситуацию можно, добавив в файл style.css следующий код:

Так как он прокомментирован, дополнительные объяснения вряд ли нужны. Остаётся обновить страницу и посмотреть, что список наконец-то стал горизонтальным.

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

Завершаем «шапку»


Единственные элементы файла header.php, оставшиеся статическими — имя и описание сайта. Чтобы они брались из настроек, задаваемых в админ-панели, замените отвечающий за вывод текста в шапке код на следующие строки:

Обновите страницу — результат не заставил себя долго ждать.

Работа с файлом header.php на этом завершена, в итоге он имеет следующий код:

Выводим посты

Переходим к части, содержащей основной контент страницы — редактироваться будет файл index.php.

Удалите содержимое блока right и вместо него вставьте код динамического отображения постов. Либо же удалите из файла весь код и вместо него вставьте следующее:

— начало цикла, благодаря которому страница будет выводить посты, пока они не закончатся.

— отображает заголовок поста.

— дата в формате день, месяц (сокращённо), год. Теги, комментарии.

— вывод поста.

— конец цикла при условии, что записи были.

— если же материалов нет, вывести об этом соответствующую надпись и покинуть цикл.

— вывод постраничной навигации при условии, что на одной они не помещаются.

Простой с виду код глобально изменил страницу — блог стал по-настоящему динамическим. Каждый пост можно посмотреть, ссылки работают.

Дальнейшее оформление и размещение элементов зависит только от вашей фантазии и навыков вёрстки — с отображением данных можно делать всё, что угодно, но работа над шаблоном ещё не завершена.


Добавляем виджеты

Слева от основного контента в шаблоне есть панель, на ней — блок Информация (своего рода виджет) и боковое меню. Информационный блок не должен быть статичен, а так как он очень напоминает виджет, предлагаю виджетом его и сделать. Для этого необходимо:

  1. зарегистрировать блок виджетов;
  2. вывести его в нужном месте.

Теперь подробнее.

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

2. Внесите в следующий код:

Этот код регистрирует блок виджетов. Вместо 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

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

1. Откройте файл function.php и перед дескриптором ?> вставьте такой код:

Тем самым вы регистрируете блок виджетов с именем foot, которое как бы намекает на его расположение.

2. В файле footer.php весь код внутри контейнера footer замените одной строкой:

Она выводит зарегистрированный в файле functions.php блок foot.

3. Перейдите в админ-панель WordPress, откройте страницу настройки виджетов, перетащите в область foot блок Текст, в поле Текст: введите что угодно, например, нижеследующее.

Поле Заголовок можно оставить пустым.

4. Не забудьте сохранить изменения и оцените результат: идентичный статическому шаблону низ сайта, реализованный виджетом.

Да и весь шаблон в целом стал полностью динамическим, сохранив при этом свой прежний внешний вид. Таким образом и верстаются шаблоны под WordPress. И если вы когда-нибудь услышите фразу «Натянуть шаблон на WordPress», знайте: вы это уже делали — описанные в статье действия простым языком называются именно так. Конечно, в работе с темами WordPress и тем более в их адаптации есть уйма тонкостей, но общий принцип построения и вёрстки остаётся неизменным.

www.seostop.ru

Почему бы не использовать разные шаблоны страниц?

В темах WordPress обычно используется шаблон page.php, который определяет стиль всех страниц сайта. Большинство разработчиков тем создают шаблон начальной страницы по такому же принципу. В этом шаблоне отображается контент страницы и по умолчанию определяется, какие элементы дизайна будут на ней присутствовать (например, шапка, сайдбар, футер, прочее).

По умолчанию шаблон страницы (page.php) настроен таким образом, что весь необходимый контент отображается на странице.

Создание уникального шаблона страницы позволяет выйти за рамки стандартов WordPress и изменить отображение содержимого на сайте на свое усмотрение. Например, вы могли бы изменить дизайн страниц, удалив сайдбар. Также можно изменить привычный шрифт и использовать другую шапку, а не ту, которую предлагает домашняя страница.

Наиболее известный пользовательский шаблон страницы — это Archive (шаблон архивной страницы archive.php). Он есть во многих темах WordPress и содержит весь контент сайта, который разделен на страницы, категории, тэги, даты архивов, авторские архивы.

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

Как создать свой шаблон страницы для сайта на WordPress» />

В темах можно найти и другие типы шаблонов страниц, как например:

  • Контактную форму
  • Страницы без сайдбара (боковой панели)
  • Лендинговую страницу (посадочную страницу)
  • Индекс блога

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

Как выбрать шаблон для страницы?

Добавить шаблон для страницы очень просто. В редакторе страницы справа вы увидите окошко (виджет) под названием «Атрибуты страницы». Оно размещено под окошком «Опубликовать».

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

Как создать свой шаблон страницы для сайта на WordPress» />

Шаблон также можно изменить другим способом — через список всех страниц. Нужно только нажать на «Свойства».

Как создать свой шаблон страницы для сайта на WordPress» />

Затем изменить шаблон в опциях меню справа.

Как создать свой шаблон страницы для сайта на WordPress» />

Опции шаблона не будут отображаться, если в вашей теме используется только стандартный шаблон страницы.

Создаем базовый шаблон страницы для сайта

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

Нужно только использовать код page.php уже существующего шаблона темы в качестве основы для нового шаблона страницы. К примеру, вы используете старую стандартную тему Twenty Twelve. Файл page.php имеет следующий код:

<?php  /**   * The template for displaying all pages   *   * This is the template that displays all pages by default.   * Please note that this is the WordPress construct of pages   * and that other 'pages' on your WordPress site will use a   * different template.   *   * @package WordPress   * @subpackage Twenty_Twelve   * @since Twenty Twelve 1.0   */     get_header(); ?>      <div id="primary" class="site-content">   <div id="content" role="main">      <?php while ( have_posts() ) : the_post(); ?>   <?php get_template_part( 'content', 'page' ); ?>   <?php comments_template( '', true ); ?>   <?php endwhile; // end of the loop. ?>      </div><!-- #content -->   </div><!-- #primary -->     <?php get_sidebar(); ?>  <?php get_footer(); ?>  

Можно использовать этот код для создания шаблона новой страницы. Для этого нужно только убедиться, что комментарий к коду размещен вверху нового файла. Это определит данный файл как шаблон страницы:

/*  Template Name: My Custom Page Template  */  

Шаблон вашей страницы будет выглядеть следующим образом:

<?php  /*  Template Name: My Custom Page Template  */     Далее идет код шаблона страницы  

Давайте рассмотрим процесс создания базового шаблона страницы и попробуем создать шаблон страницы в полную ширину без использования сайдбара. Тема Twenty Twelve изначально включает в себя шаблон в полную ширину, но мы сделаем вид, что это не так, потому что нам это нужно для нашего обучения.

В стандартном шаблоне сайдбар страницы отображается с правой стороны:

Как создать свой шаблон страницы для сайта на WordPress» />

Стандартный шаблон страницы в теме Twenty Twelve

Создать шаблон новой страницы без сайдбара просто.

Для начала нужно создать новый файл, используя любой текстовый редактор (Блокнот или Notepad++ подойдет). Его можно назвать как-то по-простому, например, nosidebar-page.php или full-page.php (о названиях файлов поговорим немного позже). Затем загрузите файл на ваш сайт таким образом, чтобы он находился рядом с файлом page.php.

По сути, наш шаблон — это шаблон от page.php темы Twenty Twelve, только с удаленным кодом <?php get_sidebar(); ?>.

Он выглядит так:

<?php  /*  Template Name: Full Width Page with No Sidebar  */     get_header(); ?>      <div id="primary" class="site-content">   <div id="content" role="main">      <?php while ( have_posts() ) : the_post(); ?>   <?php get_template_part( 'content', 'page' ); ?>   <?php comments_template( '', true ); ?>   <?php endwhile; // end of the loop. ?>      </div><!-- #content -->   </div><!-- #primary -->     <?php get_footer(); ?>  

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

Как создать свой шаблон страницы для сайта на WordPress» />

Но это еще не все. Пока мы только удалили сайдбар. Нам нужно сделать так, чтоб контент размещался по всей ширине страницы. А пока он занимает только две третьих страницы:

Как создать свой шаблон страницы для сайта на WordPress» />

Если вы посмотрите на код нашего шаблона, то увидите, что основная часть контента находится под действием определенного класса CSS:

<div id="primary" class="site-content">  

За стиль основной части контента отвечает вторая часть class=»site-content». Если проверить файл стилей (style.css) темы, то можно заметить, что этот класс находится почти в самом низу:

.site-content {   float: left;   width: 65.104166667%;   }  

Для того чтобы расширить контент на всю страницу, нам нужно изменить ширину области контента с 65% на 100%. Но не нужно изменять класс контента сайта, т.к. он по-прежнему используется в других шаблонах, как например, стандартная страница page.php и шаблон записей single.php. Изменение цифры процента для контента сайта повлияет на все записи и страницы на вашем сайте, которые занимают всю ширину страницы.

Поэтому нам нужно создать новый класс, который употребляется специально для страниц с полной шириной:

.site-content-fullwidth {   float: left;   width: 100%;   }  

После обновления файла style.css с вышеуказанным классом нам нужно изменить наш шаблон с полной шириной страницы и быть уверенными, что мы создали ссылку на класс CSS с шириной в 100%:

<div id="primary" class="site-content-fullwidth">  

Наш финальный шаблон будет выглядеть так:

<?php  /*  Template Name: Full Width Page with No Sidebar  */     get_header(); ?>      <div id="primary" class="site-content-fullwidth">   <div id="content" role="main">      <?php while ( have_posts() ) : the_post(); ?>   <?php get_template_part( 'content', 'page' ); ?>   <?php comments_template( '', true ); ?>   <?php endwhile; // end of the loop. ?>      </div><!-- #content -->   </div><!-- #primary -->     <?php get_footer(); ?>  

Этот обновленный шаблон подтверждает, что контент на нашем сайте будет отображаться на всю страницу:

Как создать свой шаблон страницы для сайта на WordPress» />

Теперь контент на сайте отображается по всей странице

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

Как называть шаблоны страниц

Согласно WordPress Template Hierarchy, WordPress отображает шаблоны для страницы в следующем порядке:

  • Пользовательский шаблон (Custom Template)
  • page-{slug}.php
  • page-{id}.php
  • page.php
  • index.php

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

Этот порядок означает, что на WordPress всегда будет отображаться шаблон для страницы, если он был прикреплен к ней. Если к странице не был добавлен ни один из шаблонов, то WordPress будет искать page-{slug}.php.

Если шаблон page-{slug}.php не найден, WordPress ищет шаблон по ID страницы. К примеру, если ID страницы = 15, то WordPress будет искать шаблон страницы с названием 15.php.

Если шаблон не привязан к странице и нет совпадений с ID страницы, то WordPress ищет по стандартному шаблону страницы page.php. И если страницы шаблона page.php не существует, то для поиска используется index.php.

Многие разработчики называют свои шаблоны тем, используя формат page-name.php. К примеру, шаблон страницы контактов называют page-contact.php. По большому счету вы можете давать шаблонам названия на свое усмотрение и использовать любые конфигурации, будь то page-name.php, name-page.php или name.php. В любом случае, в будущем вы сможете эти названия изменить.

hostenko.com

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

Структура нашей темы должна выглядеть таким образом:

Этого набора файлов достаточно для, полноценной работы сайта на cms wordpress.

Давайте по порядку начнем создание темы, и первое, что нужно сделать, это завести в папке wp-contentthemes каталог с именем новой темы. Далее вы можете сразу создать вышеприведенные файлы, либо по ходу статьи проделать это в процессе.

Отображение шаблона в панели администрирования (Шаг 1)

Чтобы, наша тема была доступна для выбора из панели администрирования сайта, в разделе "Внешний вид", нужно создать файл style.css в котором первыми строками вставить информацию о шаблоне:

Необязательно, но для целостности картины лучше создать файл screenshot.png, чтобы шаблон отражался в админке максимально информативным. Как вы уже догадались из названия, файл этот является фотографией внешнего вида темы.

Кроме созданных style.css и screenshot.png, нужно создать еще пустой index.php, и после этого можно будет активировать разрабатываемый шаблон, чтобы в дальнейшем наблюдать все наши изменения непосредственно на самом сайте.

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

Главная страница сайта (Шаг 2)

Созданный в первом шаге файл index.php отвечает за внешний вид всех страниц сайта, поэтому в нем нам нужно разместить все элементы верстки макета. Почитайте мою статью Как сверстать сайт по макету, если нуждаетесь в помощи.

Давайте для начала перенесем полностью всю верстку в этот файл, а затем будем разделять её на части, и выносить в отдельные функциональные файлы шаблона.

К завершению этого этапа, в папке шаблона для wordpress, должна быть создана основа основ любой темы в виде таких файлов:

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

Cделаем элементы шаблона для wordpress (Шаг3)

После того как работа над версткой окончена, и файл index.php полностью укомплектован div’ами и другими тегами, нам потребуется разделить полученный html код на три части, и вынести их в отдельные файлы:

  1. header.php — все содержимое от первой строки до начала вывода контента;
  2. sidebar.php — все содержимое от начала до конца блока sidebar;
  3. footer.php — все содержимое от начала футера до конца файла;

В конечном итоге, у вас останется в index.php, только часть, в которой должен выводиться контент сайта (содержание страниц).

В моем примере index.php принял такой вид:

Комментариями выделены те места, на которых, располагались соответствующие части.

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

Выглядят они следующим образом:

  1. get_header();
  2. get_sidebar();
  3. get_footer();

Чтобы шаблон начал функционировать нужно в те места файла index.php, которые на данный момент закомментированы, вставить соответствующие по смыслу, приведенные выше php вставки, а на то место, в котором должен выводиться контент страницы вставьте следующий кусочек кода:

В данном коде реализован цикл loop присущий любой странице сайта отвечающей за вывод записей в шаблоне сделанном для wordpress.

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

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

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

Добавляем шаблон для страниц сайта (шаг 4)

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

С существующим рабочим index.php, реализовать задуманное будет проще простого. Все, что от нас требуется это создать определенные wordpress’ом файлы для отображения его элементов.

Сделаем следующие копии файла index.php:

  1. page.php – для вывода страниц wordpress’а;
  2. single.php – для вывода страницы с постом;
  3. archive.php – для вывода архива статей (посты по рубрикам, времени, автору и т.д);

Все эти файлы в той или иной степени унаследуют содержимое index.php и в дальнейшем будут видоизменены под каждый тип страниц индивидуально.

page.php – будет обрабатывать вывод статичных страниц, заведенных в WP. Если нам понадобится на всех страницах сайта (Не записях!) вывести например банер, или что-то другое, то редактировать нужно именно этот файл.

single.php – надо модифицировать для верного отображения страниц постов. В этот файл как правило добавляют социальные кнопки для голосования, функцию комментирования и многое другое. Для начала стоит немного изменить его содержимое, дополнив несколькими встроенными в wordpress функциями.

Чтобы вывести на каждой странице с постом, дату его публикации, теги и рубрику к которой он принадлежит, нужно модифицировать цикл Loop, примерно таким образом:

archive.php – предназначен для вывода списка постов, по тому или иному фильтру. Другими словами, данный файл будет обрабатывать вывод постов из отдельной рубрики, выод постов по автору, вывод постов по дате, и тому подобные классификации.

Чтобы заставить его это делать нужно, до цикла, loop включить в него код:

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

home.php – определяет шаблон для главной страницы сайта, если он присутствует в теме, то главная страница выводиться по нему.

Завершающий штрих для шаблона (шаг 5)

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

functions.php – предназначен для вставки пользовательских функций. На самом деле он является обязательным, но, тем не менее, ни один стоящий шаблон без этого файла не обойдется.

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

Кроме functions.php, неплохо создать еще и файл 404.php, он будет срабатывать в момент, когда сервер не сможет обнаружить запрашиваемую страницу. Он как и другие файлы будет похож по содержимому с index.php.

lifeexample.ru

Шаг 1. Структура темы для WordPress

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

  • index.php –  основной шаблон страницы;
  • style.css – файл стилей.

Это необходимый минимум для того, чтобы ваша тема работала. Но конечно же, кроме этих двух файлов, обычно есть и другие, такие как:

  • header.php, для вывода шапки всех страниц;
  • sidebar.php, для вывода боковой колонки;
  • footer.php, который выводит подвал сайта;
  • page.php, шаблон для статических страниц
  • single.php, шаблон для страниц записей;
  • archive.php, шаблон архивов и рубрик;
  • comments.php, шаблон комментариев;
  • functions.php, функции темы;
  • и другие…

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

Шаг 2. Структура страницы WordPress темы

Давайте посмотрим, из чего состоит папка с HTML-шаблоном, которую мы скачали. Там есть:

  • файл index.html, это главный файл верстки, если вы откроете его в браузере, то увидите, как будет выглядеть наша тема;
  • папка css, там лежат файлы стилей;
  • также могут быть папка images, с картинками;
  • и папка js, в которой содержатся скрипты.

Сейчас откройте index.html. Если удалить оттуда все “лишнее”, для простоты понимания, структуры, то получится примерно следующее:

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

Шаг 3. Создаем файлы темы

Настало время создать файлы для темы. Создадим новую папку, и следующие пустые файлы в ней:

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

В style.css добавим строки, которые помогут системе узнать, что это за тема:

Вместо Author и Author URI можете написать свое имя и сайт, а вместо Theme Name – название темы.

Обратите внимание, в нашем примере в файле style.css будет содержаться только базовая информация о теме, а сами стили будут находится в папке css и тех файлах стилей, которые есть в этой папке.

После этого нужно разнести содержимое index.html по разным файлам.

Вставьте все до тега <main class=”col-md-9″> не включительно в header.php. Это та часть, которая будет повторяться на каждой странице вверху, до записи или страницы:

Затем основное содержимое вставим в файл index.php:

Далее сделаем сайдбар sidebar.php:

И подвал footer.php

Шаг 4. Добавляем базовые функции

После этого, еще немного поработаем над файлом index.php. Как я уже говорила, это самый главный файл вашей темы. Именно в этот файл мы добавим функции для вывода на странице шапки, сайдбара и подвала. В самое начало файла вставьте функцию для вывода header.php:

И в самый конец – функции для вывода сайдбара и подвала:

Если вы взяли другой шаблон, то важно посмотреть, в каком порядке идут в index.html сайдбар и основное содержимое страницы. Возможно, get_sidebar() нужно будет вставить в начале файла, после get_header().

Также нужно внести некоторые изменения в header.php. Давайте пропишем через echo get_template_directory_uri() путь ко всем используемым скриптам и стилям:

Потом, когда наша тема будет готова, нужно будет заменить путь к стилям бутстрапа на CDN, а пока что я их закоментировала.

oriolo.ru

Введение

В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.

Добавление темы

Для начала в папке themes создадим папку нашего шаблона «whitesquare». В ней будет находиться папка images и два необходимых пустых файла index.php и style.css.

Как сделать шаблон для wordpress

Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.png.

После этого мы уже можем использовать нашу тему. Зайдите в панель администратора по адресу http://{site-name}/wp-admin, а затем в управление темами (Appearance -> Themes). В списке уже должна появиться наша тема whitesquare. Наведитесь на тему и нажмите «Activate».

Как сделать шаблон для wordpress

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

Предварительный осмотр

Как сделать шаблон для wordpress

Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также на всех страницах, кроме главной, есть сайдбар слева. Для того чтобы руководство было более универсальным, давайте страницы главного меню оформим как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями. Главную же страницу сделаем как отдельную страницу (front-page) с собственной разметкой. Здесь надо отметить, что, несмотря на то, что страницы WordPress могут быть реализованы двумя способами (как страницы или как посты) в базе данных они различаются только типом, однако при создании шаблонов они обрабатываются немного по-разному. В этом вы сможете убедиться чуть ниже.

Структура страниц

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

Давайте начнем со структуры страниц. Прежде чем добавлять страницы, нужно сначала зайти в настройки и указать стиль ссылок: Settings -> Permalink settings -> Post name. Это позволит сделать ссылки в виде «http://site_name/page_name».

Добавление страниц осуществляется через панель администратора: Pages -> Add new. Для каждой страницы в области Page Attributes в поле Order укажите цифрой порядок страницы в главном меню.

После добавления, список страниц должен выглядеть вот так:

Как сделать шаблон для wordpress

Когда все страницы будут добавлены, нужно указать, что страница Home будет главной. Для этого зайдите в меню Settings -> Reading и в поле Front page displays укажите: A static page -> Home.

Header.php и Footer.php

Шапка в терминологии WordPress, это не только визуальная шапка на макете сайта. По сути, она содержит весь общий код, который встречается в начале всех страниц сайта. Давайте создадим файл header.php в папке нашего шаблона и наполним его содержимым.

<!doctype html> <html> <head> 	<meta http-equiv="Content-type" content="text/html; charset=<?php bloginfo('charset'); ?>"> 	<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 	<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title> 	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> 	<?php wp_head(); ?> </head> <body <?php body_class(); ?>> 	<div class="wrapper"> 

Внутри тега head мы установили кодировку, указанную в WordPress, заголовок страницы и pingback (для связи с другими сайтами). В последней строке вызываем команду wp_head(), которая добавляет заголовки WordPress. Также открываем блок «wrapper».

Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:

function enqueue_styles() { 	wp_enqueue_style( 'whitesquare-style', get_stylesheet_uri()); 	wp_register_style('font-style', 'http://fonts.googleapis.com/css?family=Oswald:400,300'); 	wp_enqueue_style( 'font-style'); } add_action('wp_enqueue_scripts', 'enqueue_styles');  function enqueue_scripts () { 	wp_register_script('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js'); 	wp_enqueue_script('html5-shim'); } add_action('wp_enqueue_scripts', 'enqueue_scripts'); 

В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.

Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.

	</div> 	<footer></footer> 	<?php wp_footer(); ?> </body> </html> 

Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.

Шаблон страницы

Следующим шагом, нам нужно сделать шаблон обычной страницы WordPress.
Создайте в папке темы файл page.php и добавьте в него следующий код:

<?php get_header(); ?> <div class="main-heading"> 	<h1><?php the_title(); ?></h1> </div> <section> 	<?php if (have_posts()): while (have_posts()): the_post(); ?> 		<?php the_content(); ?> 	<?php endwhile; endif; ?> </section> <?php get_footer(); ?> 

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

Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.png и images /h1-bg.png. Далее добавьте немного базовых стилей в файл style.css:

В результате должна получиться вот такая картина:

Как сделать шаблон для wordpress

Логотип

Как сделать шаблон для wordpress

После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.png. В шаблон шапки, в файле header.php вставьте разметку для логотипа:

<div class="wrapper"> 	<header> 		<a href="/"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="Whitesquare logo"></a> 	</header> 

Форма поиска

Как сделать шаблон для wordpress

WordPress позволяет достаточно гибко сохранять блоки кода в отдельные файлы, а затем использовать их в нескольких разных местах. Рассмотрим пример на нашей форме поиска.
В папке темы создайте новый файл searchform.php и сохраните в него код формы поиска:

<form name="search" action="<?php echo home_url( '/' ) ?>" method="get" class="search-form"> 	<input type="text" value="<?php echo get_search_query() ?>" name="s" placeholder="<?php echo __('Search', 'whitesquare'); ?>" class="input"> 	<button type="submit" class="button"><?php echo __('GO', 'whitesquare'); ?></button> </form> 

А в файл стилей запишите стили для формы:

Всё, что осталось сделать – это подключить searchform.php внутри header.php.

<header> 	… 	<?php get_search_form(); ?>  </header> 

Навигация

Как сделать шаблон для wordpress

Добавить навигацию на страницу можно разными способами, например через функцию wp_list_pages, но более современным способом будет добавление через админку. По умолчанию функционал добавления меню не активирован, для того, чтобы это сделать, добавьте в файл темы functions.php следующий код:

if (function_exists('add_theme_support')) { 	add_theme_support('menus'); } 

После этого, в панели администрирования в пукте меню Appearance появится подпункт Menus, в котором нужно нажать на ссылку Create new menu, ввести имя меню «top-menu», выделить страницы из левой колонки и добавить их в меню кнопкой Add to menu.

Теперь, когда меню создано, нужно его показать на страницах сайта. Для этого добавьте в конец header.php следующий код:

<nav class="main-navigation"> 	<? wp_nav_menu(array('menu' => 'top-menu', 'menu_class' => 'top-menu')); ?> </nav> 

Функция wp_nav_menu отобразит меню с именем «top-menu» и css классом «top-menu».

После этого меню уже появится на страницах но без стилей. Стилизуем его:

Футер

Как сделать шаблон для wordpress

Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images

images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок

Далее делаем вёрстку в файле footer.php:

<footer> 	<div class="footer-content"> 		<div class="twitter"> 			<h3 class="footer-heading"><?php echo __('Twitter feed', 'whitesquare'); ?></h3> 			<time datetime="2012-10-23"><a href="#" class="twitter-time">23 oct</a></time> 			<p><?php echo __('In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug', 'whitesquare'); ?></p> 		</div> 		<div class="sitemap"> 			<h3 class="footer-heading"><?php echo __('Sitemap', 'whitesquare'); ?></h3> 			<div class="column first"> 				<a href="/home/"><?php echo __('Home', 'whitesquare'); ?></a> 				<a href="/about/"><?php echo __('About', 'whitesquare'); ?></a> 				<a href="/services/"><?php echo __('Services', 'whitesquare'); ?></a> 			</div> 			<div class="column"> 				<a href="/partners/"><?php echo __('Partners', 'whitesquare'); ?></a> 				<a href="/customers/"><?php echo __('Support', 'whitesquare'); ?></a> 				<a href="/contact/"><?php echo __('Contact', 'whitesquare'); ?></a> 			</div> 		</div> 		<div class="social"> 			<h3 class="footer-heading"><?php echo __('Social networks', 'whitesquare'); ?></h3> 			<a href="http://twitter.com/" class="social-icon twitter-icon"></a> 			<a href="http://facebook.com/" class="social-icon facebook-icon"></a> 			<a href="http://plus.google.com/" class="social-icon google-plus-icon"></a> 			<a href="http://vimeo.com/" class="social-icon-small vimeo-icon"></a> 			<a href="http://youtube.com/" class="social-icon-small youtube-icon"></a> 			<a href="http://flickr.com/" class="social-icon-small flickr-icon"></a> 			<a href="http://instagram.com/" class="social-icon-small instagram-icon"></a> 			<a href="/rss/" class="social-icon-small rss-icon"></a> 		</div> 		<div class="footer-logo"> 			<a href="/"><img src="<?php bloginfo('template_url'); ?>/images/footer-logo.png" alt="Whitesquare logo"></a> 			<p><?php echo __('Copyright © 2012 Whitesquare. A <a href="http://pcklab.com">pcklab</a> creation', 'whitesquare'); ?></p> 		</div> 	</div> </footer> 

И прописываем стили в style.css:

В итоге главная страница сайта должна выглядеть вот так:

Как сделать шаблон для wordpress

Главная страница

Если вы посмотрите на psd макеты, то увидите, что разметка главной страницы отличается от внутренних. В частности, на главной странице нет сайдбара и заголовка страницы.

WordPress позволяет задавать разные шаблоны для разных страниц. Такой шаблон должен храниться в файле page-{название страницы}.php. Если шаблон не найден, то будет подключаться шаблон по умолчанию page.php.

Для главной страницы создайте новый файл front-page.php в папке темы. Добавьте в него следующий код:

<?php get_header(); ?> <section> 	<?php if (have_posts()): while (have_posts()): the_post(); ?> 		<?php the_content(); ?> 	<?php endwhile; endif; ?> </section> <?php get_footer(); ?> 

Он отличается от кода page.php только тем, что в нем нет заголовка страницы.

То, что мы будем делать дальше, уже выходит за рамки создания темы WordPress, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самой темы.

Прежде, чем добавить контент главной страницы – необходимо нарезать все изображения этой страницы и добавить их в библиотеку WordPress через меню Media -> Library. Назовём эти изображения так:

home-1.png
home-2.png
home-3.png
home-4.png
home-5.png
clients-1.png
clients-2.png
clients-3.png
clients-4.png
clients-5.png
clients-6.png
clients-7.png

Далее, перейдите в панели администратора к форме редактирования главной страницы Pages -> Home -> Edit Page и в поле text введите содержимое страницы:

Не забудьте поправить пути до картинок. Они зависят от даты добавления.

Теперь осталось стилизовать данный код.

Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:

<?php remove_filter('the_content', 'wpautop'); 

После этого, главная страница должна отобразиться правильно.

Сайдбар

Теперь, когда главная страница готова, давайте вернемся к шаблону внутренних страниц и добавим в него сайдбар.

Как сделать шаблон для wordpress

Для этого создайте файл sidebar.php и поместите в него следующий код:

<aside> 	<nav class="aside-navigation"> 		<? wp_nav_menu(array('menu' => 'aside-menu', 'menu_class' => 'aside-menu')); ?> 	</nav> 	<h2 class="sidebar-heading"><?php echo __('Our offices', 'whitesquare'); ?></h2> 	<div class="map"> 		<img src="<?php bloginfo('template_url'); ?>/images/sample.png" width="230" height="180" alt="<?php echo __('Our offices', 'whitesquare'); ?>"> 	</div> </aside> 

Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов. Для полноты картины в качестве подменю предлагаем показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали меню. При создании подменю в разделе админки Appearance -> Menus создадим новое меню с именем aside-menu. Чтобы добавить в него посты, кликните наверху в Screen options и отметьте галочкой Show on screen: Posts. Блок карты особых вопросов не вызывает.

После того, как блок сайдбара готов, нужно его подключить для всех подстраниц в файле page.php:

<div class="main-heading"> 	… </div> <?php get_sidebar(); ?> <section> 	… 

Далее нам нужно добавить стили для вёрстки:

Ну и в заключение, добавьте несколько постов в наш блог. Делается это в панели администратора на вкладке Posts -> Add New. Мы добавили точно такие же названия, как были в psd макете.

Как сделать шаблон для wordpress

Страница About us

Как сделать шаблон для wordpress

Теперь, когда у нас готов шаблон для внутренних страниц, давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в в медиа библиотеку. Назовите изображения вот так:

about-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg

Далее перейдите в редактирование страницы в панели администратора и добавьте код:

И стили в style.css:

Шаблон поста

После предыдущих действий, на нашем сайте уже доступны все страницы, кроме страниц с постами. За отображение одиночных постов отвечает шаблон single.php. Создайте его со следующим содержимым:

<?php get_header();?> <div class="main-heading"> 	<h1><?php the_title(); ?></h1> </div> <?php get_sidebar();?> <section> 	<?php while (have_posts()): the_post();?> 		<?php the_content();?> 		<?php 			if ( comments_open() || get_comments_number() ) { 				comments_template(); 			} 		?> 	<?php endwhile; ?> </section> <?php get_footer(); ?> 

Этот шаблон аналогичен предыдущим шаблонам с той лишь разницей, что здесь мы сначала отображаем контент поста, а затем комментарии к нему.

Страница поиска

Как сделать шаблон для wordpress

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

<?php get_header(); ?> <div class="main-heading"> 	<h1>Search</h1> </div> <?php get_sidebar(); ?> <section> 	<h2 class="content-heading"><?php printf( __('Search Results for: %s', 'default'), get_search_query() ); ?></h2> 	<?php if (have_posts()): while (have_posts()): the_post(); ?> 		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> 		<p><?php the_excerpt(); ?></p> 	<?php endwhile;	else:?> 		<p><?php echo __('Sorry, no results found', 'whitesquare'); ?></p> 	<?php endif; ?> </section> <?php get_footer(); ?> 

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

Страница архива

В WordPress помимо одиночных постов существуют страницы, на которых отображаются списки постов. Это могут быть категории, сортировка по дате, автору или по ключевым словам. В нашем макете такого функционала нет, но добавить его обязательно нужно, так как мы создаем шаблон, который может использоваться с разным контентом. Для каждого из указанных списков, существуют свои шаблоны, однако если они не найдены, WordPress пытается найти общий файл archive.php. Мы этим воспользуемся и создадим его. Поскольку его содержимое ничем не будет отличаться от содержимого обычной страницы – просто скопируйте page.php в archive.php.

404

Последний шаблон, который осталось добавить — это шаблон для 404 страницы, когда WordPress не смог найти запрошенную страницу. Он будет точно такой же, как page.php только вместо вывода постов будет написано сообщение об ошибке:

<?php get_header(); ?> <div class="main-heading"> 	<h1><?php the_title(); ?></h1> </div> <?php get_sidebar(); ?> <section> 	<p><?php echo __('It looks like nothing was found at this location.', 'whitesquare'); ?></p> </section> <?php get_footer(); ?> 

habr.com


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.