Permalink in Wordpress loop outputs <A> for each new line

admin管理员组

文章数量:1305202

I'm using the following loop to pull my posts, the a is wrapped around the div to make sure it links to the post when clicked.

    <?php $query = new WP_Query( array(
    'post_type' => 'post',
    'posts_per_page' => 6
)); 

while ($query->have_posts()) : $query->the_post(); ?>


<div class="carousel-cell" data-flickity-bg-lazyload="<?php the_field('banner_afbeelding'); ?>">
<a href="<?php the_permalink();?>">
<div class="inner-wrap">
    <div class="box">
    <div class="inner">
        <h3><?php the_title(); ?></h3>
        <h4><?php the_category(''); ?></h4>
    </div>
    </div>
</div>
</a>
</div>

This is the HTML output I'm getting:

<div class="carousel-cell is-selected flickity-bg-lazyloaded" style="position: absolute; left: 0%; background-image: url(&quot;.jpg&quot;);">

<a href="/"></a>
<div class="inner-wrap">
    <a href="/"></a>
        <div class="box">
            <a href="/"></a>
            <div class="inner"><a href="/"></a>
                <h3><a href="/"></a><a href="/">Rozengracht</a></h3>
                <h4>
                <ul class="post-categories">
                <li>    
                    <a href="/" rel="category tag">Buitenschilderwerk</a>
                </li>
                </ul>
                </h4>
            </div>
        </div>
</div>    

I'm using the following loop to pull my posts, the a is wrapped around the div to make sure it links to the post when clicked.

    <?php $query = new WP_Query( array(
    'post_type' => 'post',
    'posts_per_page' => 6
)); 

while ($query->have_posts()) : $query->the_post(); ?>


<div class="carousel-cell" data-flickity-bg-lazyload="<?php the_field('banner_afbeelding'); ?>">
<a href="<?php the_permalink();?>">
<div class="inner-wrap">
    <div class="box">
    <div class="inner">
        <h3><?php the_title(); ?></h3>
        <h4><?php the_category(''); ?></h4>
    </div>
    </div>
</div>
</a>
</div>

This is the HTML output I'm getting:

<div class="carousel-cell is-selected flickity-bg-lazyloaded" style="position: absolute; left: 0%; background-image: url(&quot;https://puranenschilder-totaalonderhoud.nl/wp-content/uploads/2021/02/2-bas-H.jpg&quot;);">

<a href="https://puranenschilder-totaalonderhoud.nl/rozengracht/"></a>
<div class="inner-wrap">
    <a href="https://puranenschilder-totaalonderhoud.nl/rozengracht/"></a>
        <div class="box">
            <a href="https://puranenschilder-totaalonderhoud.nl/rozengracht/"></a>
            <div class="inner"><a href="https://puranenschilder-totaalonderhoud.nl/rozengracht/"></a>
                <h3><a href="https://puranenschilder-totaalonderhoud.nl/rozengracht/"></a><a href="https://puranenschilder-totaalonderhoud.nl/rozengracht/">Rozengracht</a></h3>
                <h4>
                <ul class="post-categories">
                <li>    
                    <a href="https://puranenschilder-totaalonderhoud.nl/category/buitenschilderwerk/" rel="category tag">Buitenschilderwerk</a>
                </li>
                </ul>
                </h4>
            </div>
        </div>
</div>    

• permalinks

Share Improve this question edited Feb 6, 2021 at 22:32 Bas Linden asked Feb 5, 2021 at 23:39 Bas LindenBas Linden 1122 bronze badges 1

• 2 there is a difference between get_permalink() and the_permalink() - you need to use developer.wordpress/reference/functions/the_permalink – Michael Commented Feb 6, 2021 at 0:22

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

This is happening because the_category() outputs a list of categories, with links. So it's outputting its own <a> tags, and you cannot put <a> tags inside other <a> tags. It's not valid HTML.

What you're seeing is the browser's attempt to produce valid HTML based on invalid markup. HTML is very resilient, and invalid markup will not cause it to crash. THe browser just does things like this. If you look at the raw HTML returned for the page in the Network tabs of the browser's developer tools you will see what HTML your template actually created.

If you want to output the list of a post's categories without links, you will need to do something like this:

if you use get_permalink() then you need to user echo and the_permalink() you did not use to echo.

<?php the_permalink(); ?>
<?php echo get_permalink(); ?>

code:-

<div class="carousel-cell" data-flickity-bg-lazyload="<?php the_field('banner_afbeelding'); ?>">
    <a href="<?php the_permalink();?>">
        <div class="inner-wrap">
            <div class="box">
                <div class="inner">
                    <h3><?php the_title(); ?></h3>
                    <h4><?php the_category(''); ?></h4>
                </div>
            </div>
        </div>
    </a>
</div>

本文标签： Permalink in Wordpress loop outputs ltAgt for each new line