几个月前,我为客户建立了一个博客,他们要求的一件事就是为响应式图片标签替换默认的WordPress编辑器图像html输出。 我花了一些时间才弄明白,但最终我想出了一个不错的解决方案。然而,随着下一次更新,WordPress将用Gutenberg替换旧的所见即所得编辑器,这将覆盖我的更改并用Gutenberg的html输出替换它们,这将打破网站上新帖子的布局。我需要在更新后快速解决这个问题,但我不知道该怎么做,因为目前我不熟悉古腾堡的工作原理。
这是我为了替换默认的post image html输出而构建的函数:
if ( !function_exists( 'responsive_insert_image()' ) ) {
function responsive_insert_image($html, $id, $caption, $title, $align, $url, $size) {
$alt_text = get_post_meta($id, '_wp_attachment_image_alt', true);
if ( !$alt_text ) {
$alt_text = esc_html( get_the_title($post_id) );
}
$full = wp_get_attachment_image_src($id, 'full');
$xl = wp_get_attachment_image_src($id, 'extra-large');
$lg = wp_get_attachment_image_src($id, 'large');
$md = wp_get_attachment_image_src($id, 'medium');
$sm = wp_get_attachment_image_src($id, 'small');
$xs = wp_get_attachment_image_src($id, 'thumbnail');
$xl_2x = wp_get_attachment_image_src($id, 'extra-large-2x');
$lg_2x = wp_get_attachment_image_src($id, 'large-2x');
$md_2x = wp_get_attachment_image_src($id, 'medium-2x');
$sm_2x = wp_get_attachment_image_src($id, 'small-2x');
$xs_2x = wp_get_attachment_image_src($id, 'thumbnail-2x');
$attributes = (!empty($id) ? ' id="attachment_' . esc_attr($id) . '"' : '' );
$class = ' class="' . 'align'.esc_attr($align) . '"';
if($a_elem != "" || $caption != "") {
$pic_atts = "";
} else {
$pic_atts = $attributes . $class;
}
if($caption != "") {
$link_atts = "img-link";
} else {
$link_atts = $attributes . $class;
}
$linkptrn = "/<a[^>]*>/";
$found = preg_match($linkptrn, $html, $a_elem);
if($found > 0) {
$a_elem = $a_elem[0];
if(strstr($a_elem, "class=\"") !== false){ // If link already has class defined inject it to attribute
$a_elem = str_replace("class=\"", "target=\"_blank\" " . $class . $link_atts . " ", $a_elem);
} else { // If no class defined, just add class attribute
$a_elem = str_replace("<a ", "<a " . $class . $attributes . " target=\"_blank\" ", $a_elem);
}
} else {
$a_elem = "";
}
if ($size == 'full') {
if ($caption) {
$html = '<figure' . $attributes .'>';
} else {
$html = '';
}
$html .= $a_elem;
$html .= '<picture' . $pic_atts .'>';
$html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->';
$html .= '<source srcset="' . $full[0] . '" media="(min-width: 576px)">';
$html .= '<!--[if IE 9]></video><![endif]-->';
$html .= '<img srcset="' . $full[0] . '" alt="' . $alt_text . '">';
$html .= '</picture>';
if($a_elem != "") {
$html .= '</a>';
}
if ($caption) {
$html .= '<figcaption class="caption wp-caption-text">'.$caption.'</figcaption>';
$html .= '</figure>';
}
} elseif ($size == 'extra-large') {
if ($caption) {
$html = '<figure' . $attributes .'>';
} else {
$html = '';
}
$html .= $a_elem;
$html .= '<picture' . $pic_atts .'>';
$html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->';
$html .= '<source srcset="' . $xl[0] . ', ' . $xl_2x[0] . ' 2x" media="(min-width: 1200px)">';
$html .= '<source srcset="' . $lg[0] . ', ' . $lg_2x[0] . ' 2x" media="(min-width: 992px)">';
$html .= '<source srcset="' . $md[0] . ', ' . $md_2x[0] . ' 2x" media="(min-width: 768px)">';
$html .= '<source srcset="' . $sm[0] . ', ' . $sm_2x[0] . ' 2x" media="(min-width: 576px)">';
$html .= '<!--[if IE 9]></video><![endif]-->';
$html .= '<img srcset="' . $xs[0] . ', ' . $xs_2x[0] . ' 2x" alt="' . $alt_text . '">';
$html .= '</picture>';
if($a_elem != "") {
$html .= '</a>';
}
if ($caption) {
$html .= '<figcaption class="caption wp-caption-text">'.$caption.'</figcaption>';
$html .= '</figure>';
}
} elseif ($size == 'large') {
if ($caption) {
$html = '<figure' . $attributes .'>';
} else {
$html = '';
}
$html .= $a_elem;
$html .= '<picture' . $pic_atts .'>';
$html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->';
$html .= '<source srcset="' . $lg[0] . ', ' . $lg_2x[0] . ' 2x" media="(min-width: 992px)">';
$html .= '<source srcset="' . $md[0] . ', ' . $md_2x[0] . ' 2x" media="(min-width: 768px)">';
$html .= '<source srcset="' . $sm[0] . ', ' . $sm_2x[0] . ' 2x" media="(min-width: 576px)">';
$html .= '<!--[if IE 9]></video><![endif]-->';
$html .= '<img srcset="' . $xs[0] . ', ' . $xs_2x[0] . ' 2x" alt="' . $alt_text . '">';
$html .= '</picture>';
if($a_elem != "") {
$html .= '</a>';
}
if ($caption) {
$html .= '<figcaption class="caption wp-caption-text">'.$caption.'</figcaption>';
$html .= '</figure>';
}
} elseif ($size == 'medium') {
if ($caption) {
$html = '<figure' . $attributes .'>';
} else {
$html = '';
}
$html .= $a_elem;
$html .= '<picture' . $pic_atts .'>';
$html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->';
$html .= '<source srcset="' . $md[0] . ', ' . $md_2x[0] . ' 2x" media="(min-width: 768px)">';
$html .= '<source srcset="' . $sm[0] . ', ' . $sm_2x[0] . ' 2x" media="(min-width: 576px)">';
$html .= '<!--[if IE 9]></video><![endif]-->';
$html .= '<img srcset="' . $xs[0] . ', ' . $xs_2x[0] . ' 2x" alt="' . $alt_text . '">';
$html .= '</picture>';
if($a_elem != "") {
$html .= '</a>';
}
if ($caption) {
$html .= '<figcaption class="caption wp-caption-text">'.$caption.'</figcaption>';
$html .= '</figure>';
}
} elseif ($size == 'small') {
if ($caption) {
$html = '<figure' . $attributes .'>';
} else {
$html = '';
}
$html .= $a_elem;
$html .= '<picture' . $pic_atts .'>';
$html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->';
$html .= '<source srcset="' . $sm[0] . ', ' . $sm_2x[0] . ' 2x" media="(min-width: 576px)">';
$html .= '<!--[if IE 9]></video><![endif]-->';
$html .= '<img srcset="' . $xs[0] . ', ' . $xs_2x[0] . ' 2x" alt="' . $alt_text . '">';
$html .= '</picture>';
if($a_elem != "") {
$html .= '</a>';
}
if ($caption) {
$html .= '<figcaption class="caption wp-caption-text">'.$caption.'</figcaption>';
$html .= '</figure>';
}
} elseif ($size == 'thumbnail') {
if ($caption) {
$html = '<figure' . $attributes .'>';
} else {
$html = '';
}
$html .= $a_elem;
$html .= '<picture' . $pic_atts .'>';
$html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->';
$html .= '<source srcset="' . $sm[0] . ', ' . $sm_2x[0] . ' 2x" media="(min-width: 576px)">';
$html .= '<!--[if IE 9]></video><![endif]-->';
$html .= '<img srcset="' . $xs[0] . ', ' . $xs_2x[0] . ' 2x" alt="' . $alt_text . '">';
$html .= '</picture>';
if($a_elem != "") {
$html .= '</a>';
}
if ($caption) {
$html .= '<figcaption class="caption wp-caption-text">'.$caption.'</figcaption>';
$html .= '</figure>';
}
}
return $html;
}
add_filter( 'image_send_to_editor', 'responsive_insert_image', 10, 9 );
add_filter( 'disable_captions', create_function('$a', 'return true;') );
}
有没有办法以某种方式修改此功能,以使其与新的Gutenberg编辑器兼容?