web-dev-qa-db-ja.com

"image_send_to_editor"の出力を編集するためのフィルタの作成の手助けが必要です

私がやろうとしているのは、私がimage_send_to_editorの出力を編集して、画像を囲むアンカーに特定の class ＆ rel を持たせることができるようにすることです。

私は基本的に投稿に挿入される各画像をギャラリーに入れたりプラグインを使用したりすることなくfancyboxに対応させることを計画しています。

私はこれまでに持っているものをヘレスが、私は空白を埋める助けが必要です...

<?php
add_filter( 'image_send_to_editor', 'fancy_capable', 10, 7);
function fancy_capable($html, $id, $alt, $title, $align, $url, $size ) {
// not sure what to do here???
return "$html";
}
?>
imagesfilters
3
Mr.Brown

ここでの最善の策は、jQueryを使用して画像にリンクしているリンクを取得し、それをfanceyboxを使用するように指示することです。

jQuery(document).ready(function($){
    $('a[href$="jpg"], a[href$="png"], a[href$="jpeg"]').fancybox();
});

あなたがこれをあなたの投稿コンテンツ領域のためだけに機能させたい場合はこれを使用してください：

$('.post-content a[href$="jpg"], .post-content  a[href$="png"], .post-content a[href$="jpeg"]').fancybox();

HTMLの親要素がコンテンツ領域をラップするものであれば、.post-contentを置き換える必要があります。

2
Brian Fegter

これは実際には非常に簡単です... return $html;はあなたが送るものが何であれエディタに戻ることになるでしょう…それであなたは次のようなことをすることができます：

<?php 
       add_filter( 'image_send_to_editor', 'fancy_capable', 10, 7);
       function fancy_capable($html, $id, $alt, $title, $align, $url, $size ) {
           $url = wp_get_attachment_url($id); // Grab the current image URL
           $html = '<a href="' . $url .  '" class="fancybox" rel="your-rel"><img src="..." /></a>';
           return $html;
       }
?>

また、HTMLの代わりにショートコード（ユーザーにとってより使い慣れているかもしれません）を挿入してから、ショートコードにバックエンドでの作業を任せることもできます。

<?php 
       add_filter( 'image_send_to_editor', 'fancy_capable', 10, 7);
       function fancy_capable($html, $id, $alt, $title, $align, $url, $size ) {
           $url = wp_get_attachment_url($id); // Grab the current image URL
           $html = '[image src="' . $url .  '" fancybox="true" /]';
           return $html;
       }
?>
2
luckykind

HTMLにクラスを追加するための正規表現の使用例がいくつかあります。これは私のために働く：

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

以下の機能を持ちます。

function add_class_to_image($html, $id, $caption, $title, $align, $url, $size, $alt='') {
    $classes_to_add = 'media-img';
    if (preg_match('/<a.? class=".?">/', $html))
        $html = preg_replace('/(<a.? class=".?)(".\?>)/', '$1 ' . $classes_to_add . '$2', $html);
    else
        $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes_to_add . '">', $html);
    return $html;
}

それから、私のstyle.cssファイルで私はa.media-imgセレクターをスタイルしました。

1
Joseph Hansen