web-dev-qa-db-ja.com

挿入画像のHTML出力を変更する

私は何年もWordpressを使ってきました。記事に画像を追加するときはいつでも、すべての画像についてすべてのHTMLを手動で書き出します。私はサムネイルを拡大するためにHighslideと呼ばれる画像ライトボックスプラグインも使用しました。大きな画像にリンクしているサムネイルの例は、私のマニュアルHTMLではこのようになっています。

<a href="large-file.jpg" rel="highslide" class="highslide"><img src="thumbnail.gif"></a>

しかし今、私はWordpressの最新版をインストールして、まったくHTMLを書かなくても記事に直接画像を追加するのがいかに簡単であるかを見ます。私が得る出力はこれです：

<a href="http://site.com/newwp/wp-content/uploads/2012/12/file.jpg"><img class="alignright size-medium wp-image-24971" alt="file" src="http://file.com/newwp/wp-content/uploads/2012/12/file-196x300.jpg" width="196" height="300" /></a>

私がしたいのは、highslideプラグインが機能するようにリンク画像を挿入するたびにrel = "highslide"とclass = "highslide"を自動的にリンクに追加するようにWordpressを修正することです。最終結果は次のようになると思います。

<a href="http://site.com/newwp/wp-content/uploads/2012/12/file.jpg" rel="highslide" class="highslide"><img class="alignright size-medium wp-image-24971" alt="file" src="http://file.com/newwp/wp-content/uploads/2012/12/file-196x300.jpg" width="196" height="300" /></a>

私はコアファイルを調べましたが、Wordpressが画像を挿入するときにHTMLを生成する場所を特定することはできません。それでは、これら2つの属性を追加するためにWordpressを変更する方法を誰かが知っていますか？どうぞよろしくお願いします。 ：） ありがとうございました！

imageshtml
1
SurferBoy

このフィルタは、アンカーがエディタに送信されたHTMLイメージ内にあるかどうかをチェックし、含まれている場合は、そのアンカーにrelとclassを追加します。

function add_highslide_attr( $html ) {
    preg_match_all('/(<a[^>]*>)(.*)/i', $html, $result);

    if( !isset($result) || !isset($result[1][0]) || ! $result[1][0] )
        return $html;

    $anchor = $result[1][0];

    if( strstr($anchor, 'rel=') )
        $anchor = str_replace('rel="', 'rel="highslide ', $anchor);
    else
        $anchor = str_replace('href=', 'rel="highslide" href=', $anchor);

    if( strstr($anchor, 'class=') )
        $anchor = str_replace('class="', 'class="highslide ', $anchor);
    else
        $anchor = str_replace('href=', 'class="highslide" href=', $anchor);

    $html = $anchor . $result[2][0];

    return $html;
}
add_filter( 'image_send_to_editor', 'add_highslide_attr', 10 );
0
Rob Vermeer