html5 для иллюстраций в WordPress

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

WP оборачивает иллюстрацию, у которой есть подпись в div, а саму подпись выводит в теге параграфа — p. Но в html5 для верстки таких моментов есть более подходящие теги: figure и figcaption. Чтобы их использовать, пришлось залесть в самые потроха…

За вывод изображений в WP отвечает файл media.php, который лежит в папке wp-includes. Там происходят все операции по формированию кода media-элементов. Функция которая нас интересует, это img_caption_shortcode(). Она отвечает за теги блока иллюстрации с подписью. Вот её оригинальный вид c комментариями разработчиков:

710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
/**
 * The Caption shortcode.
 *
 * Allows a plugin to replace the content that would otherwise be returned. The
 * filter is 'img_caption_shortcode' and passes an empty string, the attr
 * parameter and the content parameter values.
 *
 * The supported attributes for the shortcode are 'id', 'align', 'width', and
 * 'caption'.
 *
 * @since 2.6.0
 *
 * @param array $attr Attributes attributed to the shortcode.
 * @param string $content Optional. Shortcode content.
 * @return string
 */
function img_caption_shortcode($attr, $content = null) {
 
	// Allow plugins/themes to override the default caption template.
	$output = apply_filters('img_caption_shortcode', '', $attr, $content);
	if ( $output != '' )
		return $output;
 
	extract(shortcode_atts(array(
		'id'	=> '',
		'align'	=> 'alignnone',
		'width'	=> '',
		'caption' => ''
	), $attr));
 
	if ( 1 > (int) $width || empty($caption) )
		return $content;
 
	if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
 
	return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
	. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

В последнем return, нам надо изменить теги на новые. Я привёл код в соответвие с html5 следующим образом:

726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
function img_caption_shortcode($attr, $content = null) {
 
	// Allow plugins/themes to override the default caption template.
	$output = apply_filters('img_caption_shortcode', '', $attr, $content);
	if ( $output != '' )
		return $output;
 
	extract(shortcode_atts(array(
		'id'	=> '',
		'align'	=> 'alignnone',
		'width'	=> '',
		'caption' => ''
	), $attr));
 
	if ( 1 > (int) $width || empty($caption) )
		return $content;
 
	if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
 
	return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
	. do_shortcode( $content ) . '<figcaption class="wp-caption-text">' . $caption . '</figcaption></figure>';
}

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

Обратите внимание, что если вы хотите использовать в подписи html-разметку (ссылки, или теги форматирования), то редактор в панели управления заменит их на сущности, и придётся подправить их вручную.

Эта запись была опубликована в рубрике Доработка Wordpress'а надфилем и отмечена метками , , , . Добавить в закладки ссылку.

1 в ответ на html5 для иллюстраций в WordPress:

  1. Сергей пишет:

    Привет. Есть такая проблемка, регулярными выражения при использовании “add_filter(‘the_content’, ‘ads_h2′);” в the_content найти заголовок H2 и первый параграф после него, в котором картинка. Но если картинка вставлена без подписи, то находит. Если картинка с подписью, то в the_content параграфа нет. Как сделать что бы параграф тоже вставлялся?

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

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

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>