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

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

HIT

06.02.2017

1984

Записям в WP можно назначать формат, в зависимости от содержания: aside (заметка), gallery (галерея), link (ссылка), image (изображение), quote (цитата), status (статус), video, chat (чат), audio либо Стандартный (по-умолчанию). Пользовательские форматы создать нельзя. Формат записи прописывается в post_class.

post_format является таксономией, термины записываются так: post-format-video. У форматов есть страницы архивов, пример: https://site.ru/type/video/

Функционал форматов

Подключаем функцию форматов wp, если необходимо можно удалить лишние

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

Форматы можно подключить к любым типам постов

add_post_type_support( 'page', 'post-formats' );

Также при создании пользовательского типа поста можно сразу прописать поддержку форматов

'supports' => array('title', 'editor', 'post-formats')

Проверка формата

if( get_post_format() == 'video' ) { }
или
if( has_post_format( 'video' ) ) { }

Шаблоны форматов

В WordPress отличная система работы с форматами. Мы можем создать несколько (или все) шаблонов форматов записей (content-aside.php, content-video.php) и запись будет выводится в соответствии с ними в автоматическом режиме. Для этого существует такая конструкция:

get_template_part( 'content', get_post_format() );

Если запись не имеет формата, то шаблон будет content.php

Форматы записей в шаблонах архива

На ряду с обычными превью записей (solus.php) мы можем сделать preview например для видео — solus-video.php
Для этого в цикле делаем следующее условие:

if( has_post_format( 'video' ) ) { include(TEMPLATEPATH."/solus-video.php"); }

else { include(TEMPLATEPATH."/solus.php"); }

И оформляем solus-video.php так как нам необходимо: выводим сразу the_content(); и т.д.
Некоторые рекомендации по выводу превью для различных форматов:

  • Для видео (video) вставляем в основной контент видео, и в режиме превью, мы сможем его увидеть и включить. Так же можно вставлять сюда фрэймы музыкальных сервисов soundcloud, Mixcloud, Bandcamp
  • Для изображения (image) нужно делать миниатюру с ссылкой на оригинал, чтоб можно было сразу открыть ее fancybo’ом.
  • Для аудио (audio) нужно добавлять миниатюру без ссылки, в контент вставляем трэк и выводим его the_content под миниатюрой и стилем приподнимаем элементы управления аудио чуть выше на миниатюру
  • Для галереи (gallery) можно подключить функционал слайдера.
    Настройки слайдера

    $(function() {
          $('.gallery-img').slidesjs({
    		
    		
            width: 300,
            height: 200,
    		auto: true,
    		play: {
    		  effect: "slide",
    		  //active: true,
              auto: true,
              interval: 5000,
              swap: true,
    		  pauseOnHover: true,
    		  pagination: false,
              restartDelay: 1000
            },
            navigation: {
    		  active: true,
              effect: "slide"
            },
            pagination: {
    		  active: false,
              effect: "slide"
            },
            effect: {
              slide: {
                speed: 1500
              }
            }
    		
          });
    	  
    $(".slidesjs-next.slidesjs-navigation, .slidesjs-previous.slidesjs-navigation, .slidesjs-play.slidesjs-navigation, .slidesjs-stop.slidesjs-navigation").empty();	  
    });

    Верстка превью

    <div class="gallery-slider"><div class="gallery-img">
    
    <?php the_content(); ?>
    
    </div></div>

    В самой записи каждое изображение должно быть заключено в div /div. По желанию можно добавить на картинки ссылки на оригинал. Желательно использовать размер миниатюр который используется для вывода в архивах.

    Стили слайдера

    .gallery-img {display:none;}
    
    .gallery-slider {    
        float: left;
        width: 100%;
        position: relative;
    	z-index: 1;
    }
    	
    .gallery-img:hover > .slidesjs-previous {opacity: 1; left: 5px;}   
    .gallery-img:hover > .slidesjs-next {opacity: 1; right: 5px;} 

Универсальная проверка для всех форматов

if( has_post_format() ) { 
  
  $format = get_post_format();
  
  include(TEMPLATEPATH."/solus-".$format.".php"); }

else { include(TEMPLATEPATH."/solus.php"); }

Запрещаем выводить форматы в массиве

'tax_query' => array(
		array(
			'taxonomy' => 'post_format',
			'field' => 'slug',
			'terms' => array('post-format-audio','post-format-video'), //Перечисляем все «ненужные» форматы
		        'operator' => 'NOT IN'
		)
	)

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

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Вкладка видеообзор

Вкладка видеообзор

Для некоторых товаров в интернет-магазине требуется видеообзор — сделаем для них на странице товара вкладку. Создаем дополнительное поле Видеообзор Создаем вкладку Видеообзор Проблема X-Frame-Options Проблема X-Frame-Options решается следующим образомдля youtubeперед Читать далее »

Отложенная загрузка видео

Отложенная загрузка видео

Как сделать отложенную загрузку изображений описано здесь. Теперь сделаем отложенной загрузку видеороликов, в частности подгружаемых с видеохостингов YOUtube и Vimeo. Отложенная загрузка iframe YOUtube Из исходного iframe потребуется только ID Читать далее »

/
Фон — видео

Фон — видео

Очень эффектно, для главной страницы, смотрится фон из видео. Рассмотрим основные моменты данной «фишки». Добавление видеофона в вёрстку CSS стили, адаптация под размер области, с наложением пиксельной сетки поверх видео Читать далее »

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

Пока нет комментариев. Будь первым!

Форматы записей Форматы записей
Необычное оформление элементов форм
Рекомендации для васНеобычное оформление элементов формOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.