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

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

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

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

/**
 * 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 '
' . do_shortcode( $content ) . '

' . $caption . '

'; }

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

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 '
' . do_shortcode( $content ) . '
' . $caption . '
'; }

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

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

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

1 комментарий на «html5 для иллюстраций в WordPress»

  1. Сергей говорит:

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

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

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