0

HTMLビュー内のショートコードの配置に最も近い画像を見つけるのに十分スマートなWordpressショートコードを作成しようとしています。

jQuery を使用して最も近い画像を特定し、それを以下の関数に渡したいと思います。ショートコードが投稿で複数回使用される可能性があることに言及する必要があります.

これを達成するために使用することを検討しまし.closest()たが、この情報を関数に渡す方法がわかりません。

function pinterest_post() {

global $post;
$icon_url = urlencode(site_url().'/wp-content/themes/Kin/images/pinterest.png');
$posturl = urlencode(get_permalink());
$pinurl = 'http://pinterest.com/pin/create/button/?url='.$posturl.'&media='.$icon_url;
$pinurl .= '&description='.urlencode(get_the_title());

return '
    <div class="pinterest_post">
        <a href="'.$pinurl.'"><img src="/wp-content/themes/Kin/images/pinterest.png"/></a>
    </div>';
}

add_shortcode('pin', 'pinterest_post');

これを達成するための提案は大歓迎です。

4

2 に答える 2

1

このoffset()関数を使用して、ドキュメントに対する要素のオフセットを決定できます。

次に、単純な数学的距離式を使用して、任意の 2 つの要素間の距離を計算できます。sqrt((x1-x2)^2 + (y1-y2)^2)

すべてをまとめると、次のようになります。

  1. ピン要素のオフセットを決定します
  2. ドキュメント内のすべての画像を検索
  3. オフセットに基づいてピン要素までの最小距離で画像を決定します
  4. あなたがそれでやりたいことは何でもしてください

このjsFiddleが動作していることを確認してください:)

この最も近いの数学的定義の代わりに、必要な場合

  • imgと同じ DOM 親にある要素でpin、同じレベルにある場合は、$('.pin').siblings('img')セレクターをチェックアウトする必要があります
  • または、任意のレベルで必要な場合は、次のようなことができます$('.pin').parent().find('img')
于 2012-05-18T15:56:55.793 に答える
0

私のアプローチを再考した後、ユーザーがショートコードのパラメーターとして画像のURLを指定できるようにするのが最も簡単であることがわかりました。これにより、最終的にどの画像を表示するかをより細かく制御できるようになり、投稿内の[ピン]のインスタンスごとにDOMを複数回横断する必要がなくなります。

私の変更した関数と使用例： 

function pinterest_post($atts = '') {

    global $post;

    $image_fallback = get_bloginfo(template_url).'/images/logo-green-for-website.gif';
    $icon_url = get_bloginfo(template_url).'/images/pinterest.png';

    extract(shortcode_atts(array('path' => $image_fallback,), $atts));
    $image_url = $path;

    $posturl = urlencode(get_permalink());

    $pinurl = 'http://pinterest.com/pin/create/button/?url='.$posturl;
    $pinurl .= '&description='.urlencode(get_the_title());
    $pinurl .= '&media='.$image_url;

    return '
        <div class="pinterest_post">
            <a href="'.$pinurl.'"><img src="'.$icon_url.'"/></a>
        </div>';
}

add_shortcode('pin', 'pinterest_post');

Wordpressの投稿内での使用法：

[pin path = "http://www.site.com/image.jpg"]

于 2012-05-21T13:31:14.607 に答える