» » » Форматы записей WordPress
logotip

Форматы записей WordPress

Всем привет! Сегодня на seo-mayak.com я хочу рассказать, что такое форматы записей, для чего они нужны и почему на CMS WordPress их надо активировать.

Еще мы научимся делать шаблоны для разных форматов и частично рассмотрим работу функций: post_class() и body_class(), в общем будет интересно.

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

В общем возможности и потенциал у форматов имеются, не зря же их придумали.

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

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

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

Если положить руку на сердце и сказать честно, то на самом деле веб-мастера довольно редко используют форматы и наверное по этой причине данный функционал еще не задействован в WordPress по умолчанию.

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

formaty zapisei

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

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

Как активировать форматы записей

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

Для этого открываем файл functions.php, что находится в папке с темой и в самое начало после тега <?php вставляем следующий код:

add_theme_support( 'post-formats', array(
 'aside', 'audio', 'chat', 'gallery', 'image', 'quote', 'status','link','video') );

Далее идем в админку, переходим на страницу с любой записью, открываем «Настройки экрана» и ставим галочку рядом с пунктом «Формат»:

formaty zapisei1

После чего, в правой колонке появится новый блок под названием «Формат»:

formaty zapisei2

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

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

Дело в том, что в 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:

formaty zapisei4

А если мы присвоим записи формат «Галерея», то та же функция выведет уже другой класс:

formaty zapisei6

Вот список классов по форматам:

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;
}

Вуаля:

formaty zapisei7

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

Если же поколдовать с post_class() в файле index.php, то можно добиться такого эффекта:

formaty zapisei9

Конечно, все тоже самое и даже больше, можно сделать с помощью файла-шаблона, но здесь вот что важно понимать. И шаблон формата, и функция post_class() могут распространять свое действие лишь на область записи и не могут влиять на шапку сайта, сайдбар или подвал.

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

Функция body_class()

Функция body_class() работает по той же схеме, что и post_class(), т.е. выводит класс в зависимости от заданного формата.

Для формата «Галерея» body_class() в исходном код выведет следующее:

formaty zapisei8

Вот список всех классов:

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;
}

По-моему не плохо получилось, а Вы как думаете?

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

До встречи!

С уважением, Виталий Кириллов

(предыдущая статья)

