图像 Wordpress 顶部的可点击 figcaption 链接

Question

我正在帮助一个朋友设置一个 Wordpress 页面，但我遇到了一个不知道如何解决的问题。

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

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

figcaption {
  position: relative;
  height: 80px;
  width: 300px;
  background: white;
  top: -235px;
  left: 85px;
  padding-top: 60px;
  text-align:center;
  opacity: 0.8;
  font-weight: bold;
  font-size: 140%
}

<figure>
  <a href="some link">
    <img src="http://static.highsnobiety.com/wp-content/uploads/2016/09/07200609/super-mario-run-iphone-7-01-480x320.jpg">
  </a>
  <figcaption>Super Mario</figcaption>
</figure>

Answer 1

外观 > 自定义 > 附加 CSS

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

Answer 2

如果您无法更改 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>

或者，为了防止 Wordpress 添加 <p> 将其全部放在一行中：

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