如何仅通过 CSS 使具有相同类的 div 链接到 Wordpress 中的不同 URL？

Posted 2023-03-05

【中文标题】如何仅通过 CSS 使具有相同类的 div 链接到 Wordpress 中的不同 URL？

【英文标题】：How to make divs with the same class linked to different URLs in Wordpress via CSS only?

【发布时间】：2019-03-19 08:36:15

【问题描述】：

我正在尝试使整个推荐磁贴在 WordPress 主题中可点击。主题是 Orfeo，网站是 storytwirl.com

推荐图块有两个 div - 外部 div 类 card card-testimonial card-plain 没有链接到任何东西，内部 div 类 card-avatar链接到 URL。

主题支持 _card-avatar 中的链接。但我希望整个 div 类 card card-testimonial card-plain 链接到与其内部 div 类 card-avatar 相同的 URL。共有三个推荐图块，我希望它们链接到三个不同的 URL。

我没有找到通过 Wordpress 访问 html 的方法，只是将链接移动到 card card-testimonial card-plain div。我也没有在 php 文件中看到关于这个类的任何内容。

这三个图块的唯一区别是 div 类 card-avatar 中的 a href 和 title。

我在 Wordpress 定制器中使用了“附加 CSS”来添加 CSS，使具有类 card card-testimonial card-plain 的 div 看起来像可点击的，但我实际上无法在其中添加链接分区。而且我不知道如何仅使用 CSS 为每张推荐卡添加三个不同的链接。你能帮忙吗？

是否可以使用此 CSS 代码，并为三个 card card-testimonial card-plain 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"  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 回答这个问题！ =)

【问题讨论】：

您不应该假设任何人都熟悉某些 WP 主题的标记。换个角度来看：编写它的开发人员在编码后 6 个月内不会记得它，尤其是如果他很忙的话。如果您需要帮助，请务必提供实际标记。

我在您的答案中添加了一个 sn-p。请编辑它并将相关的 HTML 标记（从页面源复制/粘贴卡片推荐）在 HTML 面板中。

Andrei Gheorghiu - 不确定你的意思。如果您在谈论实际的 html 代码 - 我试图将它添加到我的问题中，因为它一直给我一个错误，“代码看起来不像代码”（但由于某种原因它适用于 CSS）。现在我尝试在此评论中发布 HTML，它说帖子太长了。我绝对不会“假设”任何事情 - 只是以我可以的方式寻求帮助。我唯一能做的就是将代码粘贴到 Google 驱动器中 - 如果有帮助，请在此处分享链接。 drive.google.com/file/d/1sZEQkDhNpagkb3QZCanaEYX7cGh_oKhR/…

我的问题附近没有“编辑”按钮，因此无法在此处添加代码 - 卡片的 HTML 在这里：drive.google.com/file/d/10fLNRJvsv_u5CMWaeGXu0of-IeURdkBr/… - Andrei Gheorghiu - 抱歉不便 - *** 格式对我来说还不起作用 o_O

您的问题下方有一个“编辑”链接。在你按下它之后，你会在它下面有一个“编辑上面的 sn-p”链接。没关系，我找到了我需要的东西。让我知道我的回答是否解决了您的问题。如果没有，我需要更多信息。

【参考方案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-index，它也会呈现在卡片中的所有其他内容之上。

它实际上充当您卡片的所有点击，将它们提供给其父级 <a>。

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

【讨论】：

@ValerieK，在这种情况下考虑将我的答案标记为正确。

我刚做了。希望我做得对！ （我将您答案旁边的复选标记从灰色变为绿色）。再次感谢！