Php owl url哈希导航wordpress

我试图通过回显我的div将

OwlCarousel2

Url散列导航添加到wordpress，但是有wordpress函数，我真的不知道如何使用我的回显来处理它

这是我的密码：

<div id="owl-main" class="owl-hash">
       <?php $feat_query = new WP_Query( array( 'showposts' => 5,'meta_key'=>'_thumbnail_id') ); ?>
        <?php  if ( $feat_query->have_posts() ) {
    while ( $feat_query->have_posts() ) {
        $feat_query->the_post(); 
        $counter = 1;
        $counter++;
        $permalink = get_permalink($post->ID);
        echo'<div class="item" data-hash='.$counter.'<a href=.'$permalink'.'>'<?php the_post_thumbnail(); ?><?php the_title(); ?></a></div>';}
        {
        echo'<a class="button<?php echo $counter?>" href= "#<?php echo $counter;?>"><?php the_title(); ?></a>';
         }

} // end if?>
    </div>

---

不完全确定您想要得到什么，但可以这样尝试：

<div id="owl-main" class="owl-hash">
    <?php $counter = 1; ?>
    <?php $feat_query = new WP_Query( array( 'showposts' => 5,'meta_key'=>'_thumbnail_id') ); ?>
    <?php
    if ( $feat_query->have_posts() ) {
        while ( $feat_query->have_posts() ) {
            $feat_query->the_post();
            $permalink = get_permalink($post->ID);
            echo '<div class="item" data-hash="'.$counter.'"><a href="'.$permalink.'">'. get_the_post_thumbnail() . get_the_title().'</a></div>';
            $counter++;
        }
        echo '<a class="button '.$counter.'" href="#'.$counter.'">'.get_the_title().'</a>';
    } // end if?>
</div>

<div id="owl-main" class="owl-hash">
    <div class="item" data-hash="1">
        <a href="http://yoursite.com/?p=98">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image1.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 1">
            Image post 1
        </a>
    </div>
    <a class="button 1" href="#1">Image post 1</a>
    <div class="item" data-hash="2">
        <a href="http://yoursite.com/?p=95">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image2.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 2">
            Image post 2
        </a>
    </div>
    <a class="button 2" href="#2">Image post 2</a>
    <div class="item" data-hash="3">
        <a href="http://yoursite.com/?p=93">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image3.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 3">
            Image post 3
        </a>
    </div>
    <a class="button 3" href="#3">Image post 3</a>
    <div class="item" data-hash="4">
        <a href="http://yoursite.com/?p=91">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image4.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 4">
            Image post 4
        </a>
    </div>
    <a class="button 4" href="#4">Image post 4</a>
    <div class="item" data-hash="5">
        <a href="http://yoursite.com/?p=89">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image5.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 5">
            Image post 5
        </a>
    </div>
    <a class="button 5" href="#5">Image post 5</a>
</div>

<section>
    <div class="wrapper">
        <div  class="owl-hash">
            <?php $counter = 1; ?>
            <?php $feat_query = new WP_Query( array( 'posts_per_page' => 5,'meta_key'=>'_thumbnail_id') ); ?>
            <?php
            if ( $feat_query->have_posts() ) {
                while ( $feat_query->have_posts() ) {
                    $feat_query->the_post();
                    $permalink = get_permalink($post->ID);
                    echo '<div class="item" data-hash="'.$counter.'"><a href="'.$permalink.'">'. get_the_post_thumbnail() . get_the_title().'</a></div>';
                    $counter++;
                }
            }
            wp_reset_postdata(); ?>
        </div>
        <?php
        $counter_2 = 1;
        $feat_query_2 = new WP_Query( array( 'posts_per_page' => 5,'meta_key'=>'_thumbnail_id') );

        if ( $feat_query_2->have_posts() ) {
            while ( $feat_query_2->have_posts() ) {
                $feat_query_2->the_post();
                echo '<a class="button '.$counter_2.'" href="#'.$counter_2.'">'.get_the_title().'</a>';
                $counter_2++;
            }
        }
        wp_reset_postdata();
        ?>
    </div>
</section>

您将得到如下代码：

<div id="owl-main" class="owl-hash">
    <?php $counter = 1; ?>
    <?php $feat_query = new WP_Query( array( 'showposts' => 5,'meta_key'=>'_thumbnail_id') ); ?>
    <?php
    if ( $feat_query->have_posts() ) {
        while ( $feat_query->have_posts() ) {
            $feat_query->the_post();
            $permalink = get_permalink($post->ID);
            echo '<div class="item" data-hash="'.$counter.'"><a href="'.$permalink.'">'. get_the_post_thumbnail() . get_the_title().'</a></div>';
            $counter++;
        }
        echo '<a class="button '.$counter.'" href="#'.$counter.'">'.get_the_title().'</a>';
    } // end if?>
</div>

<div id="owl-main" class="owl-hash">
    <div class="item" data-hash="1">
        <a href="http://yoursite.com/?p=98">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image1.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 1">
            Image post 1
        </a>
    </div>
    <a class="button 1" href="#1">Image post 1</a>
    <div class="item" data-hash="2">
        <a href="http://yoursite.com/?p=95">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image2.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 2">
            Image post 2
        </a>
    </div>
    <a class="button 2" href="#2">Image post 2</a>
    <div class="item" data-hash="3">
        <a href="http://yoursite.com/?p=93">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image3.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 3">
            Image post 3
        </a>
    </div>
    <a class="button 3" href="#3">Image post 3</a>
    <div class="item" data-hash="4">
        <a href="http://yoursite.com/?p=91">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image4.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 4">
            Image post 4
        </a>
    </div>
    <a class="button 4" href="#4">Image post 4</a>
    <div class="item" data-hash="5">
        <a href="http://yoursite.com/?p=89">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image5.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 5">
            Image post 5
        </a>
    </div>
    <a class="button 5" href="#5">Image post 5</a>
</div>

<section>
    <div class="wrapper">
        <div  class="owl-hash">
            <?php $counter = 1; ?>
            <?php $feat_query = new WP_Query( array( 'posts_per_page' => 5,'meta_key'=>'_thumbnail_id') ); ?>
            <?php
            if ( $feat_query->have_posts() ) {
                while ( $feat_query->have_posts() ) {
                    $feat_query->the_post();
                    $permalink = get_permalink($post->ID);
                    echo '<div class="item" data-hash="'.$counter.'"><a href="'.$permalink.'">'. get_the_post_thumbnail() . get_the_title().'</a></div>';
                    $counter++;
                }
            }
            wp_reset_postdata(); ?>
        </div>
        <?php
        $counter_2 = 1;
        $feat_query_2 = new WP_Query( array( 'posts_per_page' => 5,'meta_key'=>'_thumbnail_id') );

        if ( $feat_query_2->have_posts() ) {
            while ( $feat_query_2->have_posts() ) {
                $feat_query_2->the_post();
                echo '<a class="button '.$counter_2.'" href="#'.$counter_2.'">'.get_the_title().'</a>';
                $counter_2++;
            }
        }
        wp_reset_postdata();
        ?>
    </div>
</section>

我对它进行了测试，效果良好

新代码

根据你上次的代码，我想你的意思是这样的：

<div id="owl-main" class="owl-hash">
    <?php $counter = 1; ?>
    <?php $feat_query = new WP_Query( array( 'showposts' => 5,'meta_key'=>'_thumbnail_id') ); ?>
    <?php
    if ( $feat_query->have_posts() ) {
        while ( $feat_query->have_posts() ) {
            $feat_query->the_post();
            $permalink = get_permalink($post->ID);
            echo '<div class="item" data-hash="'.$counter.'"><a href="'.$permalink.'">'. get_the_post_thumbnail() . get_the_title().'</a></div>';
            $counter++;
        }
        echo '<a class="button '.$counter.'" href="#'.$counter.'">'.get_the_title().'</a>';
    } // end if?>
</div>

<div id="owl-main" class="owl-hash">
    <div class="item" data-hash="1">
        <a href="http://yoursite.com/?p=98">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image1.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 1">
            Image post 1
        </a>
    </div>
    <a class="button 1" href="#1">Image post 1</a>
    <div class="item" data-hash="2">
        <a href="http://yoursite.com/?p=95">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image2.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 2">
            Image post 2
        </a>
    </div>
    <a class="button 2" href="#2">Image post 2</a>
    <div class="item" data-hash="3">
        <a href="http://yoursite.com/?p=93">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image3.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 3">
            Image post 3
        </a>
    </div>
    <a class="button 3" href="#3">Image post 3</a>
    <div class="item" data-hash="4">
        <a href="http://yoursite.com/?p=91">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image4.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 4">
            Image post 4
        </a>
    </div>
    <a class="button 4" href="#4">Image post 4</a>
    <div class="item" data-hash="5">
        <a href="http://yoursite.com/?p=89">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image5.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 5">
            Image post 5
        </a>
    </div>
    <a class="button 5" href="#5">Image post 5</a>
</div>

<section>
    <div class="wrapper">
        <div  class="owl-hash">
            <?php $counter = 1; ?>
            <?php $feat_query = new WP_Query( array( 'posts_per_page' => 5,'meta_key'=>'_thumbnail_id') ); ?>
            <?php
            if ( $feat_query->have_posts() ) {
                while ( $feat_query->have_posts() ) {
                    $feat_query->the_post();
                    $permalink = get_permalink($post->ID);
                    echo '<div class="item" data-hash="'.$counter.'"><a href="'.$permalink.'">'. get_the_post_thumbnail() . get_the_title().'</a></div>';
                    $counter++;
                }
            }
            wp_reset_postdata(); ?>
        </div>
        <?php
        $counter_2 = 1;
        $feat_query_2 = new WP_Query( array( 'posts_per_page' => 5,'meta_key'=>'_thumbnail_id') );

        if ( $feat_query_2->have_posts() ) {
            while ( $feat_query_2->have_posts() ) {
                $feat_query_2->the_post();
                echo '<a class="button '.$counter_2.'" href="#'.$counter_2.'">'.get_the_title().'</a>';
                $counter_2++;
            }
        }
        wp_reset_postdata();
        ?>
    </div>
</section>

小心不要重复变量，这样做行不通（因为它们实际上是对象，您希望它们有不同的名称）。此外，仅在每次查询后重置postdata，而不是查询本身。这样，您只需重置主查询循环的全局

$post

变量

wp\u reset\u query（）

将

$wp\u query

和全局post数据恢复到原始主查询，此处不受影响

WP\u Query

实际上是一个类，通过您的查询，您实际上创建了一个对象，您可以从中提取所需的所有必要数据。

wp\u reset\u query（）

和

wp\u reset\u postdata（）

是

wp\u query

类的方法，可使您在不影响全局的情况下多次使用它

---

希望这能有所帮助。

谢谢你的回答，dingo_dUse

在每页上发表文章=>5篇

。item div上的计数器应遵循1,2,3,4,5。按上面写的按钮1将不起作用。我将编辑代码。您还可以向上投票，并删除底部的问题（在编辑原始问题以包含它们之前）：）