如何使我的 wordpress.org 网站上的整个图像可点击？答案

【问题标题】：How can I make the entire image clickable on my wordpress.org site?如何使我的 wordpress.org 网站上的整个图像可点击？
【发布时间】：2017-08-20 21:28:42
【问题描述】：

现在我的帖子只能通过点击标题来点击，但我希望整个图片能够链接到每个单独的帖子。

<article id="post-<?php the_ID(); ?>" <?php post_class('card-box col-lg-4 col-md-6 col-sm-12 col-xs-12'); ?>>
    <div class="card" data-background="image" data-src="<?php esc_url( the_post_thumbnail_url( 'large' ) ); ?>">
             <div class="header">
                    <?php
                    $categories = get_the_category();
                    if ( ! empty( $categories ) ) {
                    ?>                                                          
                        <div class="category">
                            <h6>
                                <span class="category">
                                    <?php  echo '<a class="category" href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a>'; ?>
                                </span>
                            </h6>
                        </div>
                    <?php } ?>                        
                </div>
                <div class="content">
                    <?php the_title( '<h4 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h4>' ); ?>
                    <span class="date"><?php echo esc_html( get_the_date() ); ?></span>
                </div>
                <div class="filter"></div>
                </div> <!-- end card -->
        </article>

我不想使用 js，因为有人告诉我这对 SEO 不友好。

我尝试使用 entry-title 中的标签并用相同的链接包围整个 div，但它不起作用。

【问题讨论】：

你试过什么？最终，您需要链接来包围包含图像的整个 div。或者你可以为点击设置一个事件监听器。

标签： html css wordpress

【解决方案1】：

如果其余代码有效，则以下内容应该有效。我做了什么：我从h4 元素（帖子标题）中复制了<a> 标签并将其放在图像周围（第2-4 行，原始代码没有其他更改）：

<article id="post-<?php the_ID(); ?>" <?php post_class( 'card-box col-lg-4 col-md-6 col-sm-12 col-xs-12'); ?>>
  <a href="<?php the_permalink(); ?>">
    <div class="card" data-background="image" data-src="<?php esc_url( the_post_thumbnail_url( 'large' ) ); ?>">
    </a>
  <div class="header">
    <?php
                    $categories = get_the_category();
                    if ( ! empty( $categories ) ) {
                    ?>
      <div class="category">
        <h6>
          <span class="category">
                                    <?php  echo '<a class="category" href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a>'; ?>
                                </span>
        </h6>
      </div>
      <?php } ?>
  </div>
  <div class="content">
    <?php the_title( '<h4 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h4>' ); ?>
    <span class="date"><?php echo esc_html( get_the_date() ); ?></span>
  </div>
  <div class="filter"></div>
  </div>
  <!-- end card -->
</article>

【讨论】：

非常感谢您的回复。我真的被困在这里了。您的建议至少没有破坏页面，但由于某种原因，标记中的链接不会填充。 href="" rel="bookmark" 是我尝试加载页面时的显示方式。即使标题 href 填充得很好，也没有 URL。而且，即使我在开发人员控制台中手动将正确的 URL 添加到该标记，它仍然不允许我单击图像。
我改了答案，试试新的（更简单的）版本（它使用<?php the_permalink(); ?>）
哇，你离得太近了！现在正在填充正确的链接，但仍然无法单击。出于某种原因，当我在开发控制台中查看代码时，它似乎复制了标记，因此整个和关闭标记显示在 div 之前和之后。当我突出显示链接时，它说它是图片正上方的 0 x 22
也许尝试删除图像本身的 div 标签并使用<a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail( 'large' ); ?></a>。（可能会在没有预期 CSS 的情况下显示图像，但可能会向前迈出一步）
运气不好。我认为这可能是因为标题和类别链接位于图像 div 中。我想知道是否不可能在不干扰 div 中的其他链接的情况下让 div 的背景图像成为可点击链接

【解决方案2】：

在 HTML 中就是这样完成的：

<a href="...">
    <img alt="..." src="..." />
</a>

【讨论】：