使整个div可以点击the_permalink（）;

Question

我有以下代码：

<div class="carousel-caption">
     <div class="carousel-caption-inner">
          <p class="carousel-caption-title" data-postid="<?php the_ID(); ?>" data-excerpt="<?php echo esc_html( get_the_excerpt() ); ?>" data-published="<?php echo get_the_date(); ?>"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
          <p class="carousel-caption-category"><?php echo get_the_category_list( ', ' ); ?></p>
    </div>
</div>

这（有更多PHP行）结果如下：

我需要的是让白盒子可以点击，它应该发送到帖子链接/文章。

我尝试添加

<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;">&nbsp;</div>

但它没有用，或者我做错了什么。

有什么建议吗？

Answer 1

您可以将内部div包装在锚元素中以将其转换为链接，并删除当前包装标题的锚点。

这在HTML5中有效。

<div class="carousel-caption">
  <a href="<?php the_permalink(); ?>">
    <div class="carousel-caption-inner">
      <p class="carousel-caption-title" data-postid="<?php the_ID(); ?>" data-excerpt="<?php echo esc_html( get_the_excerpt() ); ?>" data-published="<?php echo get_the_date(); ?>">
        <?php the_title(); ?>
      </p>
      <p class="carousel-caption-category"><?php echo get_the_category_list( ', ' ); ?></p>
    </div>
  </a>
</div>

Answer 2

我能够自己解决这个问题。

这就是我解决它的方式。 （我在某处发现了这种方法，我没有发明它：D）

<div class="carousel-caption container1">
  <a href="<?php the_permalink(); ?>"><span class="link-spanner"></span></a>
    <div class="carousel-caption-inner">
       <p class="carousel-caption-title" data-postid="<?php the_ID(); ?>" data-excerpt="<?php echo esc_html( get_the_excerpt() ); ?>" data-published="<?php echo get_the_date(); ?>"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
        <p class="carousel-caption-category"><?php echo get_the_category_list( ', ' ); ?></p>
    </div>
</div>

正如您所看到的，我在div下面添加了这个代码，我想让它可以点击

<a href="<?php the_permalink(); ?>"><span class="link-spanner"></span></a>

然后使用这个CSS：

.container1{
   position:absolute;
}

.link-spanner {
   position:absolute; 
   width:100%;
   height:100%;
   top:0;
   left: 0;
   z-index: 1;
 } 

它使我的白色区域变得可点击，它将我带到帖子链接。

谢谢！