Комментарии: 31

  1. Андрей Курасов:

    Отличная статья! Спасибо.
    Функция интересная, получается, что к стандартным наборам страниц вордпресса (страница /статья / список рубрик) можно добавить ещё несколько уникальных типов с собственным дизайном и настроить под свои нужды.

    Ответить
    • Виталий Кириллов:

      Да Андрей, с помощью форматов можно сделать WordPress еще удобней и функциональней.

      Ответить
  2. Егор:

    Здравствуйте, я давно пользуюсь такими форматами. А если делаю новую тему, то беру как framework тему Tventy Tvele, там уже есть все форматы. Да и сама тема по функционалу со всем набором и соответствует стандартам WP.

    А функция body_class() вообще отличная функция… В статье затронуто лишь то, что касается форматов….

    Ответить
    • Виталий Кириллов:

      Здравствуйте Егор! Система форматов довольно часто встречается в шаблонах WordPress, но если даже ее нет, то ее несложно сделать самому, что я и показал в статье.
      Я думал описать все возможности функций post_class() и bode_class(), но потом решил, что будет лучше рассказать о них в отдельной статье и сделать ссылки. Слишком уж они интересные, чтобы писать о них в статье, посвященной другой теме.

      Ответить
  3. Егор:

    Ну да, post_class() и bode_class() слишком большая тема 🙂 Есть где разгуляться.

    Ответить
  4. Наталья:

    Здравствуйте, Виталий! Ваша статья как всегда кстати. Я сейчас занимаюсь адаптацией сайта, в связи с этим поменяла полностью шаблон, ну, и пришлось вспомнить все, что делала со старым. У меня, если вы помните, были как раз шаблоны записей. Прочитав вашу статью, поняла, что с форматами постов будет, наверное, проще (не надо создавать отдельную таксономию и т.д.) К тому же интересно попробовать что-то новое и разобраться в этом. В новом шаблоне активирована эта возможность, но я на нее сначала не обратила внимания, убрав ее в настройках экрана, чтобы не мешала))
    P.S. Кстати, посмотрела, как у вас обстоят дела с адаптацией под мобильные устройства. У вас какой-то баг на этой странице: при сворачивании окна она становится пустой.

    Ответить
    • Виталий Кириллов:

      Наталья, мы мы с Вами как всегда друг друга выручаем обоюдно.
      Действительно на мобильниках перестал отображаться не только данный пост, но и весь контент.
      Все это приключилось «благодаря» css свойству overflow: hidden;, которое мне пришлось добавить для корректного отображения прокрутки сайдбара при статической шапке. Пришлось дополнительно отменить данной свойство для мобильных. Теперь вроде все нормально.
      Еще раз спасибо Наталья, а то у меня не хватило тяму проверить статью на мобильнике 🙂

      Ответить
      • Наталья:

        Быстро Вы решили проблему)) я бы полдня ковырялась с css))

        Ответить
  5. Альберт:

    Спасибо, Виталий! Весьма познавательно, но все это по-полочкам к нормальному коду относится, а я с Артистером воюю. Для нормального кода я пока еще чайник, но пытаюсь как-то освоить. )))

    Ответить
  6. Егор:

    Здравствуйте.
    По-моему в обычном коде WordPress проще разобраться, чем в кодах после Artister 🙂

    Ответить
  7. Альберт:

    Здравствуйте, Виталий! Я не хотел воспользоваться страницей контактов, а решил написать здесь. Но если Вы посчитаете это не уместным, то можете не публиковать комментарий. Вопрос мой может быть полезен и таким же новичкам-чайникам, как и я.
    На моем сайте было размещено три комментария. Вроде нормальные, не спамовые или со ссылками. Но люди написали свой сайт в поле заполнения шапки комментария,а их сайту всего месяц. Я тоже так сделал и у Вас. Вот в связи с этим и вопрос. Указание своего сайта к чему может привести? Рекламе своего сайта, расположению невидимой ссылки для людей , но видимой для роботов. И вообще. чем это грозит сайту? Можно ли закрыть и нужно ли закрыть их каким-то образом от индексирования, или удалить, или сделать не ссылочными. ( Я поставил у Вас мой сайт, только лишь потому, что указано поле для сайта, а он у меня уже есть. 🙂 ) Заранее Вам благодарен за ответ.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Альберт! Ссылки в комментариях все равно будут регистрироваться поисковиками и следственно по ним будет утекать статический вес. Более подробно читайте тут.

      Ответить
  8. Андрей Панченко:

    Класс! Переделал свой блог — заработало все с первого раза, спаси за код.

    Ответить
  9. Сергей:

    Здравствуйте. Очень интересно и познавательно.
    Но скажите можно ли как то в функции сделать не только с помощью классов но и отдельную структуру каждой записи, НО я сейчас говорю не о самой записи, а о записи на странице всех записей, т.е. превью записи, мне просто нужно с помощью форматов не только визуально переоформлять но там еще и структура блоков превью записей должна быть разная… возможно ли это сделать?

    Спасибо большое и заранее благодарен за ответ!

    Ответить
    • Виталий Кириллов:

      Здравствуйте Сергей!
      На сколько я понимаю ваш замысел можно осуществить с помощью функции 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

                    Ответить
                • Сергей:

                  Егорка!!!))) СПАСИБО!)) До слез! гы гы шучу) Но реально спасибо, это оноооооо!!!!))) Блин я таким счастливым не был давно ))))

                  Ответить
  10. Николай:

    Здравствуйте. Прошу ответить на мой дилетантский вопрос.
    Что нужно сделать, чтобы изменить названия форматов (Standard, Aside и т.д.) на блоге. Например, дать им русское звучание (Стандарт, Запись и т.д.)
    Спасибо.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Николай!
      Я так понял, у Вас в админке форматы прописаны на англ. Думаю надо просто обновить WordPress до последней русской версии.

      Ответить
  11. Егор:

    WordPress вообще классная вещь, потому-что разрабатывается не командой из 5-10 человек, в коммерческой, а всем миром.

    Ответить
    • Сергей:

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

      Ответить
  12. Андрей Зенков:

    Что-то я раньше даже не задумывался о этой функции. Век живи, век учись)

    Ответить
  13. Павел:

    Здравствуйте, Виталий. Полезная статья. Я новичок в этом деле и у меня вопрос. Может не по теме. Можно ли на разных страницах (если да, то как) устанавливать разные виджеты? Может это совсем просто, но как говориться я «чайник».

    Ответить

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

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS