[英]How Do I Make A Div Clickable In Wordpress When Running Loop Query
I want to make an entire div clickable withing a loop in Wordpress我想在 Wordpress 中使用循环使整个 div 可点击
I tried wrapping an anchor link around the div using the_permalink();我尝试使用 the_permalink() 在 div 周围包裹一个锚链接;
<a href="<?php the_permalink(); ?>">
<div class="content-pop-children">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail();
endif;
?>
<header class="entry-hpop">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>
<div class="cat-head">
<!-- Output Category and Link to Cat -->
<a href=”<?php echo $category_link ?>”
title=”<?php echo $category_name ?>” >
<?php echo $category_name ?>
</a>
</div> <!-- cat-head -->
<!-- the custom excerpt -->
<?php echo $newsExerp; ?>
</article>
</div> <!-- content-pop-children -->
</a>
The issue I have is that the excerpt isn't clickable, while the rest of the div isn't responding correctly.我遇到的问题是摘录不可点击,而 div 的其余部分没有正确响应。
this the result https://gyazo.com/eeace52c1803a3c8a5d004435cb704a1这是结果https://gyazo.com/eeace52c1803a3c8a5d004435cb704a1
the excerpt area isn't clickable, while other divs isn't responding properly, your help would be appreciated摘录区域不可点击,而其他 div 没有正确响应,您的帮助将不胜感激
Edit编辑
I should add that, I am creating a custom excerpt where I can trim down the length of the post character, here is how it goes:我应该补充一点,我正在创建一个自定义摘录,我可以在其中修剪帖子字符的长度,它是如何进行的:
if ( $arr_posts->have_posts() ) :
while ( $arr_posts->have_posts() ) :
$arr_posts->the_post();
// the custom excerpt
$exerp = get_the_excerpt();
$newsExerp = strip_tags($exerp);
if (strlen($newsExerp) > 500) {
// truncate string
$stringCut = substr($newsExerp, 0, 500);
// make sure it ends in a complete word
$newsExerp = substr($stringCut, 0, strrpos($stringCut, ' ')).'...';
}
Then I call the excerpt with <?php echo $newsExerp; ?>
然后我用
<?php echo $newsExerp; ?>
调用摘录<?php echo $newsExerp; ?>
<?php echo $newsExerp; ?>
, Am I missing something? <?php echo $newsExerp; ?>
,我是不是遗漏了什么?
Try to add anchor tag in article element.尝试在文章元素中添加锚标记。
<div class="content-pop-children">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail();
endif;
?>
<header class="entry-hpop">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>
<div class="cat-head">
<?php echo $category_name ?>
</div>
<!-- cat-head -->
<!-- the custom excerpt -->
<?php echo $newsExerp; ?>
</a>
</article>
</div> <!-- content-pop-children -->
try posting the DOM contents of 'content-pop-children', most likely you are forming the DOM wrongly.尝试发布 'content-pop-children' 的 DOM 内容,很可能您错误地形成了 DOM。 try this
尝试这个
<div class="content-pop-children">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail();
endif;
?>
<header class="entry-hpop">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>
<div class="cat-head">
<?php echo $category_name ?>
</div>
<!-- cat-head -->
<!-- the custom excerpt wrapped in a class -->
<div class='cat-excerpt'>
<?php echo $newsExerp; ?>
</div>
</a>
</article>
</div> <!-- content-pop-children -->`
.content-pop-children { flex: 1 0 30%; margin: 10px; border-right: 5px solid #000; } .content-pop-children a{ text-decoration:none; }
<div class="content-pop-children"> <article id="postID"> <a href="https://stackoverflow.com/questions/56928919/how-do-i-make-a-div-clickable-in-wordpress-when-running-loop-query"> <img src="https://placehold.it/300x200"> <header class="entry-hpop"> <h1 class="entry-title">Foo Bar</h1> </header> <div class="cat-head"> FOO TITLE </div> <!-- cat-head --> <!-- the custom excerpt --> <div class="cat-excerpt"> except placed here </div> </a> </article>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.