Совет недели: Как сделать сложные страницы шаблонов в 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 основных факторов

Получается, что вам надо создать минимум 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 начинают отображаться неверно, из-за этого, если вы скопируете код с моего сайта и добавите к себе — может работать не корректно. Поэтому я публикую код, а в конце статьи вы найдете архив с файлами, о которых идет речь в этом обзоре.

< ?php
/* Template Name: Book Overview */
?>
< ?php get_header(); ?>
<div id="inner-wrapper">
<div id="content-single"><!--?php if ( (is_page('Книги')) ) { query_posts(array('showposts' =--> 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;
?>
<a href="<?php the_permalink(); ?>«>
<img alt="Совет недели: Как сделать сложные страницы шаблонов в WordPress" src="<?php echo $thumbPath ?/>» />
 
</a>
< ?php } } ?></div>
< -- end content-single -->
</div>
< -- end inner-wrapper -->
< ?php get_footer(); ?>

Хочу обратить ваше внимание на 4 момента в коде:

Советую прочитать еще:  Черный ромб с вопросом

1. Слово «Книги» в коде соответствует названию моей страницы.

2. В этом фильтре: showposts' => 100, 'post_parent' => 219, 'post_type' => 'page' — число 219 соответствует уникальному идентификатору страницы «Книги». У вас будет другой номер. Число 100 — количество записей на странице Книги.

3. Функция: $thumbPath = get_post_meta($post->ID, 'thumbnail', true); — вызывает произвольное поле ‘thumbnail’, которое отвечает за вывод миниатюры. Все картинки для книг я ложу в папку wp-content/media/books.

4. Ссылка: http://localhost/perevod/wp-content/media/books/ — у вас должна соответствовать вашей ссылке.

5. Функция: echo get_post_meta($post->ID, 'author', true); — выводит информацию о авторе (произвольное поле author).

Теперь — немного стилей для файла style.css. Добавьте их в самом конце вашего файла стилей:

/* Books */
.grid-book {
display: block;
float: left;
width: 150px;
height: 200px;
border: 1px solid #999;
margin: 10px;
text-align: center;
text-decoration: none;
}
 
.grid-book img {
border: none;
height: 100px;
margin: auto;
padding: 10px;
}
 
.grid-title {
font-size: 1.2em;
color: #ff3355;
}
 
.grid-author {
font-size: 1.0em;
}

На всякий случай — вы можете скачать исходники:

[sdfile url=»https://bestplugins.ru/wp-content/files/books.zip»]

В результате у вас должна получиться такая страница (подвал и заголовок с моего шаблона на поддомене):

16

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

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

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

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