Javascript 可点击图片Wordpress顶部的figcaption链接

我正在帮助一个朋友建立Wordpress页面，我有一个问题，我不知道如何解决

我在侧边栏中添加了一些图像小部件，链接到网站上的不同类别。问题是图像文本应该位于半透明框中图像的顶部，而该框不是可单击的链接。是否可以将相同的链接添加到该框

小部件生成一个HTML结构，如下面的示例所示，我添加了一些CSS来显示半透明文本框的外观

figcaption{
位置：相对位置；
高度：80px；
宽度：300px；
背景：白色；
顶部：-235px；
左：85像素；
填充顶部：60px；
文本对齐：居中；
不透明度：0.8；
字体大小：粗体；
字体大小：140%
}

超级马里奥

如果无法更改html，则必须使用javascript/jquery来实现这一点。在WordPress小部件管理器中，创建一个新的纯文本小部件并将其粘贴到：

<script>
jQuery(function($){
  var $sidebar = $('.sidebar'); // change this selector to target your sidebar
  $sidebar.find('figcaption').on('click',function(e){
    e.preventDefault();
    $(this).parents('figure').eq(0).find('a').click();
  });
</script>

jQuery（函数（$）{
var$sidebar=$（'.sidebar'）；//将此选择器更改为以侧边栏为目标
$sidebar.find（'figcaption'）。on（'click'，函数（e）{
e、 预防默认值（）；
$（this）.parents（'figure'）.eq（0）.find（'a'）.click（）；
});

或者，为了防止Wordpress添加

，请将其全部放在一行：

   <script>jQuery(function($){var $sidebar = $('.sidebar'); $sidebar.find('figcaption').on('click',function(e){e.preventDefault();$(this).parents('figure').eq(0).find('a').click();});</script>

jQuery（函数（$）{var$sidebar=$（'.sidebar'）；$sidebar.find（'figcaption'）.on（'click'，函数（e）{e.preventDefault（）；$（this）.parents（'figure'）.eq（0）.find（'a'）.click（）；}）；

外观>自定义>附加CSS

figcaption
{
    cursor: pointer;
    pointer-events: none;
}

---

为什么你能把

figcaption

放在

Hey-Grasper里面这个HTML是由Wordpress自动生成的，我似乎找不到可以编辑它的地方。有可能在什么地方做吗？因为这是一个简单的解决方法：）如果你不能更改html，你可以使用javascript。这是一个选项吗？创建一个自定义小部件，然后使用它。谢谢你的建议，格拉斯珀！嘿，杰克！谢谢你的回复！我对javascript还没有那么多经验，所以我真的很感激：）我曾尝试将javascript复制到纯文本小部件中，但控制台记录了以下错误：“$sidebar不是函数”，参考这一行：“$sidebar（'figcaption'）。在（'click'，function（e）{“不用担心：”）上，这一次控制台记录了“意外标记”（'figcaption'）中的括号）很抱歉再次打扰您！好的，现在再试一次。这就是当您分发代码时，甚至没有测试一次代码时所发生的情况。；）哈哈，这是真的：P好消息是控制台中没有错误！但是当我点击框时，什么也没有发生。我可以看到脚本标记自动包装在一个
标记中。这会导致问题吗？是的，愚蠢的wordpress包装那些脚本标记，嗯？把它们放在一行上。这是一个比搞乱更好的解决方案用JS。就好像figcaption不在那里一样。