如何仅通过CSS使同一类的div链接到WordPress中的不同URL？

我正在尝试在WordPress主题中单击整个推荐瓷砖。主题是Orfeo, 网站是storytwirl.com

见证磁贴具有两个div-未与任何内容链接的外部div类卡卡片-见证卡平原和与URL链接的内部div类卡头像。

主题支持_card-avatar中的链接。但我希望将整个div类卡卡片-证明书卡片链接到与其内部div类卡化身相同的URL。一共有三个个人鉴定磁贴, 我希望它们链接到三个不同的URL。

我没有找到通过Wordpress访问HTML的方法, 而只是将链接移动到卡证言证卡平原div。我也没有在php文件中看到有关此类的任何信息。

这三个磁贴之间的唯一区别是div类card-avatar中的href和title。

我在Wordpress Customizer中使用了”其他CSS”来添加CSS, 从而使具有类卡, 证人证和普通证件的div看起来像是可单击的, 但实际上无法将链接添加到这些div中。而且我不知道如何仅使用CSS将三个不同的链接添加到每个证明卡。你能帮我吗？

是否可以采用此CSS代码, 并为三个卡卡-证人卡-普通div中的每个添加链接, 而每个图块都使用不同的URL？

/* CSS that makes tiles look clickable but does not add actual links */
div.card.card-testimonial {
  cursor: hand;
  cursor: pointer;
  opacity: .9;
}

a.divLink {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-decoration: none;
  /* Makes sure the link doesn't get underlined */
  z-index: 10;
  /* raises anchor tag above everything else in div */
  background-color: white;
  /*workaround to make clickable in IE */
  opacity: 0;
  /*workaround to make clickable in IE */
  filter: alpha(opacity=0);
  /*workaround to make clickable in IE */
}

这是HTML：

<div class="card card-testimonial card-plain">
<div class="card-avatar">
<a href="http://storytwirl.com/topic/animation-ideas/"><img class="img" src="http://storytwirl.com/wp-content/uploads/2018/10/legal-alien-round-icon-190x190.png" alt="Animation Ideas" title="Animation Ideas"></a>
</div>
<div class="content">
<h4 class="card-title">Animation Ideas</h4>
<h6 class="category text-muted">Stories for Films, Series, Games &amp; More</h6>
<p class="card-description">I have plenty of ideas for animated films, TV series, web series, games, and live action. Variety of styles, variety of audiences, and variety of genres. I would love to develop these ideas with you or jump onto your idea to help to develop it into full production.</p>
</div>
</div>

谢谢Andrei Gheorghiu回答了这个问题！ =)

#1

这样做：

div.card.card-testimonial {
  position: relative;
}
div.card.card-testimonial a:before {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  content: '';
}

它在你的<a>上创建一个before伪元素, 并用position：relative(这是卡片)填充最近的父元素。如果卡中没有任何东西具有固定的z索引, 则它也将显示在卡中的所有其他东西之上。

实际上, 它是你卡的万能点击, 将其分配给其父<a>。

注意：如果卡的任何子元素和<a>的祖先元素具有position：relative, 则此技术会中断, 并且还会为卡中的每个链接创建伪元素。在这种情况下, 卡将指向其DOM中的最后一个链接, 因为它将放置在最后。