Как создаются форматы записей WordPress
Пользовательские форматы записей - это функция, которая была впервые представлена еще в WordPress версии 3.1. В принципе, пользовательские форматы работали, как еще один способ группировки записей, который позволял определить вид контента записей, которые вы публикуете:
После того, как записи сгруппированы по формату, вы можете выбрать их, чтобы собрать вместе, определить им конкретные стили или организовать записи в зависимости от их формата.
WordPress позволяет переключаться на различные форматы записей. Вы не обязательно должны использовать их все, можно просто выбрать, какие форматы лучше подходят вашему сайту. На данный момент список форматов включает в себя:
- Заметки: Похож на формат быстрых примечаний. Используйте этот формат для таких записей, как быстрые обновления или пользовательские статусы;
- Галерея: запись, содержащая галерею изображений;
- Изображение: не галерея, а одиночное изображение;
- Видео: запись, содержащая одно или несколько видео. Кодекс WordPress также указывает на то, что URL-адрес может указать на источник видео, а не на встроенное видео;
- Аудио: аудио файл или список воспроизведения;
- Ссылка: простая ссылка на внешний сайт;
- Цитата: цитируемый блок текста, как правило, с указанием автора цитаты;
- Статус: похож на заметку, но он гораздо больше, чем просто одна строка заметки;
- Чат: полная стенограмма чата.
Очевидно, что приведенные описания отражают лишь общие принципы, вы можете адаптировать форматы записей под свои потребности.
Если вы ведете блог, скорее всего, у вас есть несколько специализированных типов записей, которые подходят под описание этих категорий, и вы хотели бы, чтобы они немного отличались друг от друга, или имели бы уникальные стили.
В этой статье, мы обсудим, как настроить форматы записей именно для этого. А также рассмотрим несколько моментов, с которых вам стоит начать.
Настройка форматов записей
Добавить форматы записей в вашу тему можно очень просто. Для этого нужно всего лишь добавить в WordPress функцию со списком форматов, которые вы хотите использовать. Многие темы поставляются с уже предустановленными форматами записей. Тем не менее, будет нелишним ознакомиться с тем, как они настраиваются:
В этой статье я буду использовать тему Fable, которая уже включает в себя несколько форматов записей: галерею, цитату и видео. Для моего блога, однако, этого не достаточно. Я хотел бы добавить еще несколько форматов.
Первое, что нам нужно сделать, это создать дочернюю тему от Fable, в которой задействовать только основной файл style.css.
Использование дочерней темы гарантирует, что будущие обновления темы не затронут наши изменения, которые мы произведем при переопределении настроек темы по умолчанию.
Стоит также отметить, что по умолчанию форматы записей будут добавляться к типу записей «Записи». Но их также можно добавить к пользовательским типам записей, для этого нужно будет прописать дополнительную строку кода.
Сейчас же давайте просто добавим несколько форматов записей в нашу тему. Создайте в папке вашей дочерней темы файл "functions.php", если вы не сделали этого раньше, и добавьте в него следующий код:
function add_post_formats() {
add_theme_support( 'post-formats', array( 'gallery', 'quote','video', 'aside', 'image', 'link' ) );
}
add_action( 'after_setup_theme', 'add_post_formats', 20 );Здесь мы используем функцию add_theme_support, чтобы включить форматы записей. Как я уже говорил, галерея, цитата и видео уже включены с нашу тему. Тем не менее, мы переопределили эту функцию, поэтому нам нужно убедиться, что они все еще включены, если мы хотим сохранить в своей теме эти форматы.
Вы можете добавить любой формат записей из приведенного выше списка, так что выбирайте форматы, которые наилучшим образом подходят вашему блогу.
После активации дочерней темы, вы можете зайти в панель администрирования WordPress и создать новую запись. Вы увидите, что в правой боковой панели приведен список из шести форматов записей. Выберите любой из них, чтобы изменить формат этой конкретной записи или просто оставьте значение «Стандартный».
Прежде, чем мы продолжим, я бы рекомендовал вам добавить по несколько записей для каждого формата, который вы используете с соответствующим контентом (галереи, встроенное видео и т.д.). Таким образом, вы сможете наглядно увидеть форматы записей в действии:
Хорошо, мы создали наши пользовательские форматы записей. Теперь, пришло время разобраться, что мы можем с ними сделать.
Стили форматов записей
Самый простой способ начать работу с форматами записей - это использовать CSS для того, чтобы немного изменить стиль каждого формата. По умолчанию, темы используют функцию post_class, которую включают в себя все темы от Elegant Themes.
Эта функция выводит специальный класс CSS для каждой записи, который обозначает, что запись имеет определенный формат. Название классу присваивается по принципу .format-(имя). Таким образом, запись формата видео будет иметь класс:
.format-videoЭти классы включаются и для индексной страницы и для отдельных страниц записей, их можно использовать для добавления уникального стиля любому конкретному фрагменту контента. Давайте начнем с чего-то простого.
Тема Fable, которую я использую, уже имеет специальную структуру для записей формата цитата, согласно которой цитируемый текст выделяется жирным и заключается в двойные кавычки. Но я хочу, изменить цвет фона для всех цитат, чтобы выделить их еще больше. Для этого я открываю файл "style.css" моей дочерней темы и добавляю в него следующий код:
.format-quote {
background: #FFAADD !important;
color: white;
}После чего для любой записи, для которой был назначен формат "цитата" будет добавляться розовый фон. А цвет текста будет изменен на белый. Нам также нужно добавить пометку “!important”, чтобы переназначить настройки темы по умолчанию.
Конечно, этот стиль будет применяться для записей в любом контексте, для отдельных записей, страниц и индексной страницы.
Если мы хотим сделать так, чтобы этот стиль применялся только при перечислении последних записей на главной странице, нам нужно добавить более специфический код. Вот, к примеру, я собираюсь применять розовый фон только, когда запись выводится на главной странице. Я также хочу удалить заголовок, чтобы осталась только выдержка из записи:
.home .format-quote {
background: #FFAADD !important;
color: white;
}
.home .format-quote .entry-title {
display: none;
}
CSS можно использовать, чтобы, применяя форматы, довольно просто изменять стили записей. Тема Fable, например, добавляет специальный стиль для галерей, с помощью которого они выглядят, как гексагональные панели.
Одним из форматов, которые я добавил в тему Fable, был формат «заметки», так что для него в теме пока не содержится отдельного стиля CSS. Для того, чтобы записи формата «заметка» были больше похожи на статусы, я хочу удалить крупные заглавные буквы, добавляемые в Fable по умолчанию, и добавить собственный эффект для текста:
.home .format-aside .entry-content > p:first-child:first-letter {
display: inline;
float: none;
margin: 0;
font-size: inherit;
}
.home .format-aside .entry-content p {
font-style: italic;
font-size: 36px;
color: #666;
text-shadow: 2px 2px #E7E1E1;
}Этот стиль текста включает курсив, больший размер шрифта и тень текста, а заглавные буквы удаляются. Опять же, это относится только к главной странице, но вы можете просто удалить блок ".home", и он будет работать и на отдельных страницах:
Есть и другие вещи для настройки форматов записей, которые вы можете сделать только с помощью CSS. Я рекомендую вам просмотреть темы, представленные на этом сайте, и посмотреть в них эффекты, которые могут вас заинтересовать.
Фильтрация контента с помощью форматов записей
Изменение стилей CSS это возможно все, что вам потребуется от форматов записей. Но если вам нужно немного больше контроля, вы также можете подредактировать непосредственно шаблоны и изменить способ вывода контента на сайте.
Большинство тем, такие, например, как Fable или Divi, имеют соответствующие настройки, с помощью которых вывод пользовательских шаблонов осуществляется на основе формата записи. Это определяется следующим фрагментом кода, который, как правило, размещается в основном цикле шаблонов записей (например, index.php или single.php):
get_template_part( 'content', get_post_format() );Вам не нужно добавлять этот код самостоятельно, он по умолчанию предоставляется в темах Elegant Themes, как в принципе и в большинстве других профессиональных тем.
Get_template_part подтягивает шаблон из специального PHP-файла, который может быть изменен на основе формата записей. Так что если вы хотите создать специальный шаблон для формата заметок, вам нужно всего лишь создать файл content-aside.php и отредактировать в нем содержимое цикла.
Например, тип записей «Галерея» в теме Fable, размещает изображения по сетке с поддержкой встроенных всплывающих окон FancyBox. Это делается в файле “content-gallery.php”.
Если вы выбрали правильную тему, то большая часть подобной работы уже будет сделана разработчиками темы, однако вам может оказаться полезным умение добавлять некоторые дополнительные функциональные возможности.
Например, в самом начале я добавил в тему Fable формат «ссылка». Мои записи-ссылки очень просты и содержат только название и одну ссылку:
Пример записи-ссылки
Что мне действительно хотелось сделать, это вытащить этот URL и связать заголовки на главной странице напрямую с внешними ресурсами, вместо того, чтобы пользователю для перехода на эту внешнюю страницу нужно было сначала открыть одиночную запись на моем сайте. Но это уже выходит за рамки CSS и потребует от нас использования шаблона.
Подготовка стилей
Нам нужно будет немного подправить CSS, чтобы обозначить для пользователя то, что наши записи-ссылки ведут с нашего сайта на внешний ресурс. Я хочу сделать так, чтобы название записи имело цвет, который соответствует цвету остальных из ссылок на моем сайте, а также немного изменить фон. Я также хочу использовать перед названием пиктограмму ссылки.
Первое, что нам нужно сделать, это создать в дочерней теме папку с изображениями, а затем сохранить в ней приведенное выше изображение ссылки под именем "link.png". Далее, мы добавим небольшой фрагмент CSS-кода, который обеспечит, чтобы наш контент выглядел уникальным:
.home .format-link {
background: #eee !important;
}
.home .format-link .entry-title h2 {
color: #6ba7a5;
}
.home .format-link .entry-title h2:before {
display: inline-block;
content: " ";
background: url(images/link.png);
width: 75px;
height: 56px;
}
.home .format-link .entry-title p {
text-align: center;
}С помощью этого кода мы редактируем цвета фона и текста для записей-ссылок. Затем мы с помощью псевдо-селектора :before добавляем иконку ссылки перед заголовком записи. Если вам еще не совсем понятно, что делает этот код, не волнуйтесь - мы вернемся к нему немного позже.
Добавление к ссылке функции захвата
Для того чтобы привязать к нашим записям прямые внешние ссылки, нам нужно будет создать функцию, которая захватывает первую ссылку из контента записи и возвращает для нас URL-адрес. После этого мы можем использовать этот адрес в нашем шаблоне формата записей, чтобы вставить ссылку непосредственно на внешнюю страницу.
Откройте файл “functions.php” вашей дочерней темы и добавьте в него следующий код:
function get_my_url() {
if ( ! preg_match( '/<as[^>]*?href=['"](.+?)['"]/is', get_the_content(), $matches ) )
return false;
return esc_url_raw( $matches[1] );
}Все что делает эта функция, это просматривает содержимое записи и ищет тег a href=. Затем она извлекает из него URL-адрес и возвращает его нам. Мы используем это на следующем этапе.
Настройка шаблона ссылки
Далее, нам нужно создать сам шаблон формата записей «ссылка». Для этого мы должны создать в папке дочерней темы файл с именем “content-link.php”.
Он будет обслуживать все записи формата "Ссылка" и будет использоваться для вывода их содержимого вместо файла по умолчанию. В данный момент этот шаблон пуст, он еще ничего не делает. Давайте добавим в него код:
<article id="post-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?>>
<div class="container clearfix">
<header class="entry-title">
<?php if ( is_single() ) { ?>
<h1><?php the_title(); ?></h1>
<?php } else { ?>
<?php $myLink = get_my_url(); ?>
<h2>
<a href="<?php echo $myLink; ?>"><?php echothe_title(); ?></a>
</h2>
<p>This is an external link and will take you to a newpage.</p>
<?php } ?>
<?php et_fable_post_meta(); ?>
</header>
</div> <!-- .container -->
<?php if ( is_single() ) : ?>
<?php get_template_part( 'includes/share', get_post_format() ); ?>
<?php endif; ?>
</article> <!-- .entry-->В этом коде происходит много вещей, так что давайте разберем его подробно:
<article id="post-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?>>
<div class="container clearfix">
<header class="entry-title">Это основной код, который задает HTML-структуру. Мы добавляем функцию post_class, чтобы получить собственные классы (в том числе и .format-link), а также контейнер и заголовок элементов.
Они берутся непосредственно из шаблона по умолчанию, которым в данном случае является файл "content.php" из корневой папки темы. Вы можете отредактировать эту часть, чтобы она соответствовала вашей теме:
<?php if ( is_single() ) { ?>
<h1><?php the_title(); ?></h1>В этом разделе используется тег условия “is_single”, чтобы проверить, находимся ли мы на странице одиночной записи или нет.
Если да, мы выводим заголовок в теге h1, который определяется по умолчанию. Конечно, пользователи не будут посещать эту страницу, потому что мы уводим ссылку с нее, но мы оставляем это в качестве резервного варианта:
<?php } else { ?>
<?php $myLink = get_my_url(); ?>
<h2>
<a href="<?php echo $myLink; ?>"><?php echothe_title(); ?></a>
</h2>
<p>This is an external link and will take you to a newpage.</p>
<?php } ?>Вот где происходит настоящая магия. Мы используем функцию get_my_url, которую создали ранее, чтобы сохранить первую ссылку из записи в переменной $myLink. Затем через тег h2 мы выводим эту ссылку в элементе а.
Таким образом, вместо ссылки на запись формат "Ссылка" будет вести по первой внешней ссылке записи (в нашем случае http://elegantthemes.com).
Далее мы просто добавляем заголовок в качестве текста нашей ссылки. Вы помните, что мы добавили значок ссылки в CSS-код, и он будет автоматически добавляться перед каждым заголовком. Наконец, мы добавляем текст, который сообщает нашим пользователям о том, что они перенаправляются по внешней ссылке:
<?php et_fable_post_meta(); ?>
</header>
</div> <!-- .container -->
<?php if ( is_single() ) : ?>
<?php get_template_part( 'includes/share', get_post_format() ); ?>
<?php endif; ?>
</article> <!-- .entry-->Мы завершаем нашу запись той же разметкой, что и у шаблона по умолчанию, чтобы обеспечить нормальный вывод записи на отдельных страницах, и чтобы все элементы HTML были закрыты.
Вот мы и закончили с изменением записей формата "Ссылка", которые выводятся на нашем сайте:
Это, конечно, только начало. Существует еще много чего, что вы можете сделать с помощью шаблонов формата записей. Если вы хотите получить более подробную информации о том, как это работает, я бы рекомендовал вам более глубоко изучить эту тему или ознакомиться с разделом Кодекса WordPress по форматам записей.
Постоянные ссылки
Последний прием, которым я хочу поделиться с вами, это как организовать записи в соответствии с форматом. WordPress предоставляет разработчикам полезную функцию get_post_format_link, которая позволяет создать ссылку на страницу, которая относится только к конкретному формату записей. Чтобы задействовать ее, вам нужно просто вставить эту функцию в любом файле шаблона:
<?php echo esc_url( get_post_format_link( 'aside' ) ); ?>Этот код создает ссылку на список записей формата «заметка». Изменив в этом коде название формата, вы можете задать ссылку на список записей другого формата. Это может быть полезно для меню навигации или группировки записей. Если на вашем блоге широко применяются форматы записей, то это может способствовать улучшению системы организации контента.
Заключение
В данный момент активно ведутся дискуссии об эффективности форматов записей, и их будущее все еще не ясно. Но если вы активно работаете над улучшением управления контентом блога, они могут стать для вас чрезвычайно полезным инструментом, и с их помощью вы сможете добавить дополнительный функционал на свой сайт.
Темы Elegant Themes поддерживают некоторые типы форматов записей, и вы можете исследовать практически любой из них, чтобы получить представление о том, как все это работает. Лучший способ разобраться в этом - это просто погрузиться в изучение данного вопроса!