Как сделать Div кликабельным в Wordpress при запуске Loop Query

Question

Я хочу сделать весь div кликабельным в цикле в Wordpress

Я попытался обернуть ссылку привязки вокруг div с помощью the_permalink ();

    <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>

Проблема, с которой я столкнулся, заключается в том, что отрывок не кликабелен, в то время как остальная часть div не отвечает правильно.

это результат https://gyazo.com/eeace52c1803a3c8a5d004435cb704a1

область выдержки не активируется, в то время как другие элементы не отвечают должным образом, ваша помощь будет оценена

Редактировать

Я должен добавить, что я создаю собственный отрывок, в котором я могу обрезать длину символа сообщения, вот как это происходит:

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, ' ')).'...'; 
                                  } 

Затем я вызываю отрывок с <?php echo $newsExerp; ?>, я что-то упустил?

Answer 1

попробуйте опубликовать содержимое DOM 'content-pop-children', скорее всего, вы неправильно формируете DOM. попробуйте это

<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="/9349883/kak-sdelat-div-klikabelnym-v-wordpress-pri-zapuske-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>

Answer 2

Попробуйте добавить тег привязки в элемент статьи.

<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 -->