WP4.4で気づいた! 画像のリンクにrelが挿入されている…

画像リンクのrelを修正する方法

wordpress-logo-notext-rgbWWordPress4.4で気づいたのですが、挿入画像のリンクに「rel属性」が挿入されるようになっていました。

これによって、一部のLightbox(WP Lightbox 2等)で、Lightboxが動作しない等の不具合があるようです(筆者未確認)。

いつのバージョンからこうなったのかは不明ですが、これは困りますよね。

WordPress4.4の管理画面からメディアを追加して、出力されるHTMLは下記のような感じです。

<a href="(画像のURL)" rel="attachment wp-att-(メディアのID)"><img class="alignnone size-thumbnail wp-image-(メディアのID)" src="(画像のURL)" alt="(altのテキスト)" /></a>

このHTMLを「W3C Markup Validation Service」でチェックすると、下記のようなエラーになります。

エラー: Bad value “attachment wp-att-(メディアのID)” for attribute “rel” on element “a”: The string “wp-att-(メディアのID)” is not a registered keyword.

これはまだ良いのですが、PDFなどのメディアにリンクをつけると下記のようなHTMLが出力されます。

<a href="(PDF等のメディアURL)"rel="">ここにテキストが入ります</a>

「rel属性」が前のダブルコーテーション(quote)にくっついてます (^^; 当然このHTMLを「W3C Markup Validation Service」でチェックすると、下記のようなエラーになります。

エラー: No space between attributes.

これをFIXさせるには、WordPressのコアファイルをいじれば直りますが、新しいバージョンにアップするとまた直ってしまうので、簡単なプラグインを作ってみました。ちなみに、このプラグインでは「rel属性」を削除してしまっていますが、rel属性を残したい方は、お好みの応じてコードを変更してください(rel属性を残したい方向けに、コメント等を使って冗長なコードの書き方をしています)。

<?php 
/*
Plugin Name: FIX-get_image_send_to_editor
Description: FIX-get_image_send_to_editor
Version: 0.0.1
Author: Sitespiral
Author URI: https://www.sitespiral.jp
License: GPL2
*/

// Activation
FIX_get_image_send_to_editor::activation();

/**
 * Core Class
 *
 */
class FIX_get_image_send_to_editor {

	/**
	 * activation
	 * 
	 * @return	void
	 */
	public static function activation() {
		// add_filter('image_send_to_editor'
		add_filter('image_send_to_editor', array(__CLASS__, 'get_image_send_to_editor'), 10, 8);

		// add_filter('media_send_to_editor'
		add_filter('media_send_to_editor', array(__CLASS__, 'fix_media_send_to_editor'), 10, 3);

	}

	/**
	 * FIX: get_image_send_to_editor
	 *
	 * @see		/wp-admin/includes/media.php (get_image_send_to_editor) from WorPress 4.4.2-ja
	 * @return	void
	 */
	public static function get_image_send_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt ) {
		$html = get_image_tag($id, $alt, '', $align, $size);

		$rel = '';
		//if ( ! $rel ) {
		//	$rel = ' rel="attachment wp-att-' . esc_attr( $id ) . '"';
		//} else {
		//	$rel = ' rel="' . esc_attr( $rel ) . '"';
		//}

		if ( $url )
			$html = '<a href="' . esc_attr($url) . "\"$rel>$html</a>";

		return $html;
	}

	/**
	 * fix_media_send_to_editor
	 *
	 * @since	WorPress 4.4.2-ja
	 * @return	void
	 */
	public static function fix_media_send_to_editor($html, $id, $attachment) {
		$html = str_replace('"rel=', '" rel=', $html);
		$html = str_replace('\'rel=', '\' rel=', $html);

		$html = preg_replace('@rel="[^"]*"@', '', $html);
		$html = preg_replace("@rel='[^']*'@", '', $html);
		return $html;
	}

}
?>

もちろん、同じようなことをfunctions.phpで行っても良いのですが、複数のWEBを管理されている方には、プラグインの方が便利かなと思い作ってみました。また、今後、新しいWordPressでこれらが直る可能性もありますので、その際は、このプラグインを無効にして削除すれば楽かなと…

※docの書き方がちょっと違うような笑

あまり検証していないので、上記の内容をご採用の際は、全て自己責任のもとでお願い致します。