0

我正在尝试编写一个 Wordpress 短代码，它足够聪明，可以在 HTML 视图中找到最接近短代码位置的图像。

我想使用 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()函数来确定元素相对于文档的偏移量。

然后使用简单的数学距离公式，您可以计算任意两个元素之间的距离：sqrt((x1-x2)^2 + (y1-y2)^2)

所以，总结一下：

  1. 确定pin元素的偏移量
  2. 查找文档中的所有图像
  3. 根据偏移量确定到 pin 元素距离最小的图像
  4. 随心所欲

检查这个jsFiddle在行动:)

如果不是你想要的最接近 的数学定义

于 2012-05-18T15:56:55.793 回答
0

在重新考虑我的方法后，我发现允许用户将图像的 URL 指定为简码的参数是最简单的。这最终将使他们能够更好地控制显示哪个图像，并避免必须为帖子中的每个 [pin] 实例多次遍历 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 回答