Главная - Без рубрики - Совет недели: Как сделать сложные страницы шаблонов в WordPress

Совет недели: Как сделать сложные страницы шаблонов в WordPress

Если вы используете WordPress достаточно давно, вы наверняка слышали о таком термине как страница-шаблон WordPress. Такая страница сегодня встречается практически во всех бесплатных темах WordPress. Например, страница без Сайдбара, на всю ширину вашей страницы сайта. Настраивается (подключается) такая страница просто: в редакторе страницы справа есть секция — Атрибуты. И в ней можно найти (если страница шаблон в вашей теме есть) выпадающий список — Шаблоны:

подключение страницы - шаблон

По большому счету, любой шаблон сайта на WordPress можно создать с помощью 2-х файлов: index.php и style.css. Конечно, если правильно написать файл index.php, добавив в него все функции PHP, которые разбросаны сейчас по стандартным файлам: header.php, footer.php, sidebar.php, archive.php, single.php, page.php.

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

  1. Скопируйте файл page.php
  2. Сохраните файл page.php под именем — page-full.php
  3. В самом верху вставьте такой код PHP:
< ?php
/* Template Name: Без Сайдбара
*/
? >

У вас готова страница — шаблон. Осталось только удалить из этого файла функцию подключения Сайдбара и изменить стили для колонки с текстом, растянув ее на всю ширину. Но учтите, что < DIV >, который управляет свойством ширины вывода контента, скорее всего тот же, что и для одиночной записи, поэтому будет лучше, если этот < DIV > заменить на другое имя в файле стилей style.css и в самом файле page-full.php.

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

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

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

Эти 6-ть страниц можно создать с помощью стандартной страницы page.php.

А если таких авторов не пять, а сто?

Вот тут и пригодятся знания, как создать страницу шаблон.

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

Небольшое предупреждение

В создании страницы — шаблона я буду использовать произвольные имена (custom fileds). Кто слабо с ними знаком — советую сначала найти и почитать о них информацию. Например, в Кодексе.

И второй совет, немаловажный. Если вы захотите повторить все, о чем пойдет ниже — не экспериментируйте на своем сайте. Создайте для этого тестовый поддомен, поставьте там WordPress, и повторяйте за мной. Или — на локалке (например, на Денвере).

Шаг первый — добавляем комментарий

Я показал на примере выше, как вставляется комментарий на странице. Сначала скопируйте файл page.php, сохраните его под другими именем, например — page-book-review.php. Затем вставьте в начале этого файла такой комментарий:

< ?php
/* Template Name: Book Review
*/
? >

Создайте еще один файл на основе page.php, назовите его — page-book-overview.php. Вставьте в его заголовок такой комментарий:

< ?php
/* Template Name: Book Overview
*/
? >

Теперь пару слов, что я собираюсь сделать.

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

Картинки, имя автора, ISBN и издатель — это будут произвольные поля (custom fields). Заголовок будет название книги. Обзор книг покажет кликабельно фотографии всех книг, наряду с описанием и автором.

Отказ от ответственности: для примера я буду использовать данные с сайта Bukva. Делаю я это только в демонстрационных целях. Фото загружаются тоже с Bukva. Я не читал книг, о которых пойдет речь.

Теперь я приступлю к создании иерархии страниц. На первой странице создам список книг (Book Review Template Page), и эта страница не будет иметь никакого содержания, только кликабельный список. Каждая кликабельная ссылка будет вести на страницу-шаблон с описанием каждой книги (Book Owerview Template Page).

Сначала я создаю новую страницу с именем — Книги. Выбираю для нее Атрибут шаблона — Book Owerview:

book owerview

Теперь создадим страницу с обзором какой-то книги, которая будет подчиненной для страницы Книги:

15

Вы могли заметить, что я создал новую страницу с обзором книги «Оно» Стивена Кинга,  назначив ей в Атрибутах страницу-шаблон — Book Review., а также создал несколько произвольных полей: картинка, автор, издатель и ISBN.

Как теперь это будет выглядеть?

Нам надо добавить нужный PHP код в файл page-book-owerview.php, а также добавить несколько стилей для файла style.css. Важно учитывать, что стили я беру для себя, а вам надо будет потом с ними поработать, чтобы придать макету страницу похожесть к стилям вашего сайта.

Сначала я покажу вам весь код для файла page-book-owerview.php. Хочу сразу предпредить: код добавляется с помощью плагина, который разрешает публиковать в тексте код PHP. У этого плагина есть неудобства: со временем код немного «ломается», а именно — некоторые специальные символы HTML начинают отображаться неверно, из-за этого, если вы скопируете код с моего сайта и добавите к себе — может работать не корректно. Поэтому я публикую код, а в конце статьи вы найдете архив с файлами, о которых идет речь в этом обзоре.

[slh lang=»php»] < ?php /* Template Name: Book Overview */ ?>
< ?php get_header(); ?>

100, ‘post_parent’ => 219, ‘post_type’ => ‘page’));
while (have_posts()) {
the_post();
$thumbPath = get_post_meta($post->ID, ‘thumbnail’, true);
$thumbPath = «http://localhost/perevod/wp-content/media/books/» . $thumbPath;
?>
16

продолжение скоро…

О admin

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*