Всем привет! Сегодня на seo-mayak.com я хочу рассказать, что такое форматы записей, для чего они нужны и почему на CMS WordPress их надо активировать.
Еще мы научимся делать шаблоны для разных форматов и частично рассмотрим работу функций: post_class() и body_class(), в общем будет интересно.
Итак, с выходом версии 3.1, в целях расширения функциональности, в WordPress была внедрена поддержка новых форматов записей, с помощью которых можно задать, например, уникальную структуру той или иной странице, в зависимости от контента или полностью изменить ее дизайн.
В общем возможности и потенциал у форматов имеются, не зря же их придумали.
Форматы записей по умолчанию они не входят в общий функционал WordPress и их надо активировать. Сложного в этом ничего нет и Вы сами в этом скоро убедитесь.
Слово «формат» в принципе говорит само за себя, как бы подразумевая существование и других, отличных форматов. Всего их десять, но возможно в будущем будет и больше.
Выбор формата дает нам возможность создавать разное оформление для страниц, в зависимости от типа выводимой информации, которую мы хотим донести до пользователя.
Если положить руку на сердце и сказать честно, то на самом деле веб-мастера довольно редко используют форматы и наверное по этой причине данный функционал еще не задействован в WordPress по умолчанию.
Лично я считаю, что многие еще просто не умеют пользоваться форматами и до конца не представляют себе весь потенциал, который в них заложен.
Кстати о потенциале. Вы заметили изменения на моем блоге? Если нет, то у Вашего монитора слишком маленькая диагональ. Так вот эти изменения действуют только на одну, конкретную страницу, конечно благодаря использованию форматов записей Такие дела!
Поэтому я и хочу восполнить некоторые информационные пробелы и рассказать, как устроены форматы записей, чтобы веб-мастерам было проще с ними работать. Поехали!
Как активировать форматы записей
Как я уже говорил выше, по умолчанию поддержка форматов записей в WordPress не активирована и эту поддержу надо включить.
Для этого открываем файл functions.php, что находится в папке с темой и в самое начало после тега <?php вставляем следующий код:
add_theme_support( 'post-formats', array( 'aside', 'audio', 'chat', 'gallery', 'image', 'quote', 'status','link','video') );
Далее идем в админку, переходим на страницу с любой записью, открываем «Настройки экрана» и ставим галочку рядом с пунктом «Формат»:
После чего, в правой колонке появится новый блок под названием «Формат»:
Заметьте, что очередность форматов в блоке точно соответствует последовательности перечисления форматов в функции, кроме первого формата «Стандартный», который применяется по умолчанию ко всем записям.
Теперь при публикации нового поста, надо будет выбрать нужный формат и… Многие почему-то полагают, что стоит выбрать формат и страница измениться сама собой и недоумевают, когда этого не происходит.
Дело в том, что в WordPress по умолчанию не заложены готовые шаблоны для разных форматов, хотя разговоры об этом идут. А вот разработчики вордпресовских тем довольно часто создают файловую структуру с применением таких шаблонов.
Например, если Вы обнаружите в своей теме файлы с названиями: content-aside.php , content-gallery.php, content-image.php, content-quote.php и т.д. (вместо «content» может быть любое другое слово), то знайте — это и есть файлы-шаблоны для форматов записей и при выборе определенного формата за вывод контента будет отвечать соответствующий файл. Кстати такая структура реализована в стандартной вордпрессовской теме Twenty Eleven, можете полюбопытствовать.
Содержимое файлов шаблонов может быть самым разнообразным и это отдельная тема, но вот что интересно… Как WordPress определяет, какой файл соответствует тому или иному формату и что делать тем веб-мастерам, у которых в теме нет вышеперечисленных файлов?
Читайте статью до конца и вы найдете все ответы.
Шаблоны для форматов записей и функция get_post_format()
Для проверки соответствия записи определенному формату разработчики движка предусмотрели специальную функцию, которая называется get_post_format(). Найти данную функцию можно по адресу wp-includes/post-formats.php.
Но на самом деле get_post_format() лишь определяет соответствие записи одному из зарегистрированных форматов и сама по себе ничего не подключает. Поэтому get_post_format() используют в тандеме с другой функцией get_template_part, о которой я уже писал.
Итак, для общего понимания процесса, давайте проведем эксперимент (проводить различные эксперименты советую на локальном сервере) и создадим файл-шаблон для формата «Цитата» (quote), после чего подключим его к теме.
Для этого в папке с темой создаем новый файл под названием single-quote.php и копируем в него содержимое файла single.php.
Теперь у нас в теме имеется два одинаковых файла single-quote.php и single.php и для того, чтобы они хоть немного различались давайте в файле single-quote.php изменим один конкретный элемент, например вывод заголовка статьи.
Вместо функции the_title(), которая у нас выводит заголовок статьи, впишем произвольный заголовок, пусть это будет слово «Формат». В общем должно получится так:
<h2>Формат</h2>
Конечно у кого-то заголовок записи может быть обернут в тег h1, но это не суть важно.
Далее, в самое начало файла single.php вставляем такую функцию:
<?php if (get_post_format()) {
return get_template_part('single', get_post_format());
}
Теперь идем в админку и создаем тестовую запись. Даем ей отличный заголовок от того, что мы прописали в файле single-quote.php, например «Тестовый заголовок» и выбираем формат «Цитата». Публикуем и идем на сайт смотреть результат.
Если мы все сделали правильно, то во вновь созданной записи заголовок будет «Формат» именно тот, что мы напрямую прописали в файле single-quote.php. Это значит, что вместо основного файла single.php (что отвечает за вывод страниц за записями), был подключен наш файл шаблон для формата «Цитата».
Соответственно можно создать отдельный файл-шаблон для любого формата, кроме «Стандартный», и функция его подключит. Понятно, что в шаблоне мы можем изменить любой класс и прописать для него индивидуальные стили, которые могут изменить страницу до неузнаваимости.
Кто-то может сказать, что мол зачем изобретать велосипед, ведь можно просто сделать шаблон записи как описано тут и разукрасить страницу хоть во все цвета радуги.
Так то оно так, но во-первых, при использовании форматов, выбрать нужный можно прямо в админке, что избавляет от необходимости лезть в коды и прописывать ID для каждой новой записи. Тем самым мы можем без особых проблем группировать посты и подавать их пользователю под разным «соусом». Надеюсь разница понятна.
Но на этом потенциал форматов записей еще не заканчивается. Использование форматов позволяет влиять на внешний вид конкретной страницы даже без создания файла-шаблона. Пришло время познакомится с функцией post_class().
Функция post_class()
Надо сказать, что функция post_class() предназначена для упрощения верстки и используется во многих темах WordPress. Опытные веб-мастера довольно часто пользуются услугами данной функции. А тем у кого такой функции в теме нет, расстраиваться не надо, все можно поправить.
Мы сейчас не будем подробно останавливаться на всех возможностях post_class(), скажу лишь, что качается форматов записей. Функция занимается тем, что определяет к какому формату относится та или иная запись и выводит в исходных код соответствующий класс.
Например, если мы выбрали для записи формат «Цитата», то функцией post_class() в исходном код среди прочих будет выведен класс format-quote:
А если мы присвоим записи формат «Галерея», то та же функция выведет уже другой класс:
Вот список классов по форматам:
format-aside — Заметка;
format-audio — Аудио;
format-chat — Чат;
format-gallery — Галерея;
format-image — Изображение;
format-quote — Цитата;
format-status — Статус;
format-link — Ссылка;
format-video — Видео.
Но где же искать функцию post_class(), в каких файлах?
Файл, куда надо заглянуть в первую очередь — это single.php.
Сам код подключения выглядит следующим образом:
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> /*Код вывода записи*/ </div>
Конечно если функции post_class() в файле нет, то ее можно туда внедрить. Вставляется post_class() обычно сразу после вывода цикла WordPress.
Из вышесказанного следует, что для каждого формата с помощью функции post_class() мы можем задать разное оформление. Давайте для примера изменим фон страницы, которой был присвоен формат «Галерея».
Для этого в файле style.css прописываем следующее:
.format-gallery {
background:#FFEBAF;
}
Вуаля:
Как видите фон страницы стал бледно желтым. Таким образом можно воздействовать не только на фон страницы, а также на шрифт, любые цвета, отступы, изображения и т.д. Кто хоть немного разбирается в css, тот без труда оформит страницу как ему хочется.
Если же поколдовать с post_class() в файле index.php, то можно добиться такого эффекта:
Конечно, все тоже самое и даже больше, можно сделать с помощью файла-шаблона, но здесь вот что важно понимать. И шаблон формата, и функция post_class() могут распространять свое действие лишь на область записи и не могут влиять на шапку сайта, сайдбар или подвал.
Но как же быть, если стоит задача полностью изменить дизайн определенной страницы или группы страниц. Выход есть, и этот выход знает функция body_class().
Функция body_class()
Функция body_class() работает по той же схеме, что и post_class(), т.е. выводит класс в зависимости от заданного формата.
Для формата «Галерея» body_class() в исходном код выведет следующее:
Вот список всех классов:
single-format-aside — Заметка;
single-format-audio — Аудио;
single-format-chat — Чат;
single-format-gallery — Галерея;
single-format-image — Изображение;
single-format-quote — Цитата;
single-format-status — Статус;
single-format-link — Ссылка;
single-format-video — Видео.
Для данной записи, которая кстати отнесена к формату «Цитата», я решил сделать другую шапку. Для осуществления задуманного я вставил функцию body_class() прямо в тег body, что находится в файле header.php.
Вот так:
<body <?php body_class(); ?>>
После чего в файле style.css прописал следующее:
.single-format-quote{
background:url("images/название_изображения.png")no-repeat 50% 0 fixed;
}
По-моему не плохо получилось, а Вы как думаете?
Конечно каждый веб-мастер должен сам для себя решить стоит ему использовать форматы записей на своем ресурсе или нет, я лишь показал некоторые их возможности.
До встречи!
С уважением, Виталий Кириллов
Отличная статья! Спасибо.
Функция интересная, получается, что к стандартным наборам страниц вордпресса (страница /статья / список рубрик) можно добавить ещё несколько уникальных типов с собственным дизайном и настроить под свои нужды.
Да Андрей, с помощью форматов можно сделать WordPress еще удобней и функциональней.
Здравствуйте, я давно пользуюсь такими форматами. А если делаю новую тему, то беру как framework тему Tventy Tvele, там уже есть все форматы. Да и сама тема по функционалу со всем набором и соответствует стандартам WP.
А функция body_class() вообще отличная функция… В статье затронуто лишь то, что касается форматов….
Здравствуйте Егор! Система форматов довольно часто встречается в шаблонах WordPress, но если даже ее нет, то ее несложно сделать самому, что я и показал в статье.
Я думал описать все возможности функций post_class() и bode_class(), но потом решил, что будет лучше рассказать о них в отдельной статье и сделать ссылки. Слишком уж они интересные, чтобы писать о них в статье, посвященной другой теме.
Ну да, post_class() и bode_class() слишком большая тема 🙂 Есть где разгуляться.
Здравствуйте, Виталий! Ваша статья как всегда кстати. Я сейчас занимаюсь адаптацией сайта, в связи с этим поменяла полностью шаблон, ну, и пришлось вспомнить все, что делала со старым. У меня, если вы помните, были как раз шаблоны записей. Прочитав вашу статью, поняла, что с форматами постов будет, наверное, проще (не надо создавать отдельную таксономию и т.д.) К тому же интересно попробовать что-то новое и разобраться в этом. В новом шаблоне активирована эта возможность, но я на нее сначала не обратила внимания, убрав ее в настройках экрана, чтобы не мешала))
P.S. Кстати, посмотрела, как у вас обстоят дела с адаптацией под мобильные устройства. У вас какой-то баг на этой странице: при сворачивании окна она становится пустой.
Наталья, мы мы с Вами как всегда друг друга выручаем обоюдно.
Действительно на мобильниках перестал отображаться не только данный пост, но и весь контент.
Все это приключилось «благодаря» css свойству overflow: hidden;, которое мне пришлось добавить для корректного отображения прокрутки сайдбара при статической шапке. Пришлось дополнительно отменить данной свойство для мобильных. Теперь вроде все нормально.
Еще раз спасибо Наталья, а то у меня не хватило тяму проверить статью на мобильнике 🙂
Быстро Вы решили проблему)) я бы полдня ковырялась с css))
Спасибо, Виталий! Весьма познавательно, но все это по-полочкам к нормальному коду относится, а я с Артистером воюю. Для нормального кода я пока еще чайник, но пытаюсь как-то освоить. )))
Здравствуйте.
По-моему в обычном коде WordPress проще разобраться, чем в кодах после Artister 🙂
Здравствуйте, Виталий! Я не хотел воспользоваться страницей контактов, а решил написать здесь. Но если Вы посчитаете это не уместным, то можете не публиковать комментарий. Вопрос мой может быть полезен и таким же новичкам-чайникам, как и я.
На моем сайте было размещено три комментария. Вроде нормальные, не спамовые или со ссылками. Но люди написали свой сайт в поле заполнения шапки комментария,а их сайту всего месяц. Я тоже так сделал и у Вас. Вот в связи с этим и вопрос. Указание своего сайта к чему может привести? Рекламе своего сайта, расположению невидимой ссылки для людей , но видимой для роботов. И вообще. чем это грозит сайту? Можно ли закрыть и нужно ли закрыть их каким-то образом от индексирования, или удалить, или сделать не ссылочными. ( Я поставил у Вас мой сайт, только лишь потому, что указано поле для сайта, а он у меня уже есть. 🙂 ) Заранее Вам благодарен за ответ.
Здравствуйте Альберт! Ссылки в комментариях все равно будут регистрироваться поисковиками и следственно по ним будет утекать статический вес. Более подробно читайте тут.
Класс! Переделал свой блог — заработало все с первого раза, спаси за код.
Здравствуйте. Очень интересно и познавательно.
Но скажите можно ли как то в функции сделать не только с помощью классов но и отдельную структуру каждой записи, НО я сейчас говорю не о самой записи, а о записи на странице всех записей, т.е. превью записи, мне просто нужно с помощью форматов не только визуально переоформлять но там еще и структура блоков превью записей должна быть разная… возможно ли это сделать?
Спасибо большое и заранее благодарен за ответ!
Здравствуйте Сергей!
На сколько я понимаю ваш замысел можно осуществить с помощью функции post_class(), которую надо разместить в файле, отвечающего за вывод превью и потом с помощью стилей править структуру анонсов относящихся к тому или иному формату.
Проблема в том что мне надо именно HTML структуру анонса менять((
Тут конечно сложнее.
А с помощью чего можно? Подскажите пожалуйста.. я замучался выход искать
Даже не знаю, сходу не могу сказать, надо подумать. Просто никогда не задавался данным вопросом.
has_post_format Проверяет наличие указанного формата у записи (поста). Условный тег. Используется в цикле.
// В цикле
if( has_post_format( 'video' ) ){ echo "<img src="ссылка на иконку" alt="" />"; } А вот ваш вариант: <a href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_post_thumbnail(array(780,410), array('class' => 'img-responsive')); ?> </a> <h3><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title();?></a></h3> <?php the_excerpt() ?> <a href="<?php the_permalink(); ?>">ПЕРЕЙТИ</a> </article> <?php else : ?> <!-- А сюда сниппет обычного анонса --> <?php endif;?>Блин, не весь отрывок зацепил.
Вот так
<?php if ( has_post_format('video') && !is_sticky() ): ?> <article"> <a href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_post_thumbnail(array(780,410), array('class' => 'img-responsive')); ?> </a> <h3><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title();?></a></h3> <?php the_excerpt() ?> <a href="<?php the_permalink(); ?>">ПЕРЕЙТИ</a> </article> <?php else : ?> <!-- А сюда сниппет обычного анонса --> <?php endif;?>Вот массив медиа
if( has_post_format( array('video', 'gallery') ) ){ // это медиа пост }Действительно, есть же has_post_format(). Спасибо Егор!
Блин не до конца понял как работает.. можешь добавить в скайп или вк?
скайп: creatpro
ВК:
vk.com/live.yourselfЕгорка!!!))) СПАСИБО!)) До слез! гы гы шучу) Но реально спасибо, это оноооооо!!!!))) Блин я таким счастливым не был давно ))))
Здравствуйте. Прошу ответить на мой дилетантский вопрос.
Что нужно сделать, чтобы изменить названия форматов (Standard, Aside и т.д.) на блоге. Например, дать им русское звучание (Стандарт, Запись и т.д.)
Спасибо.
Здравствуйте Николай!
Я так понял, у Вас в админке форматы прописаны на англ. Думаю надо просто обновить WordPress до последней русской версии.
WordPress вообще классная вещь, потому-что разрабатывается не командой из 5-10 человек, в коммерческой, а всем миром.
Я там реально все сделал, только есть несколько вопросов, буду рад если подскажет по тому же поводу.. я там выше присылал вам свои контакты
Что-то я раньше даже не задумывался о этой функции. Век живи, век учись)
Здравствуйте, Виталий. Полезная статья. Я новичок в этом деле и у меня вопрос. Может не по теме. Можно ли на разных страницах (если да, то как) устанавливать разные виджеты? Может это совсем просто, но как говориться я «чайник».
Здравствуйте. Может неправильно выбрал статью для комментария. У меня вопрос. На блоге в текстах вдруг повылезали знаки вопроса в некоторых местах (вместо красной строки посредством  ). Не знаете, как это вылечить? Спасибо
Здравствуйте Сергей!
Сходу назвать причину к сожалению не смогу.
У меня такой проблемы никогда не было.
Приведите пример страницы чисто для меня.
Может, знаете, как сделать формат записи по-умолчанию отличным от стандартного? Например, мне надо, чтобы при создании записи по-умолчанию был выбран вормат «Видео», а не «Стандартный».
В WordPress нет опции для смены значения по умолчанию для формата записи, это в код движка надо лезть, что нежелательно.
Максимум, что можно сделать, вот:
add_theme_support( 'post-formats', array('video') );