Для вставки изображения в запись в wordpress существует соответствующая функция с выводом верстки — image_send_to_editor.

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

Атрибуты изображений вставленных в запись

Добавить при вставке к изображениям атрибут title можно плагином Restore Image Title (4000+), в нем заключены две простые функции:

// добавляем к изображениям поста title
function lcb_restore_image_title( $html, $id ) {
	$attachment = get_post($id);
    if (strpos($html, "title=")) { return $html; }
    else {
		$mytitle = esc_attr($attachment->post_title);
		return str_replace('<img', '<img title="' . $mytitle . '" '  , $html);      
	}
}
add_filter( 'media_send_to_editor', 'lcb_restore_image_title', 15, 2 );

Атрибуты ссылки на изображение

Добавим класс ссылке:

function add_class_to_image_links($html, $attachment_id, $attachment) {
    $linkptrn = "/<a[^>]*>/";
    $found = preg_match($linkptrn, $html, $a_elem);
    
    if($found <= 0) return $html; // If no link, do nothing
    $a_elem = $a_elem[0];
    
    $is_attachment_link = strstr($a_elem, "wp-content/uploads/"); // Check to see if the link is to an uploaded image
    
    if($is_attachment_link === FALSE) return $html; // If link is to external resource, do nothing
	
    if(strstr($a_elem, "class=\"") !== FALSE){ // If link already has class defined inject it to attribute
        $a_elem_new = str_replace("class=\"", "class=\"YOUR-CLASS-HERE", $a_elem);
        $html = str_replace($a_elem, $a_elem_new, $html);
    }else{ // If no class defined, just add class attribute
        $html = str_replace("<a ", "<a class=\"YOUR-CLASS-HERE\" ", $html);
    }
    return $html;
}
add_filter('image_send_to_editor', 'add_class_to_image_links', 10, 3);</a[^>

Либо можно вывести произвольный атрибут

function add_class_to_image_links($html, $id, $attachment_id, $attachment) {
    $linkptrn = "/<a[^>]*>/";
    $found = preg_match($linkptrn, $html, $a_elem);
    
    if($found <= 0) return $html; // If no link, do nothing
    $a_elem = $a_elem[0];
    
    $is_attachment_link = strstr($a_elem, "wp-content/uploads/"); // Check to see if the link is to an uploaded image
    if($is_attachment_link === FALSE) return $html; // If link is to external resource, do nothing
 
    $image = get_post($id); //получаем объект, из которого можно взять title, caption, description
 
    $html = str_replace('<a ', '<a data-caption="'.$image->post_excerpt.'" ', $html);
    return $html;
}
add_filter('image_send_to_editor', 'add_class_to_image_links', 10, 3);</a[^>

$image — получаем объект, из которого можно взять:
$post->post_title — title (Заголовок)
$image->post_excerpt — caption (Подпись)
$image->post_content — descripion (Описание)

При необходимости можно получить alt изображения:

$image_alt = get_post_meta($id, '_wp_attachment_image_alt', true);

Стили для всплывающего caption

.img-caption {display: inline-block; position: relative;}

.img-caption:after {
    content: attr(data-caption);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: #00000099;
    color: #fff;
    font-size: 0.9rem;
    padding: 15px 30px;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
}

.img-caption:hover::after {opacity: 1;}

a.img-caption img {display: block;}

Вставка caption

Переопределяем вставку caption, вместо шорткода, добавим в виде атрибута

// изменяем вывод caption
remove_filter( 'image_send_to_editor', 'image_add_caption', 20);

add_filter( 'image_send_to_editor', 'my_image_add_caption', 10, 8 );

function my_image_add_caption( $html, $id, $caption ) {
    $caption = apply_filters( 'image_add_caption_text', $caption, $id );

    if (strpos($html, "caption=")) { return $html; }
    else { return str_replace('<img', '<img caption="' . $caption . '"' , $html); }
}

Вставим caption в виде обертывающего div, чтобы комбинировать с функционалом всплывающих подсказок

add_filter( 'image_send_to_editor', 'my_image_add_caption', 10, 8 );

function my_image_add_caption( $html, $id, $caption, $align ) {
	$caption = apply_filters( 'image_add_caption_text', $caption, $id );
	if ( empty($align) ) $align = 'none';
	$shcode = '<div class="img-caption align' . $align . '" data-title="' . $caption . '">' . $html . '</div>';
	return apply_filters( 'image_add_caption_shortcode', $shcode, $html ); 
}

Отключить вставку caption

// Отключаем вставку caption
function caption_off() { return true; }
add_filter( 'disable_captions', 'caption_off' );

Удаляем лишние атрибуты

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

Убираем все классы вставляемых изображений:

// Удалить все классы изображения
add_filter('get_image_tag', 'strip_entire_image_class');
function strip_entire_image_class($html) {
	return preg_replace('/ class="(.*)"/', '', $html);
}

Убираем атрибуты высота и ширина:

// Удалить ширину и высоту изображения
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
   $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
   return $html;
}

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